60: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"] 61: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"] 62:T54da,import { useCallback, useEffect, useRef, useState } from "react"; import { useReducedMotion } from "framer-motion"; /** The cards in the file. The wheel repeats them, so any number works. */ const people = [ { name: "Margit Lindqvist", role: "Owner, Lindqvist Upholstery", quote: "I described the shop over the phone. Two days later it was on my screen, down to the brass tacks.", tab: "#e0a422", photo: { src: "https://images.pexels.com/photos/6625914/pexels-photo-6625914.jpeg?auto=compress&cs=tinysrgb&w=400", alt: "Smiling woman with wavy blonde hair in a quilted jacket against a lilac backdrop", tone: "#9c86c4", focus: "50% 22%" }, }, { name: "Felix Brandt", role: "Baker, Brandt and Crumb", quote: "The order form is so plain my grandfather uses it. He is ninety one and he hates everything.", tab: "#2f8f86", photo: { src: "https://images.pexels.com/photos/6345373/pexels-photo-6345373.jpeg?auto=compress&cs=tinysrgb&w=400", alt: "Young man in a striped top tilting his head with his eyes closed against a pale blue backdrop", tone: "#a9c9cf", focus: "60% 78%" }, }, { name: "Amara Diallo", role: "Trainer, Diallo Movement Studio", quote: "Class bookings used to live in my head. Now they live on one page and I get my evenings back.", tab: "#d9543a", photo: { src: "https://images.pexels.com/photos/3535468/pexels-photo-3535468.jpeg?auto=compress&cs=tinysrgb&w=400", alt: "Woman with long blonde braids resting an arm over her head against a pale yellow dotted wall", tone: "#ecd98c", focus: "58% 26%" }, }, { name: "Matteo Greco", role: "Chef, Osteria Greco", quote: "They photographed the ragu like it was a film star. Fully deserved, and the menu reads the same way.", tab: "#3b62c4", photo: { src: "https://images.pexels.com/photos/24876042/pexels-photo-24876042.jpeg?auto=compress&cs=tinysrgb&w=400", alt: "Chef in a yellow jacket, yellow hat and yellow glasses with his arms folded against a dark backdrop", tone: "#2a2014", focus: "50% 20%" }, }, { name: "Rafiq Islam", role: "Director, Northlight Films", quote: "First agency in ten years to send the files, the logins and a thank you note on the same day.", tab: "#7a8a3a", photo: { src: "https://images.pexels.com/photos/1486055/pexels-photo-1486055.jpeg?auto=compress&cs=tinysrgb&w=400", alt: "Man in dark sunglasses crossing his fists in front of his chest against a blue backdrop", tone: "#1d4f9c", focus: "56% 16%" }, }, ]; // Design pixels. Angles are measured from the reading position: 0 faces you, more is further over the top. const N = 15; // cards on the wheel const SW = 520; // scene const SH = 606; const AX = 338; // height of the spindle in the scene const CARD_W = 400; const LEN = 300; // spindle to the top edge of a card const BODY = 262; // the card itself, the rest is the hub const PITCH = 42; // how far above the file you are looking from const BACK_STEP = 4.5; // spacing of the cards waiting behind const FRONT_AT = 104; // where a card that has gone over comes to rest const FRONT_STEP = 6; const GRAVITY = 2100; const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); const mod = (v: number, n: number) => ((v % n) + n) % n; const slot = (r: number) => (r === 0 ? 0 : r <= 7 ? -BACK_STEP * r : FRONT_AT + FRONT_STEP * (N - r - 1)); const TYPE = `"American Typewriter", "Courier New", Courier, monospace`; const svg = (s: string) => `url("data:image/svg+xml,${encodeURIComponent(s)}")`; const FIBRE = svg( ``, ); type Card = { phi: number; v: number; target: number; fall: number }; export default function RotaryCardFile() { const reduce = !!useReducedMotion(); const rootRef = useRef(null); const sceneRef = useRef(null); const cardRefs = useRef<(HTMLDivElement | null)[]>([]); const knobRefs = useRef<(HTMLSpanElement | null)[]>([]); const [cur, setCur] = useState(0); const [narrow, setNarrow] = useState(false); const curRef = useRef(0); const sim = useRef(Array.from({ length: N }, (_, j) => ({ phi: slot(j), v: 0, target: slot(j), fall: 0 }))); const env = useRef({ touched: false, inside: false, visible: true, knob: 0, knobV: 0, wake: () => {}, drag: null as null | { y: number; moved: boolean } }); const paint = useCallback((j: number) => { const el = cardRefs.current[j]; if (!el) return; const c = sim.current[j]; const m = mod(c.phi, 360); const hidden = m > 125 && m < 322; // under the base, on its way round to the back el.style.visibility = hidden ? "hidden" : "visible"; if (hidden) return; el.style.transform = `rotateX(${(-c.phi).toFixed(2)}deg)`; // the face dims as it turns away from the lamp, the back brightens as it comes up to it const over = m > 180 ? 0 : m; el.style.setProperty("--dim", (clamp(over / 95, 0, 1) * 0.5).toFixed(3)); el.style.setProperty("--deep", clamp((over - FRONT_AT) / 24, 0, 1).toFixed(3)); }, []); const step = useCallback( (dir: 1 | -1, byHand: boolean) => { if (byHand) env.current.touched = true; const before = curRef.current; curRef.current = before + dir; setCur(curRef.current); sim.current.forEach((c, j) => { const rOld = mod(j - before, N); const base = slot(mod(j - curRef.current, N)); let t = base + 360 * Math.round((c.target - base) / 360); if (dir > 0 && t < c.target - 0.5) t += 360; if (dir < 0 && t > c.target + 0.5) t -= 360; c.target = t; if ((dir > 0 && rOld === 0) || (dir < 0 && rOld === N - 1)) c.fall = dir; if (reduce) { c.phi = t; c.v = 0; c.fall = 0; paint(j); } }); env.current.wake(); }, [paint, reduce], ); useEffect(() => { const root = rootRef.current; const scene = sceneRef.current; if (!root || !scene) return; const measure = () => { const sc = clamp((root.clientWidth - 8) / SW, 0.55, 1.14); root.style.height = `${Math.round(SH * sc + 84)}px`; scene.style.transform = `translateX(-50%) scale(${sc.toFixed(4)})`; setNarrow(root.clientWidth < 560); }; measure(); const ro = new ResizeObserver(measure); ro.observe(root); sim.current.forEach((_, j) => paint(j)); return () => ro.disconnect(); }, [paint]); useEffect(() => { if (reduce) return; const root = rootRef.current; if (!root) return; const e = env.current; let raf = 0; let last = performance.now(); let wait = 0.5; const tick = (now: number) => { raf = 0; const dt = Math.min(0.03, (now - last) / 1000); last = now; if (!e.touched && !e.inside) { wait -= dt; if (wait < 0) { wait = 3.6; step(1, false); } } let hit = 0; sim.current.forEach((c, j) => { if (c.fall) { // pushed up to the top of its arc by a thumb, then it is gravity's const a = c.phi - PITCH; const push = c.fall * a < 6 ? c.fall * (GRAVITY * 0.92 + 1500) : 0; c.v += (GRAVITY * Math.sin((a * Math.PI) / 180) + push - 0.6 * c.v) * dt; c.phi += c.v * dt; if ((c.fall > 0 && c.phi >= c.target && c.v > 0) || (c.fall < 0 && c.phi <= c.target && c.v < 0)) { c.phi = c.target; if (Math.abs(c.v) > 120) hit = c.v; c.v *= -0.3; if (Math.abs(c.v) < 46) c.fall = 0; } paint(j); } else if (Math.abs(c.target - c.phi) > 0.01 || Math.abs(c.v) > 0.05) { c.v += (190 * (c.target - c.phi) - 21 * c.v) * dt; c.phi += c.v * dt; paint(j); } }); // the pile it lands on gives a little if (hit) { sim.current.forEach((c) => { const m = mod(c.target, 360); if (!c.fall && (hit > 0 ? m >= FRONT_AT && m < 125 : m > 320)) c.v += hit * 0.09; }); } e.knobV += (150 * (curRef.current * 22 - e.knob) - 19 * e.knobV) * dt; e.knob += e.knobV * dt; knobRefs.current.forEach((k) => k && (k.style.backgroundPositionY = `${e.knob.toFixed(1)}px`)); const busy = sim.current.some((c) => c.fall || Math.abs(c.target - c.phi) > 0.01 || Math.abs(c.v) > 0.05) || Math.abs(e.knobV) > 0.2; if (e.visible && !document.hidden && (busy || (!e.touched && !e.inside))) raf = requestAnimationFrame(tick); }; const start = () => { if (!raf && e.visible && !document.hidden) { last = performance.now(); raf = requestAnimationFrame(tick); } }; e.wake = start; const io = new IntersectionObserver(([en]) => { e.visible = en.isIntersecting; start(); }); io.observe(root); document.addEventListener("visibilitychange", start); start(); return () => { cancelAnimationFrame(raf); io.disconnect(); document.removeEventListener("visibilitychange", start); e.wake = () => {}; }; }, [paint, reduce, step]); // flick the cards: pull down to send one over, push up to bring one back const onDown = (ev: React.PointerEvent) => { if (ev.button !== 0) return; env.current.drag = { y: ev.clientY, moved: false }; ev.currentTarget.setPointerCapture(ev.pointerId); }; const onDrag = (ev: React.PointerEvent) => { const d = env.current.drag; if (!d) return; const dy = ev.clientY - d.y; if (Math.abs(dy) > 34) { step(dy > 0 ? 1 : -1, true); d.y = ev.clientY; d.moved = true; } }; const onUp = () => { const d = env.current.drag; env.current.drag = null; if (d && !d.moved) step(1, true); }; const now = people[mod(cur, people.length)]; const knob = (side: "left" | "right") => ( ); return (

