60: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"] 61: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"] 62:T6a13,import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { animate, motion, useMotionValue, useReducedMotion, useSpring, useTransform } from "framer-motion"; /** The border posts. `kind` picks the die, `ink` is its red, green and blue. */ const entries: { place: string; kind: "round" | "box" | "oval" | "octagon"; word: string; date: string; office: string; ink: [number, number, number] }[] = [ { place: "Port Callow", kind: "round", word: "ARRIVED", date: "14 MAR 2026", office: "IMMIGRATION", ink: [36, 58, 148] }, { place: "Saint Elvary", kind: "box", word: "ENTRY", date: "02 APR 2026", office: "HARBOUR CONTROL", ink: [186, 38, 50] }, { place: "Veyra Islands", kind: "oval", word: "ADMITTED", date: "19 APR 2026", office: "FERRY PORT", ink: [20, 112, 86] }, { place: "Tarnholm", kind: "octagon", word: "DEPARTED", date: "23 APR 2026", office: "RAIL BORDER", ink: [44, 44, 52] }, { place: "Kossu Bay", kind: "round", word: "TRANSIT", date: "06 MAY 2026", office: "AIR TERMINAL", ink: [126, 52, 146] }, { place: "Marrowmere", kind: "box", word: "ARRIVED", date: "30 MAY 2026", office: "ROAD CROSSING", ink: [22, 100, 158] }, { place: "Cape Ilse", kind: "oval", word: "ENTRY", date: "11 JUN 2026", office: "SEA PORT", ink: [188, 88, 22] }, { place: "Dunmarrow", kind: "octagon", word: "ADMITTED", date: "27 JUN 2026", office: "NORTH GATE", ink: [156, 32, 78] }, ]; const ISSUER = "Laurel Sound"; // Design pixels: one page, the cover that shows round it, and the scene they sit in. const PW = 300; const PH = 426; const EDGE = 10; const SCENE_W = 900; const SCENE_H = 560; const TIP = 24; // degrees the booklet is tipped away const TURN = -7; // degrees it is turned on the desk const PER_SPREAD = 8; const SIZE = { round: [122, 122], box: [136, 86], oval: [142, 94], octagon: [116, 116] } as const; // where stamps land on a page when nobody aims them: left page then right page const SLOTS = { L: [ { x: 96, y: 118, r: -11 }, { x: 204, y: 202, r: 7 }, { x: 100, y: 296, r: 5 }, { x: 210, y: 356, r: -8 }, ], R: [ { x: 102, y: 108, r: 8 }, { x: 202, y: 176, r: -9 }, { x: 96, y: 262, r: -4 }, { x: 204, y: 338, r: 12 }, ], }; const ORDER: ["L" | "R", number][] = [["L", 0], ["R", 1], ["L", 2], ["L", 1], ["R", 0], ["R", 2], ["L", 3], ["R", 3]]; const START = 3; // stamps already in the book when it opens type Mark = { id: number; spread: number; side: "L" | "R"; x: number; y: number; r: number; die: number; fresh: boolean }; const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); /** One impression of a die: drawn solid, then starved of ink by noise and by the lean of the hand. */ function impress(i: number) { const e = entries[i]; const [w, h] = SIZE[e.kind]; const K = 2; const cv = document.createElement("canvas"); cv.width = w * K; cv.height = h * K; const c = cv.getContext("2d"); if (!c) return ""; c.scale(K, K); c.fillStyle = "#000"; c.strokeStyle = "#000"; c.textAlign = "center"; c.textBaseline = "middle"; const cx = w / 2; const cy = h / 2; const sans = (px: number, wt = 800) => `${wt} ${px}px 'Arial Narrow','Helvetica Neue',Helvetica,Arial,sans-serif`; const mono = (px: number) => `700 ${px}px ui-monospace,SFMono-Regular,Menlo,monospace`; const spaced = (text: string, x: number, y: number, gap: number) => { const ws = [...text].map((ch) => c.measureText(ch).width); let pen = x - (ws.reduce((a, b) => a + b, 0) + gap * (text.length - 1)) / 2; [...text].forEach((ch, k) => { c.fillText(ch, pen + ws[k] / 2, y); pen += ws[k] + gap; }); }; const arc = (text: string, radius: number, top: boolean, gap: number) => { const ws = [...text].map((ch) => c.measureText(ch).width + gap); const total = ws.reduce((a, b) => a + b, 0) / radius; let a = top ? -Math.PI / 2 - total / 2 : Math.PI / 2 + total / 2; [...text].forEach((ch, k) => { const step = ws[k] / radius; const mid = top ? a + step / 2 : a - step / 2; c.save(); c.translate(cx + Math.cos(mid) * radius, cy + Math.sin(mid) * radius); c.rotate(top ? mid + Math.PI / 2 : mid - Math.PI / 2); c.fillText(ch, 0, 0); c.restore(); a = top ? a + step : a - step; }); }; const plane = (x: number, y: number, s: number) => { c.save(); c.translate(x, y); c.scale(s, s); c.beginPath(); c.moveTo(9, 0); c.lineTo(2, -1.4); c.lineTo(-2, -8); c.lineTo(-4.4, -8); c.lineTo(-2.2, -1.5); c.lineTo(-6.5, -1.2); c.lineTo(-8.4, -3.6); c.lineTo(-9.6, -3.6); c.lineTo(-8.6, 0); c.lineTo(-9.6, 3.6); c.lineTo(-8.4, 3.6); c.lineTo(-6.5, 1.2); c.lineTo(-2.2, 1.5); c.lineTo(-4.4, 8); c.lineTo(-2, 8); c.lineTo(2, 1.4); c.closePath(); c.fill(); c.restore(); }; const place = e.place.toUpperCase(); if (e.kind === "round") { c.lineWidth = 3; c.beginPath(); c.arc(cx, cy, w / 2 - 3, 0, Math.PI * 2); c.stroke(); c.lineWidth = 1; c.beginPath(); c.arc(cx, cy, w / 2 - 8, 0, Math.PI * 2); c.stroke(); c.beginPath(); c.arc(cx, cy, w / 2 - 27, 0, Math.PI * 2); c.stroke(); c.font = sans(11.5, 900); arc(place, w / 2 - 17.5, true, 2.2); c.font = sans(8.5); arc(e.office, w / 2 - 17.5, false, 2); c.fillRect(cx - w / 2 + 11, cy - 1.5, 5, 3); c.fillRect(cx + w / 2 - 16, cy - 1.5, 5, 3); plane(cx, cy - 17, 0.8); c.font = sans(13.5, 900); spaced(e.word, cx, cy + 1, 1); c.font = mono(7.2); c.fillText(e.date, cx, cy + 15); } else if (e.kind === "box") { const box = (x: number, y: number, bw: number, bh: number, r: number) => { c.beginPath(); c.moveTo(x + r, y); c.arcTo(x + bw, y, x + bw, y + bh, r); c.arcTo(x + bw, y + bh, x, y + bh, r); c.arcTo(x, y + bh, x, y, r); c.arcTo(x, y, x + bw, y, r); c.closePath(); c.stroke(); }; c.lineWidth = 3; box(2.5, 2.5, w - 5, h - 5, 5); c.lineWidth = 1; box(7.5, 7.5, w - 15, h - 15, 2); c.font = sans(10.5, 900); spaced(place, cx, 19.5, 2); c.fillRect(14, 27, w - 28, 1.2); c.font = sans(24, 900); spaced(e.word, cx, 43.5, 2.4); c.fillRect(14, 58, w - 28, 1.2); c.font = mono(7.4); c.fillText(`${e.date} ${e.office}`, cx, 67.5, w - 30); } else if (e.kind === "oval") { c.lineWidth = 2.8; c.beginPath(); c.ellipse(cx, cy, w / 2 - 3, h / 2 - 3, 0, 0, Math.PI * 2); c.stroke(); c.lineWidth = 1; c.beginPath(); c.ellipse(cx, cy, w / 2 - 8, h / 2 - 8, 0, 0, Math.PI * 2); c.stroke(); c.font = sans(10.5, 900); spaced(place, cx, cy - 23, 1.8); c.fillRect(cx - 36, cy - 14.5, 72, 1.1); c.font = sans(19, 900); spaced(e.word, cx, cy - 1, 1.6); c.fillRect(cx - 36, cy + 11.5, 72, 1.1); c.font = mono(7.4); c.fillText(e.date, cx, cy + 20); c.font = sans(7); spaced(e.office, cx, cy + 30, 1.4); } else { const ring = (rad: number) => { c.beginPath(); for (let k = 0; k < 8; k++) { const a = Math.PI / 8 + (k * Math.PI) / 4; c[k ? "lineTo" : "moveTo"](cx + Math.cos(a) * rad, cy + Math.sin(a) * rad); } c.closePath(); c.stroke(); }; c.lineWidth = 3; ring(w / 2 - 3); c.lineWidth = 1; ring(w / 2 - 8.5); c.font = sans(10.5, 900); spaced(place, cx, cy - 27, 1.8); plane(cx, cy - 13, 0.62); c.font = sans(16, 900); spaced(e.word, cx, cy + 3, 1.2); c.fillRect(cx - 34, cy + 13, 68, 1.1); c.font = mono(7.2); c.fillText(e.date, cx, cy + 21); c.font = sans(7); spaced(e.office, cx, cy + 31, 1.2); } const seed = i * 7.31 + 2.1; const hash = (x: number, y: number) => { const n = Math.sin(x * 127.1 + y * 311.7 + seed * 74.7) * 43758.5453; return n - Math.floor(n); }; const soft = (x: number, y: number) => { const xi = Math.floor(x), yi = Math.floor(y), fx = x - xi, fy = y - yi, ux = fx * fx * (3 - 2 * fx), uy = fy * fy * (3 - 2 * fy); return (hash(xi, yi) * (1 - ux) + hash(xi + 1, yi) * ux) * (1 - uy) + (hash(xi, yi + 1) * (1 - ux) + hash(xi + 1, yi + 1) * ux) * uy; }; const lean = hash(3, 9) * Math.PI * 2, lx = Math.cos(lean), ly = Math.sin(lean), rock = 0.2 + hash(5, 2) * 0.3, load = 0.86 + hash(8, 1) * 0.3; const img = c.getImageData(0, 0, cv.width, cv.height), d = img.data, W = cv.width, HH = cv.height; for (let y = 0; y < HH; y++) { for (let x = 0; x < W; x++) { const p = (y * W + x) * 4, a = d[p + 3]; if (!a) continue; const u = x / W, v = y / HH; const blotch = soft(u * 6, v * 5) * 0.6 + soft(u * 17 + 4, v * 15 + 4) * 0.4; const cover = load * 1.25 - 0.4 + (blotch - 0.5) * 1.1 + (lx * (u - 0.5) * 2 + ly * (v - 0.5) * 2) * rock; let t = clamp(cover / 0.5, 0, 1); t = t * t * (3 - 2 * t); let alpha = t * (0.78 + 0.22 * hash(x, y)); if (hash(Math.floor(x / 2) + 40, Math.floor(y / 2)) < 0.05 + 0.22 * (1 - t)) alpha *= 0.25; const deep = 1 - 0.2 * t * blotch; d[p] = e.ink[0] * deep; d[p + 1] = e.ink[1] * deep; d[p + 2] = e.ink[2] * deep; d[p + 3] = a * alpha * 0.92; } } c.putImageData(img, 0, 0); return cv.toDataURL(); } /** The printed background of a visa page: crossing wave lines and a lobed rosette, as on any security paper. */ function Printing({ flip }: { flip: boolean }) { const art = useMemo(() => { const waves: string[] = []; for (let k = 0; k < 16; k++) { let dd = ""; for (let x = -4; x <= PW + 4; x += 6) { const y = 34 + k * 24 + Math.sin(x * 0.045 + k * 0.9) * 9 + Math.sin(x * 0.11 + k) * 2.5; dd += `${x === -4 ? "M" : "L"}${x} ${y.toFixed(1)}`; } waves.push(dd); } const cross: string[] = []; for (let k = 0; k < 16; k++) { let dd = ""; for (let x = -4; x <= PW + 4; x += 6) { const y = 46 + k * 24 - Math.sin(x * 0.045 + k * 0.9 + 1.4) * 9; dd += `${x === -4 ? "M" : "L"}${x} ${y.toFixed(1)}`; } cross.push(dd); } const rosette = [0, 1, 2, 3, 4, 5, 6, 7].map((n) => { let dd = ""; for (let s = 0; s <= 360; s += 1) { const a = (s * Math.PI) / 180; const rad = 50 + (n % 4) * 7 + 13 * Math.sin(a * 14 + (n * Math.PI) / 4) * (n < 4 ? 1 : 0.45); dd += `${s ? "L" : "M"}${(PW / 2 + Math.cos(a) * rad).toFixed(1)} ${(PH / 2 + 6 + Math.sin(a) * rad).toFixed(1)}`; } return dd + "Z"; }); return { waves, cross, rosette }; }, []); return ( ); } function Page({ side, no, marks, inks, still, onAim }: { side: "L" | "R"; no: number; marks: Mark[]; inks: string[]; still: boolean; onAim?: (side: "L" | "R", x: number, y: number) => void }) { const left = side === "L"; return (

