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:T6ddf,import { useEffect, useRef, useState } from "react"; import { motion, useReducedMotion } from "framer-motion"; const PLACE = "Osteria Brandello"; // small line under the book const COVERS = 2; // the party size pencilled beside your name (2 to 8) const OPEN_ON = 5; // weekday the book opens at (0 Sunday ... 6 Saturday), the next one after today const AUTOPLAY = true; // the pencil books a couple of lines and turns a page until someone takes over const SITTINGS = [ { name: "Lunch", times: ["11:30 am", "12:00 pm", "12:30 pm", "1:00 pm", "1:30 pm", "2:00 pm", "2:30 pm", "3:00 pm"] }, { name: "Dinner", times: ["5:30 pm", "6:00 pm", "6:30 pm", "7:00 pm", "7:30 pm", "8:00 pm", "8:30 pm", "9:00 pm"] }, ]; const FULLNESS = 0.52; // share of lines that already hold a name const ID = "restaurant-reservation-book"; const DOW = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; const MON = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; const SERIF = 'Georgia, "Times New Roman", serif'; const noise = (f: number, o: number) => `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='${f}' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='${o}'/%3E%3C/svg%3E")`; const FIBRE = noise(0.8, 0.5), LEATHER = noise(0.42, 0.9); const rnd = (a: number, b: number, c: number) => { const n = Math.sin(a * 12.9898 + b * 78.233 + c * 37.719 + 4.1) * 43758.5453; return n - Math.floor(n); }; // Who is already written on a line. The same day always gives the same page. const entryAt = (day: number, part: number, row: number) => (rnd(day, part * 9 + row, 1) < FULLNESS ? { seed: Math.floor(rnd(day, row, part + 5) * 9000) + 11, covers: [2, 2, 3, 4, 4, 5, 6, 8][Math.floor(rnd(row, day, part + 2) * 8)], struck: rnd(day + 3, row, part) < 0.05 } : null); // A line of joined-up pencil writing: loops and humps that read as a name without spelling one. function scrawl(seed: number) { let s = seed * 48271 + 7; const r = () => { s = (s * 16807) % 2147483647; return s / 2147483647; }; const cap = () => `c ${4 + r() * 2} -2 ${6 + r() * 2} -${17 + r() * 3} ${3 + r()} -${17 + r() * 3} s -3 ${13 + r() * 2} ${6 + r() * 2} ${17 + r() * 3}`; const letter = () => { const k = 0.85 + r() * 0.4, p = r(); if (p < 0.34) return `q ${3 * k} -${6 + r() * 2} ${6 * k} 0`; if (p < 0.62) return `c ${2 * k} 0 ${5 * k} -7 ${3 * k} -7 s ${-2 * k} 6 ${4.5 * k} 7`; if (p < 0.76) return `q ${2 * k} ${3 + r() * 2} ${4 * k} 0`; if (p < 0.9) return `c ${3 * k} -1 ${4 * k} -15 ${2 * k} -15 s ${-1 * k} 12 ${5 * k} 15`; return `c ${3 * k} 0 ${3 * k} 9 0 9 s 0 -7 ${6 * k} -9`; }; let d = `M3 29 ${cap()}`; for (let i = 3 + Math.floor(r() * 3); i > 0; i--) d += ` ${letter()}`; d += ` m ${7 + r() * 3} 0 ${cap()}`; for (let i = 4 + Math.floor(r() * 4); i > 0; i--) d += ` ${letter()}`; return d; } const DIGIT: Record = { 2: "M9 18 q 5 -6 8 0 q 0 5 -8 11 h 9", 3: "M9 17 q 8 -4 7 2 q -1 4 -4 4 q 6 0 5 5 q -1 5 -9 2", 4: "M15 15 l -6 10 h 11 m -3 -5 v 10", 5: "M17 16 h -7 l -1 6 q 8 -3 8 3 q 0 6 -9 5", 6: "M16 15 q -8 4 -7 11 q 1 5 5 4 q 4 -1 3 -5 q -1 -4 -7 -1", 8: "M13 22 q -5 -4 0 -7 q 5 3 0 7 q -6 4 0 8 q 6 -4 0 -8", }; const RING = "M10 23 C 6 10, 50 6, 54 20 C 57 36, 12 40, 8 25 C 6 15, 20 9, 32 9"; type Booking = { day: number; part: number; row: number; n: number }; // One page of the book: a printed head and eight ruled lines, some already written on. function Sheet({ date, day, part, booking, onPick, live, rows }: { date: Date; day: number; part: number; booking: Booking; onPick?: (part: number, row: number) => void; live: boolean; rows?: { current: Record } }) { const sit = SITTINGS[part], still = useReducedMotion(); return (

