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:T5b9d,import { useCallback, useEffect, useRef, useState } from "react"; import { animate, motion, useMotionValue, useReducedMotion, useSpring, useTransform } from "framer-motion"; /** What is printed on the pocket and typed on the card. `ink` is the colour a date was stamped in. */ const library = { name: "Fennel Street Reading Room", card: "Evenings, autumn list", number: "No. 0417" }; const INKS = { violet: "#43349a", red: "#b3271c", navy: "#1c2b55" }; const dates: { date: string; what: string; where: string; ink: keyof typeof INKS; turn: number; dx: number; dy: number }[] = [ { date: "02 OCT 2026", what: "Poetry open mic", where: "Upstairs, 7 pm", ink: "red", turn: -2.4, dx: 1, dy: 1 }, { date: "09 OCT 2026", what: "Mending circle", where: "Bring a jumper", ink: "red", turn: 1.6, dx: -2, dy: -1 }, { date: "16 OCT 2026", what: "Zine fair", where: "Whole ground floor", ink: "navy", turn: -0.8, dx: 2, dy: 2 }, { date: "23 OCT 2026", what: "Ghost stories", where: "Candles, 8 pm", ink: "violet", turn: 3.1, dx: -1, dy: 0 }, { date: "30 OCT 2026", what: "Seed swap", where: "Courtyard, noon", ink: "violet", turn: -1.9, dx: 3, dy: -2 }, { date: "06 NOV 2026", what: "Letterpress hour", where: "Print room", ink: "navy", turn: 0.9, dx: -3, dy: 1 }, { date: "13 NOV 2026", what: "Translators read", where: "Upstairs, 7 pm", ink: "violet", turn: -2.8, dx: 1, dy: -1 }, { date: "20 NOV 2026", what: "Quiet disco", where: "Stacks, 9 pm", ink: "violet", turn: 2.2, dx: -1, dy: 2 }, ]; // Sizes in the scene's own pixels. Two layouts: stamp beside the pocket, or under it on narrow screens. const PW = 330; // pocket const CW = 262; // card const CH = 430; const HEAD = 74; // printed heading of the card const ROW = 37; const OUT = 270; // how far the card travels out of the pocket const CARD_IN = 318; // top of the card when tucked in const FRONT_Y = 418; // top edge of the pocket front const BACK_Y = 340; const FLOOR = 620; const SW = 152; // stamp const SH = 74; const WIDE = { W: 920, H: 684, px: 196, restX: 700, restY: 498, restTurn: 11 }; const TALL = { W: 430, H: 800, px: 50, restX: 292, restY: 706, restTurn: -7 }; type Layout = typeof WIDE; const STAGE = "#c9c6ea"; const fibre = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.24 0 0 0 0 0.08 0 0 0 0.3 -0.06'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E\")"; const manila = "#e3c283"; const INK_FILTER = "library-date-due-card-ink"; export default function LibraryDateDueCard() { const reduce = !!useReducedMotion(); const wrapRef = useRef(null); const sceneRef = useRef(null); const [tall, setTall] = useState(false); const [stamped, setStamped] = useState(6); const [out, setOut] = useState(true); const [busy, setBusy] = useState(false); const live = useRef({ paused: false, touched: false, busy: false, alive: true, stamped: 6, out: true }); const L: Layout = tall ? TALL : WIDE; const lay = useRef(L); lay.current = L; const cardY = useMotionValue(reduce ? -OUT : -OUT + 30); const sx = useMotionValue(WIDE.restX); const sy = useMotionValue(WIDE.restY); const turn = useMotionValue(WIDE.restTurn); const lift = useMotionValue(0.35); // 0 pressed on the card, 1 carried in the hand const body = useTransform([sx, sy, turn, lift], ([x, y, r, l]: number[]) => `translate3d(${x - SW / 2}px, ${y - SH / 2}px, ${14 + l * 90}px) rotate(${r}deg) scale(${1 + l * 0.03})`); const shade = useTransform([sx, sy, turn, lift], ([x, y, r, l]: number[]) => `translate3d(${x - SW / 2 + 4 + l * 20}px, ${y - SH / 2 + 5 + l * 30}px, 11px) rotate(${r}deg) scale(${1 + l * 0.05})`); const shadeBlur = useTransform(lift, (l) => `blur(${5 + l * 15}px)`); const shadeFade = useTransform(lift, (l) => 0.5 - l * 0.22); // the whole flat lay is one tray that tips a few degrees: with the pointer, and slowly by itself const px = useSpring(0, { stiffness: 45, damping: 14 }); const py = useSpring(0, { stiffness: 45, damping: 14 }); const drift = useMotionValue(0); const tipY = useTransform([px, drift], ([a, b]: number[]) => a * 5 + b); const tipX = useTransform([py, drift], ([a, b]: number[]) => 5 - a * 4 + b * 0.4); useEffect(() => { if (reduce) return; const a = animate(drift, [-2.6, 2.6], { duration: 6, ease: "easeInOut", repeat: Infinity, repeatType: "mirror" }); return () => a.stop(); }, [drift, reduce]); const slide = useCallback( (to: boolean) => { live.current.out = to; setOut(to); if (reduce) cardY.set(to ? -OUT : 0); else animate(cardY, to ? -OUT : 0, { type: "spring", stiffness: 130, damping: 17, mass: 1.1 }); }, [cardY, reduce], ); /** Carry the dater to the next empty row, press it, and bring it home. */ const stamp = useCallback(async () => { const s = live.current; if (s.busy) return; if (s.stamped >= dates.length) { // a full card goes back in the pocket and a fresh one comes out s.busy = true; setBusy(true); slide(false); await new Promise((r) => window.setTimeout(r, reduce ? 0 : 750)); if (!s.alive) return; s.stamped = 4; setStamped(4); slide(true); s.busy = false; setBusy(false); return; } s.busy = true; setBusy(true); if (!s.out) { slide(true); await new Promise((r) => window.setTimeout(r, reduce ? 0 : 520)); } const n = s.stamped; const row = dates[n]; const now = lay.current; const tx = now.px + (PW - CW) / 2 + 53 + row.dx; const ty = CARD_IN - OUT + HEAD + n * ROW + ROW / 2 + row.dy; if (!reduce) { const go = { duration: 0.46, ease: [0.3, 0.7, 0.3, 1] } as const; animate(lift, 1, { duration: 0.2 }); animate(turn, row.turn, go); animate(sx, tx, go); await animate(sy, ty, go); await animate(lift, 0, { duration: 0.1, ease: "easeIn" }); } if (!s.alive) return; s.stamped = n + 1; setStamped(n + 1); if (!reduce) { await new Promise((r) => window.setTimeout(r, 130)); await animate(lift, 1, { duration: 0.16, ease: "easeOut" }); const home = { type: "spring", stiffness: 120, damping: 17 } as const; animate(turn, now.restTurn, home); animate(sx, now.restX, home); animate(sy, now.restY, home); await animate(lift, 0.35, { duration: 0.5, delay: 0.25 }); } s.busy = false; setBusy(false); }, [lift, reduce, slide, sx, sy, turn]); useEffect(() => { const s = live.current; s.alive = true; return () => { s.alive = false; }; }, []); // the card settles the last little way as the page loads, then the dater works down the list by itself useEffect(() => { if (reduce) return; const settle = animate(cardY, -OUT, { type: "spring", stiffness: 120, damping: 11, delay: 0.25 }); let timer = 0; const tick = () => { const s = live.current; if (s.touched) return; if (!s.paused && !document.hidden) stamp(); timer = window.setTimeout(tick, s.stamped >= dates.length ? 3200 : 2500); }; timer = window.setTimeout(tick, 2750); return () => { settle.stop(); window.clearTimeout(timer); }; }, [cardY, reduce, stamp]); useEffect(() => { const wrap = wrapRef.current; const scene = sceneRef.current; if (!wrap || !scene) return; const measure = () => { const isTall = wrap.clientWidth < 700; const now = isTall ? TALL : WIDE; setTall(isTall); if (!live.current.busy) { sx.set(now.restX); sy.set(now.restY); turn.set(now.restTurn); } const sc = Math.min(1.06, wrap.clientWidth / now.W); wrap.style.height = `${Math.round(now.H * sc)}px`; scene.style.transform = `translateX(-50%) scale(${sc.toFixed(4)})`; }; measure(); const ro = new ResizeObserver(measure); ro.observe(wrap); return () => ro.disconnect(); }, [sx, sy, turn]); const hand = () => (live.current.touched = true); const full = stamped >= dates.length; const next = dates[Math.min(stamped, dates.length - 1)]; const cardX = L.px + (PW - CW) / 2; const paper = { backgroundColor: manila, backgroundImage: `linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0) 45%, rgba(120,80,20,0.14)), ${fibre}` } as const; return (

