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:T4e91,import { useCallback, useEffect, useRef, useState } from "react"; import { motion, useMotionValue, useReducedMotion, useSpring, useTransform } from "framer-motion"; /** The loose prints in the box, top of the pile first. `tone` shows while a photograph loads. */ const prints = [ { title: "Pool blue", src: "https://images.pexels.com/photos/35707515/pexels-photo-35707515.jpeg?auto=compress&cs=tinysrgb&w=800", alt: "Woman with an afro and dark glasses crouching in a pink dress against a bright blue backdrop", tone: "#1583d8", focus: "50% 30%" }, { title: "Paper peony", src: "https://images.pexels.com/photos/9121152/pexels-photo-9121152.jpeg?auto=compress&cs=tinysrgb&w=800", alt: "Model in a white paper flower headpiece with a translucent red disc across the lower half of the frame", tone: "#c9cfca", focus: "50% 40%" }, { title: "Blue on ochre", src: "https://images.pexels.com/photos/14793003/pexels-photo-14793003.jpeg?auto=compress&cs=tinysrgb&w=800", alt: "Seated woman in a blazer washed in blue light in front of an ochre backdrop", tone: "#c79a0c", focus: "50% 45%" }, { title: "Moss and magenta", src: "https://images.pexels.com/photos/21352926/pexels-photo-21352926.jpeg?auto=compress&cs=tinysrgb&w=800", alt: "Woman in a moss green top with one arm behind her head against a magenta backdrop", tone: "#c40f43", focus: "50% 30%" }, { title: "Silver crop", src: "https://images.pexels.com/photos/24972993/pexels-photo-24972993.jpeg?auto=compress&cs=tinysrgb&w=800", alt: "Black and white studio portrait of a seated woman with cropped silver hair resting her face on her hand", tone: "#5d5d5d", focus: "50% 24%" }, ]; const cover = { title: "Colour studies", box: "Box 03", src: "https://images.pexels.com/photos/28262886/pexels-photo-28262886.jpeg?auto=compress&cs=tinysrgb&w=500", alt: "Model in round glasses under a pleated white paper hat", tone: "#d9d9d9" }; const N = prints.length; // Design pixels in the box's own space: x across, y from the hinge toward you, z up off the table. const W = 300; const D = 390; const T = 9; // board thickness const WH = 44; // wall height const PW = 250; const PL = 330; const LID_OPEN = 101; // degrees: just past upright, so the lid leans back const LEAN = -80; // angle of a print resting on the lid const SCENE_W = 460; const SCENE_H = 700; const HOLD_MS = 2500; const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); const rad = (d: number) => (d * Math.PI) / 180; const jitter = [-1.3, 0.9, -0.5, 1.5, -0.8, 0.6]; const nudge = [-3, 4, -1, 3, -4, 2]; const CLOTH = "#cdc4b2"; const weave = "repeating-linear-gradient(0deg, rgba(60,48,30,0.10) 0 1px, rgba(0,0,0,0) 1px 3px), repeating-linear-gradient(90deg, rgba(255,255,255,0.14) 0 1px, rgba(0,0,0,0) 1px 3px)"; const LINING = "#efeae0"; /** A wall standing on the line y = `y`, facing you. */ function WallY({ y, x = 0, w, h, z = 0, bg, children }: { y: number; x?: number; w: number; h: number; z?: number; bg: React.CSSProperties; children?: React.ReactNode }) { return (

