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:T48f9,import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { motion, useMotionValue, useReducedMotion, useSpring, useTransform } from "framer-motion"; /** Everything printed on the box and the card inside it. */ const box = { name: "Afterglow", number: "No. 7", line: "Forty safety matches and one print", cover: { src: "https://images.pexels.com/photos/7516560/pexels-photo-7516560.jpeg?auto=compress&cs=tinysrgb&w=900", alt: "Woman in a red dress standing in front of a yellow wall with a large red circle", tone: "#e3a70f", focus: "50% 34%" }, print: { src: "https://images.pexels.com/photos/7658850/pexels-photo-7658850.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Profile of a woman lit in orange and green studio light", tone: "#b5561a", focus: "50% 30%" }, }; // Design pixels in the box's own space: x runs along the box, y across it, z up off the table. const W = 400; const DP = 250; const H = 84; const WALL = 5; // gap between sleeve and tray const TRAY_H = 66; const MATCH_Z = 34; // height of the bed of matches inside the tray const OUT = 296; // travel of the drawer const CARD_W = 184; // across the box const CARD_L = 222; // along the box const LIFT = 63; // degrees the print stands up const SCENE_W = 900; const HINGE = 64; // how far in from the drawer's outer end the print is hinged const SCENE_H = 620; // how one design pixel along x lands on screen for the resting camera (used to turn a drag into travel) const TURN = 39; const TIP = 54; const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); const rad = (d: number) => (d * Math.PI) / 180; const PAPER = "#efe6d2"; const RED = "#cf2f20"; const speckle = "radial-gradient(circle at 20% 30%, rgba(255,255,255,0.16) 0 0.6px, rgba(0,0,0,0) 1px), radial-gradient(circle at 70% 60%, rgba(0,0,0,0.5) 0 0.7px, rgba(0,0,0,0) 1.1px), radial-gradient(circle at 45% 85%, rgba(255,255,255,0.1) 0 0.5px, rgba(0,0,0,0) 0.9px)"; export default function MatchboxPrintCard() { const reduce = !!useReducedMotion(); const wrapRef = useRef(null); const sceneRef = useRef(null); const [open, setOpen] = useState(false); const state = useRef({ scale: 1, dragging: false, moved: 0, lastX: 0, lastY: 0, lastT: 0, vel: 0, paused: false, touched: false }); const out = useSpring(0, { stiffness: 150, damping: 17, mass: 1.15 }); const lift = useSpring(0, { stiffness: 90, damping: 11, 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 back = useTransform(out, (v) => -v); const mouthShade = useTransform(out, (v) => clamp(v / 50, 0, 1)); const hinge = useTransform(lift, (v) => `translate3d(${W - HINGE}px, ${DP / 2}px, ${MATCH_Z + 5}px) rotateY(${(v * LIFT).toFixed(2)}deg)`); const cardShadow = useTransform(lift, (v) => 0.55 - clamp(v, 0, 1) * 0.3); const cardShadowX = useTransform(lift, (v) => clamp(v, 0, 1.2) * 34); const cardGloss = useTransform(lift, (v) => 0.1 + clamp(v, 0, 1) * 0.5); const tableShadowW = useTransform(out, (v) => (W + v + 44) / (W + 44)); const slide = useCallback( (to: boolean) => { setOpen(to); if (reduce) { out.jump(to ? OUT : 0); lift.jump(to ? 1 : 0); } else out.set(to ? OUT : 0); }, [lift, out, reduce], ); // the print stands up once the drawer has cleared the sleeve, and lies down again as it goes back useEffect(() => out.on("change", (v) => !reduce && lift.set(v > OUT * 0.8 ? 1 : 0)), [lift, out, reduce]); useEffect(() => { if (reduce) { slide(true); return; } const s = state.current; let n = 0; const first = window.setTimeout(() => slide(true), 320); const loop = window.setInterval(() => { if (s.paused || s.touched || document.hidden) return; n += 1; slide(n % 4 !== 3); }, 1700); return () => { window.clearTimeout(first); window.clearInterval(loop); }; }, [reduce, slide]); useEffect(() => { const wrap = wrapRef.current; const scene = sceneRef.current; if (!wrap || !scene) return; const measure = () => { const sc = clamp(wrap.clientWidth / (SCENE_W - 40), 0.42, 1); state.current.scale = sc; wrap.style.height = `${Math.round(SCENE_H * sc + 84)}px`; scene.style.transform = `translateX(-50%) scale(${sc.toFixed(4)})`; }; measure(); const ro = new ResizeObserver(measure); ro.observe(wrap); return () => ro.disconnect(); }, []); // dragging the drawer: project the pointer's movement onto the direction the drawer runs on screen const axis = useMemo(() => { const vx = Math.cos(rad(TURN)); const vy = Math.sin(rad(TURN)) * Math.cos(rad(TIP)); const len = Math.hypot(vx, vy); return { ux: vx / len, uy: vy / len, len }; }, []); const onDown = (e: React.PointerEvent) => { if (e.button !== 0) return; const s = state.current; s.dragging = true; s.touched = true; s.moved = 0; s.vel = 0; s.lastX = e.clientX; s.lastY = e.clientY; s.lastT = performance.now(); e.currentTarget.setPointerCapture(e.pointerId); }; const onDrag = (e: React.PointerEvent) => { const s = state.current; if (!s.dragging) return; const d = ((e.clientX - s.lastX) * axis.ux + (e.clientY - s.lastY) * axis.uy) / (axis.len * s.scale); const now = performance.now(); s.vel = s.vel * 0.6 + (d / Math.max(1, now - s.lastT)) * 0.4; s.moved += Math.abs(d); s.lastX = e.clientX; s.lastY = e.clientY; s.lastT = now; const raw = out.get() + d; // rubber band past either end out.jump(raw < 0 ? raw * 0.5 : raw > OUT ? OUT + (raw - OUT) * 0.35 : raw); }; const onUp = () => { const s = state.current; if (!s.dragging) return; s.dragging = false; if (s.moved < 4) slide(!open); else slide(out.get() + s.vel * 260 > OUT / 2); }; 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 matches = useMemo( () => Array.from({ length: 17 }, (_, i) => ({ top: 6 + i * 13.4, shift: [0, 5, -3, 7, 2, -4, 6, 0, 4, -2, 8, 1, -5, 3, 6, -1, 4][i], tilt: [0.3, -0.5, 0.2, 0.6, -0.3, 0.1, -0.6, 0.4, 0, -0.2, 0.5, -0.4, 0.2, 0.3, -0.5, 0.1, -0.1][i], })), [], ); const trayW = W - WALL * 2; const trayD = DP - WALL * 2; const kraft = "linear-gradient(180deg, #c9a878, #b08b58)"; return (

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

{/* shadow on the table: one under the sleeve, one that grows with the drawer */}

{/* the drawer */} {/* floor */}

{/* far and near walls */}

{/* inner and outer ends */}

{box.number} / pull

{/* bed of matches */} {/* soft shadow under the print */} {/* the sleeve: long sides with striker strips, the rim of its mouth, and the printed top */}

{/* scratches where matches have been struck */}

{box.name} {box.number} {open ? "Press the lid to slide it shut" : "Press the lid or drag the drawer"}

); } 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/matchbox-card-with-a-drawer-that-slides-out-and-a-photo-print-that-stands-up-from-the-matches.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]