1c:I[55681,["/_next/static/immutable/chunks/32wiwqr_dmsge.js","/_next/static/immutable/chunks/3_yicwx8vamj2.js","/_next/static/immutable/chunks/3rxrzhpiav1f7.js","/_next/static/immutable/chunks/3lmgm81vbm96h.js","/_next/static/immutable/chunks/3g2b2lx2y2nyb.js","/_next/static/immutable/chunks/3j0_m6y4s6or6.js","/_next/static/immutable/chunks/06blemz8y8rbs.js"],"default"] 1d:T5eef,"use client"; import { useEffect, useId, useRef } from "react"; import { animate, frame, motionValue, type MotionValue, type ValueAnimationTransition } from "motion/react"; import "./file-box.css"; /** * File Box — a cardboard file box holding five colourful folders. * * The box is drawn in an oblique projection as one SVG: a hollow back, the * folders standing in it back to front, then the front and side faces over * them, so a lifted folder rises out of the box rather than through it. Each * folder is a back panel with its tab, three sheets of paper and a front flap. * * Hover (or focus) a folder and it is pulled up by its tab, leaning a hair * toward that side; the flap falls open a beat later and the sheets trail * behind on looser springs, while its neighbours give way a little. Click, * Enter or Space gives it a tug. Every transform channel is a Motion value, so * sweeping across the folders hands one target to the next with its velocity * intact instead of restarting from rest. The scene tilts a few degrees with * the pointer and the shadow answers it. * * Colours are theme tokens registered as typed custom properties, so a theme * change cross-fades every face, folder and shadow at once — and the box gives * a little under the new light. */ export type FileBoxColor = "green" | "beige" | "pink" | "orange"; export type FileBoxProps = { theme?: "light" | "dark"; /** Fill the container edge to edge, with the box centred in the largest square that fits. */ fill?: boolean; /** Called when a folder is tugged, with its colour and its place counted from the front (1–5). */ onPull?: (folder: { color: FileBoxColor; position: number }) => void; }; /* ── geometry ── Oblique projection: u runs along the box front (0‥185), d runs into the box (0‥1), h is height above the floor. */ const K = 45 / 185; // slope of the front edge const H = 117; // box height const TU = 8; // wall thickness, along u const TD = 0.06; // wall thickness, along d const P = (u: number, d: number, h: number): [number, number] => [210 + u + 130 * d, 455 + K * u - 78 * d - h]; /* a folder's own plane: local x = u, y = -h */ const plane = (d: number) => `matrix(1 ${K} 0 1 ${210 + 130 * d} ${455 - 78 * d})`; const poly = (...pts: [number, number][]) => "M" + pts.map((p) => p.map((n) => n.toFixed(2)).join(" ")).join(" L") + " Z"; type Folder = { d: number; x0: number; x1: number; h: number; tab: [number, number]; c: FileBoxColor }; /* back → front */ const FOLDERS: Folder[] = [ { d: 0.85, x0: 14, x1: 176, h: 150, tab: [122, 44], c: "green" }, { d: 0.7, x0: 12, x1: 172, h: 150, tab: [56, 46], c: "beige" }, { d: 0.5, x0: 10, x1: 168, h: 150, tab: [92, 48], c: "pink" }, { d: 0.3, x0: 8, x1: 172, h: 148, tab: [50, 46], c: "orange" }, { d: 0.14, x0: 8, x1: 170, h: 146, tab: [8, 44], c: "green" }, ]; const ORDINAL = ["front", "second", "middle", "fourth", "back"]; const TAB_H = 13; const FLAP = 27; // how far the front flap sits below the back panel const LIFT = 40; const PAPER_TILT = [0.8, -1.4, 0.5]; const PAPER_FAN = [-2.6, 0.8, 2.8]; /* the back panel with its tab; `bottom` lets a hit area start at the box rim, `up` extends it upward */ function backPath({ x0, x1, h, tab: [tx, tw] }: Folder, bottom = 0, up = 0) { const r = 5; const t = h + TAB_H; const b = -bottom - up; const hh = -h - up; const tt = -t - up; const tabEnd = tx + tw; let d = `M${x0} ${b} `; d += tx <= x0 ? `V${tt + r} Q${x0} ${tt} ${x0 + r} ${tt} ` : `V${hh + r} Q${x0} ${hh} ${x0 + r} ${hh} H${tx} C${tx + 5} ${hh} ${tx + 4} ${tt} ${tx + 11} ${tt} `; d += `H${tabEnd - 11} C${tabEnd - 4} ${tt} ${tabEnd - 5} ${hh} ${tabEnd} ${hh} `; d += `H${x1 - r} Q${x1} ${hh} ${x1} ${hh + r} V${b} Z`; return d; } const roundTop = (x0: number, x1: number, top: number, r = 5) => `M${x0} 0 V${-top + r} Q${x0} ${-top} ${x0 + r} ${-top} H${x1 - r} Q${x1} ${-top} ${x1} ${-top + r} V0 Z`; /* ── motion ── */ const EASE = [0.22, 1, 0.36, 1] as const; const SOFT = { type: "spring", stiffness: 190, damping: 24, mass: 1 } as const; const HOVER = { /* a heavy, critically damped lift: it eases out of the box with no bounce */ lift: { type: "spring", stiffness: 150, damping: 25, mass: 1.1 }, /* dropping back has a touch of weight to it */ drop: { type: "spring", stiffness: 210, damping: 20, mass: 1.1 }, /* the flap swings on its fold, a beat after the folder moves */ flap: { type: "spring", stiffness: 120, damping: 17, mass: 1 }, /* loose sheets: light and slightly underdamped, so they trail and settle */ paper: { type: "spring", stiffness: 110, damping: 12, mass: 0.8 }, nudge: { type: "spring", stiffness: 170, damping: 22, mass: 1 }, } as const; type Channel = "x" | "y" | "rotate" | "scale" | "sy" | "opacity"; const DEFAULTS: Record = { x: 0, y: 0, rotate: 0, scale: 1, sy: 1, opacity: 1 }; type Opts = Record & { duration?: number; delay?: number; type?: string }; type Run = { stop: () => void; then: (onfulfilled: () => void) => Promise }; /* you lift a folder by its tab, so it tips a hair toward that side */ const leanOf = (f: Folder) => { const [tx, tw] = f.tab; return ((tx + tw / 2 - (f.x0 + f.x1) / 2) / ((f.x1 - f.x0) / 2)) * 1.3; }; export default function FileBox({ theme = "light", fill = false, onPull }: FileBoxProps) { const rootRef = useRef(null); const posterRef = useRef(null); const sceneRef = useRef(null); const apiRef = useRef<{ settle: () => void } | null>(null); const onPullRef = useRef(onPull); onPullRef.current = onPull; const firstTheme = useRef(true); /* gradient and filter ids, unique per instance */ const id = useId().replace(/[^a-zA-Z0-9_-]/g, ""); const ref = (name: string) => `url(#${id}-${name})`; useEffect(() => { const root = rootRef.current; const posterEl = posterRef.current; const scene = sceneRef.current; if (!root || !posterEl || !scene) return; const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches; const timers = new Set(); const later = (fn: () => void, ms: number) => { const t = window.setTimeout(() => { timers.delete(t); fn(); }, ms); timers.add(t); }; const running = new Set<{ stop: () => void }>(); /* ── build ── */ const NS = "http://www.w3.org/2000/svg"; const PAINT = new Set(["fill", "stroke", "fill-opacity", "stroke-opacity"]); /* colours are theme tokens, which only resolve in CSS: route paint through style */ const el = (tag: string, attrs: Record, parent?: Element) => { const n = document.createElementNS(NS, tag); let style = ""; for (const k in attrs) { const v = String(attrs[k]); if (PAINT.has(k) && v.startsWith("var(")) style += `${k}:${v};`; else n.setAttribute(k, v); } if (style) n.setAttribute("style", style); parent?.appendChild(n); return n as SVGGraphicsElement; }; scene.replaceChildren(); const base = poly(P(0, 0, 0), P(185, 0, 0), P(185, 1, 0), P(0, 1, 0)); const shadow = el("g", {}, scene); el("path", { d: base, fill: "var(--pfbox-shadow-wide)", "fill-opacity": "var(--pfbox-shadow-wide-o)", stroke: "none", filter: ref("blur-wide"), transform: "translate(22 12)" }, shadow); el("path", { d: base, fill: "var(--pfbox-shadow-tight)", "fill-opacity": "var(--pfbox-shadow-tight-o)", stroke: "none", filter: ref("blur-tight"), transform: "translate(4 3)" }, shadow); const boxBack = el("g", {}, scene); el("path", { d: poly(P(TU, 1 - TD, 0), P(185 - TU, 1 - TD, 0), P(185 - TU, 1 - TD, H), P(TU, 1 - TD, H)), fill: ref("hollow-back") }, boxBack); el("path", { d: poly(P(TU, TD, 0), P(TU, 1 - TD, 0), P(TU, 1 - TD, H), P(TU, TD, H)), fill: ref("hollow-side") }, boxBack); el("path", { d: poly(P(0, 1, H), P(185, 1, H), P(185, 1 - TD, H), P(TU, 1 - TD, H), P(TU, 0, H), P(0, 0, H)), fill: "var(--pfbox-rim)" }, boxBack); const folderLayer = el("g", {}, scene); const boxFront = el("g", {}, scene); el("path", { d: poly(P(185, 0, 0), P(185, 1, 0), P(185, 1, H), P(185, 0, H)), fill: ref("face-side") }, boxFront); el("path", { d: poly(P(0, 0, 0), P(185, 0, 0), P(185, 0, H), P(0, 0, H)), fill: ref("face-front") }, boxFront); el("path", { d: poly(P(0, 0, H), P(185, 0, H), P(185, 1, H), P(185 - TU, 1, H), P(185 - TU, TD, H), P(0, TD, H)), fill: "var(--pfbox-rim)" }, boxFront); const hole = [P(185, 0.36, H - 22), P(185, 0.64, H - 22)]; el("path", { d: `M${hole[0][0]} ${hole[0][1]} L${hole[1][0]} ${hole[1][1]}`, stroke: "var(--pfbox-hole)", "stroke-width": 9 }, boxFront); const hitLayer = el("g", {}, scene); const folders = FOLDERS.map((F, i) => { const hv = H - 78 * F.d; // the height at which the folder clears the front rim const g = el("g", { "pointer-events": "none" }, folderLayer); const local = el("g", { transform: plane(F.d) }, g); el("path", { d: backPath(F), fill: `var(--pfbox-${F.c}-b)` }, local); el("path", { d: `M${F.x0 + 2} ${-(F.h - FLAP - 2)} H${F.x1 - 2}`, stroke: "var(--pfbox-crease)", "stroke-width": 6 }, local); const papers = [0, 1, 2].map((j) => { const p = el("g", {}, local); const px0 = F.x0 + 7 + j * 4; const px1 = F.x1 - 7 - j * 5; const top = F.h - 4 - j * 6; el("path", { d: roundTop(px0, px1, top, 2), fill: `var(--pfbox-paper-${j + 1})`, "stroke-width": 2.4 }, p); for (const [dy, len] of [ [7, 0.42], [12.5, 0.6], [18, 0.3], ]) el("path", { d: `M${px0 + 9} ${-(top - dy)} H${px0 + 9 + (px1 - px0 - 18) * len}`, stroke: "var(--pfbox-paper-line)", "stroke-width": 2 }, p); return p; }); const front = el("g", {}, local); el("path", { d: roundTop(F.x0, F.x1, F.h - FLAP, 6), fill: `var(--pfbox-${F.c}-f)` }, front); el("path", { d: `M${F.x0 + 8} ${-(F.h - FLAP - 5)} H${F.x1 - 8}`, stroke: "var(--pfbox-flap-hi)", "stroke-width": 2 }, front); /* the rim's shadow is fixed to the box, so a lifted folder slides out of it */ const occ = el("g", { "pointer-events": "none" }, folderLayer); el("rect", { x: 0, y: -(hv + 34), width: 185, height: 34, fill: ref("occ"), stroke: "none", transform: plane(F.d) }, occ); /* the hit area: the visible part at rest, extended upward while it is lifted */ const position = FOLDERS.length - i; const hit = el( "g", { class: "pfbox__hit", tabindex: 0, role: "button", "aria-label": `Pull out the ${F.c} folder, ${ORDINAL[position - 1]} from the front`, transform: plane(F.d) }, hitLayer, ); el("path", { class: "pfbox__hitBase", d: backPath(F, hv), fill: "#000", "fill-opacity": 0, stroke: "none" }, hit); const extend = el("path", { d: backPath(F, hv, LIFT), fill: "#000", "fill-opacity": 0, stroke: "none", "pointer-events": "none" }, hit); return { ...F, i, position, g, papers, front, occ, hit, extend }; }); type Live = (typeof folders)[number]; /* ── every transform channel is a Motion value; writes are batched into Motion's render step ── */ const tf = new WeakMap>>(); const init = (node: SVGGraphicsElement, origin = "50% 50%") => { const mv = {} as Record>; let queued = false; const render = () => { queued = false; node.style.transform = `translate(${mv.x.get()}px, ${mv.y.get()}px) rotate(${mv.rotate.get()}deg) scale(${mv.scale.get()}, ${mv.scale.get() * mv.sy.get()})`; node.style.opacity = String(mv.opacity.get()); }; for (const k of Object.keys(DEFAULTS) as Channel[]) { mv[k] = motionValue(DEFAULTS[k]); mv[k].on("change", () => { if (queued) return; queued = true; frame.render(render); }); } tf.set(node, mv); node.style.transformBox = "fill-box"; node.style.transformOrigin = origin; render(); return mv; }; const move = (node: SVGGraphicsElement, props: Partial>, opts: Opts = {}): Run => { const mv = tf.get(node) ?? init(node); const runs: { stop: () => void; then: (f: () => void, r?: () => void) => unknown }[] = []; for (const [k, to] of Object.entries(props) as [Channel, number | (number | null)[]][]) { const v = mv[k]; const kf = (Array.isArray(to) ? to : [to]).map((x) => (x == null ? v.get() : x)); if (opts.duration === 0) { v.jump(kf[kf.length - 1]); continue; } /* a spring takes one target; a multi-step gesture becomes an eased tween */ const o = kf.length > 2 && opts.type === "spring" ? { duration: 0.6, ease: EASE, delay: opts.delay } : opts; const t = o as ValueAnimationTransition; const a = kf.length === 1 ? animate(v, kf[0], t) : animate(v, kf, t); running.add(a); a.then( () => running.delete(a), () => running.delete(a), ); runs.push(a); } const done = Promise.all(runs.map((r) => new Promise((res) => r.then(res, res)))); return { stop: () => runs.forEach((r) => r.stop()), then: (f) => done.then(f) }; }; folders.forEach((f) => { init(f.g); init(f.front, "50% 100%"); f.papers.forEach((p) => init(p, "50% 100%")); }); init(shadow); [boxBack, boxFront].forEach((b) => init(b, "50% 100%")); /* the rim's shadows belong to the box: they arrive with it */ folders.forEach((f) => init(f.occ)); /* ── intro: the box settles onto the table and the folders are filed in ── */ let interacted = false; let hovered: Live | null = null; let run = 0; const intro = () => { const r = ++run; hovered = null; if (reduced) { root.dataset.ready = ""; return; } /* the box fades in as one layer: faded separately, its dark hollow would show through its front */ [boxBack, boxFront].forEach((b) => move(b, { y: 26, sy: 1 }, { duration: 0 })); scene.style.opacity = "0"; move(shadow, { opacity: 0, scale: 0.92 }, { duration: 0 }); folders.forEach((f) => move(f.occ, { opacity: 0 }, { duration: 0 })); folders.forEach((f) => { move(f.g, { y: -120, opacity: 0 }, { duration: 0 }); move(f.front, { sy: 1 }, { duration: 0 }); f.papers.forEach((p, j) => move(p, { y: 0, rotate: PAPER_TILT[j] }, { duration: 0 })); }); root.dataset.ready = ""; running.add(animate(scene, { opacity: [0, 1] }, { duration: 0.45, ease: EASE })); [boxBack, boxFront].forEach((b) => move(b, { y: 0 }, { type: "spring", stiffness: 160, damping: 20 })); folders.forEach((f) => move(f.occ, { opacity: 1 }, { duration: 0.5, ease: EASE, delay: 0.15 })); move(shadow, { opacity: 1, scale: 1 }, { duration: 0.9, ease: EASE, delay: 0.1 }); /* filed in back to front; the papers follow through as each lands */ folders.forEach((f, i) => { const at = 0.35 + i * 0.085; move(f.g, { opacity: 1 }, { duration: 0.22, delay: at }); move(f.g, { y: 0 }, { type: "spring", stiffness: 240, damping: 19, delay: at }); f.papers.forEach((p, j) => move(p, { y: [-16, 0] }, { type: "spring", stiffness: 260, damping: 13, delay: at + 0.12 + j * 0.03 })); }); /* the box gives a little as the last folder lands */ later(() => { if (r !== run) return; [boxBack, boxFront].forEach((b) => move(b, { sy: [1, 0.985, 1] }, { duration: 0.35, ease: EASE })); }, 900); /* one gentle "these are interactive" wave, unless someone already found out */ later(() => { if (r !== run || interacted) return; folders.forEach((f, i) => move(f.g, { y: [0, -10, 0] }, { duration: 0.6, ease: "easeInOut", delay: i * 0.07 })); }, 2400); }; /* ── hover: pulled up by its tab, the flap falls open, the papers lag behind ── */ const setHover = (target: Live | null) => { hovered = target; folders.forEach((f) => { const on = f === target; f.extend.setAttribute("pointer-events", on ? "all" : "none"); if (on) { move(f.g, { y: -LIFT, rotate: leanOf(f) }, reduced ? { duration: 0 } : HOVER.lift); move(f.front, { sy: 0.86 }, reduced ? { duration: 0 } : { ...HOVER.flap, delay: 0.07 }); f.papers.forEach((p, j) => move(p, { y: -(3 + j * 4), rotate: PAPER_TILT[j] + PAPER_FAN[j] * 0.8 }, reduced ? { duration: 0 } : { ...HOVER.paper, delay: 0.1 + j * 0.05 }), ); } else { /* the neighbours give way a little — less the further away they are */ const dist = target ? f.i - target.i : 0; const dy = dist === 0 ? 0 : (dist > 0 ? 3.5 : 1.5) / Math.abs(dist); const tilt = dist === 0 ? 0 : (-Math.sign(dist) * 0.5) / Math.abs(dist); const wasUp = tf.get(f.g)!.y.get() < -LIFT / 2; move(f.g, { y: dy, rotate: tilt }, reduced ? { duration: 0 } : wasUp ? HOVER.drop : { ...HOVER.nudge, delay: 0.03 * Math.abs(dist) }); move(f.front, { sy: 1 }, reduced ? { duration: 0 } : HOVER.flap); /* the sheets land after the folder does */ f.papers.forEach((p, j) => move(p, { y: 0, rotate: PAPER_TILT[j] }, reduced ? { duration: 0 } : { ...HOVER.paper, delay: wasUp ? 0.06 + (2 - j) * 0.04 : 0 }), ); } }); }; const pull = (f: Live) => { interacted = true; onPullRef.current?.({ color: f.c, position: f.position }); if (reduced) return; /* a quick tug: up past the hover height, the sheets flick, then it eases back */ const rest = hovered === f; move(f.g, { y: [null, -LIFT - 26, rest ? -LIFT : 0] }, { duration: 0.75, ease: [0.33, 1, 0.68, 1] }); f.papers.forEach((p, j) => move(p, { y: [null, -(18 + j * 9), rest ? -(3 + j * 4) : 0] }, { duration: 0.85, ease: [0.33, 1, 0.68, 1], delay: 0.05 + j * 0.05 }), ); later(() => [boxBack, boxFront].forEach((b) => move(b, { sy: [1, 0.992, 1] }, { duration: 0.35, ease: EASE })), 420); }; const offs: (() => void)[] = []; const on = (target: EventTarget, type: string, fn: (e: Event) => void) => { target.addEventListener(type, fn); offs.push(() => target.removeEventListener(type, fn)); }; folders.forEach((f) => { /* a short grace period on leave, so gliding from one folder to the next hands over directly instead of dropping everything for a frame */ let leaveTimer = 0; const enter = () => { clearTimeout(leaveTimer); interacted = true; if (hovered !== f) setHover(f); }; const leave = () => { clearTimeout(leaveTimer); leaveTimer = window.setTimeout(() => hovered === f && setHover(null), 80); }; on(f.hit, "pointerenter", enter); on(f.hit, "pointerleave", leave); on(f.hit, "focus", enter); on(f.hit, "blur", leave); on(f.hit, "click", () => pull(f)); on(f.hit, "keydown", (e) => { const k = (e as KeyboardEvent).key; if (k === "Enter" || k === " ") { e.preventDefault(); pull(f); } }); offs.push(() => clearTimeout(leaveTimer)); }); /* ── depth: the scene tilts with the pointer and the shadow answers the light ── */ const tiltX = motionValue(0); const tiltY = motionValue(0); const writeTilt = () => (posterEl.style.transform = `rotateY(${tiltY.get()}deg) rotateX(${tiltX.get()}deg)`); tiltX.on("change", writeTilt); tiltY.on("change", writeTilt); if (!reduced) { on(root, "pointermove", (e) => { const r = root.getBoundingClientRect(); const px = ((e as PointerEvent).clientX - r.left) / r.width - 0.5; const py = ((e as PointerEvent).clientY - r.top) / r.height - 0.5; running.add(animate(tiltY, px * 3, SOFT)); running.add(animate(tiltX, -py * 3, SOFT)); move(shadow, { x: -px * 10, y: -py * 5 }, SOFT); }); on(root, "pointerleave", () => { running.add(animate(tiltY, 0, SOFT)); running.add(animate(tiltX, 0, SOFT)); move(shadow, { x: 0, y: 0 }, SOFT); }); } /* R replays the intro while the box has focus */ on(root, "keydown", (e) => { const k = e as KeyboardEvent; if (k.key.toLowerCase() === "r" && !k.metaKey && !k.ctrlKey && !k.altKey && !k.repeat) intro(); }); apiRef.current = { /* the box settles under the new light */ settle: () => !reduced && [boxBack, boxFront].forEach((b) => move(b, { sy: [1, 0.985, 1] }, { duration: 0.45, ease: EASE, delay: 0.15 })), }; intro(); return () => { apiRef.current = null; offs.forEach((off) => off()); timers.forEach((t) => clearTimeout(t)); running.forEach((a) => a.stop()); tiltX.destroy(); tiltY.destroy(); scene.replaceChildren(); scene.style.opacity = ""; delete root.dataset.ready; }; }, [id]); useEffect(() => { if (firstTheme.current) { firstTheme.current = false; return; } apiRef.current?.settle(); }, [theme]); return (

); } 1e:T1e21,/* =========================================================================== File Box. A cardboard file box of five folders, drawn as one SVG in a square that centres itself in its box, on a grained paper field. Every colour is a token; the dark set swaps in on data-theme="dark". The tokens are registered as typed properties, so a theme change cross-fades every face, folder, gradient and shadow together rather than snapping. =========================================================================== */ @property --pfbox-bg { syntax: ""; inherits: true; initial-value: #fbe9d2; } @property --pfbox-ink { syntax: ""; inherits: true; initial-value: #1e1e1e; } @property --pfbox-face-front-1 { syntax: ""; inherits: true; initial-value: #fbf2e3; } @property --pfbox-face-front-2 { syntax: ""; inherits: true; initial-value: #f1e3cb; } @property --pfbox-face-side-1 { syntax: ""; inherits: true; initial-value: #ebdabd; } @property --pfbox-face-side-2 { syntax: ""; inherits: true; initial-value: #dfcba8; } @property --pfbox-rim { syntax: ""; inherits: true; initial-value: #fff7ea; } @property --pfbox-hollow-1 { syntax: ""; inherits: true; initial-value: #3b322a; } @property --pfbox-hollow-2 { syntax: ""; inherits: true; initial-value: #16120f; } @property --pfbox-hollow-side-1 { syntax: ""; inherits: true; initial-value: #181410; } @property --pfbox-hollow-side-2 { syntax: ""; inherits: true; initial-value: #2c251f; } @property --pfbox-hole { syntax: ""; inherits: true; initial-value: #2b2219; } @property --pfbox-shadow-wide { syntax: ""; inherits: true; initial-value: #5b3a17; } @property --pfbox-shadow-wide-o { syntax: ""; inherits: true; initial-value: 0.26; } @property --pfbox-shadow-tight { syntax: ""; inherits: true; initial-value: #3a240c; } @property --pfbox-shadow-tight-o { syntax: ""; inherits: true; initial-value: 0.3; } @property --pfbox-occ { syntax: ""; inherits: true; initial-value: #1b120a; } @property --pfbox-occ-o { syntax: ""; inherits: true; initial-value: 0.42; } @property --pfbox-green-f { syntax: ""; inherits: true; initial-value: #22a862; } @property --pfbox-green-b { syntax: ""; inherits: true; initial-value: #167f46; } @property --pfbox-beige-f { syntax: ""; inherits: true; initial-value: #fbe6c5; } @property --pfbox-beige-b { syntax: ""; inherits: true; initial-value: #e9cc9a; } @property --pfbox-pink-f { syntax: ""; inherits: true; initial-value: #f4b6f6; } @property --pfbox-pink-b { syntax: ""; inherits: true; initial-value: #dc94e0; } @property --pfbox-orange-f { syntax: ""; inherits: true; initial-value: #f8b02a; } @property --pfbox-orange-b { syntax: ""; inherits: true; initial-value: #de930c; } @property --pfbox-paper-1 { syntax: ""; inherits: true; initial-value: #fffdf8; } @property --pfbox-paper-2 { syntax: ""; inherits: true; initial-value: #f3eee4; } @property --pfbox-paper-3 { syntax: ""; inherits: true; initial-value: #ffffff; } @property --pfbox-paper-line { syntax: ""; inherits: true; initial-value: #cbbfa9; } @property --pfbox-flap-hi { syntax: ""; inherits: true; initial-value: rgb(255 255 255 / 0.35); } @property --pfbox-crease { syntax: ""; inherits: true; initial-value: rgb(0 0 0 / 0.12); } @property --pfbox-grain-o { syntax: ""; inherits: true; initial-value: 0.16; } .pfbox { --pfbox-bg: #fbe9d2; --pfbox-ink: #1e1e1e; --pfbox-focus: #1e1e1e; --pfbox-grain-blend: multiply; --pfbox-grain-o: 0.16; --pfbox-face-front-1: #fbf2e3; --pfbox-face-front-2: #f1e3cb; --pfbox-face-side-1: #ebdabd; --pfbox-face-side-2: #dfcba8; --pfbox-rim: #fff7ea; --pfbox-hollow-1: #3b322a; --pfbox-hollow-2: #16120f; --pfbox-hollow-side-1: #181410; --pfbox-hollow-side-2: #2c251f; --pfbox-hole: #2b2219; --pfbox-shadow-wide: #5b3a17; --pfbox-shadow-wide-o: 0.26; --pfbox-shadow-tight: #3a240c; --pfbox-shadow-tight-o: 0.3; --pfbox-occ: #1b120a; --pfbox-occ-o: 0.42; --pfbox-green-f: #22a862; --pfbox-green-b: #167f46; --pfbox-beige-f: #fbe6c5; --pfbox-beige-b: #e9cc9a; --pfbox-pink-f: #f4b6f6; --pfbox-pink-b: #dc94e0; --pfbox-orange-f: #f8b02a; --pfbox-orange-b: #de930c; --pfbox-paper-1: #fffdf8; --pfbox-paper-2: #f3eee4; --pfbox-paper-3: #ffffff; --pfbox-paper-line: #cbbfa9; --pfbox-flap-hi: rgb(255 255 255 / 0.35); --pfbox-crease: rgb(0 0 0 / 0.12); position: relative; isolation: isolate; display: grid; place-items: center; width: 100%; aspect-ratio: 1; overflow: hidden; /* the box sizes itself to the largest square that fits */ container-type: size; perspective: 1600px; background: var(--pfbox-bg); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; outline: none; transition-duration: 0.5s; transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1); transition-property: --pfbox-bg, --pfbox-ink, --pfbox-grain-o, --pfbox-face-front-1, --pfbox-face-front-2, --pfbox-face-side-1, --pfbox-face-side-2, --pfbox-rim, --pfbox-hollow-1, --pfbox-hollow-2, --pfbox-hollow-side-1, --pfbox-hollow-side-2, --pfbox-hole, --pfbox-shadow-wide, --pfbox-shadow-wide-o, --pfbox-shadow-tight, --pfbox-shadow-tight-o, --pfbox-occ, --pfbox-occ-o, --pfbox-green-f, --pfbox-green-b, --pfbox-beige-f, --pfbox-beige-b, --pfbox-pink-f, --pfbox-pink-b, --pfbox-orange-f, --pfbox-orange-b, --pfbox-paper-1, --pfbox-paper-2, --pfbox-paper-3, --pfbox-paper-line, --pfbox-flap-hi, --pfbox-crease; } .pfbox[data-theme="dark"] { --pfbox-bg: #17130f; --pfbox-ink: #0b0907; --pfbox-focus: #f3e6d3; --pfbox-grain-blend: screen; --pfbox-grain-o: 0.07; --pfbox-face-front-1: #4a3f33; --pfbox-face-front-2: #3b3228; --pfbox-face-side-1: #352c23; --pfbox-face-side-2: #2a231c; --pfbox-rim: #5e5142; --pfbox-hollow-1: #15110d; --pfbox-hollow-2: #050403; --pfbox-hollow-side-1: #060504; --pfbox-hollow-side-2: #110e0b; --pfbox-hole: #0b0907; --pfbox-shadow-wide: #000000; --pfbox-shadow-wide-o: 0.55; --pfbox-shadow-tight: #000000; --pfbox-shadow-tight-o: 0.6; --pfbox-occ: #000000; --pfbox-occ-o: 0.6; --pfbox-green-f: #1e8f55; --pfbox-green-b: #13663a; --pfbox-beige-f: #cdb896; --pfbox-beige-b: #a88f69; --pfbox-pink-f: #c98fd0; --pfbox-pink-b: #a56fad; --pfbox-orange-f: #d99520; --pfbox-orange-b: #b0750c; --pfbox-paper-1: #e6dfd2; --pfbox-paper-2: #cfc7b8; --pfbox-paper-3: #eee8dd; --pfbox-paper-line: #9c917f; --pfbox-flap-hi: rgb(255 255 255 / 0.18); --pfbox-crease: rgb(0 0 0 / 0.3); } /* filling its container: the field is the whole box and the scene centres in it */ .pfbox[data-fill] { height: 100%; aspect-ratio: auto; } .pfbox__poster { position: relative; width: min(100cqw, 100cqh); aspect-ratio: 1; opacity: 0; transition: opacity 0.5s ease; } .pfbox[data-ready] .pfbox__poster { opacity: 1; } .pfbox__art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; stroke: var(--pfbox-ink); } .pfbox__grain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: var(--pfbox-grain-blend); opacity: var(--pfbox-grain-o); } .pfbox__hit { cursor: pointer; outline: none; } .pfbox__hit:focus-visible .pfbox__hitBase { stroke: var(--pfbox-focus); stroke-width: 2; stroke-dasharray: 5 5; stroke-opacity: 1; } @media (prefers-reduced-motion: reduce) { .pfbox, .pfbox__poster { transition: none; } } 14:[[["$","script","0",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareSourceCode\",\"name\":\"File Box — Pin UI\",\"description\":\"A cardboard file box whose folders lift out by their tabs. Five colourful folders standing in a cardboard file box, drawn as one SVG. Hover one and it is pulled up by its tab, the flap falls open a beat later and its sheets of paper trail behind on looser springs while its neighbours give way; click\",\"url\":\"https://www.pinui.xyz/components/file-box\",\"codeRepository\":\"https://github.com/Rachit315/Pin-UI\",\"programmingLanguage\":\"TypeScript\",\"runtimePlatform\":\"React\",\"author\":{\"@id\":\"https://www.pinui.xyz/#organization\"},\"isPartOf\":{\"@id\":\"https://www.pinui.xyz/#software\"},\"license\":\"https://opensource.org/licenses/MIT\"}"}}],["$","script","1",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://www.pinui.xyz\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Components\",\"item\":\"https://www.pinui.xyz/components\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"File Box\",\"item\":\"https://www.pinui.xyz/components/file-box\"}]}"}}]],["$","$L1c",null,{"entry":{"slug":"file-box","category":"cards","name":"File Box","isNew":true,"tagline":"A cardboard file box whose folders lift out by their tabs.","blurb":"Five colourful folders standing in a cardboard file box, drawn as one SVG. Hover one and it is pulled up by its tab, the flap falls open a beat later and its sheets of paper trail behind on looser springs while its neighbours give way; click for a tug. The whole scene tilts with the pointer, and a theme change cross-fades every face and shadow.","highlights":["Pulled up by the tab","Trailing paper springs","Neighbours give way","Cross-fading theme"],"clip":"/clips/loop/file-box.mp4","poster":"/clips/loop/file-box.jpg","sound":false,"zoom":1,"stage":"#fbe9d2","clipStage":"#fbe9d2","stageDark":"#17130f","fill":true,"usage":"import FileBox from \"@/components/library/FileBox\";\n\n console.log(color, position)} />","props":[{"name":"theme","type":"\"light\" | \"dark\"","fallback":"\"light\"","note":"Warm cardboard on cream paper, or the same box in a dim room. Every colour cross-fades when it changes."},{"name":"fill","type":"boolean","fallback":"false","note":"Take the container's whole box, with the scene centred in the largest square that fits. Without it the box is square."},{"name":"onPull","type":"({ color, position }) => void","note":"Called when a folder is tugged, with its colour and its place counted from the front (1–5)."}],"files":[{"name":"FileBox.tsx","lang":"tsx"},{"name":"file-box.css","lang":"css"}],"info":{"paragraphs":["The box is drawn in an oblique projection as a single SVG: its hollow back, then the folders standing in it back to front, then the front and side faces over them, so a lifted folder rises out of the box rather than through it. Each folder is a back panel with its tab, three sheets of paper and a front flap, and the rim's shadow is fixed to the box, so a folder slides out of it as it lifts.","Hover or focus a folder and it is pulled up by its tab, tipping a hair toward that side; the flap swings open a beat later and the sheets trail behind on lighter, underdamped springs, while the neighbours give way a little — less the further away they are. Click, Enter or Space gives it a tug. Every transform is a Motion value, so sweeping across the folders hands one target to the next with its velocity intact rather than restarting from rest.","On arrival the box settles onto the table, the folders are filed in back to front and the box gives a little as the last one lands. The scene tilts a few degrees with the pointer and its shadow answers it. Its colours are typed custom properties, so a theme change cross-fades every face, gradient and shadow together; R replays the arrival while it has focus."]},"origin":{"label":"Folder · file box"}},"panes":[{"name":"FileBox.tsx","lang":"tsx","code":"$1d"},{"name":"file-box.css","lang":"css","code":"$1e"}],"registryUrl":"https://www.pinui.xyz/r/file-box.json"}]]

File Box — Pin UI Component