61: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"] 62: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"] 63:T52ff,import { useCallback, useEffect, useRef, useState } from "react"; import { motion, useReducedMotion, useSpring, useTransform } from "framer-motion"; import type { MotionValue } from "framer-motion"; /** The pile, bottom first. `look` picks one of the masthead treatments in `Masthead`. */ const issues = [ { name: "Loud", no: "No. 14", season: "Autumn", line: "The colour issue", second: "Forty pages without a single neutral", look: "block", ink: "#ffffff", spine: "#c2185b", photo: "https://images.pexels.com/photos/11026096/pexels-photo-11026096.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Dancer in a lime top and blue trousers stretching her arms up against a pink wall", tone: "#b81d63", focus: "30% 30%" }, { name: "Halide", no: "No. 31", season: "Winter", line: "Portraits by one lamp", second: "A light, a wall and an afternoon", look: "italic", ink: "#fff3d6", spine: "#2f3c41", photo: "https://images.pexels.com/photos/31569208/pexels-photo-31569208.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Man in round sunglasses and a black roll neck in front of a glowing orange disc", tone: "#56676a", focus: "50% 30%" }, { name: "Tangent", no: "No. 08", season: "Spring", line: "One figure, one field of blue", second: "Notes on standing still", look: "mono", ink: "#ffffff", spine: "#0a2fd0", photo: "https://images.pexels.com/photos/13767168/pexels-photo-13767168.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Woman in black wearing white sunglasses standing side on against a deep blue backdrop", tone: "#0832dc", focus: "50% 40%" }, { name: "Pollen", no: "No. 22", season: "Summer", line: "Orange, all the way down", second: "Dressing for the hottest week", look: "serif", ink: "#1a0f08", spine: "#ef6a10", photo: "https://images.pexels.com/photos/18506138/pexels-photo-18506138.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Woman in a black hat and top and orange trousers sitting against an orange studio wall", tone: "#f2700f", focus: "40% 30%" }, { name: "Overcast", no: "No. 05", season: "Autumn", line: "After dark, in violet", second: "Shirts worn two sizes up", look: "wide", ink: "#ffffff", spine: "#7a1fb0", photo: "https://images.pexels.com/photos/11813320/pexels-photo-11813320.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Model with a short bob and an oversized shirt lit red against a purple and pink glow", tone: "#a41ec0", focus: "50% 30%" }, { name: "Marrow", no: "No. 17", season: "Spring", line: "Everything you own, at once", second: "The wardrobe edit", look: "stack", ink: "#f1ee4a", spine: "#4d2a86", photo: "https://images.pexels.com/photos/11059420/pexels-photo-11059420.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Woman in a lime blazer and red glasses holding an armful of bright clothes against a purple wall", tone: "#55308e", focus: "50% 30%" }, ]; type Issue = (typeof issues)[number]; // Sizes in the scene's own pixels. The table is tipped back and turned, and every issue lies on it. const W = 250; const H = 330; const T = 7; // thickness of one issue const TIP = 46; const TURN = -14; const LIFT = 190; // how high the chosen issue is held const FACE = 0.86; // 1 would hold it square to the camera const WIDE = { W: 1000, H: 690, cx: 500, cy: 420, step: 128, sweep: 6.5 }; const SMALL = { W: 620, H: 900, cx: 310, cy: 470, step: 62, sweep: 5 }; type Layout = typeof WIDE; const TABLE = "#141217"; const grain = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E\")"; const pages = "repeating-linear-gradient(0deg, #fbf9f4 0 1px, #c9c3b6 1px 1.7px)"; const jitter = [ { x: -6, y: 5, r: -3.5 }, { x: 7, y: -4, r: 2.4 }, { x: -3, y: -7, r: -1.2 }, { x: 5, y: 6, r: 4.1 }, { x: -8, y: 1, r: -2.2 }, { x: 2, y: -2, r: 1.1 }, ]; const spin = (x: number, y: number, deg: number) => { const a = (deg * Math.PI) / 180; return [x * Math.cos(a) - y * Math.sin(a), x * Math.sin(a) + y * Math.cos(a)]; }; /** Where issue i rests for a given amount of fan (0 piled, 1 spread) and whether it is the one held up. */ function place(i: number, fan: number, held: boolean, L: Layout) { const mid = (issues.length - 1) / 2; const j = jitter[i % jitter.length]; const lean = (Math.asin((T + 0.8) / L.step) * 180) / Math.PI; if (held) return { x: 0, y: 58, z: LIFT, r: -TURN + 2, tilt: 0, lift: -TIP * FACE }; const k = i - mid; // the fan runs level on screen, so its line is turned back against the table's own turn const [fx, fy] = spin(k * L.step, k * k * 5 - 14, -TURN); return { x: j.x * (1 - fan) + fx * fan, y: j.y * (1 - fan) + fy * fan, z: i * (T + 0.6) * (1 - fan) + (i === 0 ? 0 : (W / 2) * Math.sin((lean * Math.PI) / 180) * fan), r: j.r * (1 - fan) + k * L.sweep * fan, tilt: i === 0 ? 0 : lean * fan, lift: 0, }; } function Masthead({ m }: { m: Issue }) { const c = { color: m.ink }; if (m.look === "block") return {m.name}; if (m.look === "italic") return {m.name}; if (m.look === "mono") return ( {m.name} ); if (m.look === "serif") return {m.name}; if (m.look === "wide") return {m.name}; return {m.name}; } function Magazine({ m, i, L, fan, held, covered, reduce, rx, rz, onPress }: { m: Issue; i: number; L: Layout; fan: number; held: boolean; covered: boolean; reduce: boolean; rx: MotionValue; rz: MotionValue; onPress: () => void }) { const to = place(i, fan, held, L); // issues higher in the pile are on looser springs, so they trail the ones beneath const cfg = { stiffness: 190 - i * 17, damping: 19 - i * 0.6, mass: 1 }; const sx = useSpring(to.x, cfg); const sy = useSpring(to.y, cfg); const sz = useSpring(to.z, { stiffness: 150 - i * 8, damping: 15, mass: 1 }); const sr = useSpring(to.r, cfg); const st = useSpring(to.tilt, cfg); const sl = useSpring(to.lift, { stiffness: 110, damping: 13, mass: 1 }); useEffect(() => { const pairs = [[sx, to.x], [sy, to.y], [sz, to.z], [sr, to.r], [st, to.tilt], [sl, to.lift]] as const; pairs.forEach(([s, v]) => (reduce ? s.jump(v) : s.set(v))); }, [reduce, sl, sr, st, sx, sy, sz, to.lift, to.r, to.tilt, to.x, to.y, to.z]); const transform = useTransform([sx, sy, sz, sr, st, sl], ([x, y, z, r, t, l]: number[]) => `translate3d(${x.toFixed(2)}px, ${y.toFixed(2)}px, ${z.toFixed(2)}px) rotateZ(${r.toFixed(2)}deg) rotateY(${t.toFixed(2)}deg) rotateX(${l.toFixed(2)}deg)`); const shadow = useTransform([sx, sy, sz, sr], ([x, y, z, r]: number[]) => `translate3d(${(x + z * 0.3).toFixed(1)}px, ${(y + z * 0.46).toFixed(1)}px, 0.4px) rotateZ(${r.toFixed(2)}deg) scale(${(1 + z / 700).toFixed(3)})`); const shadowFade = useTransform(sz, (z) => 0.62 - Math.min(0.34, z / 520)); const gloss = useTransform(sl, (l) => `${(120 + l * 3.4).toFixed(1)}% 0`); // where the next issue's bound edge crosses this cover, in this cover's own pixels const k = i - (issues.length - 1) / 2; const [dx, dy] = spin(L.step, 5 * (2 * k + 1), -TURN - k * L.sweep); const edge = [W / 2 + dx - (W / 2) * Math.cos((L.sweep * Math.PI) / 180), H / 2 + dy - (W / 2) * Math.sin((L.sweep * Math.PI) / 180)]; const base = { left: L.cx - W / 2, top: L.cy - H / 2, width: W, height: H } as const; // a held issue is painted over the rest, and keeps that place until it has landed again const [above, setAbove] = useState(held); useEffect(() => { if (held) { setAbove(true); return; } const t = window.setTimeout(() => setAbove(false), reduce ? 0 : 520); return () => window.clearTimeout(t); }, [held, reduce]); // every issue is its own little 3D world on the same tipped table, stacked in paint order return (

