63:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 64:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 65:T6bd,"use client"; import { useEffect, type RefObject } from "react"; const FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'; function focusables(root: HTMLElement) { return Array.from(root.querySelectorAll(FOCUSABLE)).filter( (el) => !el.closest("[inert],[hidden]") && (typeof el.checkVisibility !== "function" || el.checkVisibility()), ); } /** * Keeps Tab and Shift+Tab inside `ref` while `active`, and moves focus in (to `initial`, or the container) when it * turns on. Restoring focus afterwards is the caller's call: it knows which element should get it back. */ export function useFocusTrap(ref: RefObject, active: boolean, initial?: RefObject) { useEffect(() => { const root = ref.current; if (!active || !root) return; (initial?.current ?? root).focus({ preventScroll: true }); const onKey = (e: KeyboardEvent) => { if (e.key !== "Tab") return; const list = focusables(root); if (!list.length) { e.preventDefault(); root.focus({ preventScroll: true }); return; } const first = list[0]; const last = list[list.length - 1]; const now = document.activeElement; if (e.shiftKey && (now === first || !root.contains(now))) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && (now === last || !root.contains(now))) { e.preventDefault(); first.focus(); } }; document.addEventListener("keydown", onKey, true); return () => document.removeEventListener("keydown", onKey, true); }, [ref, active, initial]); } 66:T69a,"use client"; import { cancelFrame, frame, type MotionValue } from "motion/react"; import { useEffect, useRef } from "react"; export type FloatTarget = { y: MotionValue; r: MotionValue; /** px and degrees. */ amp: number; ampR: number; /** Seconds per cycle. */ period: number; periodR: number; phase: number; }; /** * Slow, independent sine drift written to MotionValues on motion's frame loop (so it composes with parallax and * hover instead of fighting a CSS transform). Runs only while `active` and the tab is visible; time resumes where it * paused, so nothing jumps. */ export function useIdleFloat(targets: () => Iterable, active: boolean) { const clock = useRef(0); const read = useRef(targets); useEffect(() => { read.current = targets; }); useEffect(() => { if (!active || typeof document === "undefined") return; let running = false; const tick = ({ delta }: { delta: number }) => { clock.current += Math.min(delta, 50) / 1000; const t = clock.current; for (const f of read.current()) { f.y.set(f.amp * Math.sin((t / f.period) * Math.PI * 2 + f.phase)); f.r.set(f.ampR * Math.sin((t / f.periodR) * Math.PI * 2 + f.phase * 1.7)); } }; const sync = () => { const want = document.visibilityState === "visible"; if (want && !running) frame.update(tick, true); else if (!want && running) cancelFrame(tick); running = want; }; sync(); document.addEventListener("visibilitychange", sync); return () => { document.removeEventListener("visibilitychange", sync); cancelFrame(tick); }; }, [active]); } 67:Tbd9,"use client"; import { frame, springValue, type MotionValue } from "motion/react"; import { useEffect, useRef, useState, type RefObject } from "react"; export type PointerParallaxOptions = { /** Default true. Only fine pointers that can hover move the scene (never touch). */ enabled?: boolean; stiffness?: number; damping?: number; /** Called once per frame with the latest pointer position and the element's rect. */ onMove?: (clientX: number, clientY: number, rect: DOMRect) => void; onLeave?: () => void; }; export type PointerParallax = { x: MotionValue; y: MotionValue }; /** * One `pointermove` listener on an element → two springs, -1 … 1 from its centre, back to 0 when the pointer leaves. * Moves are coalesced to one update per frame and the element's rect is cached until a scroll or resize, so moving * the pointer never forces a layout. Pass `springs` to drive values you already own. */ export function usePointerParallax( ref: RefObject, options: PointerParallaxOptions = {}, springs?: PointerParallax, ): PointerParallax { const { enabled = true, stiffness = 60, damping = 20 } = options; const [own] = useState(() => springs ?? { x: springValue(0, { stiffness, damping }), y: springValue(0, { stiffness, damping }) }); const callbacks = useRef(options); useEffect(() => { callbacks.current = options; }); useEffect(() => { const el = ref.current; if (!el || !enabled || typeof window === "undefined") return; const fine = window.matchMedia?.("(hover: hover) and (pointer: fine)"); let rect: DOMRect | null = null; let queued = false; let cx = 0; let cy = 0; const apply = () => { queued = false; rect ??= el.getBoundingClientRect(); if (!rect.width || !rect.height) return; own.x.set(Math.max(-1, Math.min(1, ((cx - rect.left) / rect.width) * 2 - 1))); own.y.set(Math.max(-1, Math.min(1, ((cy - rect.top) / rect.height) * 2 - 1))); callbacks.current.onMove?.(cx, cy, rect); }; const move = (e: PointerEvent) => { if (e.pointerType === "touch" || (fine && !fine.matches)) return; cx = e.clientX; cy = e.clientY; if (!queued) { queued = true; frame.read(apply); } }; const leave = () => { own.x.set(0); own.y.set(0); callbacks.current.onLeave?.(); }; const stale = () => (rect = null); el.addEventListener("pointermove", move, { passive: true }); el.addEventListener("pointerleave", leave); window.addEventListener("scroll", stale, { passive: true, capture: true }); window.addEventListener("resize", stale); return () => { el.removeEventListener("pointermove", move); el.removeEventListener("pointerleave", leave); window.removeEventListener("scroll", stale, { capture: true }); window.removeEventListener("resize", stale); own.x.set(0); own.y.set(0); }; }, [ref, enabled, own]); return own; } 68:T1f3f,import type { LayoutInput, Placement } from "../types"; import { between, clamp, lerp, mulberry32 } from "./prng"; import { BLEED, CAPTION_ROOM, defaultInset, depthFactor, depthScale, finish, sizeCards, stageUnit, tiltToward, type Work } from "./shared"; /** * "arc": one wide arc round the headline, above it (side "above", for shorter sections) or below it (side "below", * how tablets show the gallery under a headline at the top). Big and small cards alternate along the arc, the big ones * near and the small ones far, so neighbours may overlap at different depths; a slight zig-zag keeps it from looking * ruled. Card sizes adapt so the set fills the arc's length. */ export function arc(input: LayoutInput): Placement[] { const { items, stage, keepOut } = input; const n = items.length; if (!n) return []; const side = input.side ?? "above"; if (side === "below") return arcBelow(input); const rand = mulberry32(input.seed * 15485863 + n * 13 + 5); const pad = input.pad ?? 48; const inset = input.inset ?? defaultInset(stage.w); const k = depthFactor(input.depth); const sized = sizeCards(items, stageUnit(stage.w, stage.h, n), rand); const cx = keepOut.x + keepOut.w / 2; const cy = keepOut.y + keepOut.h / 2; // Positions 0…n-1 run from the right end to the left. Even positions take the big cards (biggest in the middle) and // sit near; odd positions take the small ones and sit far. const mid = (n - 1) / 2; const byMiddle = (ps: number[]) => ps.sort((a, b) => Math.abs(a - mid) - Math.abs(b - mid) || a - b); const even = byMiddle(Array.from({ length: n }, (_, p) => p).filter((p) => p % 2 === 0)); const odd = byMiddle(Array.from({ length: n }, (_, p) => p).filter((p) => p % 2 === 1)); const byRank = [...sized].sort((a, b) => a.rank - b.rank).map((c) => c.index); const atPos: number[] = new Array(n); even.forEach((p, j) => (atPos[p] = byRank[j])); odd.forEach((p, j) => (atPos[p] = byRank[even.length + j])); const zs: number[] = new Array(n); for (let p = 0; p < n; p++) zs[atPos[p]] = p % 2 === 0 ? between(rand, 0.4, 1) : between(rand, -1, -0.45); // Fit the sizes to the arc: a few passes, since the arc's radii depend on the card sizes. Above the headline the // arc is centred on it (its ends come down beside it when there is room); below it, the arc hangs from just under // the headline, ends high and middle low, filling the band. let g = 1; let geo = { rx: 0, ry: 0, a0: 0, ey: cy }; for (let pass = 0; pass < 3; pass++) { const scaled = sized.map((c) => depthScale(zs[c.index], k) * g); const avgHw = sized.reduce((s, c, i) => s + (c.w * scaled[i]) / 2, 0) / n; const avgHh = sized.reduce((s, c, i) => s + (c.h * scaled[i]) / 2, 0) / n; const vy = avgHh * (1 - 2 * BLEED); const rx = Math.max(40, stage.w / 2 - inset.x - avgHw); const beside = rx * Math.cos(0.24) > keepOut.w / 2 + pad + avgHw; let ey: number; let ry: number; let a0: number; // The band the arc lives in when it can't wrap round the headline: above or below it, minus caption room. const bandTop = side === "above" ? inset.y : keepOut.y + keepOut.h + pad; const bandBottom = side === "above" ? keepOut.y - pad : stage.h - inset.y; const bandH = Math.max(80, bandBottom - bandTop); if (side === "above" && beside) { ey = cy; ry = Math.max(40, cy - inset.y - vy); a0 = 0.24; } else { // A shallow smile (below) or frown (above): ends near the headline, middle a little farther. ry = clamp(bandH - 2 * avgHh - CAPTION_ROOM, 24, 130); ey = side === "above" ? bandBottom - avgHh - CAPTION_ROOM : bandTop + avgHh; a0 = 0.12; } let len = 0; for (let s = 0, px = rx * Math.cos(a0), py = ry * Math.sin(a0); s < 48; s++) { const t = a0 + ((Math.PI - 2 * a0) * (s + 1)) / 48; const qx = rx * Math.cos(t); const qy = ry * Math.sin(t); len += Math.hypot(qx - px, qy - py); px = qx; py = qy; } const widths = sized.reduce((s, c, i) => s + c.w * scaled[i], 0); // Neighbours overlap a little (they sit at different depths); no card grows taller than its band. const band = side === "above" && beside ? ry * 0.62 : (bandH - CAPTION_ROOM) * 0.78; const tallest = Math.max(...sized.map((c, i) => c.h * scaled[i])); const fill = side === "above" && beside ? 1 : 1.22; g = clamp(g * Math.min((len * fill) / widths, band / tallest), 0.5, 1.6); geo = { rx, ry, a0, ey }; } const step = (Math.PI - 2 * geo.a0) / n; const sign = side === "above" ? -1 : 1; const cards: Work[] = []; for (let p = 0; p < n; p++) { const i = atPos[p]; const t = geo.a0 + step * (p + 0.5) + (rand() - 0.5) * step * 0.24; const zig = 1 + (p % 2 === 0 ? 0.06 : -0.08) + (rand() - 0.5) * 0.04; const x = cx + geo.rx * Math.cos(t); const y = geo.ey + sign * geo.ry * Math.sin(t) * zig; cards.push({ index: i, x, y, w: sized[i].w * g, h: sized[i].h * g, z: zs[i], ...tiltToward(x, y, cx, cy, stage, k, rand) }); } cards.sort((a, b) => a.index - b.index); return finish(input, cards, k, { overlap: 0.3, gap: 12 }); } /** * The arc under a headline (tablets): two shallow smiles, an amphitheatre. The near row runs the full width; the far * row sits higher, in the near row's gaps, a little smaller. Rows never overlap, so every caption stays readable. */ function arcBelow(input: LayoutInput): Placement[] { const { items, stage, keepOut } = input; const n = items.length; const rand = mulberry32(input.seed * 15485863 + n * 13 + 7); const pad = input.pad ?? 48; const inset = input.inset ?? defaultInset(stage.w); const k = depthFactor(input.depth); const sized = sizeCards(items, 1, rand); const cx = keepOut.x + keepOut.w / 2; const cy = keepOut.y + keepOut.h / 2; const nNear = Math.ceil(n / 2); const nFar = n - nNear; const byRank = [...sized].sort((a, b) => a.rank - b.rank).map((c) => c.index); // Big cards near, small far; within a row, a seeded shuffle so neighbours differ. const shuffle = (a: number[]) => a.map((v) => ({ v, r: rand() })).sort((p, q) => p.r - q.r).map((x) => x.v); const near = shuffle(byRank.slice(0, nNear)); const far = shuffle(byRank.slice(nNear)); const top = keepOut.y + keepOut.h + pad * 0.7; const bottom = stage.h - inset.y; const span = stage.w - 2 * inset.x; const slot = span / nNear; // Both rows curve like seats in an amphitheatre round the headline; the near row deeper. const sagNear = clamp(span * 0.085, 30, 72); const sagFar = sagNear * 0.55; const budget = Math.max(120, bottom - top - 2 * CAPTION_ROOM - sagNear - sagFar); const farH = budget / 2.12; const nearH = farH * 1.12; const cards: Work[] = []; let farBottom = top; const place = (row: number[], isNear: boolean, rowTop: number) => { row.forEach((i, j) => { const c = sized[i]; const z = isNear ? between(rand, 0.25, 1) : between(rand, -1, -0.3); const s = depthScale(z, k); const variety = lerp(1, 0.86, c.rank / Math.max(1, n - 1)); const fit = Math.min((slot * (isNear ? 0.86 : 0.78)) / s / c.w, (isNear ? nearH : farH) / s / c.h) * variety; const w = c.w * fit; const h = c.h * fit; // Near row: slots across the full width. Far row: the gaps between them, centred. const x = isNear ? inset.x + slot * (j + 0.5) : stage.w / 2 + (j - (row.length - 1) / 2) * slot; const u = (x - stage.w / 2) / (span / 2); const curve = (1 - u * u) * (isNear ? sagNear : sagFar); const y = rowTop + (h * s) / 2 + curve + (j % 2 ? -1 : 1) * 4; if (!isNear) farBottom = Math.max(farBottom, y + (h * s) / 2); cards.push({ index: i, x, y, w, h, z, ...tiltToward(x, y, cx, cy, stage, k * 1.15, rand) }); }); }; place(far, false, top); place(near, true, (nFar ? farBottom : top) + CAPTION_ROOM + 4); cards.sort((a, b) => a.index - b.index); return finish(input, cards, k, { overlap: 0, gap: 10 }); } 69:Tfb2,import type { LayoutInput, Placement } from "../types"; import { between, lerp, mulberry32 } from "./prng"; import { BLEED, assignDepth, defaultInset, depthFactor, depthScale, finish, sizeCards, stageUnit, tiltToward, type Work, } from "./shared"; /** * "orbit": the cards ring the headline. Slots are spread round an ellipse shaped like the stage (seeded rotation and * jitter); the biggest cards take the roomiest slots, never two big ones side by side; each card sits part-way * between the headline's keep-out and the stage edge along its ray, tilted to face the headline. */ export function orbit(input: LayoutInput): Placement[] { const { items, stage, keepOut } = input; const n = items.length; if (!n) return []; const rand = mulberry32(input.seed * 7919 + n * 31 + 1); const pad = input.pad ?? 48; const inset = input.inset ?? defaultInset(stage.w); const k = depthFactor(input.depth); const sized = sizeCards(items, stageUnit(stage.w, stage.h, n), rand); const zs = assignDepth(sized, rand); const cx = keepOut.x + keepOut.w / 2; const cy = keepOut.y + keepOut.h / 2; const t0 = rand() * Math.PI * 2; const slots = Array.from({ length: n }, (_, s) => { const theta = t0 + (2 * Math.PI * s) / n + (rand() - 0.5) * ((2 * Math.PI) / n) * 0.36; const ux = Math.cos(theta) * (stage.w / 2); const uy = Math.sin(theta) * (stage.h / 2); const l = Math.hypot(ux, uy) || 1; return { ux: ux / l, uy: uy / l }; }); /** How far along a ray a card of half size (hw, hh) can sit: from clearing the keep-out to touching the stage. */ const span = (u: { ux: number; uy: number }, hw: number, hh: number) => { const ax = Math.max(Math.abs(u.ux), 1e-6); const ay = Math.max(Math.abs(u.uy), 1e-6); const dIn = Math.min((keepOut.w / 2 + pad + hw) / ax, (keepOut.h / 2 + pad + hh) / ay); const roomX = u.ux > 0 ? stage.w - inset.x - hw - cx : cx - inset.x - hw; const vy = hh * (1 - 2 * BLEED); const roomY = u.uy > 0 ? stage.h - inset.y - vy - cy : cy - inset.y - vy; return { dIn, dOut: Math.min(roomX / ax, roomY / ay) }; }; const half = (i: number, f = 1) => { const s = depthScale(zs[i], k) * 1.04 * f; return { hw: (sized[i].w * s) / 2, hh: (sized[i].h * s) / 2 }; }; // Biggest first: each takes the free slot with the most room, keeping big cards apart. const big = new Set(sized.filter((c) => c.rank < Math.ceil(n * 0.3)).map((c) => c.index)); const slotOf: number[] = new Array(n); const taken: number[] = new Array(n).fill(-1); for (const i of [...sized].sort((a, b) => a.rank - b.rank).map((c) => c.index)) { let best = -1; let bestFit = -Infinity; for (let s = 0; s < n; s++) { if (taken[s] >= 0) continue; const { hw, hh } = half(i); const { dIn, dOut } = span(slots[s], hw, hh); let fit = Math.min(dOut - dIn, 400) + rand() * 10; if (big.has(i) && n > 4) { for (const nb of [(s + 1) % n, (s + n - 1) % n]) if (taken[nb] >= 0 && big.has(taken[nb])) fit -= 1e4; } if (fit > bestFit) { bestFit = fit; best = s; } } taken[best] = i; slotOf[i] = best; } const cards: Work[] = sized.map((c) => { const i = c.index; const u = slots[slotOf[i]]; // Shrink a card a little when its ray has no room for it. let f = 1; let { dIn, dOut } = span(u, half(i).hw, half(i).hh); while (dOut < dIn && f > 0.74) { f -= 0.06; ({ dIn, dOut } = span(u, half(i, f).hw, half(i, f).hh)); } // Neighbouring slots alternate between hugging the headline and drifting out, so the ring never reads as a frame. const t = slotOf[i] % 2 === 0 ? between(rand, 0.12, 0.45) : between(rand, 0.52, 0.86); const r = dOut >= dIn ? lerp(dIn, dOut, t) : dIn; const x = cx + u.ux * r; const y = cy + u.uy * r; return { index: i, x, y, w: c.w * f, h: c.h * f, z: zs[i], ...tiltToward(x, y, cx, cy, stage, k, rand) }; }); return finish(input, cards, k, {}); } 6a:Ta89,import type { LayoutInput, Placement } from "../types"; import { between, mulberry32 } from "./prng"; import { BLEED, assignDepth, defaultInset, depthFactor, depthScale, finish, sizeCards, stageUnit, tiltToward, type Work, } from "./shared"; /** * "scatter": no ring, only the keep-out and the stage. Biggest first, each card tries a few dozen seeded spots and * keeps the one farthest from the cards already placed (best-candidate sampling), then the separation tidies up. */ export function scatter(input: LayoutInput): Placement[] { const { items, stage, keepOut } = input; const n = items.length; if (!n) return []; const rand = mulberry32(input.seed * 104729 + n * 17 + 3); const pad = input.pad ?? 48; const inset = input.inset ?? defaultInset(stage.w); const k = depthFactor(input.depth); const sized = sizeCards(items, stageUnit(stage.w, stage.h, n) * 0.9, rand); const zs = assignDepth(sized, rand); const cx = keepOut.x + keepOut.w / 2; const cy = keepOut.y + keepOut.h / 2; const ko = { x0: keepOut.x - pad, y0: keepOut.y - pad, x1: keepOut.x + keepOut.w + pad, y1: keepOut.y + keepOut.h + pad }; const placed: { x: number; y: number; r: number }[] = []; const cards: Work[] = []; for (const c of [...sized].sort((a, b) => a.rank - b.rank)) { const s = depthScale(zs[c.index], k) * 1.04; const hw = (c.w * s) / 2; const hh = (c.h * s) / 2; const vy = hh * (1 - 2 * BLEED); const r = (hw + hh) / 2; let best = { x: cx, y: inset.y + vy, score: -Infinity }; for (let t = 0; t < 48; t++) { const x = between(rand, inset.x + hw, Math.max(inset.x + hw + 1, stage.w - inset.x - hw)); const y = between(rand, inset.y + vy, Math.max(inset.y + vy + 1, stage.h - inset.y - vy)); // Inside the padded keep-out: a heavy penalty rather than a rejection, so small stages still place every card. const inside = x + hw > ko.x0 && x - hw < ko.x1 && y + hh > ko.y0 && y - hh < ko.y1; let score = inside ? -1e5 : 0; let nearest = Infinity; for (const p of placed) nearest = Math.min(nearest, Math.hypot(p.x - x, p.y - y) - p.r - r); score += placed.length ? nearest : 0; // A mild pull toward the headline keeps the cloud round it rather than in the corners. score -= Math.hypot((x - cx) / stage.w, (y - cy) / stage.h) * 60; if (score > best.score) best = { x, y, score }; } placed.push({ x: best.x, y: best.y, r }); cards.push({ index: c.index, x: best.x, y: best.y, w: c.w, h: c.h, z: zs[c.index], ...tiltToward(best.x, best.y, cx, cy, stage, k, rand) }); } cards.sort((a, b) => a.index - b.index); return finish(input, cards, k, {}); } 6b:Tf74,import type { Box } from "../types"; /** A card as the separation sees it: its centre, half extents and depth. */ export type SepBody = { x: number; y: number; hw: number; hh: number; z: number }; export type SepOptions = { iterations?: number; /** Space kept between cards at similar depths. */ gap?: number; /** Cards further apart in depth than this may overlap… */ depthGap?: number; /** …by up to this fraction of the smaller card. */ overlap?: number; /** Already padded. */ keepOut?: Box; /** Where card centres may go, as the area the cards must stay inside. */ bounds?: Box; /** Fraction of a card's height allowed past the top or bottom of `bounds`. */ bleed?: number; }; /** How far two bodies overlap, beyond what their depths allow (0 when they don't). */ export function overlapOf(a: SepBody, b: SepBody, o: SepOptions = {}): { x: number; y: number } { const { gap = 0, depthGap = 0.6, overlap = 0.22 } = o; const deep = Math.abs(a.z - b.z) > depthGap; // A nearer card may tuck over a farther one's side or top, never over its bottom edge, where the caption sits. const near = a.z > b.z ? a : b; const far = near === a ? b : a; // Side overlap stops short of the farther card's caption (centred under it, about 120 px wide). const allowX = deep ? Math.min(2 * Math.min(a.hw, b.hw) * overlap, Math.max(0, far.hw - 60)) : 0; const allowY = deep && near.y < far.y ? 2 * Math.min(a.hh, b.hh) * overlap : 0; const x = a.hw + b.hw + gap - allowX - Math.abs(b.x - a.x); const y = a.hh + b.hh + gap - allowY - Math.abs(b.y - a.y); return x > 0 && y > 0 ? { x, y } : { x: 0, y: 0 }; } /** * Resolves overlaps with a few rounds of AABB separation: overlapping pairs are pushed apart along the line between * their centres (the smaller card moves more), then cards are pushed out of the keep-out and clamped to the bounds. * Mutates `bodies`. */ export function separate(bodies: SepBody[], o: SepOptions = {}): SepBody[] { const { iterations = 4, keepOut, bounds, bleed = 0 } = o; for (let it = 0; it < iterations; it++) { for (let i = 0; i < bodies.length; i++) { for (let j = i + 1; j < bodies.length; j++) { const a = bodies[i]; const b = bodies[j]; const ov = overlapOf(a, b, o); if (ov.x === 0) continue; const dx = b.x - a.x; const dy = b.y - a.y; const len = Math.hypot(dx, dy); const ux = len < 1e-6 ? 1 : dx / len; const uy = len < 1e-6 ? 0 : dy / len; // The distance along (ux, uy) that clears the overlap on one axis. const s = Math.min( ov.x / Math.max(Math.abs(ux), 1e-3), ov.y / Math.max(Math.abs(uy), 1e-3), 2 * Math.max(a.hw, a.hh, b.hw, b.hh), ); const areaA = a.hw * a.hh; const areaB = b.hw * b.hh; const wa = areaB / (areaA + areaB); const wb = 1 - wa; a.x -= ux * s * wa; a.y -= uy * s * wa; b.x += ux * s * wb; b.y += uy * s * wb; } } for (const c of bodies) { if (keepOut) pushOut(c, keepOut); if (bounds) clampInto(c, bounds, bleed); } } return bodies; } /** Pushes a body out of a box along the axis that needs the shorter move. */ export function pushOut(c: SepBody, k: Box) { const kx = k.x + k.w / 2; const ky = k.y + k.h / 2; const px = c.hw + k.w / 2 - Math.abs(c.x - kx); const py = c.hh + k.h / 2 - Math.abs(c.y - ky); if (px <= 0 || py <= 0) return; if (px < py) c.x += (c.x < kx ? -1 : 1) * px; else c.y += (c.y < ky ? -1 : 1) * py; } export function clampInto(c: SepBody, b: Box, bleed: number) { const minX = b.x + c.hw; const maxX = b.x + b.w - c.hw; c.x = minX > maxX ? b.x + b.w / 2 : Math.min(maxX, Math.max(minX, c.x)); const vy = c.hh * (1 - 2 * bleed); const minY = b.y + vy; const maxY = b.y + b.h - vy; c.y = minY > maxY ? b.y + b.h / 2 : Math.min(maxY, Math.max(minY, c.y)); } 6c:T1ef0,import type { Box, LayoutInput, Placement } from "../types"; import { between, clamp, lerp } from "./prng"; import { overlapOf, separate, type SepBody, type SepOptions } from "./separate"; /** Area in px² of a median card on a 1360 × 820 stage with ten cards. */ const BASE_AREA = 27000; /** Room under each card for its caption: separation keeps captions clear of other cards and the stage edge. */ const CAPTION = 40; export const CAPTION_ROOM = CAPTION; /** Fraction of a card's height allowed past the top or bottom of the stage: none, so a card never hangs over a neighbouring section. */ export const BLEED = 0; /** Maps `depth` (0..1, default 0.6) to a multiplier for tilts and depth spread: 0 → 0.2, 0.6 → 1, 1 → 1.4. */ export function depthFactor(depth: number) { const d = clamp(depth, 0, 1); return d <= 0.6 ? 0.2 + (d / 0.6) * 0.8 : 1 + ((d - 0.6) / 0.4) * 0.4; } /** Depth z (-1 far … 1 near) → scale: 0.86 … 1.08 at the default depth. */ export function depthScale(z: number, k: number) { const s = clamp(k, 0, 1.3); return 1 + z * (z < 0 ? 0.14 : 0.08) * s; } export function defaultInset(w: number) { // Room for the parallax and the hover lift, so no card ever leaves the stage sideways. return { x: clamp(w * 0.025, 16, 40) + 22, y: 20 }; } /** Cards shrink a little on smaller stages and when there are more of them. */ export function stageUnit(w: number, h: number, n: number) { return clamp(Math.min(w / 1360, h / 820), 0.5, 1.2) * Math.pow(10 / Math.max(n, 1), 0.32); } export type Sized = { index: number; w: number; h: number; rank: number }; /** * Card sizes: a ladder of areas from 1.45× to 0.62× the median, handed out by intrinsic area with a seeded nudge (so * bigger photos tend to get bigger cards, and a set of same-size photos still gets variety). Aspect comes from * width / height. `rank` 0 is the biggest. */ export function sizeCards(items: LayoutInput["items"], unit: number, rand: () => number): Sized[] { const n = items.length; const areas = items.map((it) => Math.max(1, it.width * it.height)); const median = [...areas].sort((a, b) => a - b)[Math.floor(n / 2)]; const keyed = items.map((_, i) => ({ i, key: Math.sqrt(areas[i] / median) * between(rand, 0.55, 1.6) })); keyed.sort((a, b) => b.key - a.key); const out: Sized[] = new Array(n); keyed.forEach(({ i }, rank) => { const t = n > 1 ? rank / (n - 1) : 0.5; const area = BASE_AREA * unit * unit * lerp(1.45, 0.62, t); const r = clamp(items[i].width / Math.max(1, items[i].height), 0.6, 1.9); out[i] = { index: i, w: Math.sqrt(area * r), h: Math.sqrt(area / r), rank }; }); return out; } /** Depth per card, evenly spread over [-1, 1]; smaller cards drift to the back (far things look small). */ export function assignDepth(sized: Sized[], rand: () => number): number[] { const n = sized.length; const keyed = sized.map((c) => ({ i: c.index, key: (1 - c.rank / Math.max(1, n - 1)) * 0.8 + rand() })); keyed.sort((a, b) => a.key - b.key); const z: number[] = new Array(n); keyed.forEach(({ i }, pos) => (z[i] = n > 1 ? -1 + (2 * pos) / (n - 1) : 0)); return z; } /** Base tilt that turns a card toward the headline: left cards rotateY +, right −, top rotateX −, bottom +. */ export function tiltToward(x: number, y: number, cx: number, cy: number, stage: LayoutInput["stage"], k: number, rand: () => number) { const nx = clamp((x - cx) / (stage.w / 2), -1, 1); const ny = clamp((y - cy) / (stage.h / 2), -1, 1); return { rotX: ny * 14 * between(rand, 0.6, 1) * k, rotY: -nx * 26 * between(rand, 0.6, 1) * k, rotZ: (rand() * 2 - 1) * 6 * k, }; } /** Half extents of a card's screen box, with its depth scale, z-rotation and a margin for the hover lift. */ export function halfExtents(w: number, h: number, scale: number, rotZ: number) { const r = (Math.abs(rotZ) * Math.PI) / 180; const c = Math.cos(r); const s = Math.sin(r); const m = 1.03; return { hw: ((w * c + h * s) * scale * m) / 2, hh: ((w * s + h * c) * scale * m) / 2 }; } export function padBox(b: Box, pad: number): Box { return { x: b.x - pad, y: b.y - pad, w: b.w + 2 * pad, h: b.h + 2 * pad }; } /** Reading order: rows from top to bottom (cards within ~0.6 card heights share a row), left to right in a row. */ export function readingOrder(cards: ReadonlyArray<{ x: number; y: number; h: number }>): number[] { const n = cards.length; const heights = cards.map((c) => c.h).sort((a, b) => a - b); const tol = (heights[Math.floor(n / 2)] ?? 0) * 0.6; const byY = cards.map((_, i) => i).sort((a, b) => cards[a].y - cards[b].y); const rows: number[][] = []; let rowY = -Infinity; for (const i of byY) { if (cards[i].y - rowY > tol) { rows.push([i]); rowY = cards[i].y; } else rows[rows.length - 1].push(i); } const order: number[] = new Array(n); let pos = 0; for (const row of rows) for (const i of row.sort((a, b) => cards[a].x - cards[b].x)) order[i] = pos++; return order; } /** A card while a layout works on it. */ export type Work = { index: number; x: number; y: number; w: number; h: number; z: number; rotX: number; rotY: number; rotZ: number }; /** Separates the cards, then derives scale, blur, opacity, stacking and reading order. */ export function finish(input: LayoutInput, cards: Work[], k: number, sep: SepOptions): Placement[] { const { stage, keepOut, items } = input; const pad = input.pad ?? 48; const inset = input.inset ?? defaultInset(stage.w); const ko = padBox(keepOut, pad); const firm = padBox(keepOut, pad / 2); // A card that still can't clear the headline after separating shrinks a little and the cards separate again: // the headline is never covered, whatever the stage. for (let round = 0; round < 6; round++) { const bodies: SepBody[] = cards.map((c) => { const e = halfExtents(c.w, c.h, depthScale(c.z, k), c.rotZ); return { x: c.x, y: c.y + CAPTION / 2, z: c.z, hw: e.hw, hh: e.hh + CAPTION / 2 }; }); separate(bodies, { iterations: 8, gap: 18, keepOut: ko, bounds: { x: inset.x, y: inset.y, w: stage.w - 2 * inset.x, h: stage.h - 2 * inset.y }, bleed: BLEED, ...sep, }); // Cards that still collide (with each other or the headline) on a cramped stage shrink a little and go again. const shrink = new Set(); cards.forEach((c, i) => { const b = bodies[i]; c.x = b.x; c.y = b.y - CAPTION / 2; if (b.x + b.hw > firm.x && b.x - b.hw < firm.x + firm.w && b.y + b.hh > firm.y && b.y - b.hh < firm.y + firm.h) shrink.add(i); for (let j = i + 1; j < cards.length; j++) { if (overlapOf(b, bodies[j], { ...sep, gap: 0 }).x > 0) { shrink.add(i); shrink.add(j); } } }); if (!shrink.size) break; for (const i of shrink) { cards[i].w *= 0.9; cards[i].h *= 0.9; } } const cx = keepOut.x + keepOut.w / 2; const cy = keepOut.y + keepOut.h / 2; const byDepth = cards.map((_, i) => i).sort((a, b) => cards[a].z - cards[b].z); const zIndex: number[] = new Array(cards.length); byDepth.forEach((i, rank) => (zIndex[i] = rank + 1)); const blurOf = (i: number) => { const rank = byDepth.indexOf(i); if (rank > 1 || cards.length < 6) return 0; return [1.5, 1.05][rank] * clamp((k - 0.35) / 0.65, 0, 1); }; const order = readingOrder(cards); return cards.map((c, i) => { const len = Math.hypot(c.x - cx, c.y - cy) || 1; return { id: items[c.index].id, index: c.index, x: c.x, y: c.y, w: c.w, h: c.h, z: c.z, rotX: c.rotX, rotY: c.rotY, rotZ: c.rotZ, scale: depthScale(c.z, k), blur: blurOf(i), opacity: lerp(0.92, 1, (c.z + 1) / 2), zIndex: zIndex[i], order: order[i], dx: (c.x - cx) / len, dy: (c.y - cy) / len, }; }); } 6d:T1c3d,"use client"; import { motion } from "motion/react"; import { useEffect, useRef, type CSSProperties, type ReactNode, type SyntheticEvent } from "react"; import type { Rig } from "./rig"; import type { PerspectiveCardItem, Placement, RenderImageProps } from "./types"; export type CardHandlers = { enter: (id: string, e: React.PointerEvent) => void; leave: (id: string, e: React.PointerEvent) => void; down: (id: string, e: React.PointerEvent) => void; up: (id: string) => void; focus: (id: string, el: HTMLElement) => void; blur: (id: string) => void; /** Opens the lightbox (or calls onCardClick); prevents the event's default when it does. */ open: (index: number, el: HTMLElement, e: React.MouseEvent) => void; }; export type PerspectiveCardProps = { item: PerspectiveCardItem; placement: Placement; rig: Rig; handlers: CardHandlers; /** "high": eager + fetchpriority high; "lazy": loading=lazy. */ priority: "high" | "auto" | "lazy"; /** The card is in the lightbox: its place stays, it isn't drawn. */ hidden?: boolean; /** A link (lightbox off and the item has an href) or a button. */ as?: "button" | "a"; /** "zoom-in" when the lightbox opens on click. */ zoom?: boolean; renderImage?: (props: RenderImageProps) => ReactNode; registerButton?: (id: string, el: HTMLElement | null) => void; }; /** Marks the face loaded so the photo fades and settles in over its placeholder. */ function markLoaded(e: SyntheticEvent) { e.currentTarget.dataset.loaded = "true"; } export function CardImage({ item, sizes, priority, renderImage, className = "pc-img", }: { item: PerspectiveCardItem; sizes: string; priority: "high" | "auto" | "lazy"; renderImage?: (props: RenderImageProps) => ReactNode; className?: string; }) { if (renderImage) return <>{renderImage({ item, className, sizes, priority: priority === "high" })}; return ( // eslint-disable-next-line @next/next/no-img-element -- plain so the component runs in any React app.

); } /** * One card: a 3D-transformed button (shadows, photo, edge light, glare) plus its caption, which lives in a flat * sibling layer so the text is never rasterised in 3D. All motion comes from the rig; this component renders once * per layout, not per frame. */ export function PerspectiveCard({ item, placement: p, rig, handlers: h, priority, hidden, as = "button", zoom = true, renderImage, registerButton, }: PerspectiveCardProps) { const face = useRef(null); const titleId = `pc-t-${item.id}`; const altId = `pc-a-${item.id}`; const sizes = `${Math.ceil(p.w * p.scale * 1.12)}px`; const glare = Math.round(Math.max(p.w, p.h) * 1.6); useEffect(() => { // A cached photo can finish before React attaches onLoad. const img = face.current?.querySelector("img"); if (img?.complete && img.naturalWidth && face.current) face.current.dataset.loaded = "true"; }, []); const style = { width: p.w, height: p.h, transform: rig.transform, opacity: rig.alpha, zIndex: rig.zIndex, "--pc-blur": `${p.blur.toFixed(2)}px`, "--pc-sh-y": `${(14 - p.z * 4).toFixed(1)}px`, "--pc-sh-b": `${(32 - p.z * 10).toFixed(1)}px`, "--pc-sh-a": (0.22 + p.z * 0.04).toFixed(3), cursor: zoom ? "zoom-in" : "pointer", } as unknown as CSSProperties; const common = { "data-pc-card": item.id, "data-pc-hidden": hidden || undefined, "aria-labelledby": titleId, "aria-describedby": altId, className: "pc-card", ref: (el: HTMLElement | null) => registerButton?.(item.id, el), onPointerEnter: (e: React.PointerEvent) => h.enter(item.id, e), onPointerLeave: (e: React.PointerEvent) => h.leave(item.id, e), onPointerDown: (e: React.PointerEvent) => h.down(item.id, e), onPointerUp: () => h.up(item.id), onPointerCancel: () => h.up(item.id), onFocus: (e: React.FocusEvent) => h.focus(item.id, e.currentTarget), onBlur: () => h.blur(item.id), onClick: (e: React.MouseEvent) => h.open(p.index, e.currentTarget, e), style, }; const body = ( <> 0 ? "pc-media pc-media-soft" : "pc-media"}> {p.blur > 0 && ( // The far cards sit out of focus; hovering one brings a sharp copy up over it (opacity, never filter). )} ); return ( <> {as === "a" ? ( {body} ) : ( {body} )}

{item.title}

{item.alt} ); } 6e:T5790,"use client"; import "./styles.css"; import { animate, motion, transformValue } from "motion/react"; import { Children, Suspense, cloneElement, isValidElement, lazy, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, type CSSProperties, type ReactElement, type ReactNode, } from "react"; import { useIdleFloat, type FloatTarget } from "./hooks/useIdleFloat"; import { usePointerParallax } from "./hooks/usePointerParallax"; import { prefersReducedMotion, useReducedMotion, } from "./hooks/useReducedMotion"; import { placeCards } from "./layout"; import { mulberry32 } from "./layout/prng"; import { PerspectiveCard, type CardHandlers } from "./PerspectiveCard"; import type { RectLike } from "./PerspectiveLightbox"; import { SPRING, createRig, createScene, engage, placeRig, type Rig, } from "./rig"; import type { PerspectiveCardsProps, Placement } from "./types"; /* * The lightbox and the phone deck are separate chunks: the first paint carries only the stage. The deck loads on * phones only; the lightbox is fetched after the entrance and on the first hover, focus or touch of a card, so it is * there before any click. */ const loadLightbox = () => import("./PerspectiveLightbox"); const PerspectiveLightbox = lazy(() => loadLightbox().then((m) => ({ default: m.PerspectiveLightbox })), ); const PerspectiveDeck = lazy(() => import("./PerspectiveDeck").then((m) => ({ default: m.PerspectiveDeck })), ); type Mode = "desktop" | "tablet" | "mobile"; type Frame = { mode: Mode; placements: Placement[] }; type Box = { index: number; origin: RectLike | null }; /** Splits text into word spans (keeping elements, line breaks and emphasis) for the staggered headline. */ function splitWords(node: ReactNode, counter: { i: number }): ReactNode { if (typeof node === "string" || typeof node === "number") { return String(node) .split(/(\s+)/) .map((part, k) => !part || /^\s+$/.test(part) ? ( part ) : ( {part} ), ); } if (Array.isArray(node)) return Children.map(node, (child) => splitWords(child, counter)); if (isValidElement<{ children?: ReactNode }>(node)) { if (node.props.children === undefined) return node; return cloneElement( node as ReactElement<{ children?: ReactNode }>, undefined, splitWords(node.props.children, counter), ); } return node; } function hash(s: string) { let h = 2166136261; for (let i = 0; i < s.length; i++) h = Math.imul(h ^ s.charCodeAt(i), 16777619); return h >>> 0; } /** * A hero gallery: image cards float in 3D round a centred headline, move with the cursor like a camera, lift and * turn to face you on hover, drift when idle, and grow into a lightbox when clicked. Tablets get an arc under the * headline, phones a fanned deck over a snap strip. No React renders on pointer moves, float or scroll. */ export default function PerspectiveCards({ items, headline, subheadline, eyebrow, cta, headingAs: Heading = "h2", depth = 0.6, parallax = 0.5, tilt = 14, float = true, layout = "orbit", seed = 7, theme = "auto", accent, className, galleryLabel = "Gallery", lightbox = true, onCardClick, renderImage, }: PerspectiveCardsProps) { const uid = useId().replace(/[^a-zA-Z0-9_-]/g, ""); const headingId = `pc-h-${uid}`; const reduced = useReducedMotion(); const section = useRef(null); const stage = useRef(null); const head = useRef(null); const [scene] = useState(createScene); const [rigs] = useState(() => new Map()); const buttons = useRef(new Map()); const hovered = useRef(null); const deckFloats = useRef(null); const entered = useRef(false); const [frame, setFrame] = useState(null); const [inView, setInView] = useState(false); // Cards mount once the section first reaches the screen: a gallery further down the page costs nothing at load. const [near, setNear] = useState(false); const [enter, setEnter] = useState(false); const [box, setBox] = useState(null); const [stageOpen, setStageOpen] = useState(false); const rigFor = useCallback( (id: string) => { let r = rigs.get(id); if (!r) { r = createRig(id, scene); rigs.set(id, r); } return r; }, [rigs, scene], ); // Seeded idle drift per card: 4–7 px, ±0.6°, 5–9 s. const floats = useMemo(() => { const out = new Map>(); for (const it of items) { const rand = mulberry32(hash(it.id) ^ (seed * 2654435761)); out.set(it.id, { amp: 4 + rand() * 3, ampR: 0.35 + rand() * 0.25, period: 5 + rand() * 4, periodR: 6 + rand() * 3, phase: rand() * Math.PI * 2, }); } return out; }, [items, seed]); /* ---------------------------------------------------------------- layout */ const measure = useCallback(() => { const st = stage.current; const hd = head.current; if (!st || !hd || !items.length) return; const W = st.clientWidth; const H = st.clientHeight; const mode: Mode = W >= 1024 ? "desktop" : W >= 640 ? "tablet" : "mobile"; if (mode === "mobile") { setFrame((prev) => prev?.mode === "mobile" ? prev : { mode, placements: [] }, ); return; } const keepOut = { x: hd.offsetLeft, y: hd.offsetTop, w: hd.offsetWidth, h: hd.offsetHeight, }; const input = { items, stage: { w: W, h: H }, keepOut, seed, depth, side: mode === "tablet" ? ("below" as const) : ("above" as const), }; let placements = placeCards(mode === "tablet" ? "arc" : layout, input); if (mode === "tablet") { // Fewer cards on tablets: the farthest two or three step out (they stay in the lightbox's sequence). const drop = items.length >= 9 ? 3 : items.length >= 7 ? 2 : items.length >= 5 ? 1 : 0; const far = new Set( [...placements] .sort((a, b) => a.z - b.z) .slice(0, drop) .map((p) => p.id), ); const kept = items.filter((it) => !far.has(it.id)); placements = placeCards("arc", { ...input, items: kept }).map((p) => ({ ...p, index: items.findIndex((it) => it.id === p.id), })); } scene.center.set({ x: keepOut.x + keepOut.w / 2, y: keepOut.y + keepOut.h / 2, }); scene.origin.set({ x: W * 0.5, y: H * 0.45 }); setFrame({ mode, placements }); }, [items, seed, depth, layout, scene]); // One ResizeObserver (section + headline), re-laid out once per frame at most. useLayoutEffect(() => { measure(); const sec = section.current; const hd = head.current; if (!sec || !hd || typeof ResizeObserver === "undefined") return; let queued = 0; const ro = new ResizeObserver(() => { if (queued) return; queued = requestAnimationFrame(() => { queued = 0; measure(); }); }); ro.observe(sec); ro.observe(hd); return () => { ro.disconnect(); cancelAnimationFrame(queued); }; }, [measure]); const mode = frame?.mode ?? null; // Push placements into the rigs: springs once the cards are on stage, jumps before. useLayoutEffect(() => { if (!frame) return; const calm = prefersReducedMotion(); for (const p of frame.placements) { const r = rigFor(p.id); const fresh = !r.placed; placeRig(r, p, entered.current && !fresh && !calm); if (fresh && entered.current) { // A card that arrives later (new item, or back from the tablet's hidden set) fades in where it belongs. r.enter.jump(1); animate(r.fade, 1, { duration: 0.4 }); animate(r.cap, 1, { duration: 0.3, delay: 0.2 }); } } }, [frame, rigFor]); /* -------------------------------------------------------- scene settings */ useEffect(() => { scene.parallax.set(reduced ? 0 : Math.max(0, Math.min(1, parallax))); scene.tilt.set(reduced ? 0 : tilt * (mode === "tablet" ? 0.6 : 1)); scene.calm.set(reduced ? 1 : 0); }, [scene, parallax, tilt, reduced, mode]); /* ------------------------------------------------- view, entrance, scroll */ // One IntersectionObserver: entrance once ≥35 % is in view; float and scroll only while on screen. useEffect(() => { const el = section.current; if (!el) return; if (typeof IntersectionObserver === "undefined") { const id = requestAnimationFrame(() => { setInView(true); setNear(true); setEnter(true); }); return () => cancelAnimationFrame(id); } let first = true; const io = new IntersectionObserver( ([e]) => { setInView(e.isIntersecting); if (e.isIntersecting) setNear(true); const enough = e.intersectionRatio >= 0.35 || e.intersectionRect.height >= window.innerHeight * 0.35; if (enough) { delete el.dataset.pcWait; setEnter(true); } else if (first && !e.isIntersecting) { // Not on screen yet: the headline waits to play its entrance until it is. el.dataset.pcWait = ""; } first = false; }, { threshold: [0, 0.35] }, ); io.observe(el); return () => io.disconnect(); }, []); useEffect(() => { if (!enter || !frame || entered.current) return; entered.current = true; const el = section.current; if (el) el.dataset.pcEntered = ""; if (frame.mode === "mobile") return; const calm = prefersReducedMotion(); const { x: cx, y: cy } = scene.center.get(); // Dealt outward: nearest the headline first, 55 ms apart. const byDistance = [...frame.placements].sort( (a, b) => Math.hypot(a.x - cx, a.y - cy) - Math.hypot(b.x - cx, b.y - cy), ); if (el && !calm) el.dataset.pcEntering = ""; const runs = byDistance.map((p, rank) => { const r = rigFor(p.id); if (calm) { r.enter.jump(1); animate(r.cap, 1, { duration: 0.2 }); return animate(r.fade, 1, { duration: 0.2 }); } const delay = 0.16 + rank * 0.055; animate(r.fade, 1, { duration: 0.42, ease: [0.22, 1, 0.36, 1], delay }); animate(r.cap, 1, { duration: 0.2, delay: delay + 0.56 }); return animate(r.enter, 1, { type: "spring", ...SPRING.enter, delay, restDelta: 0.001, }); }); Promise.all(runs).then(() => { if (lightbox) loadLightbox(); if (el) delete el.dataset.pcEntering; }); }, [enter, frame, rigFor, scene, lightbox]); // Scroll reaction: cards drift apart and fade a touch as the section leaves through the top. useEffect(() => { if (!inView || reduced) { if (reduced) scene.scroll.set(0); return; } let queued = 0; const update = () => { queued = 0; const el = section.current; if (!el) return; const rect = el.getBoundingClientRect(); scene.scroll.set( Math.max(0, Math.min(1, -rect.top / Math.max(1, rect.height))), ); }; const onScroll = () => { if (!queued) queued = requestAnimationFrame(update); }; update(); window.addEventListener("scroll", onScroll, { passive: true }); return () => { window.removeEventListener("scroll", onScroll); cancelAnimationFrame(queued); }; }, [inView, reduced, scene]); // Idle float: one loop for every card (and the phone's fan), paused off screen and in hidden tabs. const floatTargets = useCallback(() => { if (deckFloats.current) return deckFloats.current; const list: FloatTarget[] = []; for (const p of frame?.placements ?? []) { const r = rigs.get(p.id); const f = floats.get(p.id); if (r && f) list.push({ y: r.fy, r: r.fr, ...f }); } return list; }, [frame, rigs, floats]); useIdleFloat(floatTargets, float && !reduced && inView && enter); /* ---------------------------------------------------------------- pointer */ usePointerParallax( stage, { enabled: mode !== "mobile" && !reduced && !box, onMove: (clientX, clientY, rect) => { const r = hovered.current ? rigs.get(hovered.current) : undefined; if (!r || !r.screen.w) return; // Pointer inside the hovered card, 0 … 1: the card tilts under it (±8°) and the glare follows. const u = (clientX - rect.left - r.screen.x) / r.screen.w + 0.5; const v = (clientY - rect.top - r.screen.y) / r.screen.h + 0.5; r.lry.set(Math.max(-8, Math.min(8, (u - 0.5) * 16))); r.lrx.set(Math.max(-8, Math.min(8, -(v - 0.5) * 16))); r.gx.set(Math.max(0, Math.min(1, u))); r.gy.set(Math.max(0, Math.min(1, v))); }, }, { x: scene.px, y: scene.py }, ); const [headTransform] = useState(() => transformValue(() => { const k = scene.dpr; const x = Math.round(-scene.px.get() * 6 * k) / k; const y = Math.round(-scene.py.get() * 4 * k) / k; return `translate3d(${x}px,${y}px,0)`; }), ); /* -------------------------------------------------------------- lightbox */ const open = useCallback( (index: number, el: HTMLElement, e: React.MouseEvent) => { const item = items[index]; if (onCardClick && onCardClick(item, index) === false) { e.preventDefault(); return; } if (!lightbox) { if (!item.href) e.preventDefault(); return; } e.preventDefault(); const face = el.querySelector("[data-pc-face]") ?? el; setBox({ index, origin: face.getBoundingClientRect() }); setStageOpen(true); }, [items, lightbox, onCardClick], ); const handlers = useMemo( () => ({ enter: (id, e) => { if (lightbox) loadLightbox(); if (e.pointerType === "touch") return; hovered.current = id; engage(rigFor(id), "hover", true); }, leave: (id) => { if (hovered.current === id) hovered.current = null; const r = rigFor(id); r.press.set(0); engage(r, "hover", false); }, down: (id, e) => { if (e.button !== 0) return; const r = rigFor(id); r.press.set(1); r.lrx.set(0); r.lry.set(0); }, up: (id) => rigFor(id).press.set(0), focus: (id, el) => { if (lightbox) loadLightbox(); let visible = true; try { visible = el.matches(":focus-visible"); } catch { /* older engines: treat focus as keyboard focus */ } if (visible) engage(rigFor(id), "focus", true); }, blur: (id) => engage(rigFor(id), "focus", false), open, }), [open, rigFor, lightbox], ); /** Where the photo should land when the lightbox closes on item `i`: its card, facing the viewer. */ const returnRect = useCallback( (i: number): RectLike | null => { const id = items[i]?.id; if (!id) return null; const onScreen = (r: RectLike) => r.width > 0 && r.x + r.width > 0 && r.x < window.innerWidth && r.y + r.height > 0 && r.y < window.innerHeight; if (mode === "mobile") { for (const key of [id, `fan:${id}`]) { const rect = buttons.current.get(key)?.getBoundingClientRect(); if (rect && onScreen(rect)) return rect; } return null; } const r = rigs.get(id); const st = stage.current; const sec = section.current; if (!r || !st || !sec || !frame?.placements.some((p) => p.id === id)) return null; const sr = sec.getBoundingClientRect(); const near = 0.4 + r.z; const par = scene.parallax.get(); const cx = sr.left + st.offsetLeft + r.x.get() + scene.px.get() * 28 * near * par + r.dx * 40 * scene.scroll.get(); const cy = sr.top + st.offsetTop + r.y.get() + scene.py.get() * 20 * near * par + r.dy * 40 * scene.scroll.get(); const w = r.w.get() * r.s.get(); const h = r.h.get() * r.s.get(); const rect = { x: cx - w / 2, y: cy - h / 2, width: w, height: h }; return onScreen(rect) ? rect : null; }, [items, mode, rigs, frame, scene], ); const onCloseStart = useCallback( (i: number) => { setStageOpen(false); const r = rigs.get(items[i]?.id ?? ""); if (!r || mode === "mobile") return; // It lands facing the viewer, then settles back into its orbit. r.lift.jump(0); r.face.jump(1); r.lrx.jump(0); r.lry.jump(0); engage(r, "land", true); }, [items, mode, rigs], ); const onClose = useCallback( (i: number) => { setBox(null); const id = items[i]?.id; if (!id) return; requestAnimationFrame(() => { buttons.current.get(id)?.focus({ preventScroll: true }); const r = rigs.get(id); if (r) engage(r, "land", false); }); }, [items, rigs], ); const register = useCallback((key: string, el: HTMLElement | null) => { if (el) buttons.current.set(key, el); else buttons.current.delete(key); }, []); const setDeckFloats = useCallback((t: FloatTarget[] | null) => { deckFloats.current = t; }, []); /* ---------------------------------------------------------------- render */ const hiddenId = box ? (items[box.index]?.id ?? null) : null; const words = useMemo(() => splitWords(headline, { i: 0 }), [headline]); const placements = useMemo( () => [...(frame?.placements ?? [])].sort((a, b) => a.order - b.order), [frame], ); const priorities = useMemo(() => { const byZ = [...placements].sort((a, b) => b.z - a.z).map((p) => p.id); return (id: string) => { const rank = byZ.indexOf(id); return rank < 3 ? "high" : rank >= byZ.length - 4 ? "lazy" : "auto"; }; }, [placements]); const effLayout = mode === "tablet" ? "arc" : layout; return (

{eyebrow && (

)} {words} {subheadline && (

{subheadline}

)} {cta && (

{cta.label} {cta.secondary && ( {cta.secondary.label} )}

)} {lightbox && box && ( setBox((b) => (b ? { ...b, index } : b))} onCloseStart={onCloseStart} onClose={onClose} returnRect={returnRect} theme={theme} accent={accent} reducedMotion={reduced} cardRadius={mode === "mobile" ? 12 : 14} /> )}

); } 6f:T2262,"use client"; import { animate, motion, motionValue, transformValue, type MotionValue } from "motion/react"; import { useEffect, useState, useSyncExternalStore, type ReactNode } from "react"; import { CardImage } from "./PerspectiveCard"; import type { Scene } from "./rig"; import type { FloatTarget } from "./hooks/useIdleFloat"; import type { PerspectiveCardItem, RenderImageProps } from "./types"; /** The fan: the front card upright, two behind it turned out like a hand of photos. x is a share of the card's width. */ const POSES = [ { x: 0, y: 0, rx: 5, ry: 0, rz: -2, s: 1, depth: 1 }, { x: -34, y: 16, rx: 3, ry: 16, rz: -9, s: 0.9, depth: -0.6 }, { x: 34, y: 10, rx: 3, ry: -16, rz: 8, s: 0.92, depth: -0.2 }, ]; type FanRig = { enter: MotionValue; float: FloatTarget; transform: MotionValue; alpha: MotionValue }; function createFanRig(k: number, scene: Scene): FanRig { const pose = POSES[k]; const enter = motionValue(0); const fy = motionValue(0); const fr = motionValue(0); const near = 0.5 + pose.depth * 0.5; return { enter, float: { y: fy, r: fr, amp: 4 + k * 1.2, ampR: 0.5, period: 6.2 + k * 1.1, periodR: 8 + k, phase: k * 2.1 }, // Dealt from a tidy stack: the back cards fan out from behind the front one. transform: transformValue(() => { const e = enter.get(); const ie = 1 - e; const px = scene.px.get(); const py = scene.py.get(); const calm = scene.calm.get(); const tx = px * 16 * near * (1 - calm); const ty = py * 10 * near * (1 - calm); return `translate3d(calc(${(pose.x * e).toFixed(2)}% + ${tx.toFixed(2)}px),${(pose.y * e + 36 * ie + fy.get() + ty).toFixed(2)}px,${(-140 * ie).toFixed(1)}px) rotateX(${(pose.rx + 18 * ie - py * 9 * (1 - calm)).toFixed(2)}deg) rotateY(${(pose.ry * e + px * 12 * (1 - calm)).toFixed(2)}deg) rotateZ(${(pose.rz * e + fr.get()).toFixed(2)}deg) scale(${(pose.s * (0.86 + 0.14 * e)).toFixed(4)})`; }), alpha: transformValue(() => Math.min(1, enter.get() * 1.6)), }; } const noop = () => () => {}; type DeviceOrientationWithPermission = typeof DeviceOrientationEvent & { requestPermission?: () => Promise<"granted" | "denied"> }; export type PerspectiveDeckProps = { items: PerspectiveCardItem[]; scene: Scene; entered: boolean; reduced: boolean; label: string; hiddenId: string | null; onOpen: (index: number, el: HTMLElement, e: React.MouseEvent) => void; register: (key: string, el: HTMLElement | null) => void; /** Hands the fan's float values to the component's single float loop. */ floats: (targets: FloatTarget[] | null) => void; renderImage?: (props: RenderImageProps) => ReactNode; }; /** * Phones: the orbit becomes a fanned deck of the first three cards (tilting with the phone once motion is enabled) * over a snap-scrolling strip of every card. The fan is a picture of the strip's first cards, so it is hidden from * assistive tech and the tab order; the strip carries the names. */ export function PerspectiveDeck({ items, scene, entered, reduced, label, hiddenId, onOpen, register, floats, renderImage }: PerspectiveDeckProps) { const fan = items.slice(0, Math.min(3, items.length)); const [rigs] = useState(() => POSES.map((_, k) => createFanRig(k, scene))); const [on, setOn] = useState(false); // The "Enable motion" pill appears only on touch devices that can report tilt, and not under reduced motion. const canTilt = useSyncExternalStore( noop, () => !reduced && !!window.matchMedia?.("(pointer: coarse)").matches && "DeviceOrientationEvent" in window, () => false, ); const tilt = !canTilt ? "none" : on ? "on" : "off"; useEffect(() => { floats(rigs.slice(0, fan.length).map((r) => r.float)); return () => floats(null); }, [floats, rigs, fan.length]); useEffect(() => { if (!entered) return; rigs.forEach((r, k) => { if (reduced) { r.enter.jump(1); return; } animate(r.enter, 1, { type: "spring", stiffness: 120, damping: 18, mass: 0.9, delay: 0.25 + (k === 0 ? 0 : 0.12 + k * 0.08) }); }); }, [entered, reduced, rigs]); useEffect(() => { if (tilt !== "on") return; let base: number | null = null; const onTilt = (e: DeviceOrientationEvent) => { if (e.gamma == null || e.beta == null) return; base ??= e.beta; scene.px.set(Math.max(-1, Math.min(1, e.gamma / 24))); scene.py.set(Math.max(-1, Math.min(1, (e.beta - base) / 24))); }; window.addEventListener("deviceorientation", onTilt); return () => { window.removeEventListener("deviceorientation", onTilt); scene.px.set(0); scene.py.set(0); }; }, [tilt, scene]); const toggleTilt = async () => { if (on) return setOn(false); const DOE = window.DeviceOrientationEvent as DeviceOrientationWithPermission | undefined; try { if (DOE?.requestPermission && (await DOE.requestPermission()) !== "granted") return; setOn(true); } catch { /* permission refused: the deck stays still */ } }; return (

{[...fan.keys()].reverse().map((k) => { const item = fan[k]; return ( register(`fan:${item.id}`, el)} style={{ aspectRatio: `${item.width} / ${item.height}`, transform: rigs[k].transform, opacity: rigs[k].alpha, zIndex: k === 0 ? 3 : 3 - k }} onClick={(e) => onOpen(k, e.currentTarget, e)} > (e.currentTarget.dataset.loaded = "true")}> ); })}

