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:T5c10,import { useEffect, useMemo, useRef, useState } from "react"; import { useReducedMotion } from "framer-motion"; // Everything a visitor is likely to change sits here. const SHOW = { title: "The Long Goodnight", when: "Fri 21 Nov, 8.15 pm" }; const ROWS = ["D", "C", "B", "A"]; // back row first; A is nearest the screen const PRICE: Record = { A: 16, B: 19, C: 22, D: 22 }; const CURRENCY = "£"; const RESERVED = ["D2", "D3", "C6", "C7", "B1", "A4", "A5"]; // seats with a card hung on them const START = ["A2", "A3"]; // already folded down when the page loads const DEMO = ["B3", "B4", "A2", "A3", "C4", "C5", "B3", "B4", "A2", "A3", "C4", "C5"]; // seats the idle demo presses, in order const VELVET = ["#cf2a3f", "#931424", "#4c0a13"]; // light, mid, shadow const BRASS = ["#fff2c2", "#d6a94a", "#7d5a17"]; const PITCH = 104, LP = 70, TP = 15, EYE = (31 * Math.PI) / 180; // seat spacing, pan length, pan thickness, how far above the seats you are looking from const UP = 4, DOWN = 92, PEEK = 22; // pan angle from upright, in degrees const geometry = (narrow: boolean) => { const cols = narrow ? 5 : 7, W0 = narrow ? 600 : 1100, H0 = narrow ? 850 : 690, base = narrow ? 560 : 520; const rows = ROWS.map((letter, i) => { const n = ROWS.length - 1 - i; return { letter, s: Math.pow(0.9, n), y: base - [0, 128, 243, 346][n] }; }); return { cols, W0, H0, rows, cx: W0 / 2 }; }; type Geo = ReturnType; const seatX = (g: Geo, s: number, col: number) => g.cx + (col - (g.cols + 1) / 2) * PITCH * s; type Ctx = CanvasRenderingContext2D; const rng = (seed: number) => () => { seed |= 0; seed = (seed + 0x6d2b79f5) | 0; let t = Math.imul(seed ^ (seed >>> 15), 1 | seed); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; const rr = (c: Ctx, x: number, y: number, w: number, h: number, r: number | number[]) => { const [a, b, d, e] = typeof r === "number" ? [r, r, r, r] : r; c.beginPath(); c.moveTo(x + a, y); c.arcTo(x + w, y, x + w, y + h, b); c.arcTo(x + w, y + h, x, y + h, d); c.arcTo(x, y + h, x, y, e); c.arcTo(x, y, x + w, y, a); c.closePath(); }; export default function VelvetSeatPicker() { const reduce = useReducedMotion(); const stageRef = useRef(null); const cvRef = useRef(null); const [narrow, setNarrow] = useState(false); const [chosen, setChosen] = useState(START); const live = useRef({ chosen: START, hover: "", touched: false }); const geo = useMemo(() => geometry(narrow), [narrow]); live.current.chosen = chosen; useEffect(() => { const el = stageRef.current?.parentElement; if (!el) return; const ro = new ResizeObserver(() => setNarrow(el.clientWidth < 700)); ro.observe(el); return () => ro.disconnect(); }, []); useEffect(() => { const stage = stageRef.current, cv = cvRef.current; if (!stage || !cv) return; const ctx = cv.getContext("2d"); if (!ctx) return; const g = geo, L = live.current; let k = 1, raf = 0, visible = true, last = performance.now(), nextDemo = last + 3700, demoAt = 0; const room = document.createElement("canvas"); const rowCv = g.rows.map(() => document.createElement("canvas")); const noise = document.createElement("canvas"); noise.width = noise.height = 128; { const n = noise.getContext("2d")!, r = rng(4); for (let i = 0; i < 5200; i++) { n.fillStyle = `rgba(${r() > 0.55 ? "255,190,190" : "20,0,0"},${0.04 + r() * 0.1})`; n.fillRect(r() * 128, r() * 128, 1, 1 + r()); } } const pile = ctx.createPattern(noise, "repeat"); const reserved = new Set(RESERVED); const phi = new Map(); for (const row of g.rows) for (let c = 1; c <= g.cols; c++) { const id = row.letter + c; phi.set(id, { a: L.chosen.includes(id) ? DOWN : UP, v: 0 }); } /** Fill the current path as velvet: a top-lit body, a pale bloom along both edges, then the pile. */ const velvet = (c: Ctx, path: () => void, x: number, y: number, w: number, h: number, dim = 0) => { const gr = c.createLinearGradient(0, y, 0, y + h); gr.addColorStop(0, VELVET[0]); gr.addColorStop(0.42, VELVET[1]); gr.addColorStop(1, VELVET[2]); path(); c.fillStyle = gr; c.fill(); c.save(); path(); c.clip(); const e = c.createLinearGradient(x, 0, x + w, 0); e.addColorStop(0, "rgba(255,170,170,0.3)"); e.addColorStop(0.16, "rgba(255,170,170,0)"); e.addColorStop(0.84, "rgba(255,170,170,0)"); e.addColorStop(1, "rgba(255,170,170,0.2)"); c.fillStyle = e; c.fillRect(x, y, w, h); const t = c.createLinearGradient(0, y, 0, y + Math.min(h, 16)); t.addColorStop(0, "rgba(255,200,200,0.32)"); t.addColorStop(1, "rgba(255,200,200,0)"); c.fillStyle = t; c.fillRect(x, y, w, Math.min(h, 16)); if (pile) { c.fillStyle = pile; c.fillRect(x, y, w, h); } if (dim) { c.fillStyle = `rgba(10,2,4,${dim})`; c.fillRect(x, y, w, h); } c.restore(); }; const brass = (c: Ctx, x0: number, y0: number, x1: number, y1: number) => { const b = c.createLinearGradient(x0, y0, x1, y1); b.addColorStop(0, BRASS[0]); b.addColorStop(0.45, BRASS[1]); b.addColorStop(1, BRASS[2]); return b; }; const wood = (c: Ctx, x0: number, x1: number) => { const w = c.createLinearGradient(x0, 0, x1, 0); w.addColorStop(0, "#2a140c"); w.addColorStop(0.3, "#6d3f24"); w.addColorStop(0.55, "#4a2816"); w.addColorStop(1, "#1c0d07"); return w; }; const build = () => { // The auditorium behind the seats. room.width = cv.width; room.height = cv.height; const b = room.getContext("2d")!; b.setTransform(k, 0, 0, k, 0, 0); b.fillStyle = "#130a0d"; b.fillRect(0, 0, g.W0, g.H0); const wl = b.createRadialGradient(g.cx, g.H0 * 0.34, 40, g.cx, g.H0 * 0.4, g.W0 * 0.62); wl.addColorStop(0, "#3b1c22"); wl.addColorStop(0.55, "#1e0f13"); wl.addColorStop(1, "#130a0d"); b.fillStyle = wl; b.fillRect(0, 0, g.W0, g.H0); // One layer per row: its carpeted step, standards, arm rests, end panels and seat backs. g.rows.forEach((row, ri) => { const cvs = rowCv[ri]; cvs.width = cv.width; cvs.height = cv.height; const c = cvs.getContext("2d")!; const r = rng(100 + ri); c.setTransform(k, 0, 0, k, 0, 0); const s = row.s, half = (g.cols * PITCH * s) / 2 + 46 * s, fy = row.y + 68 * s, next = g.rows[ri + 1]; const bottom = next ? next.y + 68 * next.s - 20 * next.s : g.H0; // step: tread, brass nosing, riser const tread = c.createLinearGradient(0, fy - 24 * s, 0, fy); tread.addColorStop(0, "#1c1216"); tread.addColorStop(1, "#33202a"); c.fillStyle = tread; c.fillRect(g.cx - half - 60, fy - 24 * s, half * 2 + 120, 24 * s); const riser = c.createLinearGradient(0, fy, 0, bottom); riser.addColorStop(0, "#150c10"); riser.addColorStop(1, "#0c0608"); c.fillStyle = riser; c.fillRect(g.cx - half - 60, fy, half * 2 + 120, Math.max(0, bottom - fy)); for (let i = 0; i < 500; i++) { c.fillStyle = `rgba(${r() > 0.5 ? "255,200,210" : "0,0,0"},${0.03 + r() * 0.05})`; c.fillRect(g.cx - half - 60 + r() * (half * 2 + 120), fy - 24 * s + r() * 24 * s, 1.2, 1); } c.fillStyle = brass(c, 0, fy - 1, 0, fy + 3); c.fillRect(g.cx - half - 60, fy - 1, half * 2 + 120, 3 * s); // fade the step out towards the walls for (const dir of [-1, 1]) { const fx = g.cx + dir * (half + 60), fd = c.createLinearGradient(fx, 0, fx - dir * 90, 0); fd.addColorStop(0, "#130a0d"); fd.addColorStop(1, "rgba(19,10,13,0)"); c.fillStyle = fd; c.fillRect(Math.min(fx, fx - dir * 90), fy - 26 * s, 90, bottom - fy + 28 * s); } const local = (x: number) => { c.setTransform(k * s, 0, 0, k * s, x * k, row.y * k); }; // cast iron standards and wooden arm rests between the seats for (let i = 0; i <= g.cols; i++) { local(g.cx + (i - g.cols / 2) * PITCH * s); const ir = c.createLinearGradient(-5, 0, 5, 0); ir.addColorStop(0, "#0d0b0c"); ir.addColorStop(0.4, "#3b3537"); ir.addColorStop(1, "#090708"); c.fillStyle = ir; c.fillRect(-4.5, -28, 9, 96); c.beginPath(); c.moveTo(-4.5, 56); c.lineTo(-13, 68); c.lineTo(13, 68); c.lineTo(4.5, 56); c.closePath(); c.fill(); c.save(); c.shadowColor = "rgba(0,0,0,0.7)"; c.shadowBlur = 5 * k; c.shadowOffsetY = 3 * k; rr(c, -9, -44, 18, 17, 6); c.fillStyle = wood(c, -9, 9); c.fill(); c.restore(); c.fillStyle = "rgba(255,210,170,0.3)"; rr(c, -6, -42.5, 12, 2.4, 1.2); c.fill(); } // aisle end panels with the row letter and a step light for (const dir of [-1, 1]) { local(g.cx + dir * ((g.cols * PITCH * s) / 2 + 24 * s)); c.save(); c.shadowColor = "rgba(0,0,0,0.75)"; c.shadowBlur = 12 * k; c.shadowOffsetY = 5 * k; rr(c, -17, -72, 34, 140, [14, 14, 3, 3]); c.fillStyle = wood(c, -17, 17); c.fill(); c.restore(); c.save(); rr(c, -17, -72, 34, 140, [14, 14, 3, 3]); c.clip(); for (let i = 0; i < 40; i++) { c.fillStyle = `rgba(${r() > 0.5 ? "255,200,150" : "0,0,0"},${0.04 + r() * 0.07})`; c.fillRect(-17 + r() * 34, -72, 0.8, 140); } const sh = c.createLinearGradient(0, -72, 0, -40); sh.addColorStop(0, "rgba(255,220,190,0.28)"); sh.addColorStop(1, "rgba(255,220,190,0)"); c.fillStyle = sh; c.fillRect(-17, -72, 34, 32); c.restore(); c.strokeStyle = "rgba(0,0,0,0.45)"; c.lineWidth = 1.2; rr(c, -11.5, -64, 23, 124, [9, 9, 2, 2]); c.stroke(); c.strokeStyle = "rgba(255,220,180,0.14)"; rr(c, -10.5, -63, 23, 124, [9, 9, 2, 2]); c.stroke(); c.save(); c.shadowColor = "rgba(0,0,0,0.6)"; c.shadowBlur = 3 * k; c.shadowOffsetY = 1.5 * k; c.beginPath(); c.arc(0, -40, 9.5, 0, Math.PI * 2); c.fillStyle = brass(c, -8, -48, 8, -32); c.fill(); c.restore(); c.strokeStyle = "rgba(90,60,10,0.6)"; c.lineWidth = 0.8; c.beginPath(); c.arc(0, -40, 7.4, 0, Math.PI * 2); c.stroke(); c.fillStyle = "#3d2a08"; c.font = "700 11px Georgia, 'Times New Roman', serif"; c.textAlign = "center"; c.textBaseline = "middle"; c.fillText(row.letter, 0, -39.4); rr(c, -7, 44, 14, 5, 2); c.fillStyle = "#ffe2a8"; c.shadowColor = "#ffb44a"; c.shadowBlur = 10 * k; c.fill(); c.shadowColor = "transparent"; c.shadowBlur = 0; c.globalCompositeOperation = "lighter"; c.save(); c.translate(0, 66); c.scale(1, 0.32); const pool = c.createRadialGradient(0, 0, 2, 0, 0, 62); pool.addColorStop(0, "rgba(255,180,90,0.34)"); pool.addColorStop(1, "rgba(255,180,90,0)"); c.fillStyle = pool; c.beginPath(); c.arc(0, 0, 62, 0, Math.PI * 2); c.fill(); c.restore(); c.globalCompositeOperation = "source-over"; } // seat backs for (let col = 1; col <= g.cols; col++) { const id = row.letter + col; local(seatX(g, s, col)); const back = () => rr(c, -42, -112, 84, 122, [24, 24, 5, 5]); c.save(); c.shadowColor = "rgba(0,0,0,0.7)"; c.shadowBlur = 14 * k; c.shadowOffsetY = 6 * k; back(); c.fillStyle = VELVET[2]; c.fill(); c.restore(); velvet(c, back, -42, -112, 84, 122); // two stitched channels and the piping round the edge for (const sx of [-14, 14]) { const ch = c.createLinearGradient(sx - 5, 0, sx + 5, 0); ch.addColorStop(0, "rgba(40,0,6,0)"); ch.addColorStop(0.5, "rgba(40,0,6,0.5)"); ch.addColorStop(0.62, "rgba(255,170,170,0.2)"); ch.addColorStop(1, "rgba(255,170,170,0)"); c.fillStyle = ch; c.fillRect(sx - 5, -100, 10, 104); } c.strokeStyle = "rgba(255,150,150,0.38)"; c.lineWidth = 1.1; rr(c, -39, -109, 78, 116, [21, 21, 4, 4]); c.stroke(); c.strokeStyle = "rgba(30,0,4,0.5)"; rr(c, -37.6, -107.6, 75.2, 113.2, [20, 20, 3, 3]); c.stroke(); // the dark gap under the seat back c.fillStyle = "rgba(6,2,3,0.8)"; c.fillRect(-40, 10, 80, 46); if (reserved.has(id)) { const tilt = (r() - 0.5) * 0.16; c.strokeStyle = "rgba(235,225,205,0.75)"; c.lineWidth = 0.8; c.beginPath(); c.moveTo(-12, -112); c.lineTo(-13, -94); c.moveTo(12, -112); c.lineTo(13, -94); c.stroke(); c.save(); c.translate(0, -84); c.rotate(tilt); c.shadowColor = "rgba(0,0,0,0.6)"; c.shadowBlur = 6 * k; c.shadowOffsetY = 3 * k; rr(c, -24, -11, 48, 24, 2); const cd = c.createLinearGradient(0, -11, 0, 13); cd.addColorStop(0, "#fbf5e6"); cd.addColorStop(1, "#dccfb3"); c.fillStyle = cd; c.fill(); c.shadowColor = "transparent"; c.strokeStyle = "rgba(120,20,30,0.7)"; c.lineWidth = 0.7; c.strokeRect(-21, -8, 42, 18); c.fillStyle = "#7a1420"; c.font = "700 6.4px Georgia, 'Times New Roman', serif"; c.textAlign = "center"; c.textBaseline = "middle"; c.fillText("RESERVED", 0, 1.2); c.restore(); } } // rows further back sit in a little more darkness c.setTransform(k, 0, 0, k, 0, 0); c.globalCompositeOperation = "source-atop"; c.fillStyle = `rgba(10,3,5,${(g.rows.length - 1 - ri) * 0.13})`; c.fillRect(0, 0, g.W0, g.H0); c.globalCompositeOperation = "source-over"; }); }; /** The hinged pan of one seat at angle `deg` from upright, drawn at the hinge. */ const pan = (id: string, deg: number, dim: number) => { const a = (deg * Math.PI) / 180 + EYE, cs = Math.cos(a), sn = Math.sin(a), wide = 1 + 0.1 * Math.sin((deg * Math.PI) / 180); const sb = -LP * cs, th = TP * sn; ctx.save(); ctx.scale(wide, 1); // shadow the pan throws on what is behind and below it const drop = Math.max(0, Math.sin((deg * Math.PI) / 180)); if (drop > 0.05) { const sh = ctx.createLinearGradient(0, sb, 0, sb + 50); sh.addColorStop(0, `rgba(0,0,0,${0.85 * drop})`); sh.addColorStop(1, "rgba(0,0,0,0)"); ctx.fillStyle = sh; ctx.fillRect(-44, sb, 88, 50); } if (cs > 0) { // underside: a pressed steel pan with a brass number plate const h = -sb; // the cushion is a little larger than the pan, so a rim of velvet shows all round it velvet(ctx, () => rr(ctx, -41, sb - th, 82, h + th + 2, [6, 6, 4, 4]), -41, sb - th, 82, h + th + 2, dim + 0.1); const body = () => rr(ctx, -36, sb + 3, 72, h - 5, [6, 6, 3, 3]); const st = ctx.createLinearGradient(0, sb, 0, 0); st.addColorStop(0, "#4a3c40"); st.addColorStop(0.2, "#2a2023"); st.addColorStop(1, "#120c0e"); ctx.save(); ctx.shadowColor = "rgba(0,0,0,0.65)"; ctx.shadowBlur = 8 * k; ctx.shadowOffsetY = 3 * k; body(); ctx.fillStyle = st; ctx.fill(); ctx.restore(); ctx.strokeStyle = "rgba(255,255,255,0.1)"; ctx.lineWidth = 1; rr(ctx, -31, sb + h * 0.12, 62, h * 0.76, 5); ctx.stroke(); ctx.strokeStyle = "rgba(0,0,0,0.5)"; rr(ctx, -30, sb + h * 0.12 + 1, 62, h * 0.76, 5); ctx.stroke(); ctx.save(); ctx.translate(0, sb + h * 0.5); ctx.scale(1, h / (LP * 0.92)); ctx.shadowColor = "rgba(0,0,0,0.7)"; ctx.shadowBlur = 3 * k; ctx.shadowOffsetY = 1.5 * k; ctx.beginPath(); ctx.ellipse(0, 0, 15, 10, 0, 0, Math.PI * 2); ctx.fillStyle = brass(ctx, -12, -10, 12, 10); ctx.fill(); ctx.shadowColor = "transparent"; ctx.strokeStyle = "rgba(90,60,10,0.55)"; ctx.lineWidth = 0.8; ctx.beginPath(); ctx.ellipse(0, 0, 12.4, 7.6, 0, 0, Math.PI * 2); ctx.stroke(); ctx.fillStyle = "#3d2a08"; ctx.font = "700 11px Georgia, 'Times New Roman', serif"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(id.slice(1), 0, 0.6); ctx.fillStyle = "#6a4a12"; for (const dx of [-12.6, 12.6]) { ctx.beginPath(); ctx.arc(dx, 0, 0.9, 0, Math.PI * 2); ctx.fill(); } ctx.restore(); // the rolled front edge of the cushion, seen end on velvet(ctx, () => rr(ctx, -41, sb - th, 82, th + 2, [5, 5, 1, 1]), -41, sb - th, 82, th + 2, dim); } else { // cushion top, then its front edge const top = -th, st = sb - th; velvet(ctx, () => rr(ctx, -41, top, 82, st - top + 3, [4, 4, 2, 2]), -41, top, 82, st - top + 3, dim); ctx.fillStyle = "rgba(40,0,6,0.35)"; ctx.fillRect(-38, top, 76, 3); const fr = () => rr(ctx, -42, st, 84, sb - st, [3, 3, 7, 7]); velvet(ctx, fr, -42, st, 84, sb - st, dim + 0.12); ctx.strokeStyle = "rgba(255,160,160,0.5)"; ctx.lineWidth = 1.1; ctx.beginPath(); ctx.moveTo(-40, st + 0.8); ctx.lineTo(40, st + 0.8); ctx.stroke(); } ctx.restore(); }; const draw = (now = 0) => { const breathe = reduce ? 1 : 0.86 + 0.14 * Math.sin(now / 520); // the torch is hand held ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.drawImage(room, 0, 0); g.rows.forEach((row, ri) => { ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.drawImage(rowCv[ri], 0, 0); const dim = (g.rows.length - 1 - ri) * 0.13; for (let col = 1; col <= g.cols; col++) { const id = row.letter + col, p = phi.get(id)!; ctx.setTransform(k * row.s, 0, 0, k * row.s, seatX(g, row.s, col) * k, row.y * k); pan(id, p.a, dim); const lit = Math.max(0, (p.a - UP) / (DOWN - UP)); if (lit > 0.02) { // an usher's torch: chosen seats sit in a pool of warm light ctx.globalCompositeOperation = "lighter"; const gl = ctx.createRadialGradient(0, -34, 6, 0, -34, 92); gl.addColorStop(0, `rgba(255,190,130,${(0.19 * Math.min(1, lit) * breathe).toFixed(3)})`); gl.addColorStop(1, "rgba(255,190,130,0)"); ctx.fillStyle = gl; ctx.fillRect(-50, -116, 100, 160); ctx.globalCompositeOperation = "source-over"; } } }); // darkness gathering at the edges of the house ctx.setTransform(k, 0, 0, k, 0, 0); const vg = ctx.createRadialGradient(g.cx, g.H0 * 0.5, g.W0 * 0.3, g.cx, g.H0 * 0.5, g.W0 * 0.75); vg.addColorStop(0, "rgba(19,10,13,0)"); vg.addColorStop(1, "rgba(19,10,13,0.9)"); ctx.fillStyle = vg; ctx.fillRect(0, 0, g.W0, g.H0); }; const tick = (now: number) => { const dt = Math.min(0.033, (now - last) / 1000); last = now; if (!L.touched && now > nextDemo) { const id = DEMO[demoAt % DEMO.length]; demoAt++; if (phi.has(id) && !reserved.has(id)) setChosen((c) => (c.includes(id) ? c.filter((x) => x !== id) : [...c, id])); nextDemo = now + (demoAt % 2 ? 620 : 2100); } phi.forEach((p, id) => { const target = L.chosen.includes(id) ? DOWN : L.hover === id && !reserved.has(id) ? PEEK : UP; // the pan is a sprung flap: it overshoots, and it knocks against its stops for (let n = 0; n < 2; n++) { p.v += (170 * (target - p.a) - 11 * p.v) * (dt / 2); p.a += p.v * (dt / 2); if (p.a > DOWN + 3) { p.a = DOWN + 3; p.v = -p.v * 0.35; } if (p.a < UP - 2) { p.a = UP - 2; p.v = -p.v * 0.35; } } }); draw(now); if (visible && !document.hidden) raf = requestAnimationFrame(tick); }; const size = () => { const w = stage.clientWidth, dpr = Math.min(2, window.devicePixelRatio || 1); k = (w / g.W0) * dpr; cv.width = Math.round(w * dpr); cv.height = Math.round(((w * g.H0) / g.W0) * dpr); build(); settle(); }; const settle = () => { if (reduce) { phi.forEach((p, id) => { p.a = L.chosen.includes(id) ? DOWN : UP; p.v = 0; }); } draw(); }; (L as { redraw?: () => void }).redraw = () => { if (reduce) settle(); }; size(); const ro = new ResizeObserver(size); ro.observe(stage); const start = () => { cancelAnimationFrame(raf); if (!reduce && visible && !document.hidden) { last = performance.now(); raf = requestAnimationFrame(tick); } }; const io = new IntersectionObserver(([e]) => { visible = e.isIntersecting; start(); }); io.observe(stage); document.addEventListener("visibilitychange", start); start(); return () => { cancelAnimationFrame(raf); ro.disconnect(); io.disconnect(); document.removeEventListener("visibilitychange", start); (L as { redraw?: () => void }).redraw = undefined; }; }, [geo, reduce]); // with reduced motion there is no loop, so repaint when the choice changes useEffect(() => { (live.current as { redraw?: () => void }).redraw?.(); }, [chosen]); const toggle = (id: string) => { live.current.touched = true; setChosen((c) => (c.includes(id) ? c.filter((x) => x !== id) : [...c, id])); }; const picked = [...chosen].sort(); const total = picked.reduce((sum, id) => sum + (PRICE[id[0]] || 0), 0); const summary = picked.length ? `${picked.join(", ")} / ${CURRENCY}${total}` : "No seats chosen yet"; return (

); } 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/velvet-tip-up-theatre-seat-picker-with-sprung-seats-that-fold-down-brass-number-plates-and-reserved-cards.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]