{/* underside, then the three cut edges and the glued spine */}

{/* cover */}

); } export default function MagazineStackFanGallery() { const reduce = !!useReducedMotion(); const wrapRef = useRef(null); const sceneRef = useRef(null); const [small, setSmall] = useState(false); const [fan, setFan] = useState(1); const [held, setHeld] = useState(3); const idle = useRef({ paused: false, touched: false, scale: 1 }); const drag = useRef({ on: false, x: 0, from: 1, moved: 0 }); const L = small ? SMALL : WIDE; const px = useSpring(0, { stiffness: 50, damping: 14 }); const py = useSpring(0, { stiffness: 50, damping: 14 }); const rz = useTransform(px, (v) => TURN + v * 3.2); const rx = useTransform(py, (v) => TIP - v * 2.4); const press = useCallback( (i: number) => { idle.current.touched = true; if (drag.current.moved > 8) return; if (fan < 0.5) { setFan(1); return; } setHeld((h) => (h === i ? null : i)); }, [fan], ); // self-playing demo: put the held issue down, square the pile, fan it again, pick up another useEffect(() => { if (reduce) return; let step = 0; let next = 3; let timer = 0; const plan = [3500, 1100, 1700, 1300]; const tick = () => { const s = idle.current; if (s.touched) return; if (!s.paused && !document.hidden) { const phase = step % 4; if (phase === 0) setHeld(null); if (phase === 1) setFan(0); if (phase === 2) setFan(1); if (phase === 3) { next = (next + 4) % issues.length; setHeld(next); } step += 1; } timer = window.setTimeout(tick, plan[step % 4]); }; timer = window.setTimeout(tick, plan[0]); return () => window.clearTimeout(timer); }, [reduce]); useEffect(() => { const wrap = wrapRef.current; const scene = sceneRef.current; if (!wrap || !scene) return; const measure = () => { const isSmall = wrap.clientWidth < 700; const lay = isSmall ? SMALL : WIDE; setSmall(isSmall); const sc = Math.min(1.1, wrap.clientWidth / lay.W); idle.current.scale = sc; wrap.style.height = `${Math.round(lay.H * sc)}px`; scene.style.transform = `translateX(-50%) scale(${sc.toFixed(4)})`; }; measure(); const ro = new ResizeObserver(measure); ro.observe(wrap); return () => ro.disconnect(); }, []); const shown = held === null ? null : issues[held]; const piled = fan < 0.5; return (

{ const d = drag.current; if (d.on) { const dx = e.clientX - d.x; d.moved = Math.max(d.moved, Math.abs(dx)); if (d.moved > 8) { setHeld(null); setFan(Math.min(1, Math.max(0, d.from + dx / (360 * idle.current.scale)))); } } if (reduce || e.pointerType === "touch") return; const r = e.currentTarget.getBoundingClientRect(); px.set(((e.clientX - r.left) / r.width) * 2 - 1); py.set(((e.clientY - r.top) / r.height) * 2 - 1); }} onPointerDown={(e) => { if (e.button !== 0) return; idle.current.touched = true; drag.current = { on: true, x: e.clientX, from: fan, moved: 0 }; }} onPointerUp={() => { const d = drag.current; if (d.on && d.moved > 8) setFan((f) => (f > 0.5 ? 1 : 0)); d.on = false; // the press that ends a drag still reaches the cover under it: let that one pass, then forget the drag window.setTimeout(() => (d.moved = 0), 0); }} onPointerCancel={() => (drag.current.on = false)} onPointerEnter={() => (idle.current.paused = true)} onPointerLeave={() => { idle.current.paused = false; drag.current.on = false; px.set(0); py.set(0); }} onFocus={() => (idle.current.paused = true)} onBlur={() => (idle.current.paused = false)} className="relative mx-auto w-full touch-pan-y overflow-hidden" style={{ height: WIDE.H }} >

{issues.map((m, i) => ( press(i)} /> ))}

{shown ? `${shown.name} ${shown.no} / ${shown.line}` : piled ? `${issues.length} issues in the pile` : `${issues.length} issues on the table`} {piled ? "Press the pile or drag right to fan it" : shown ? "Press it again to put it down" : "Press a cover to pick it up"}

); } 60:["$","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"}]]}]}]]}],["$","$L61",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"components/we-inc/magazine-stack-gallery-that-fans-out-across-the-table-and-lifts-the-chosen-issue-to-face-you.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]