62: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"] 63: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"] 64:T4331,import { useCallback, useEffect, useRef, useState } from "react"; import { useReducedMotion } from "framer-motion"; /** One leaf per backdrop paper: the colour chip, its name and roll code, and a portrait shot on it. Top of the deck first. */ const leaves = [ { name: "Marigold", code: "BP 114", chip: "#f5a00c", src: "https://images.pexels.com/photos/11493115/pexels-photo-11493115.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Woman in a white top and black trousers sitting on a step ladder against an orange backdrop", focus: "38% 50%" }, { name: "Fern", code: "BP 207", chip: "#3d8a3c", src: "https://images.pexels.com/photos/12104261/pexels-photo-12104261.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Man in black with a silver chain standing against a green backdrop", focus: "55% 50%" }, { name: "Poppy", code: "BP 031", chip: "#e0362c", src: "https://images.pexels.com/photos/32174989/pexels-photo-32174989.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Woman holding out a pleated metallic skirt against a red backdrop", focus: "52% 50%" }, { name: "Lagoon", code: "BP 162", chip: "#12aebf", src: "https://images.pexels.com/photos/33231184/pexels-photo-33231184.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Woman in yellow heart shaped sunglasses with her arms raised against a turquoise backdrop", focus: "55% 50%" }, { name: "Cobalt", code: "BP 188", chip: "#1d50b6", src: "https://images.pexels.com/photos/30755172/pexels-photo-30755172.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Person in pale blue crouching against a deep blue backdrop", focus: "45% 50%" }, { name: "Canary", code: "BP 102", chip: "#fdd31d", src: "https://images.pexels.com/photos/35511773/pexels-photo-35511773.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Woman in a grey check blazer leaning on a bright yellow wall", focus: "62% 50%" }, { name: "Apricot", code: "BP 046", chip: "#f08a55", src: "https://images.pexels.com/photos/6923372/pexels-photo-6923372.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Woman in a ruffled orange outfit and red sunglasses against an apricot backdrop", focus: "55% 50%" }, { name: "Emerald", code: "BP 213", chip: "#0d8748", src: "https://images.pexels.com/photos/32174358/pexels-photo-32174358.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Woman in a teal suit and pink heels standing beside green curtains", focus: "42% 50%" }, { name: "Pine", code: "BP 229", chip: "#1e4a47", src: "https://images.pexels.com/photos/4823731/pexels-photo-4823731.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Woman in a brown blazer standing in front of a dark green painted backdrop", focus: "50% 50%" }, ]; const N = leaves.length; // Design pixels; the scene is scaled as one piece to fit narrow screens. const SCENE_W = 880; const SCENE_H = 566; const PX = SCENE_W / 2; // the pin const PY = 490; const LW = 124; // leaf width const LH = 470; // leaf length const PIN = 440; // distance from the top of a leaf to its hole const GAP = 36; // degrees the leaf above the open one is pushed aside const HOLD_MS = 2300; const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); const ease = (t: number) => t * t * (3 - 2 * t); /** Resting angle of a leaf that is `d` places from the open one (negative: above it, swung left). */ function angleFor(d: number) { if (d < 0) { const m = -d; if (m <= 1) return -GAP * ease(m); return -(GAP + 38 * (1 - Math.exp(-(m - 1) * 0.38))); } return 60 * (1 - Math.exp(-d * 0.34)); } export default function RivetedSwatchDeck() { const reduce = useReducedMotion(); const wrapRef = useRef(null); const sceneRef = useRef(null); const deckRef = useRef(null); const leafRefs = useRef<(HTMLDivElement | null)[]>([]); const sheenRefs = useRef<(HTMLDivElement | null)[]>([]); const [active, setActive] = useState(4); const sim = useRef({ c: 4, cv: 0, target: 4, a: new Array(N).fill(0), v: new Array(N).fill(0), tx: 0, ty: 0, px: 0, py: 0, dragging: false, moved: 0, lastX: 0, lastT: 0, scale: 1, paused: false, nextAuto: 0, active: 4, }); const go = useCallback((to: number) => { const s = sim.current; s.target = clamp(to, 0, N - 1); s.nextAuto = performance.now() + HOLD_MS * 2; }, []); useEffect(() => { const wrap = wrapRef.current; const scene = sceneRef.current; const deck = deckRef.current; if (!wrap || !scene || !deck) return; const s = sim.current; let raf = 0; let visible = true; let last = performance.now(); s.nextAuto = last + 2400; const measure = () => { const sc = clamp(wrap.clientWidth / 800, 0.56, 1); s.scale = sc; wrap.style.height = `${Math.round(SCENE_H * sc)}px`; scene.style.transform = `translateX(-50%) scale(${sc.toFixed(4)})`; }; measure(); const ro = new ResizeObserver(measure); ro.observe(wrap); const tick = (now: number) => { const dt = Math.min(0.033, (now - last) / 1000); last = now; if (reduce) { s.c = s.target; s.cv = 0; } else if (!s.dragging) { const acc = 34 * (s.target - s.c) - 10.5 * s.cv; s.cv += acc * dt; s.c += s.cv * dt; if (!s.paused && now > s.nextAuto) { // thumb through to the bottom leaf, then let the whole deck sweep back s.target = s.target >= N - 1 ? 0 : s.target + 1; s.nextAuto = now + (s.target === 0 ? HOLD_MS * 1.5 : HOLD_MS); } } // keep the fan centred over the pin whichever leaf is open const bias = (0.5 - s.c / (N - 1)) * -14 + 3; const sway = reduce ? 0 : Math.sin(now / 1400) * 0.7; for (let i = 0; i < N; i++) { const want = angleFor(i - s.c) + bias + sway * (1 + Math.abs(i - s.c) * 0.25); if (reduce) { s.a[i] = want; s.v[i] = 0; } else { // leaves further from the open one are looser, so they trail behind it const k = 150 - Math.min(5, Math.abs(i - s.c)) * 13; const acc = k * (want - s.a[i]) - 15 * s.v[i]; s.v[i] += acc * dt; s.a[i] += s.v[i] * dt; } const el = leafRefs.current[i]; if (!el) continue; const a = s.a[i]; const r = (a * Math.PI) / 180; const lift = clamp(Math.abs(s.v[i]) * 0.06, 0, 10); el.style.transform = `translateZ(${((N - i) * 1.6 + lift).toFixed(2)}px) rotate(${a.toFixed(3)}deg)`; // the light stays put while the leaf turns, so the shadow is counter-rotated const sx = 5 + lift * 0.6; const sy = 9 + lift; const lx = sx * Math.cos(r) + sy * Math.sin(r); const ly = -sx * Math.sin(r) + sy * Math.cos(r); el.style.boxShadow = `0 0 0 0.5px rgba(40,34,24,0.22), ${lx.toFixed(1)}px ${ly.toFixed(1)}px ${(16 + lift * 2).toFixed(0)}px rgba(30,28,40,0.2), ${(lx * 0.2).toFixed(1)}px ${(ly * 0.2).toFixed(1)}px 2px rgba(30,28,40,0.22)`; const sh = sheenRefs.current[i]; if (sh) sh.style.backgroundPosition = `${(50 + a * 1.7 + s.px * 30).toFixed(1)}% 0`; } s.px += (s.tx - s.px) * Math.min(1, dt * 6); s.py += (s.ty - s.py) * Math.min(1, dt * 6); deck.style.transform = `rotateX(${(15 - s.py * 5).toFixed(2)}deg) rotateY(${(s.px * 7).toFixed(2)}deg)`; const a = clamp(Math.round(s.c), 0, N - 1); if (a !== s.active) { s.active = a; setActive(a); } if (visible) raf = requestAnimationFrame(tick); }; const io = new IntersectionObserver(([e]) => { const was = visible; visible = e.isIntersecting; if (visible && !was) { last = performance.now(); raf = requestAnimationFrame(tick); } }); io.observe(wrap); raf = requestAnimationFrame(tick); const down = (e: PointerEvent) => { if (e.button !== 0) return; s.dragging = true; s.moved = 0; s.lastX = e.clientX; s.lastT = performance.now(); s.cv = 0; wrap.setPointerCapture(e.pointerId); }; const move = (e: PointerEvent) => { const rect = wrap.getBoundingClientRect(); if (e.pointerType === "mouse" && !reduce) { s.tx = clamp((e.clientX - rect.left) / rect.width - 0.5, -0.5, 0.5) * 2; s.ty = clamp((e.clientY - rect.top) / rect.height - 0.5, -0.5, 0.5) * 2; } if (!s.dragging) return; const now = performance.now(); const dx = e.clientX - s.lastX; const dc = dx / (120 * s.scale); s.c = clamp(s.c + dc, -0.35, N - 0.65); s.moved += Math.abs(dx); const dt = Math.max(1, now - s.lastT) / 1000; s.cv = s.cv * 0.6 + (dc / dt) * 0.4; s.lastX = e.clientX; s.lastT = now; }; const up = (e: PointerEvent) => { if (!s.dragging) return; s.dragging = false; if (s.moved < 6) { const hit = (document.elementFromPoint(e.clientX, e.clientY) as HTMLElement | null)?.closest("[data-leaf]"); if (hit?.dataset.leaf) s.target = Number(hit.dataset.leaf); } else { s.target = clamp(Math.round(s.c + clamp(s.cv, -8, 8) * 0.2), 0, N - 1); } s.nextAuto = performance.now() + HOLD_MS * 2; }; const leave = () => { s.tx = 0; s.ty = 0; }; wrap.addEventListener("pointerdown", down); wrap.addEventListener("pointermove", move); wrap.addEventListener("pointerup", up); wrap.addEventListener("pointercancel", up); wrap.addEventListener("pointerleave", leave); return () => { cancelAnimationFrame(raf); ro.disconnect(); io.disconnect(); wrap.removeEventListener("pointerdown", down); wrap.removeEventListener("pointermove", move); wrap.removeEventListener("pointerup", up); wrap.removeEventListener("pointercancel", up); wrap.removeEventListener("pointerleave", leave); }; }, [reduce]); const onKey = (e: React.KeyboardEvent) => { const t = sim.current.target; if (e.key === "ArrowRight" || e.key === "ArrowDown") { e.preventDefault(); go(t + 1); } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") { e.preventDefault(); go(t - 1); } else if (e.key === "Home") { e.preventDefault(); go(0); } else if (e.key === "End") { e.preventDefault(); go(N - 1); } }; const pause = (v: boolean) => () => { sim.current.paused = v; if (!v) sim.current.nextAuto = performance.now() + HOLD_MS; }; const btn = "grid h-10 w-10 place-items-center rounded-full text-slate-700 transition hover:bg-slate-900/10 disabled:opacity-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-900"; const cur = leaves[active]; return (

{/* soft pool of shadow on the table under the pin */}

{leaves.map((l, i) => (

{ leafRefs.current[i] = el; }} data-leaf={i} className="absolute rounded-[13px] bg-[#fbf9f4]" style={{ left: PX - LW / 2, top: PY - PIN, width: LW, height: LH, transformOrigin: `${LW / 2}px ${PIN}px`, zIndex: N - i, willChange: "transform" }} >

{/* a band of gloss that slides across the laminate as the leaf turns */}

{ sheenRefs.current[i] = el; }} aria-hidden="true" className="absolute inset-0" style={{ backgroundImage: "linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0) 65%)", backgroundSize: "300% 100%", backgroundPosition: "50% 0" }} />

{l.name}

{l.code}

2.72 m roll
Matte

{/* edge highlight so each leaf reads as a slip of card with thickness */} ))} {/* the brass pin that holds the deck */}

); } 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"framer-motion"}]]}]}]]}],["$","$L62",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L63",null,{"files":[{"path":"components/we-inc/riveted-swatch-deck-photo-carousel-that-fans-portraits-round-a-brass-pin.tsx","content":"$64","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]