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:T58a1,import { useCallback, useEffect, useRef, useState } from "react"; import { motion, useMotionValue, useReducedMotion, useSpring, useTransform } from "framer-motion"; /** What is printed on the box, and the two photographs: the pair on the tissue and the print inside the lid. */ const pair = { maker: "Halden and Rook", style: "Derby 204", colour: "Chestnut calf", size: "EU 43", price: "£245", shoes: { src: "https://images.pexels.com/photos/15059774/pexels-photo-15059774.jpeg?auto=compress&cs=tinysrgb&w=1100", alt: "Pair of brown leather lace-up shoes seen from above on a white sheet" }, print: { src: "https://images.pexels.com/photos/9953932/pexels-photo-9953932.jpeg?auto=compress&cs=tinysrgb&w=900", alt: "Man in a red suit and a blue hat holding a red flower against a yellow wall", tone: "#d9a92a", focus: "50% 40%" }, }; // Design pixels in the box's own space: x runs along the box, y from the hinge toward you, z up off the table. const W = 404; const DP = 300; const H = 114; const BOARD = 5; // thickness of the card const LIP = 46; // depth of the lid's skirt const LID_OPEN = 97; // degrees the lid swings back const FLAP_A = 114; // tissue: the panel fixed along the wall const FLAP_B = 104; // tissue: the loose outer panel const SCENE_W = 900; const SCENE_H = 740; const TURN = 26; const TIP = 47; const BLUE = "#2146b4"; const BLUE_DARK = "#152f86"; const CARD = "#d9d2c4"; // raw board on the inside const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); const svg = (s: string) => `url("data:image/svg+xml,${encodeURIComponent(s)}")`; // crumpled tissue: noise lit from one side, so the creases have a bright and a dark face const CRINKLE = svg( "", ); // the tooth of printed board const TOOTH = svg( "", ); const tissue = { backgroundColor: "#fbf9f4", backgroundImage: CRINKLE, backgroundSize: "320px 320px" } as const; export default function ShoeboxWithTissue() { const reduce = !!useReducedMotion(); const wrapRef = useRef(null); const sceneRef = useRef(null); const [open, setOpen] = useState(false); const live = useRef({ open: false, paused: false, touched: false }); const lid = useSpring(0, { stiffness: 58, damping: 8.5, mass: 1.15 }); const part = useSpring(0, { stiffness: 46, damping: 7.5, mass: 1 }); const curl = useSpring(0, { stiffness: 30, damping: 4.6, mass: 1 }); const px = useMotionValue(0); const py = useMotionValue(0); const rz = useSpring(useTransform(px, (v) => TURN + v * 5), { stiffness: 60, damping: 14 }); const rx = useSpring(useTransform(py, (v) => TIP - v * 4), { stiffness: 60, damping: 14 }); const lidTransform = useTransform(lid, (v) => `translateZ(${H + 3}px) rotateX(${v.toFixed(2)}deg)`); const lidShade = useTransform(lid, (v) => 0.5 - clamp(v / 90, 0, 1) * 0.5); const inGloss = useTransform(lid, (v) => clamp((v - 60) / 50, 0, 1)); const boxShade = useTransform(lid, (v) => 0.62 - clamp(v / 70, 0, 1) * 0.62); const leftA = useTransform(part, (v) => `translateZ(${H - 5}px) rotateY(${(-(3 + v * 101)).toFixed(2)}deg)`); const rightA = useTransform(part, (v) => `translateZ(${H - 3.5}px) rotateY(${(2 + v * 128).toFixed(2)}deg)`); const leftB = useTransform(curl, (v) => `rotateY(${(4 - v * 49).toFixed(2)}deg)`); const rightB = useTransform(curl, (v) => `rotateY(${(-3 + v * 30).toFixed(2)}deg)`); const tissueShadow = useTransform(part, (v) => 0.3 * (1 - clamp(v * 1.6, 0, 1))); const swing = useCallback( (to: boolean) => { live.current.open = to; setOpen(to); if (reduce) { lid.jump(to ? LID_OPEN : 0); part.jump(to ? 1 : 0); curl.jump(to ? 1 : 0); } else if (to) lid.set(LID_OPEN); else part.set(0); }, [curl, lid, part, reduce], ); // the tissue waits for the lid to clear, and the lid waits for the tissue to be folded back useEffect(() => { if (reduce) return; const a = lid.on("change", (v) => live.current.open && v > 52 && part.set(1)); const b = part.on("change", (v) => { curl.set(v); if (!live.current.open && v < 0.32) lid.set(0); }); return () => { a(); b(); }; }, [curl, lid, part, reduce]); useEffect(() => { if (reduce) { swing(true); return; } const s = live.current; let n = 0; const first = window.setTimeout(() => swing(true), 260); const loop = window.setInterval(() => { if (s.paused || s.touched || document.hidden) return; n += 1; swing(n % 4 !== 3); }, 2700); return () => { window.clearTimeout(first); window.clearInterval(loop); }; }, [reduce, swing]); useEffect(() => { const wrap = wrapRef.current; const scene = sceneRef.current; if (!wrap || !scene) return; const measure = () => { const sc = clamp(wrap.clientWidth / (SCENE_W - 70), 0.44, 1); wrap.style.height = `${Math.round(SCENE_H * sc + 70)}px`; scene.style.transform = `translateX(-50%) scale(${sc.toFixed(4)})`; }; measure(); const ro = new ResizeObserver(measure); ro.observe(wrap); return () => ro.disconnect(); }, []); const toggle = () => { live.current.touched = true; swing(!live.current.open); }; 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 LW = W + 8; // the lid is a little bigger than the box it covers const LD = DP + 6; const flapSpan = { top: BOARD + 2, height: DP - BOARD * 2 - 4 }; const boardFace = { backgroundColor: BLUE, backgroundImage: TOOTH } as const; return (

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

{/* shadow on the table: a wide soft one and a tight dark one under the base */}

{/* base of the box */}

{/* far wall, seen from the inside */}

{/* near wall, the printed outside */}

{pair.maker} Made on a wooden last

{/* left end from the inside, right end from the outside */}

{/* the size label every shoebox carries on its end */}

{pair.style} {pair.size}

{pair.colour}

{/* the bed of tissue with the pair lying on it */}

{/* cut edge of the board round the top of the box */}

{/* tissue: two sheets folded over the pair, each in two panels so the paper can curl */}

{/* the seal that held the two sheets together */}

H&R
204

{/* the lid, hinged along the far edge */} {/* skirts: front and the two ends */}

{/* outside of the lid */} {/* inside of the lid: raw board with a print pasted in */}

{pair.style}, {pair.colour} {pair.size} / {pair.price}

); } 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/shoebox-with-a-hinged-lid-that-lifts-and-tissue-paper-that-parts-over-a-pair-of-leather-shoes.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]