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:T76d1,import { useCallback, useEffect, useRef, useState } from "react"; import { animate, motion, useMotionValue, useReducedMotion, useSpring, useTransform } from "framer-motion"; import type { MotionValue } from "framer-motion"; /** The set on the shelf. One volume per chapter: change words, cloth, foil and plate here. */ const series = "The Studio Handbook"; const volumes = [ { no: "01", title: "Red Ground", line: "Choosing one colour and letting it fill the frame.", cloth: "#1f5759", foil: "gold", end: "#d8452c", t: 52, h: 372, d: 244, photo: "https://images.pexels.com/photos/13023364/pexels-photo-13023364.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "A pale flower in a blue glass bottle against a red wall", tone: "#c9483b", focus: "50% 40%" }, { no: "02", title: "Tall Grasses", line: "Dried stems, a low table and a long afternoon.", cloth: "#d8cdb3", foil: "ink", end: "#a9502a", t: 42, h: 340, d: 232, photo: "https://images.pexels.com/photos/9956158/pexels-photo-9956158.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Dried foxtail lilies standing on a white table in front of a burnt orange wall", tone: "#7a3513", focus: "50% 50%" }, { no: "03", title: "Yellow Room", line: "Still life with glass, oranges and one hard light.", cloth: "#1e2947", foil: "gold", end: "#e2b621", t: 62, h: 392, d: 250, photo: "https://images.pexels.com/photos/39780460/pexels-photo-39780460.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Glass vase of dried flowers and orange balls on a mirrored table against a yellow wall", tone: "#c9a514", focus: "50% 55%" }, { no: "04", title: "Hard Shadow", line: "Buildings at noon, when the sun draws the lines.", cloth: "#c7932a", foil: "ink", end: "#2c55a6", t: 46, h: 356, d: 238, photo: "https://images.pexels.com/photos/3068581/pexels-photo-3068581.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Yellow building wall cut by a deep black diagonal shadow", tone: "#e0a01c", focus: "40% 50%" }, { no: "05", title: "Blue Door", line: "White walls, a strip of sky and a painted door.", cloth: "#b5502e", foil: "pearl", end: "#3c7ccb", t: 68, h: 384, d: 250, photo: "https://images.pexels.com/photos/16615603/pexels-photo-16615603.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "White and blue modern facade with an orange door under a clear sky", tone: "#7fb2e6", focus: "60% 50%" }, { no: "06", title: "Night Vase", line: "One lamp, a dark room and a green glass vase.", cloth: "#27503a", foil: "gold", end: "#ae1630", t: 44, h: 332, d: 228, photo: "https://images.pexels.com/photos/36174582/pexels-photo-36174582.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Wavy green glass vase holding red flowers against a black background", tone: "#0c1410", focus: "50% 45%" }, { no: "07", title: "Red Veil", line: "Portraits through tulle, lit from one side.", cloth: "#2b2927", foil: "copper", end: "#c0181d", t: 58, h: 366, d: 244, photo: "https://images.pexels.com/photos/31167809/pexels-photo-31167809.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Woman in dramatic make-up wrapped in red tulle against a black backdrop", tone: "#6d0f10", focus: "50% 25%" }, { no: "08", title: "One Stem", line: "A single flower and nothing else on the table.", cloth: "#c58c84", foil: "pearl", end: "#e2761c", t: 48, h: 348, d: 236, photo: "https://images.pexels.com/photos/8801127/pexels-photo-8801127.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Orange gerbera daisy in a matching orange vase on a pale grey background", tone: "#cfcfcd", focus: "50% 40%" }, ]; type Volume = (typeof volumes)[number]; type Pose = "in" | "out" | "open"; const FOIL: Record = { gold: "linear-gradient(100deg, #8e6c22 0%, #f6e29a 22%, #b98f30 45%, #fff3bd 62%, #a37c27 80%, #e9cf7c 100%)", copper: "linear-gradient(100deg, #7d4426 0%, #f0b48c 24%, #a85f38 46%, #ffd3b3 64%, #8c4d2c 82%, #dd9a72 100%)", pearl: "linear-gradient(100deg, #d9d2c2 0%, #fffdf6 30%, #e2dccd 55%, #ffffff 72%, #d6cfbe 100%)", ink: "linear-gradient(100deg, #1c1916 0%, #33302b 50%, #1c1916 100%)", }; // Two layouts in the scene's own pixels: one long shelf, or (on narrow screens) a display shelf above the row. const WIDE = { W: 1000, H: 650, shelfY: 520, rowX: 84, dispY: 520, closedX: 706, openX: 742, eye: "50% -12%" }; const TALL = { W: 500, H: 1066, shelfY: 930, rowX: 22, dispY: 462, closedX: 128, openX: 224, eye: "50% 26%" }; type Layout = typeof WIDE; const LANE = 292; // how far a volume is pulled forward before it travels along the shelf const SHELF_BACK = 284; // distance from the spines to the wall const RY_OUT = -63; const RY_OPEN = -77; const AJAR = 87; // cover angle while standing closed (90 is shut) const COVER_OPEN = -56; const WALL = "#e6e0d4"; const PAPER = "#f3ecda"; const weave = "repeating-linear-gradient(0deg, rgba(255,255,255,0.07) 0 1px, rgba(0,0,0,0) 1px 2px), repeating-linear-gradient(90deg, rgba(0,0,0,0.1) 0 1px, rgba(0,0,0,0) 1px 2px)"; const grain = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 -0.08'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E\")"; const fibre = grain.replace("0.5 -0.08", "0.16 -0.02"); const foilText = (kind: string) => ({ backgroundImage: FOIL[kind], WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }) as const; function rest(pose: Pose, L: Layout, x0: number) { if (pose === "in") return { x: 0, y: 0, z: 0, rx: 0, ry: 0, cv: 90 }; const open = pose === "open"; return { x: (open ? L.openX : L.closedX) - x0, y: L.dispY - L.shelfY, z: -22, rx: 0, ry: open ? RY_OPEN : RY_OUT, cv: open ? COVER_OPEN : AJAR }; } function Book({ v, x0, L, pose, lean, wait, reduce, onPick, onCover }: { v: Volume; x0: number; L: Layout; pose: Pose; lean: boolean; wait: number; reduce: boolean; onPick: () => void; onCover: () => void }) { const start = rest(pose, L, x0); const x = useMotionValue(start.x); const y = useMotionValue(start.y); const z = useMotionValue(start.z); const rx = useMotionValue(start.rx); const ry = useMotionValue(start.ry); const cv = useMotionValue(start.cv); const [hover, setHover] = useState(false); const prev = useRef({ pose, L }); const running = useRef<{ stop: () => void }[]>([]); useEffect(() => { const was = prev.current; prev.current = { pose, L }; const to = rest(pose, L, x0); const all: [MotionValue, number][] = [[x, to.x], [y, to.y], [z, to.z], [rx, to.rx], [ry, to.ry], [cv, to.cv]]; running.current.forEach((a) => a.stop()); running.current = []; if (reduce || was.L !== L || was.pose === pose) { all.forEach(([m, val]) => m.set(val)); return; } const run = (m: MotionValue, keys: number[], opts: object) => running.current.push(animate(m, [m.get(), ...keys], opts)); if (was.pose === "in") { // tip the top of the spine forward, pull the volume clear of the row, carry it along, stand it down turned const o = { duration: 1.15, times: [0, 0.14, 0.42, 0.8, 1], ease: "easeInOut", delay: wait } as const; run(rx, [-9, 0, 0, 0], o); run(z, [28, LANE, LANE, to.z], o); run(x, [0, 0, to.x, to.x], o); run(y, [0, 0, to.y, to.y], o); run(ry, [0, 0, -36, to.ry], o); running.current.push(animate(cv, to.cv, { type: "spring", stiffness: 70, damping: 9, delay: wait + 1.05 })); } else if (pose === "in") { const o = { duration: 0.82, times: [0, 0.24, 0.62, 0.9, 1], ease: "easeInOut" } as const; running.current.push(animate(cv, 90, { duration: 0.22, ease: "easeIn" })); run(z, [LANE, LANE, 22, 0], o); run(x, [x.get(), 0, 0, 0], o); run(y, [y.get(), 0, 0, 0], o); run(ry, [-30, 0, 0, 0], o); run(rx, [0, 0, -6, 0], o); } else { const s = { type: "spring", stiffness: 60, damping: 12, mass: 1 } as const; all.forEach(([m, val]) => running.current.push(animate(m, val, m === cv ? { type: "spring", stiffness: 46, damping: 8.5 } : s))); } }, [pose, L, reduce, x0, wait, x, y, z, rx, ry, cv]); useEffect(() => () => running.current.forEach((a) => a.stop()), []); // a finger on the head of the spine: the volume rocks forward a little before it is pulled useEffect(() => { if (reduce || pose !== "in" || prev.current.pose !== "in") return; const a = animate(rx, hover ? -7 : 0, { type: "spring", stiffness: 220, damping: 16 }); const b = animate(z, hover ? 18 : 0, { type: "spring", stiffness: 220, damping: 18 }); return () => { a.stop(); b.stop(); }; }, [hover, pose, reduce, rx, z]); const dark = v.foil === "ink"; const out = pose !== "in"; const round = "linear-gradient(90deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.08) 14%, rgba(255,255,255,0.2) 32%, rgba(255,255,255,0.04) 52%, rgba(0,0,0,0.1) 78%, rgba(0,0,0,0.4) 100%)"; return ( {/* back board */}

{/* the page block seen from above, with its headband, set down inside the boards */}

{/* cloth over the head of the spine and the edge of the back board */}

{/* first leaf, printed with the chapter opening */}

Chapter {v.no}

{v.title}

{v.line}

Read chapter {v.no} {Number(v.no) * 24 - 17}

{/* spine */} {/* front board, hinged on the spine */} {/* inside of the board: coloured endpaper inside the cloth turn-ins */}

{/* thickness of the board along its head and its long edge */}

); } export default function ClothBoundChapterShelf() { const reduce = !!useReducedMotion(); const wrapRef = useRef(null); const sceneRef = useRef(null); const [tall, setTall] = useState(false); const [pick, setPick] = useState(2); const [open, setOpen] = useState(false); const [wait, setWait] = useState(0); const idle = useRef({ paused: false, touched: false }); const L = tall ? TALL : WIDE; const landed = useRef(false); useEffect(() => { landed.current = !reduce; }, [reduce]); const tilt = useSpring(0, { stiffness: 50, damping: 14 }); const drift = useMotionValue(0); const turn = useTransform([tilt, drift], ([a, b]: number[]) => a + b); // the camera never quite stands still useEffect(() => { if (reduce) return; const a = animate(drift, [-1.5, 1.5], { duration: 5.5, ease: "easeInOut", repeat: Infinity, repeatType: "mirror" }); return () => a.stop(); }, [drift, reduce]); const choose = useCallback( (i: number, byHand: boolean) => { if (byHand) idle.current.touched = true; setPick((was) => { if (was === i) return was; setWait(0.36); setOpen(false); return i; }); }, [], ); const toggle = useCallback((byHand: boolean) => { if (byHand) idle.current.touched = true; setOpen((o) => !o); }, []); // self-playing demo: open the standing volume, hold, then fetch the next one useEffect(() => { if (reduce) { setOpen(true); return; } let step = 0; let timer = 0; const tick = () => { const s = idle.current; if (s.touched) return; if (!s.paused && !document.hidden) { step += 1; if (step % 2 === 1) setOpen(true); else { setWait(0.36); setOpen(false); setPick((p) => (p + 3) % volumes.length); } } timer = window.setTimeout(tick, step % 2 === 1 ? 3000 : 3300); }; timer = window.setTimeout(tick, 3400); return () => window.clearTimeout(timer); }, [reduce]); useEffect(() => { const wrap = wrapRef.current; const scene = sceneRef.current; if (!wrap || !scene) return; const measure = () => { const isTall = wrap.clientWidth < 720; const lay = isTall ? TALL : WIDE; setTall(isTall); const sc = Math.min(1.12, wrap.clientWidth / (lay.W + (isTall ? 0 : 60))); 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(); }, []); let run = L.rowX; const slots = volumes.map((v) => { const at = run; run += v.t + 1; return at; }); const endX = run + 2; const shelves = tall ? [L.dispY, L.shelfY] : [L.shelfY]; const oak = "linear-gradient(180deg, #e9d3ad 0%, #d9bd8f 38%, #c4a373 100%)"; const figure = "repeating-linear-gradient(91deg, rgba(120,84,40,0.16) 0 1px, rgba(0,0,0,0) 1px 7px), repeating-linear-gradient(89deg, rgba(255,255,255,0.14) 0 2px, rgba(0,0,0,0) 2px 23px)"; const v = volumes[pick]; return (

{ if (reduce || e.pointerType === "touch") return; const r = e.currentTarget.getBoundingClientRect(); tilt.set((((e.clientX - r.left) / r.width) * 2 - 1) * -2.2); }} onPointerEnter={() => (idle.current.paused = true)} onPointerLeave={() => { idle.current.paused = false; tilt.set(0); }} onFocus={() => (idle.current.paused = true)} onBlur={() => (idle.current.paused = false)} className="relative mx-auto w-full overflow-hidden" style={{ height: WIDE.H }} >

{/* the wall behind, with the light pooling on it and the shadows the books throw */}

{shelves.map((sy) => (

))} {volumes.map((b, i) => ( ))}

{shelves.map((sy) => (

{sy === L.dispY && }

))} {/* a block of dark green marble holds the row up */}

{/* its top is drawn flat, as the camera sees it, so the block stays one plane */}

{volumes.map((b, i) => ( (i === pick ? toggle(true) : choose(i, true))} onCover={() => toggle(true)} /> ))}

{v.no} / {v.title} {open ? "Press the cover to close it" : "Pick a spine, then open the cover"}

{[-1, 1].map((d) => ( ))}

); } 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/cloth-bound-book-spine-chapter-menu-where-the-chosen-volume-leaves-the-shelf-and-opens-at-its-chapter.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]