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:T4f97,import { useEffect, useId, useRef, useState } from "react"; import { animate, motion, useMotionValue, useReducedMotion, useTransform } from "framer-motion"; /** The name on the brass holder and one card per question. `tab` is the short word cut into the card's tab. */ const library = { name: "Halewood Tool Library", drawer: "Questions", note: "Ask at the counter" }; const cards = [ { tab: "Joining", q: "How do I become a member?", a: "Call in on any open day with something that shows your address. We take your details, hand you a card and you can borrow that same afternoon." }, { tab: "Hours", q: "When is the library open?", a: "Tuesday and Thursday from four until eight, and Saturday from nine until one. The shutter on Mill Lane is up whenever we are in." }, { tab: "Loans", q: "How long can I keep a tool?", a: "A week for most things. Ladders, the tile cutter and the floor sander go out for three days because there is always a queue for them." }, { tab: "Late", q: "What if I bring something back late?", a: "Tell us before the due date and we will extend it if nobody is waiting. After that it is fifty pence a day, which goes into the blade fund." }, { tab: "Repairs", q: "What happens if a tool breaks?", a: "Bring it back and say what happened. Wear is ours to fix. We only ask for help with the cost when something has plainly been misused." }, { tab: "Demos", q: "Can someone show me how to use it?", a: "Yes. A volunteer will run through any tool at the counter, and the first Saturday of each month is a hands-on morning with the kettle on." }, ]; // Two sets of measurements in pixels: one for desks, one for phones. Everything is drawn from these. const WIDE = { boxW: 560, wall: 16, boxH: 168, cardW: 468, cardH: 292, tabW: 86, tabH: 28, step: 12, lidH: 340, pad: 22, head: 62, line: 24, text: 14, ask: 15, tabText: 10.5 }; const SLIM = { boxW: 336, wall: 11, boxH: 122, cardW: 292, cardH: 300, tabW: 54, tabH: 28, step: 12, lidH: 350, pad: 14, head: 60, line: 21, text: 12, ask: 12.5, tabText: 8 }; type Dims = typeof WIDE; const TOP = 64; // room above the lid for a card at the top of its flight const CLEAR = 60; // how far a card overshoots so it clears the tabs before dropping behind them const SEAT = 60; // how far above the rim the standing card's bottom edge sits const PEEK = 22; // how much of the front card shows above the rim const svgUrl = (body: string, w: number, h: number) => `url("data:image/svg+xml;utf8,${encodeURIComponent(``)}")`; /** Oak figure: stretched noise turned into dark streaks. fx is along the grain, fy across it. */ const grain = (fx: number, fy: number, seed: number, strength = 1.5) => svgUrl(``, 600, 400); const PAPER_GRAIN = svgUrl(``, 220, 220); const OAK_FACE = `${grain(0.011, 0.82, 7, 2.6)}, ${grain(0.0022, 0.06, 3, 1.5)}`; const OAK_LID = `${grain(0.012, 0.7, 21, 2.4)}, ${grain(0.002, 0.05, 9, 1.4)}`; const OAK_UP = `${grain(0.8, 0.012, 4, 2.2)}, ${grain(0.05, 0.002, 5, 1.2)}`; const BRASS = "linear-gradient(180deg, #fff1bd 0%, #e0bb62 22%, #b98d33 55%, #8a6519 78%, #d9b660 100%)"; const TONES = ["#f4ebd7", "#f1e6cf", "#f5edda", "#efe3ca", "#f3e9d3", "#f0e5cd"]; const JITTER = [ { x: -1, r: 0.25 }, { x: 2, r: -0.3 }, { x: 0, r: 0.15 }, { x: -2, r: -0.2 }, { x: 1, r: 0.3 }, { x: -1, r: -0.15 }, ]; /** A card dropped on its edge: one firm landing and one small hop. */ const landing = (t: number) => (t < 0.62 ? (t / 0.62) * (t / 0.62) : 1 - 0.09 * Math.sin(((t - 0.62) / 0.38) * Math.PI)); function IndexCard({ i, d, rimY, active, reduce, onPick, uid }: { i: number; d: Dims; rimY: number; active: boolean; reduce: boolean; onPick: () => void; uid: string }) { const item = cards[i]; const rowTop = rimY - PEEK - i * d.step; const rise = rowTop - (rimY - SEAT - d.cardH); const y = useMotionValue(active ? -rise : 0); const rotate = useTransform(y, [0, -rise * 0.5, -rise], [JITTER[i].r, -0.9, 0]); const [behind, setBehind] = useState(active); const [out, setOut] = useState(active); const was = useRef({ active, behind: active, greeted: false }); useEffect(() => { const put = (b: boolean) => { was.current.behind = b; setBehind(b); }; if (was.current.active === active || reduce) { // nothing was pressed (first paint, or the frame changed size): sit where it belongs was.current.active = active; y.set(active ? -rise : 0); put(active); setOut(active); if (active || reduce || was.current.greeted) return; // once, on arrival, a finger runs along the tabs was.current.greeted = true; const hop = animate(y, [0, -9, 0], { duration: 0.5, delay: 0.75 + i * 0.11, ease: "easeInOut" }); return () => hop.stop(); } was.current.active = active; let live = true; let run = animate(y, y.get(), { duration: 0 }); const home = () => { run = animate(y, 0, { type: "spring", stiffness: 210, damping: 25 }); run.then(() => live && setOut(false)); }; if (active) { setOut(true); run = animate(y, -(rise + CLEAR), { duration: 0.44, ease: [0.3, 0, 0.12, 1] }); run.then(() => { if (!live) return; put(true); run = animate(y, -rise, { duration: 0.42, ease: landing }); }); } else if (was.current.behind) { run = animate(y, -(rise + CLEAR), { duration: 0.24, ease: [0.4, 0, 0.5, 1] }); run.then(() => { if (!live) return; put(false); home(); }); } else home(); return () => { live = false; run.stop(); }; }, [active, reduce, rise, y]); const tabLeft = (i * (d.cardW - d.tabW)) / (cards.length - 1); const paper = TONES[i % TONES.length]; return ( {/* the tab is the control: it is cut from the same sheet as the card */}