{date.getDate()} {DOW[date.getDay()]} · {MON[date.getMonth()]}

{sit.name}

{sit.times.map((t, row) => { const mine = booking.day === day && booking.part === part && booking.row === row, taken = mine ? null : entryAt(day, part, row), fresh = mine && booking.n > 0 && live && !still; const pencil = { fill: "none", stroke: mine ? "#2f2f36" : "#55555e", strokeWidth: mine ? 1.5 : 1.25, strokeLinecap: "round" as const, strokeLinejoin: "round" as const, filter: `url(#${ID}-graphite)` }; const draw = (delay: number, duration: number) => (fresh ? { initial: { pathLength: 0, opacity: 0 }, animate: { pathLength: 1, opacity: 1 }, transition: { pathLength: { delay, duration, ease: "linear" as const }, opacity: { delay, duration: 0.01 } } } : {}); return ( ); })}

); } export default function RestaurantReservationBook() { const reduce = useReducedMotion(); const [today] = useState(() => { const n = new Date(); return new Date(n.getFullYear(), n.getMonth(), n.getDate()); }); const [first] = useState(() => (((OPEN_ON - today.getDay()) % 7) + 7) % 7 || 7); const [day, setDay] = useState(first); const [booking, setBooking] = useState(() => { let row = 3; while (row < 7 && entryAt(first, 1, row)) row++; return { day: first, part: 1, row, n: 0 }; }); const [flip, setFlip] = useState<{ from: number; to: number; dir: number } | null>(null); const [stacked, setStacked] = useState(false); const stage = useRef(null), book = useRef(null), eyelet = useRef(null), pen = useRef(null), penTurn = useRef(null); const twine = useRef(null), twist = useRef(null), shade = useRef(null); const rows = useRef>({}), touched = useRef(false), api = useRef<{ write: (el: HTMLElement | null) => void; rest: () => void } | null>(null); const live = useRef({ day, flip, booking }); live.current = { day, flip, booking }; const dateOf = (d: number) => new Date(today.getFullYear(), today.getMonth(), today.getDate() + d); const pick = (part: number, row: number) => { if (live.current.flip || row < 0) return; const b = live.current.booking, d = live.current.day; if (b.day === d && b.part === part && b.row === row) return; setBooking({ day: d, part, row, n: b.n + 1 }); api.current?.write(rows.current[`${part}-${row}`] ?? null); }; const turn = (dir: number) => { if (live.current.flip) return; const from = live.current.day, to = from + dir; if (to < 0) return; api.current?.rest(); setDay(to); if (!reduce) setFlip({ from, to, dir }); }; useEffect(() => { const mq = window.matchMedia("(max-width: 639px)"), on = () => setStacked(mq.matches); on(); mq.addEventListener("change", on); return () => mq.removeEventListener("change", on); }, []); // The pencil and its string. The string is a chain of points dragged across the table with friction; the pencil is sprung towards wherever it is wanted. useEffect(() => { const st = stage.current, bk = book.current, ey = eyelet.current, pe = pen.current, pt = penTurn.current; if (!st || !bk || !ey || !pe || !pt) return; const N = 30, LEN = 222, RAD = Math.PI / 180, HOLD = 40, LIE = 9; const P = new Float32Array(N * 2), O = new Float32Array(N * 2); let g = { ax: 0, ay: 0, bx: 0, by: 0, bw: 0, bh: 0 }, seg = 10, raf = 0, seen = true, calm = 0; const p = { x: 0, y: 0, a: LIE, vx: 0, vy: 0, va: 0 }; let aim = { x: 0, y: 0, a: LIE }, hover: { x: number; y: number } | null = null, script: { t0: number; x: number; y: number; w: number } | null = null; const home = () => ({ x: g.bx + g.bw - Math.min(230, g.bw * 0.62), y: g.by + g.bh - 30, a: LIE }); const tail = (x: number, y: number, a: number) => [x + Math.cos(a * RAD) * LEN, y - Math.sin(a * RAD) * LEN]; const solve = (rounds: number) => { const [ex, ey2] = tail(p.x, p.y, p.a); for (let k = 0; k < rounds; k++) { P[0] = g.ax; P[1] = g.ay; P[N * 2 - 2] = ex; P[N * 2 - 1] = ey2; for (let i = 0; i < N - 1; i++) { const dx = P[i * 2 + 2] - P[i * 2], dy = P[i * 2 + 3] - P[i * 2 + 1], d = Math.sqrt(dx * dx + dy * dy) || 0.001, f = ((d - seg) / d) * 0.5; if (i > 0) { P[i * 2] += dx * f; P[i * 2 + 1] += dy * f; } if (i < N - 2) { P[i * 2 + 2] -= dx * f; P[i * 2 + 3] -= dy * f; } } for (let i = 0; i < N - 2; i++) { // a little stiffness so the string cannot fold flat on itself const dx = P[i * 2 + 4] - P[i * 2], dy = P[i * 2 + 5] - P[i * 2 + 1], d = Math.sqrt(dx * dx + dy * dy) || 0.001; if (d < seg * 1.5) { const f = ((d - seg * 1.5) / d) * 0.12; if (i > 0) { P[i * 2] += dx * f; P[i * 2 + 1] += dy * f; } if (i < N - 3) { P[i * 2 + 4] -= dx * f; P[i * 2 + 5] -= dy * f; } } } } }; const paint = () => { let d = `M${P[0].toFixed(1)} ${P[1].toFixed(1)}`; for (let i = 1; i < N - 1; i++) d += ` Q${P[i * 2].toFixed(1)} ${P[i * 2 + 1].toFixed(1)} ${((P[i * 2] + P[i * 2 + 2]) / 2).toFixed(1)} ${((P[i * 2 + 1] + P[i * 2 + 3]) / 2).toFixed(1)}`; d += ` L${P[N * 2 - 2].toFixed(1)} ${P[N * 2 - 1].toFixed(1)}`; twine.current?.setAttribute("d", d); twist.current?.setAttribute("d", d); shade.current?.setAttribute("d", d); pe.style.transform = `translate3d(${p.x.toFixed(1)}px,${(p.y - 9).toFixed(1)}px,0)`; pt.style.transform = `rotate(${(-p.a).toFixed(2)}deg)`; }; const measure = () => { const s = st.getBoundingClientRect(), b = bk.getBoundingClientRect(), e = ey.getBoundingClientRect(); g = { ax: e.left + e.width / 2 - s.left, ay: e.top + e.height / 2 - s.top, bx: b.left - s.left, by: b.top - s.top, bw: b.width, bh: b.height }; const h = home(); let reach = 0; for (const [x, y, a] of [[h.x, h.y, h.a], [g.bx, g.by + g.bh, HOLD], [g.bx + g.bw, g.by + g.bh, HOLD], [g.bx, g.by, HOLD], [g.bx + g.bw, g.by, HOLD]]) { const [tx, ty] = tail(x, y, a); reach = Math.max(reach, Math.hypot(tx - g.ax, ty - g.ay)); } seg = (reach + 24) / (N - 1); p.x = h.x; p.y = h.y; p.a = h.a; p.vx = p.vy = p.va = 0; aim = h; script = null; // lay the string out in a loose arc beside the straight line, then let it find its length const [ex, ey2] = tail(p.x, p.y, p.a), cx = ex - g.ax, cy = ey2 - g.ay, c = Math.hypot(cx, cy) || 1, bow = Math.sqrt(Math.max(0, (seg * (N - 1)) ** 2 - c * c)) * 0.42; for (let i = 0; i < N; i++) { const t = i / (N - 1), b2 = Math.sin(t * Math.PI) * bow; P[i * 2] = g.ax + cx * t - (cy / c) * b2 * (cx > 0 ? -1 : 1); P[i * 2 + 1] = g.ay + cy * t + (cx / c) * b2 * (cx > 0 ? -1 : 1); } solve(60); O.set(P); paint(); }; const frame = (now: number) => { raf = 0; if (script) { const e = (now - script.t0) / 1000, mid = script.y; if (e < 0.3) aim = { x: script.x + 12, y: mid + 2, a: HOLD }; else if (e < 0.62) { const t = ((e - 0.3) / 0.32) * Math.PI * 2.5; aim = { x: script.x + 34 - Math.cos(t) * 22, y: mid - Math.sin(t) * 12, a: HOLD + Math.sin(t) * 3 }; } else if (e < 1.42) { const u = (e - 0.62) / 0.8, nx = script.w < 300 ? 66 : 86; aim = { x: script.x + nx + u * 104, y: mid + 3 + Math.sin(u * 46) * 4, a: HOLD + Math.sin(u * 46) * 2.5 }; } else if (e < 1.7) aim = { x: script.x + script.w - 24, y: mid + Math.sin((e - 1.42) * 30) * 5, a: HOLD }; else { script = null; aim = home(); } } else aim = hover ? { x: hover.x, y: hover.y, a: HOLD } : home(); const k = script ? 420 : 150, c = script ? 30 : 20, dt = 1 / 60; p.vx += (k * (aim.x - p.x) - c * p.vx) * dt; p.vy += (k * (aim.y - p.y) - c * p.vy) * dt; p.va += (120 * (aim.a - p.a) - 18 * p.va) * dt; p.x += p.vx * dt; p.y += p.vy * dt; p.a += p.va * dt; let moved = Math.abs(p.vx) + Math.abs(p.vy) + Math.abs(p.va); for (let i = 1; i < N - 1; i++) { // dragged over the table: most of the speed is lost each step const x = P[i * 2], y = P[i * 2 + 1], vx = (x - O[i * 2]) * 0.8, vy = (y - O[i * 2 + 1]) * 0.8; O[i * 2] = x; O[i * 2 + 1] = y; P[i * 2] = x + vx; P[i * 2 + 1] = y + vy; moved += Math.abs(vx) + Math.abs(vy); } solve(8); paint(); calm = moved < 0.6 && !script ? calm + 1 : 0; if (seen && !document.hidden && calm < 20) raf = requestAnimationFrame(frame); }; const wake = () => { calm = 0; if (!raf && !reduce) raf = requestAnimationFrame(frame); }; api.current = { write: (el) => { if (!el || reduce) return; const s = st.getBoundingClientRect(), r = el.getBoundingClientRect(); hover = null; script = { t0: performance.now(), x: r.left - s.left, y: r.top - s.top + r.height / 2, w: r.width }; wake(); }, rest: () => { script = null; hover = null; wake(); }, }; const onMove = (e: PointerEvent) => { if (e.pointerType !== "mouse" || script) return; const s = st.getBoundingClientRect(), x = e.clientX - s.left, y = e.clientY - s.top; hover = x > g.bx && x < g.bx + g.bw && y > g.by && y < g.by + g.bh ? { x: x + 7, y: y + 5 } : null; wake(); }; const onLeave = () => { hover = null; wake(); }; measure(); st.addEventListener("pointermove", onMove); st.addEventListener("pointerleave", onLeave); const ro = new ResizeObserver(() => { measure(); wake(); }); ro.observe(st); const io = new IntersectionObserver(([en]) => { seen = en.isIntersecting; if (seen) wake(); }); io.observe(st); const onVis = () => { if (!document.hidden) wake(); }; document.addEventListener("visibilitychange", onVis); return () => { cancelAnimationFrame(raf); api.current = null; st.removeEventListener("pointermove", onMove); st.removeEventListener("pointerleave", onLeave); ro.disconnect(); io.disconnect(); document.removeEventListener("visibilitychange", onVis); }; }, [reduce, stacked]); useEffect(() => { if (!AUTOPLAY || reduce) return; let step = 0, timer = 0; const freeRow = (d: number, part: number, start: number) => { for (let i = 0; i < 8; i++) { const r = (start + i) % 8; if (!entryAt(d, part, r) && !(live.current.booking.day === d && live.current.booking.part === part && live.current.booking.row === r)) return r; } return -1; }; const tick = () => { if (touched.current || document.hidden) return; const d = live.current.day, k = step++ % 4; if (k === 0) pick(1, freeRow(d, 1, 5)); else if (k === 1) turn(1); else if (k === 2) pick(0, freeRow(d, 0, 2)); else turn(-1); }; const start = window.setTimeout(() => { tick(); timer = window.setInterval(tick, 3200); }, 3100); return () => { window.clearTimeout(start); window.clearInterval(timer); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [reduce]); const left = flip ? (flip.dir > 0 ? flip.from : flip.to) : day, right = flip ? (flip.dir > 0 ? flip.to : flip.from) : day; const date = dateOf(day), mineDate = dateOf(booking.day), take = () => { touched.current = true; }; const arrow = "flex h-10 w-10 items-center justify-center rounded-full text-[#d9c9b4] outline-none transition-colors hover:bg-white/10 hover:text-white focus-visible:ring-2 focus-visible:ring-white disabled:opacity-30 motion-reduce:transition-none"; const sheet = (d: number, part: number, on: boolean) => { take(); pick(a, b); } : undefined} rows={on ? rows : undefined} />; return (

{sheet(left, 0, !flip)}

{sheet(right, 1, !flip)}

{flip && ( 0 ? 0 : 180 } : { rotateY: flip.dir > 0 ? 0 : -180 }} animate={stacked ? { rotateX: flip.dir > 0 ? 180 : 0 } : { rotateY: flip.dir > 0 ? -180 : 0 }} transition={{ duration: 0.8, ease: [0.45, 0.05, 0.3, 1] }} onAnimationComplete={() => setFlip(null)} >

{sheet(flip.dir > 0 ? flip.from : flip.to, 1, false)}

{sheet(flip.dir > 0 ? flip.to : flip.from, 0, false)}

)}

{DOW[mineDate.getDay()]} {mineDate.getDate()} {MON[mineDate.getMonth()]}, {SITTINGS[booking.part].times[booking.row]} {PLACE} / table for {COVERS}, in pencil

); } 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/restaurant-reservation-book-time-picker-with-a-pencil-on-a-string-that-writes-your-table-into-a-free-line.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]