{/* shadow on the table */}

{/* top of the base running back to the posts */}

{/* posts and the bosses the spindle runs in */} {[-1, 1].map((sd) => ( ))} {knob("left")} {knob("right")} {/* the wheel */}

(env.current.drag = null)} onPointerEnter={() => (env.current.inside = true)} onPointerLeave={() => (env.current.inside = false)}>

{/* hub */}

{[-120, 84].map((x) => ( ))}

{sim.current.map((_, j) => { const p = people[mod(j, people.length)]; const tabbed = j % 2 === 0; const tabX = 30 + ((j * 97) % 250); const tab = ( {p.name.split(" ")[1][0]} ); return (

void (cardRefs.current[j] = el)} className="absolute" style={{ left: -CARD_W / 2, top: -LEN, width: CARD_W, height: LEN, transformOrigin: "50% 100%", transformStyle: "preserve-3d", transform: `rotateX(${-slot(j)}deg)`, visibility: slot(j) > 125 ? "hidden" : "visible" }}> {/* face */}

{tabbed && tab} {p.name.split(" ")[1][0]}

{p.quote}

{p.name}

{p.role}

{[92, 296].map((x) => ( ))}

{/* back */}

{tabbed && }

); })}

{/* front of the base, which the cards that have gone over disappear behind */}

Card file Turn a knob or flick the cards

{now.quote}

{now.name}, {now.role}

); } 5f:["$","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"}]]}]}]]}],["$","$L60",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L61",null,{"files":[{"path":"components/we-inc/rotary-card-file-testimonials-with-typed-quote-cards-that-tip-over-the-spindle-and-land-with-a-bounce.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]