64: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"] 65: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"] 66:T3553,import { useEffect, useRef, useState } from "react"; import { motion, useMotionValue, useReducedMotion } from "framer-motion"; // One pleat per link, left to right. Five to seven short words suit the fan. const links = ["Home", "Work", "Prints", "Journal", "About", "Contact"]; const SPREAD = 150; // degrees from the first edge of the open fan to the last const MAX_R = 320; // length of a stick in pixels on a wide screen const DYE = "#d8431b"; // the colour soaked into the paper near the sticks const PAPER = "#f4ead6"; const rad = (d: number) => (d * Math.PI) / 180; export default function PaperFoldingFanMenu() { const reduce = useReducedMotion(); const stage = useRef(null); const [R, setR] = useState(MAX_R); const [open, setOpen] = useState(false); // it arrives folded and opens itself a moment later const [active, setActive] = useState(3); const [lifted, setLifted] = useState(null); const [wave, setWave] = useState(null); const tilt = useMotionValue(0); const tassel = useMotionValue(0); const world = useRef({ lean: 0, kick: 0, touched: -1e9 }); const step = SPREAD / links.length, half = step / 2; const bw = 2 * R * Math.sin(rad(half)) + 1; // width of one pleat at the rim const fanW = 2 * R * Math.sin(rad(SPREAD / 2)) + 28; const top = Math.round(R * 0.07) + 12, drop = Math.round(R * 0.55) + 8; const small = R < 230; useEffect(() => { const el = stage.current; if (!el) return; const fit = () => setR(Math.max(120, Math.min(MAX_R, Math.floor((el.clientWidth - 30) / (2 * Math.sin(rad(SPREAD / 2))))))); fit(); const ro = new ResizeObserver(fit); ro.observe(el); return () => ro.disconnect(); }, []); useEffect(() => { if (reduce) { setOpen(true); return; } const id = window.setTimeout(() => setOpen(true), 180); return () => window.clearTimeout(id); }, [reduce]); // The fan breathes a little, leans toward the pointer, and the tassel hangs from it with real swing. useEffect(() => { if (reduce) { tilt.set(0); tassel.set(0); return; } const el = stage.current; if (!el) return; let raf = 0, last = 0, t0 = 0, seen = true, lean = 0, phi = 0, vel = 0, nextWave = 3600; const timers: number[] = []; const frame = (now: number) => { raf = 0; if (!t0) { t0 = now; last = now; } const dt = Math.min(0.033, (now - last) / 1000); last = now; const t = now - t0, w = world.current; lean += (w.lean - lean) * Math.min(1, dt * 5); const fan = 1.5 * Math.sin(t / 1700) + lean; vel += w.kick; w.kick = 0; vel += (-46 * (phi + fan) - 2.1 * vel) * dt; phi += vel * dt; tilt.set(fan); tassel.set(phi); if (now - w.touched > 5200 && t > nextWave) { nextWave = t + 5200; links.forEach((_, i) => timers.push(window.setTimeout(() => setWave(i), i * 95))); timers.push(window.setTimeout(() => setWave(null), links.length * 95 + 130)); } if (seen && !document.hidden) raf = requestAnimationFrame(frame); }; const wake = () => { if (!raf) { last = performance.now(); raf = requestAnimationFrame(frame); } }; wake(); const onMove = (e: PointerEvent) => { const b = el.getBoundingClientRect(); world.current.lean = Math.max(-1, Math.min(1, (e.clientX - b.left - b.width / 2) / (b.width / 2))) * 3.2; world.current.touched = performance.now(); }; const onLeave = () => { world.current.lean = 0; }; el.addEventListener("pointermove", onMove); el.addEventListener("pointerleave", onLeave); const io = new IntersectionObserver(([entry]) => { seen = entry.isIntersecting; if (seen) wake(); }); io.observe(el); const onVis = () => { if (!document.hidden) wake(); }; document.addEventListener("visibilitychange", onVis); return () => { cancelAnimationFrame(raf); timers.forEach((id) => window.clearTimeout(id)); el.removeEventListener("pointermove", onMove); el.removeEventListener("pointerleave", onLeave); io.disconnect(); document.removeEventListener("visibilitychange", onVis); }; }, [reduce, tilt, tassel]); const touch = (kick: number) => { world.current.touched = performance.now(); world.current.kick += kick; }; const spring = (i: number) => (reduce ? { duration: 0 } : { type: "spring" as const, stiffness: 150, damping: 13.5, mass: 0.9, delay: (open ? i : links.length - 1 - i) * 0.028 }); const quick = reduce ? { duration: 0 } : { type: "spring" as const, stiffness: 420, damping: 22 }; // The paper of one pleat: a wedge from the sticks to the rim, peaked where it is glued to its stick. const sinA = Math.sin(rad(half)), cosA = Math.cos(rad(half)), r0 = R * 0.4; const wedge = `polygon(0px ${(R * (1 - cosA)).toFixed(1)}px, ${(bw / 2).toFixed(1)}px 0px, ${bw.toFixed(1)}px ${(R * (1 - cosA)).toFixed(1)}px, ${(bw / 2 + r0 * sinA).toFixed(1)}px ${(R - r0 * cosA).toFixed(1)}px, ${(bw / 2).toFixed(1)}px ${(R - r0 * 0.985).toFixed(1)}px, ${(bw / 2 - r0 * sinA).toFixed(1)}px ${(R - r0 * cosA).toFixed(1)}px)`; const px = (f: number) => `${(R * f).toFixed(1)}px`; const paper = [ `linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.05) 38%, rgba(90,40,10,0.04) 49.3%, rgba(70,28,8,0.24) 50.2%, rgba(70,28,8,0.1) 70%, rgba(70,28,8,0.0) 100%)`, `radial-gradient(circle at 50% 100%, transparent ${px(0.928)}, rgba(38,26,18,0.8) ${px(0.93)}, rgba(38,26,18,0.8) ${px(0.934)}, transparent ${px(0.936)}, transparent ${px(0.946)}, rgba(38,26,18,0.55) ${px(0.948)}, rgba(38,26,18,0.55) ${px(0.95)}, transparent ${px(0.952)}, transparent ${px(0.972)}, #b98a2e ${px(0.975)}, #ecd08a ${px(0.99)}, #a87a22 ${px(1.01)})`, `radial-gradient(circle at 50% 100%, #a92c0e ${px(0.4)}, ${DYE} ${px(0.47)}, #e8763c ${px(0.58)}, #f1c79a ${px(0.69)}, ${PAPER} ${px(0.79)})`, ].join(", "); const lacquer = "linear-gradient(90deg, #060504 0%, #2b241d 30%, #6b5d4d 44%, #1b1611 58%, #050403 100%)"; return (