(live.current.paused = true)} onPointerMove={(e) => { 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); }} onPointerLeave={() => { live.current.paused = false; px.set(0); py.set(0); }} onFocus={() => (live.current.paused = true)} onBlur={() => (live.current.paused = false)}>

{/* shadow the whole pocket throws on the table */}

{/* back of the pocket */}

{/* the card, cut off where it passes the glued bottom of the pocket */}

slide(cardY.get() + info.velocity.y * 0.18 < -OUT / 2)} >

{library.name}

{library.card}

Date What is on

{i < stamped ? ( {d.date} ) : ( Date to be announced )} {d.what} {d.where}

{/* front of the pocket: a thumb notch cut in its top edge, glued down both sides */}

{library.name}

A date is stamped on this card each time an evening is announced. Please leave it in the pocket.

{library.number}

{/* the dater, seen from straight above */} { hand(); stamp(); }} aria-disabled={busy} aria-label={full ? "Put this card away and start a new one" : `Stamp the next date, ${next.date}, ${next.what}`} className="absolute left-0 top-0 block cursor-pointer rounded-[13px] outline-none focus-visible:ring-[3px] focus-visible:ring-[#43349a] focus-visible:ring-offset-2 focus-visible:ring-offset-[#c9c6ea]" style={{ width: SW, height: SH, transform: body, backgroundColor: "#17171a", backgroundImage: "linear-gradient(180deg, #4a4a52 0%, #26262b 12%, #141417 55%, #0a0a0c 100%)", boxShadow: "inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 3px rgba(0,0,0,0.8), inset 2px 0 2px rgba(255,255,255,0.08), inset -2px 0 3px rgba(0,0,0,0.6), 0 0 0 1px #050506, 0 0 0 4px #1b1b1f, 0 0 0 5px #000, 0 1px 0 5px rgba(255,255,255,0.18)" }} > {/* ridged grips at either end */} {[0, 1].map((side) => ( ))} {/* four knurled wheels that set day, month and year */} {[0, 1, 2, 3].map((w) => ( ))} {/* the index window: a paper slip under clear plastic that shows what it will print */}

{stamped} of {dates.length} dates stamped {full ? "Card full: press the stamp for a new one" : `Next: ${next.what}`}

); } 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/library-date-due-card-and-pocket-event-list-that-a-self-inking-dater-stamps-row-by-row.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]