{children}

); } /** A wall standing on the line x = `x`, facing right. */ function WallX({ x, y = 0, d, h, z = 0, bg }: { x: number; y?: number; d: number; h: number; z?: number; bg: React.CSSProperties }) { return

; } /** * One loose print. `t` runs from 0 (lying in the tray) to 1 (leaning on the lid). The foot of the * print skids toward the hinge exactly as fast as the top swings up, so the top edge climbs the lid * and never passes through it. When the spring overshoots, the print rocks back off the lid. */ function Print({ i, up, top, delay, reduce }: { i: number; up: boolean; top: boolean; delay: number; reduce: boolean }) { const p = prints[i]; const t = useSpring(0, { stiffness: 62, damping: 9.5, mass: 1 }); useEffect(() => { const v = up ? 1 : 0; if (reduce) { t.jump(v); return; } const id = window.setTimeout(() => t.set(v), up ? 0 : delay); return () => window.clearTimeout(id); }, [up, delay, reduce, t]); const flatZ = 5 + (N - 1 - i) * 2.4; const footEnd = 18 + i * 3; const slack = D - (D - PL) / 2 - footEnd - PL * (1 - Math.cos(rad(LEAN))); const transform = useTransform(t, (raw) => { const v = raw > 1 ? 2 - raw : Math.abs(raw); const a = LEAN * v; const foot = footEnd + PL * (Math.cos(rad(a)) - Math.cos(rad(LEAN))) + slack * (1 - v); const z = flatZ + (16 + i * 0.6 - flatZ) * v; const twist = jitter[N - 1 - i] * 0.5 * (1 - v) + jitter[i] * v; return `translate3d(${(nudge[i] * v).toFixed(2)}px, ${(foot - PL).toFixed(2)}px, ${z.toFixed(2)}px) rotateX(${a.toFixed(2)}deg) rotateZ(${twist.toFixed(2)}deg)`; }); const gloss = useTransform(t, (v) => clamp(v, 0, 1)); const shade = useTransform(t, (v) => 0.2 * (1 - clamp(v, 0, 1))); return (

{p.title} {String(i + 1).padStart(2, "0")} / {String(N).padStart(2, "0")}

{/* glossy when it catches the light, dull when it lies in the box or behind another print */}

); } export default function ArchiveBoxGallery() { const reduce = !!useReducedMotion(); const wrapRef = useRef(null); const sceneRef = useRef(null); const [open, setOpen] = useState(false); const [shown, setShown] = useState(0); // how many prints stand on the lid const paused = useRef(false); const timers = useRef([]); const live = useRef({ open: false, shown: 0 }); live.current = { open, shown }; const lid = useSpring(0, { stiffness: 70, damping: 13, mass: 1.2 }); const px = useMotionValue(0); const py = useMotionValue(0); const rz = useSpring(useTransform(px, (v) => -13 + v * 7), { stiffness: 60, damping: 14 }); const rx = useSpring(useTransform(py, (v) => 51 - v * 4), { stiffness: 60, damping: 14 }); const trayShade = useTransform(lid, (v) => 0.55 * (1 - clamp(v / 70, 0, 1))); const later = (fn: () => void, ms: number) => { timers.current.push(window.setTimeout(fn, ms)); }; useEffect(() => { const v = open ? LID_OPEN : 0; if (reduce) lid.jump(v); else lid.set(v); }, [open, reduce, lid]); const next = useCallback(() => { const s = live.current; if (!s.open) { setOpen(true); later(() => setShown(1), reduce ? 0 : 650); } else setShown(s.shown >= N ? 0 : s.shown + 1); }, [reduce]); const prev = useCallback(() => { const s = live.current; if (!s.open) return; if (s.shown > 0) setShown(s.shown - 1); else setOpen(false); }, []); const toggle = useCallback(() => { const s = live.current; if (!s.open) return next(); setShown(0); later(() => setOpen(false), reduce || s.shown === 0 ? 0 : 520); }, [next, reduce]); useEffect(() => { if (reduce) { setOpen(true); setShown(1); return; } const first = window.setTimeout(next, 300); const loop = window.setInterval(() => !paused.current && !document.hidden && next(), HOLD_MS); return () => { window.clearTimeout(first); window.clearInterval(loop); timers.current.forEach((t) => window.clearTimeout(t)); }; }, [next, reduce]); useEffect(() => { const wrap = wrapRef.current; const scene = sceneRef.current; if (!wrap || !scene) return; const measure = () => { const sc = clamp(wrap.clientWidth / (SCENE_W - 10), 0.6, 1); wrap.style.height = `${Math.round(SCENE_H * sc + 78)}px`; scene.style.transform = `translateX(-50%) scale(${sc.toFixed(4)})`; }; measure(); const ro = new ResizeObserver(measure); ro.observe(wrap); return () => ro.disconnect(); }, []); const onMove = (e: React.PointerEvent) => { 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); }; const onKey = (e: React.KeyboardEvent) => { if (e.key === "ArrowRight" || e.key === "ArrowUp") { e.preventDefault(); next(); } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") { e.preventDefault(); prev(); } }; const cloth = { backgroundColor: CLOTH, backgroundImage: weave }; const clothDark = { backgroundColor: "#a39a88", backgroundImage: weave }; const clothSide = { backgroundColor: "#b9b09d", backgroundImage: weave }; const current = shown > 0 ? prints[shown - 1] : null; const btn = "grid h-10 w-10 place-items-center rounded-full border border-white/15 bg-white/5 text-neutral-200 transition hover:bg-white/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white"; return (

(paused.current = true)} onPointerLeave={() => { paused.current = false; px.set(0); py.set(0); }} onFocus={() => (paused.current = true)} onBlur={() => (paused.current = false)} className="relative mx-auto w-full overflow-hidden" style={{ height: SCENE_H + 78 }} >

{/* shadows on the table */}

{/* tray: floor, outer walls, inner walls, and the top of the boards */}

{/* brass label holder */}

{cover.title} {cover.box.slice(-2)}

{[4, 110].map((l) => ( ))}

{/* the right outer wall always faces away from the camera, so it is left out */} {[ { left: 0, top: 0, width: W, height: T }, { left: 0, top: D - T, width: W, height: T }, { left: 0, top: T, width: T, height: D - T * 2 }, { left: W - T, top: T, width: T, height: D - T * 2 }, ].map((r, i) => (

))} {/* the shut lid keeps the inside dark */} {/* the prints */} {prints.map((p, i) => ( ))} {/* the lid, hinged along the far wall */} {/* lining */}

{/* shadow the standing prints throw on the lining */}

0 ? 0.16 : 0 }} /> {/* board edges */} {/* cloth cover with a tipped-in plate */}

{String(shown).padStart(2, "0")} / {String(N).padStart(2, "0")} {current ? current.title : open ? "All prints in the box" : `${cover.box} is shut`}

); } 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/linen-archive-box-photo-gallery-whose-lid-opens-into-an-easel-for-loose-prints.tsx","content":"$64","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]