0 ? "drop-shadow(0 3px 5px rgba(0,0,0,0.42))" : undefined }} initial={false} animate={{ y: -up }} transition={quick}> { e.preventDefault(); setActive(i); touch(i < links.length / 2 ? 34 : -34); }} onPointerEnter={() => { setLifted(i); world.current.touched = performance.now(); }} onPointerLeave={() => setLifted((v) => (v === i ? null : v))} onFocus={() => { setLifted(i); world.current.touched = performance.now(); }} onBlur={() => setLifted((v) => (v === i ? null : v))} className="group absolute inset-0 block outline-none" style={{ clipPath: wedge, transformOrigin: "50% 100%", backgroundColor: PAPER, backgroundImage: paper }} initial={false} animate={{ scaleX: open ? 1 : 0.1 }} transition={spring(i)} > {edge !== 0 && ( )}

{/* Silk cord and tassel, hung from the rivet. */}

{open ? `Open at ${links[active]}. Press the rivet to fold it away.` : "Folded. Press the rivet to open it."}

); } 63:["$","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"}]]}]}]]}],["$","$L64",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L65",null,{"files":[{"path":"components/we-inc/paper-folding-fan-menu-that-unfolds-from-a-brass-rivet-with-links-on-the-pleats.tsx","content":"$66","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]