{/* printed rules: one red, the rest blue */}

); } export default function OakCardIndexFaq() { const reduce = !!useReducedMotion(); const uid = useId(); const wrapRef = useRef(null); const [slim, setSlim] = useState(false); const [scale, setScale] = useState(1); const [open, setOpen] = useState(0); const idle = useRef({ touched: false, paused: false }); const d = slim ? SLIM : WIDE; const back = cards.length * d.step + 12; // how far up the screen the box runs from its front rim to its hinge const rimY = TOP + d.lidH + back; const W = d.boxW + 48; const H = rimY + d.boxH + 44; const x0 = 24; useEffect(() => { const wrap = wrapRef.current; if (!wrap) return; const measure = () => { const w = wrap.clientWidth; const narrow = w < 640; setSlim(narrow); setScale(Math.min(1, w / ((narrow ? SLIM : WIDE).boxW + 20))); }; measure(); const ro = new ResizeObserver(measure); ro.observe(wrap); return () => ro.disconnect(); }, []); // until someone touches it, the box leafs through its own cards useEffect(() => { if (reduce) return; const s = idle.current; const t = window.setInterval(() => { if (s.touched || s.paused || document.hidden) return; setOpen((v) => (v + 1) % cards.length); }, 3600); return () => window.clearInterval(t); }, [reduce]); const pick = (i: number) => { idle.current.touched = true; setOpen((v) => (v === i ? -1 : i)); }; const frame = d.wall; const fingers = [0, 1, 2, 3, 4]; return (

(idle.current.paused = true)} onPointerLeave={() => (idle.current.paused = false)} onFocus={() => (idle.current.paused = true)} onBlur={() => (idle.current.paused = false)} className="relative mx-auto w-full max-w-[1100px]" style={{ height: Math.round(H * scale) + (slim ? 96 : 64) }} >

{library.name}: questions and answers

{/* what the box does to the table and the wall behind it */}

{/* the lid, standing open: a shallow tray seen from inside */}

{/* mitred frame: each rail catches the light differently */}

{/* inside the box, with the tops of its side walls running back to the hinge */}

{[0, 1].map((side) => ( ))} {/* cards are taller than the box is deep on screen, so they are cut off where its floor would be */}

{cards.map((_, i) => ( pick(i)} uid={uid} /> ))}

{/* the front of the box: rim, oak face, finger joints, brass holder */}

{[0, 1].map((side) => fingers.map((f) => f % 2 === 0 ? ( ) : null, ), )} {/* brass label holder with a finger pull */}

{library.drawer} {library.note}

{[ { left: 1.5, top: 1.5 }, { right: 1.5, top: 1.5 }, { left: 1.5, bottom: 1.5 }, { right: 1.5, bottom: 1.5 }, ].map((p, k) => ( ))}

{library.name} Press a tab to pull its card

); } 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/oak-card-index-box-faq-with-tabbed-question-cards-that-rise-out-and-stand-against-the-open-lid.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]

{item.tab} {item.q}