onAim(side, e.nativeEvent.offsetX, e.nativeEvent.offsetY) : undefined} className={`absolute inset-0 overflow-hidden bg-[#efe6d0] ${left ? "rounded-l-[9px] rounded-r-[2px]" : "rounded-l-[2px] rounded-r-[9px]"} ${onAim ? "cursor-crosshair" : ""}`} >

Visas {ISSUER}

{no}

LS 7204915

{inks.length > 0 && marks.map((m) => { const e = entries[m.die]; const [w, h] = SIZE[e.kind]; const move = m.fresh && !still; return (

{/* the shadow of the hand stamp coming down on this spot and leaving again */} {move && (

); })} {/* the page dips into the stitching and catches light where it rises out of it */} ); } const firstMarks: Mark[] = ORDER.slice(0, START).map(([side, n], i) => ({ id: i, spread: 0, side, ...SLOTS[side][n], die: i, fresh: false })); const fullMarks: Mark[] = ORDER.map(([side, n], i) => ({ id: i, spread: 0, side, ...SLOTS[side][n], die: i % entries.length, fresh: false })); const stack = (dir: 1 | -1) => [1, 2, 3, 4, 5].map((n) => `${dir * n * 1.1}px ${n * 0.9}px 0 ${n % 2 ? "#cfc3a6" : "#f3ebd8"}`).join(", "); export default function PassportStampCard() { const reduce = !!useReducedMotion(); const wrapRef = useRef(null); const sceneRef = useRef(null); const live = useRef({ touched: false, paused: false, clock: 0, id: 100, die: START, used: START, spread: 0, turning: false, wait: 0 }); const [inks, setInks] = useState([]); const [marks, setMarks] = useState(firstMarks); const [spread, setSpread] = useState(0); const [turning, setTurning] = useState(false); const [said, setSaid] = useState(""); const [nextDie, setNextDie] = useState(START); const px = useMotionValue(0); const py = useMotionValue(0); const rz = useSpring(useTransform(px, (v) => TURN + v * 4), { stiffness: 60, damping: 14 }); const rx = useSpring(useTransform(py, (v) => TIP - v * 5), { stiffness: 60, damping: 14 }); const jolt = useMotionValue(0); const dip = useTransform(jolt, (v) => -v * 9); const nod = useTransform(jolt, (v) => v * 1.1); const turn = useMotionValue(0); const leafAngle = useTransform(turn, (v) => -180 * v); const leafFront = useTransform(turn, (v) => clamp(v * 1.3, 0, 0.55)); const leafBack = useTransform(turn, (v) => clamp((1 - v) * 1.1, 0, 0.5)); const castRight = useTransform(turn, (v) => Math.sin(Math.min(1, v * 2) * Math.PI * 0.5) * (v < 0.5 ? 0.5 : 1 - v) * 1.1); const castLeft = useTransform(turn, (v) => (v > 0.4 ? Math.sin(((v - 0.4) / 0.6) * Math.PI) * 0.8 : 0)); useEffect(() => { setInks(entries.map((_, i) => impress(i))); }, []); useEffect(() => { if (!reduce) return; live.current.used = PER_SPREAD; live.current.die = PER_SPREAD; setMarks(fullMarks); setNextDie(PER_SPREAD % entries.length); }, [reduce]); const leaf = useCallback(() => { const s = live.current; if (s.turning) return; s.turning = true; const land = () => { s.spread += 1; s.used = 0; s.turning = false; s.clock = 0; setSpread(s.spread); setMarks((all) => all.filter((m) => m.spread >= s.spread)); setTurning(false); turn.set(0); }; setTurning(true); if (reduce) land(); else animate(turn, 1, { duration: 1.15, ease: [0.5, 0, 0.2, 1] }).then(land); }, [reduce, turn]); const stamp = useCallback( (at?: { side: "L" | "R"; x: number; y: number }) => { const s = live.current; if (s.turning) return; if (s.used >= PER_SPREAD + 4) return leaf(); const die = s.die % entries.length; const [side, n] = ORDER[s.used % ORDER.length]; const slot = SLOTS[side][n]; const [w, h] = SIZE[entries[die].kind]; const spot = at ? { side: at.side, x: clamp(at.x, w / 2 + 4, PW - w / 2 - 4), y: clamp(at.y, h / 2 + 26, PH - h / 2 - 26), r: ((s.id * 37) % 25) - 12 } : { side, ...slot }; s.id += 1; s.die += 1; s.used += 1; s.clock = 0; setMarks((all) => [...all, { id: s.id, spread: s.spread, ...spot, die, fresh: true }]); setNextDie(s.die % entries.length); setSaid(`Stamped ${entries[die].place}: ${entries[die].word.toLowerCase()} ${entries[die].date}.`); if (!reduce) animate(jolt, [0, 0, 1, -0.25, 0], { duration: 0.5, times: [0, 0.28, 0.36, 0.6, 1], ease: "easeOut" }); }, [jolt, leaf, reduce], ); // the demo: a stamp every half second or so, and a fresh leaf once the spread is full useEffect(() => { if (reduce) return; const s = live.current; const tick = window.setInterval(() => { if (s.paused || document.hidden || s.turning) return; s.clock += 100; if (s.used >= PER_SPREAD) { if (s.clock >= (s.touched ? 1500 : 2600)) leaf(); } else if (!s.touched && s.clock >= (s.spread === 0 && s.used === START ? 500 : 560)) stamp(); }, 100); return () => window.clearInterval(tick); }, [leaf, reduce, stamp]); useEffect(() => { const wrap = wrapRef.current; const scene = sceneRef.current; if (!wrap || !scene) return; const measure = () => { const sc = clamp(wrap.clientWidth / (SCENE_W - 190), 0.44, 1.26); wrap.style.height = `${Math.round(SCENE_H * sc + 64)}px`; scene.style.transform = `translateX(-50%) scale(${sc.toFixed(4)})`; }; measure(); const ro = new ResizeObserver(measure); ro.observe(wrap); return () => ro.disconnect(); }, []); const aim = (side: "L" | "R", x: number, y: number) => { live.current.touched = true; stamp({ side, x, y }); }; const on = (s: number, side: "L" | "R") => marks.filter((m) => m.spread === s && m.side === side); const leftNo = 8 + spread * 2; const next = entries[nextDie]; const BW = PW * 2 + EDGE * 2; const BH = PH + EDGE * 2; return (

{ 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); }} onPointerEnter={(e) => { if (e.pointerType !== "touch") live.current.paused = true; }} onPointerLeave={() => { live.current.paused = false; px.set(0); py.set(0); }} className="relative mx-auto w-full overflow-hidden" style={{ height: SCENE_H * 1.26 + 64 }} >

{/* shadows on the desk */}

{/* the cover, seen as a leather border round the pages */}

{/* left and right blocks of pages */}

{/* the leaf in the air while a full spread turns over */} {turning && !reduce && (

)} {/* the stitching down the fold */}

{ISSUER} / pages {leftNo} and {leftNo + 1} Click a page to stamp it there

{said}

); } 5f:["$","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"}]]}]}]]}],["$","$L60",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L61",null,{"files":[{"path":"components/we-inc/open-passport-card-whose-visa-pages-collect-inked-entry-stamps-and-turn-over-when-the-spread-is-full.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]