{tilt !== "none" && ( )}

{items.map((item, i) => (

{item.title}

{item.description && (

{item.description}

)} {item.alt}

))}

); } 70:T4838,"use client"; import { AnimatePresence, animate, motion, motionValue, transformValue, useMotionValue, type MotionValue, type PanInfo, } from "motion/react"; import { useCallback, useEffect, useLayoutEffect, useRef, useState, type CSSProperties } from "react"; import { createPortal } from "react-dom"; import { useFocusTrap } from "./hooks/useFocusTrap"; import { prefersReducedMotion } from "./hooks/useReducedMotion"; import { useScrollLock } from "./hooks/useScrollLock"; import type { PerspectiveCardItem, PerspectiveTheme } from "./types"; /** A rectangle in viewport pixels (a DOMRect works). */ export type RectLike = { x: number; y: number; width: number; height: number }; export type PerspectiveLightboxProps = { items: PerspectiveCardItem[]; /** The open item, or null when closed. */ index: number | null; onIndexChange: (index: number) => void; /** Called once the closing animation has finished, with the item it closed on. */ onClose: (index: number) => void; /** Called as the closing animation starts. */ onCloseStart?: (index: number) => void; /** The clicked card's rect: the photo grows out of it. */ originRect?: RectLike | null; /** Where the photo should fly back to on close (null: it fades). */ returnRect?: (index: number) => RectLike | null; theme?: PerspectiveTheme; accent?: string; /** Defaults to the user's prefers-reduced-motion. */ reducedMotion?: boolean; /** Radius of the cards the photo grows from and returns to. Default 14. */ cardRadius?: number; }; const EASE_SLIDE = [0.32, 0.72, 0, 1] as const; const RADIUS = 18; type Viewport = { w: number; h: number; fine: boolean }; type Geometry = { regionW: number; regionH: number; cy: number; bw: number; bh: number; navX: number; top: number }; type Rel = { dx: number; dy: number; s: number; r: number }; type Nav = { dir: number; swipe: number }; type SlideHandle = { el: HTMLDivElement; x: MotionValue; y: MotionValue; s: MotionValue }; const readViewport = (): Viewport => ({ w: window.innerWidth, h: window.innerHeight, fine: !!window.matchMedia?.("(hover: hover) and (pointer: fine)").matches, }); /** Where the photo sits: centred in a region that leaves room for the top bar, the caption and the thumbnails. */ function geometry(vp: Viewport, item: PerspectiveCardItem, thumbs: boolean): Geometry { const small = vp.w < 640; const top = small ? 64 : 76; const bottom = thumbs ? 96 : small ? 20 : 32; const captionRoom = item.href ? 132 : 96; const avail = Math.max(160, vp.h - top - bottom - captionRoom); const regionH = Math.min(vp.h * 0.78, avail); const regionW = Math.min(vp.w * (small ? 0.92 : 0.88), 1080); const fit = Math.min(regionW / Math.max(1, item.width), regionH / Math.max(1, item.height)); const bw = item.width * fit; const bh = item.height * fit; const cy = top + (avail - regionH) / 2 + regionH / 2; const navX = Math.max(small ? 10 : 16, (vp.w - bw) / 2 - 68); return { regionW, regionH, cy, bw, bh, navX, top }; } function relative(r: RectLike, vp: Viewport, g: Geometry, radius: number): Rel { return { dx: r.x + r.width / 2 - vp.w / 2, dy: r.y + r.height / 2 - g.cy, s: r.width / g.bw, r: radius }; } const IDLE: Rel = { dx: 0, dy: 0, s: 1, r: RADIUS }; const lerp = (a: number, b: number, t: number) => a + (b - a) * t; type Morph = { /** 0 = at `from`, 1 = at `to`. */ t: MotionValue; from: MotionValue; to: MotionValue; bd: MotionValue; ui: MotionValue; img: MotionValue; transform: MotionValue; radius: MotionValue; }; function createMorph(): Morph { const t = motionValue(1); const m = { t, from: motionValue(IDLE), to: motionValue(IDLE), bd: motionValue(0), ui: motionValue(0), img: motionValue(1) } as Morph; const at = () => { const v = t.get(); const a = m.from.get(); const b = m.to.get(); return { dx: lerp(a.dx, b.dx, v), dy: lerp(a.dy, b.dy, v), s: Math.max(0.02, lerp(a.s, b.s, v)), r: lerp(a.r, b.r, v) }; }; // `from` and `to` are set as a morph starts; `t` runs between them. m.transform = transformValue(() => { t.get(); const k = at(); return `translate3d(${k.dx.toFixed(2)}px,${k.dy.toFixed(2)}px,0) scale(${k.s.toFixed(5)})`; }); // The visible radius goes 14 → 18 while the box scales: divide by the scale so corners never smear. m.radius = transformValue(() => { t.get(); const k = at(); return `${(k.r / k.s).toFixed(2)}px`; }); return m; } /** * A cinematic lightbox: the clicked card's photo grows into place, prev/next slide in the direction of travel, * swipe sideways to browse and down to dismiss, thumbnails on desktop, a focus trap, scroll lock and live * announcements. Rendered in a portal on document.body. */ export function PerspectiveLightbox(props: PerspectiveLightboxProps) { if (props.index === null || typeof document === "undefined") return null; return createPortal(