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:T4c79,import { useEffect, useRef, useState } from "react"; // When the countdown ends, in the visitor's local time ("2027-03-01T09:00:00"). // Left empty, or once the date has passed, the board counts to DEMO_DAYS after the first view. const TARGET = ""; const DEMO_DAYS = 12.3212; // The top row turns through these. Twelve characters at most, capitals, digits and spaces. const messages = ["LAUNCHING IN", "ATLAS TWO", "ALL ABOARD"]; const EVENT = "Atlas Two"; const W = 860, H = 560, OX = 50; // drawing size and the left margin kept for the shadow; the canvas scales to its box const L_DRUM = " ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789:"; // order of the flaps on a letter drum const D_DRUM = "9876543210"; // number drums are wound backwards, so counting down is one flap forward const SIZES = [[50, 62], [70, 104], [37, 48]]; // flap width and height for the message, number and date rows const DAYS = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"]; const MONTHS = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"]; type Cell = { x: number; y: number; kind: number; n: number; shown: number; next: number; goal: number; left: number; p: number; dur: number; wait: number; kicked: number }; const pad2 = (v: number) => String(v).padStart(2, "0"); const mod = (a: number, n: number) => ((a % n) + n) % n; const centre = (text: string, width: number) => { const t = text.slice(0, width); const l = Math.floor((width - t.length) / 2); return (" ".repeat(l) + t).padEnd(width, " "); }; const split = (ms: number) => { const s = Math.max(0, Math.floor(ms / 1000)); return { d: Math.min(99, Math.floor(s / 86400)), h: Math.floor(s / 3600) % 24, m: Math.floor(s / 60) % 60, s: s % 60 }; }; export default function SplitFlapStationBoardCountdown() { const canvas = useRef(null); const api = useRef<{ shuffle: (x: number, y: number) => void } | null>(null); const [info, setInfo] = useState<{ left: number; when: string } | null>(null); useEffect(() => { const cv = canvas.current; if (!cv) return; const ctx = cv.getContext("2d"); if (!ctx) return; const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const parsed = TARGET ? new Date(TARGET).getTime() : NaN; const end = Number.isFinite(parsed) && parsed > Date.now() ? parsed : Math.ceil((Date.now() + DEMO_DAYS * 86400000) / 3600000) * 3600000; const ed = new Date(end); const dateLine = `${DAYS[ed.getDay()]} ${pad2(ed.getDate())} ${MONTHS[ed.getMonth()]} ${pad2(ed.getHours())}:${pad2(ed.getMinutes())}`; const when = `${DAYS[ed.getDay()]} ${ed.getDate()} ${MONTHS[ed.getMonth()]}, ${pad2(ed.getHours())}:${pad2(ed.getMinutes())}`; // Every flap position on the board. const cells: Cell[] = []; const row = (kind: number, count: number, x0: number, y: number, gap: number, pairGap: number) => { const drum = kind === 1 ? D_DRUM : L_DRUM; let x = x0; for (let i = 0; i < count; i++) { cells.push({ x: x + OX, y, kind, n: drum.length, shown: kind === 1 ? (i * 7 + 3) % 10 : 0, next: 0, goal: 0, left: 0, p: -1, dur: 60, wait: 0, kicked: 0 }); x += SIZES[kind][0] + (pairGap && i % 2 === 1 ? pairGap : gap); } }; row(0, 12, 52.5, 134, 5, 0); row(1, 8, 51, 212, 5, 26); row(2, 16, 54, 352, 4, 0); const top = cells.slice(0, 12), nums = cells.slice(12, 20), date = cells.slice(20); const aim = (c: Cell, idx: number, spin: number, wait: number) => { if (reduce) { c.shown = idx; c.goal = idx; c.left = 0; c.p = -1; return; } const flying = c.p >= 0; const fwd = mod(idx - (flying ? c.next : c.shown), c.n); c.goal = idx; c.left = (c.kind === 1 ? (fwd === 0 && spin ? c.n : fwd) : fwd === 0 && !spin ? 0 : Math.max(1, spin)) + (flying ? 1 : 0); if (!flying) c.wait = wait; }; const write = (set: Cell[], text: string, spin: number, stagger: number, base: number) => set.forEach((c, i) => { const idx = Math.max(0, (c.kind === 1 ? D_DRUM : L_DRUM).indexOf(text[i] || " ")); if (idx !== c.goal || spin) aim(c, idx, spin ? spin + (i % 3) : 0, base + i * stagger); }); let S = 1, bg: HTMLCanvasElement | null = null; let atlas: { a: HTMLCanvasElement; tw: number; th: number }[] = []; const rr = (g: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, r: number) => { g.beginPath(); g.moveTo(x + r, y); g.arcTo(x + w, y, x + w, y + h, r); g.arcTo(x + w, y + h, x, y + h, r); g.arcTo(x, y + h, x, y, r); g.arcTo(x, y, x + w, y, r); g.closePath(); }; // One flap card: matt black, a hinge across the middle, the pins that carry it at either side. const paintFlap = (g: CanvasRenderingContext2D, w: number, h: number, ch: string) => { rr(g, 0, 0, w, h, Math.min(4, w * 0.08)); g.save(); g.clip(); const a = g.createLinearGradient(0, 0, 0, h / 2); a.addColorStop(0, "#303135"); a.addColorStop(1, "#1f2023"); g.fillStyle = a; g.fillRect(0, 0, w, h / 2); const b = g.createLinearGradient(0, h / 2, 0, h); b.addColorStop(0, "#111213"); b.addColorStop(0.22, "#1b1c1e"); b.addColorStop(1, "#27282b"); g.fillStyle = b; g.fillRect(0, h / 2, w, h / 2); const px = h * 0.74; g.font = `700 ${px}px "Helvetica Neue", Helvetica, Arial, sans-serif`; g.textAlign = "center"; g.textBaseline = "alphabetic"; const squeeze = Math.min(0.88, (w * 0.76) / Math.max(1, g.measureText(ch).width)); g.save(); g.translate(w / 2, h / 2 + px * 0.36); g.scale(squeeze, 1); g.fillStyle = "#f4f0e4"; g.fillText(ch, 0, 0); g.restore(); g.fillStyle = "#050506"; g.fillRect(0, h / 2 - 0.9, w, 1.8); g.fillStyle = "rgba(255,255,255,0.09)"; g.fillRect(0, h / 2 + 0.9, w, 0.8); g.fillStyle = "rgba(255,255,255,0.16)"; g.fillRect(0, 0, w, 0.9); g.fillStyle = "#050506"; g.fillRect(0, h / 2 - h * 0.055, w * 0.05, h * 0.11); g.fillRect(w * 0.95, h / 2 - h * 0.055, w * 0.05, h * 0.11); g.restore(); }; const build = () => { const box = cv.getBoundingClientRect(); S = (Math.max(280, box.width) / W) * Math.min(2, window.devicePixelRatio || 1); cv.width = Math.round(W * S); cv.height = Math.round(H * S); atlas = SIZES.map(([cw, ch], kind) => { const drum = kind === 1 ? D_DRUM : L_DRUM, tw = Math.round(cw * S), th = Math.round((ch * S) / 2) * 2; const a = document.createElement("canvas"); a.width = tw * drum.length; a.height = th; const g = a.getContext("2d"); if (g) for (let i = 0; i < drum.length; i++) { g.save(); g.translate(i * tw, 0); g.scale(tw / cw, th / ch); paintFlap(g, cw, ch, drum[i]); g.restore(); } return { a, tw, th }; }); // The housing never changes, so it is painted once. bg = document.createElement("canvas"); bg.width = cv.width; bg.height = cv.height; const g = bg.getContext("2d"); if (!g) return; g.scale(S, S); g.translate(OX, 0); // Shadow on the wall behind the board. const OFF = 4000; g.save(); g.shadowColor = "rgba(48,40,26,0.4)"; g.shadowBlur = 34 * S; g.shadowOffsetX = OFF * S; g.shadowOffsetY = 34 * S; rr(g, 40 - OFF, 96, 680, 338, 14); g.fill(); g.restore(); g.save(); g.shadowColor = "rgba(40,32,20,0.5)"; g.shadowBlur = 12 * S; g.shadowOffsetX = OFF * S; g.shadowOffsetY = 9 * S; rr(g, 24 - OFF, 74, 712, 360, 12); g.fill(); g.restore(); // Two rods to the ceiling. for (const x of [150, 610]) { const rod = g.createLinearGradient(x - 5, 0, x + 5, 0); rod.addColorStop(0, "#3a3c40"); rod.addColorStop(0.35, "#b9bcc1"); rod.addColorStop(0.55, "#74777c"); rod.addColorStop(1, "#1e2023"); g.fillStyle = rod; g.fillRect(x - 5, 0, 10, 72); const col = g.createLinearGradient(x - 12, 0, x + 12, 0); col.addColorStop(0, "#26282b"); col.addColorStop(0.35, "#8d9096"); col.addColorStop(1, "#141517"); g.fillStyle = col; rr(g, x - 12, 60, 24, 12, 2); g.fill(); } // Steel body with a brushed grain. rr(g, 20, 70, 720, 364, 12); const body = g.createLinearGradient(0, 70, 0, 434); body.addColorStop(0, "#3a3d41"); body.addColorStop(0.12, "#2b2d31"); body.addColorStop(1, "#1b1c1f"); g.fillStyle = body; g.fill(); g.save(); g.clip(); let seed = 11; const rand = () => { seed = (seed * 16807) % 2147483647; return seed / 2147483647; }; for (let y = 70; y < 434; y += 0.7) { const v = rand(); g.fillStyle = v > 0.5 ? `rgba(255,255,255,${(v - 0.5) * 0.07})` : `rgba(0,0,0,${(0.5 - v) * 0.16})`; g.fillRect(20 + rand() * 60, y, 720, 0.6); } const wash = g.createRadialGradient(380, 40, 20, 380, 70, 460); wash.addColorStop(0, "rgba(255,244,222,0.16)"); wash.addColorStop(1, "rgba(255,244,222,0)"); g.fillStyle = wash; g.fillRect(20, 70, 720, 364); g.restore(); g.lineWidth = 1; g.strokeStyle = "#0b0c0d"; rr(g, 20.5, 70.5, 719, 363, 12); g.stroke(); const lip = g.createLinearGradient(0, 70, 0, 434); lip.addColorStop(0, "rgba(255,255,255,0.5)"); lip.addColorStop(0.08, "rgba(255,255,255,0.05)"); lip.addColorStop(0.9, "rgba(0,0,0,0)"); lip.addColorStop(1, "rgba(0,0,0,0.5)"); g.strokeStyle = lip; g.lineWidth = 1.2; rr(g, 21.6, 71.6, 716.8, 360.8, 11); g.stroke(); // The window the flaps sit in. rr(g, 38, 118, 684, 298, 7); g.fillStyle = "#08090a"; g.fill(); g.save(); g.clip(); const inner = g.createLinearGradient(0, 118, 0, 150); inner.addColorStop(0, "rgba(0,0,0,0.95)"); inner.addColorStop(1, "rgba(0,0,0,0)"); g.fillStyle = "#101113"; g.fillRect(38, 118, 684, 298); g.fillStyle = inner; g.fillRect(38, 118, 684, 32); g.restore(); g.lineWidth = 1; g.strokeStyle = "rgba(255,255,255,0.16)"; g.beginPath(); g.moveTo(44, 416.5); g.lineTo(716, 416.5); g.stroke(); g.strokeStyle = "rgba(0,0,0,0.9)"; rr(g, 37.5, 117.5, 685, 299, 7); g.stroke(); // Printed legends. g.textBaseline = "middle"; g.fillStyle = "rgba(240,236,224,0.86)"; const spaced = (text: string, x: number, y: number, gap: number, align: number) => { let w = 0; for (const ch of text) w += g.measureText(ch).width + gap; let cx = x - (w - gap) * align; g.textAlign = "left"; for (const ch of text) { g.fillText(ch, cx, y); cx += g.measureText(ch).width + gap; } }; g.font = '700 12px "Helvetica Neue", Helvetica, Arial, sans-serif'; spaced("DEPARTURES", 56, 95, 3.2, 0); g.fillStyle = "rgba(240,236,224,0.5)"; g.font = '600 10px "Helvetica Neue", Helvetica, Arial, sans-serif'; spaced("TRACK 2", 690, 95, 2.4, 1); g.fillStyle = "rgba(240,236,224,0.62)"; g.font = '600 9.5px "Helvetica Neue", Helvetica, Arial, sans-serif'; ["DAYS", "HOURS", "MINUTES", "SECONDS"].forEach((label, i) => spaced(label, 51 + 72.5 + i * 171, 334, 2.6, 0.5)); // Slot-head screws in the corners. for (const [x, y, a] of [[36, 86, 0.5], [724, 86, 2.2], [36, 422, 1.4], [724, 422, 0.2]]) { const sc = g.createRadialGradient(x - 1.5, y - 1.5, 0.5, x, y, 5.5); sc.addColorStop(0, "#d9dbde"); sc.addColorStop(0.6, "#7c7f85"); sc.addColorStop(1, "#2a2c2f"); g.beginPath(); g.arc(x, y, 5, 0, Math.PI * 2); g.fillStyle = sc; g.fill(); g.lineWidth = 0.8; g.strokeStyle = "rgba(0,0,0,0.8)"; g.stroke(); g.lineWidth = 1.3; g.strokeStyle = "rgba(10,10,12,0.85)"; g.beginPath(); g.moveTo(x - Math.cos(a) * 3.6, y - Math.sin(a) * 3.6); g.lineTo(x + Math.cos(a) * 3.6, y + Math.sin(a) * 3.6); g.stroke(); } // Wells behind each flap, with the edges of the waiting cards showing above it. for (const c of cells) { const [cw, ch] = SIZES[c.kind]; const x = c.x - OX; g.fillStyle = "#000"; rr(g, x - 1.5, c.y - 5, cw + 3, ch + 8, 4); g.fill(); for (let k = 0; k < 3; k++) { g.fillStyle = `rgba(255,255,255,${0.1 - k * 0.028})`; g.fillRect(x + 1 + k, c.y - 1.6 - k * 1.3, cw - 2 - k * 2, 0.7); } } }; const draw = (t: number) => { if (!bg) return; ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, cv.width, cv.height); ctx.drawImage(bg, 0, 0); for (const c of cells) { const { a, tw, th } = atlas[c.kind], hh = th / 2, x = Math.round(c.x * S), y = Math.round(c.y * S); if (c.p < 0) { ctx.drawImage(a, c.shown * tw, 0, tw, th, x, y, tw, th); continue; } ctx.drawImage(a, c.next * tw, 0, tw, hh, x, y, tw, hh); ctx.drawImage(a, c.shown * tw, hh, tw, hh, x, y + hh, tw, hh); const e = c.p * c.p * (1.6 - 0.6 * c.p); // the card speeds up as it falls if (e < 0.5) { const k = Math.cos(e * Math.PI), fh = Math.max(1, hh * k); ctx.fillStyle = `rgba(0,0,0,${0.5 * (1 - k)})`; ctx.fillRect(x, y + hh, tw, hh * (1 - k) * 0.9); ctx.drawImage(a, c.shown * tw, 0, tw, hh, x - (1 - k) * S, y + hh - fh, tw + (1 - k) * 2 * S, fh); ctx.fillStyle = `rgba(255,255,255,${0.1 * (1 - k)})`; ctx.fillRect(x, y + hh - fh, tw, fh); } else { const k = -Math.cos(e * Math.PI), fh = Math.max(1, hh * k); ctx.drawImage(a, c.next * tw, hh, tw, hh, x - (1 - k) * S, y + hh, tw + (1 - k) * 2 * S, fh); ctx.fillStyle = `rgba(0,0,0,${0.55 * (1 - k)})`; ctx.fillRect(x, y + hh, tw, fh); } } ctx.setTransform(S, 0, 0, S, OX * S, 0); // The amber lamp that says the board is live. const on = reduce ? 1 : 0.6 + 0.4 * Math.sin(t / 520); ctx.beginPath(); ctx.arc(706, 95, 5.4, 0, Math.PI * 2); ctx.fillStyle = "#070708"; ctx.fill(); ctx.save(); ctx.shadowColor = "#ffab2e"; ctx.shadowBlur = 16 * on * S; ctx.globalAlpha = 0.3 + 0.7 * on; ctx.beginPath(); ctx.arc(706, 95, 3.6, 0, Math.PI * 2); ctx.fillStyle = "#ffb13b"; ctx.fill(); ctx.restore(); ctx.beginPath(); ctx.arc(704.8, 93.8, 1.1, 0, Math.PI * 2); ctx.fillStyle = "rgba(255,255,255,0.7)"; ctx.fill(); // A pane of glass over the window. const glass = ctx.createLinearGradient(120, 118, 420, 416); glass.addColorStop(0, "rgba(255,255,255,0.075)"); glass.addColorStop(0.42, "rgba(255,255,255,0.02)"); glass.addColorStop(0.43, "rgba(255,255,255,0)"); glass.addColorStop(1, "rgba(255,255,255,0.03)"); ctx.fillStyle = glass; rr(ctx, 38, 118, 684, 298, 7); ctx.fill(); }; let msg = 0, lastDigits = "", lastSec = -1, raf = 0, last = 0, t0 = 0, seen = true, nextMsg = 5200, touched = -1e9; const sync = (first: boolean) => { const leftMs = end - Date.now(), v = split(leftMs), digits = pad2(v.d) + pad2(v.h) + pad2(v.m) + pad2(v.s); if (digits !== lastDigits) { lastDigits = digits; nums.forEach((c, i) => aim(c, D_DRUM.indexOf(digits[i]), 0, first ? 160 + i * 46 : 0)); } const sec = Math.floor(Math.max(0, leftMs) / 1000); if (sec !== lastSec) { lastSec = sec; setInfo({ left: sec, when }); } }; const step = (dt: number) => { for (const c of cells) { if (c.p < 0) { if (c.left <= 0) continue; if (c.wait > 0) { c.wait -= dt; continue; } c.next = mod(c.goal - (c.left - 1), c.n); c.p = 0; c.dur = c.left > 1 ? 52 + ((c.x * 7) % 16) : 150; } c.p += dt / c.dur; if (c.p >= 1) { c.shown = c.next; c.left -= 1; c.p = -1; } } }; const frame = (now: number) => { raf = 0; if (!t0) { t0 = now; last = now; } const dt = Math.min(50, now - last); last = now; const t = now - t0; sync(false); if (t > nextMsg && now - touched > 2500) { msg = (msg + 1) % messages.length; write(top, centre(messages[msg], 12), 5, 34, 0); nextMsg = t + 5200; } step(dt); draw(t); if (seen && !document.hidden) raf = requestAnimationFrame(frame); }; const wake = () => { if (!raf && !reduce) { last = performance.now(); raf = requestAnimationFrame(frame); } }; build(); write(top, centre(messages[0], 12), 6, 26, 40); write(date, centre(dateLine, 16), 5, 20, 330); sync(true); let timer = 0; if (reduce) { draw(0); timer = window.setInterval(() => { sync(false); draw(0); }, 1000); } else wake(); const at = (e: PointerEvent) => { const b = cv.getBoundingClientRect(); return [((e.clientX - b.left) / b.width) * W, ((e.clientY - b.top) / b.height) * H]; }; const onMove = (e: PointerEvent) => { if (reduce) return; const [px, py] = at(e), now = performance.now(); for (const c of cells) { if (c.kind === 1 || c.left > 0 || now - c.kicked < 900) continue; const [cw, ch] = SIZES[c.kind]; if (Math.hypot(c.x + cw / 2 - px, c.y + ch / 2 - py) < 46) { c.kicked = now; touched = now; aim(c, c.goal, 4, 0); } } }; api.current = { shuffle: (px, py) => { touched = performance.now(); for (const c of cells) { const [cw, ch] = SIZES[c.kind]; if (c.left <= 0) aim(c, c.goal, c.kind === 1 ? 1 : 7, Math.hypot(c.x + cw / 2 - px, c.y + ch / 2 - py) * 1.1); } wake(); }, }; const onDown = (e: PointerEvent) => { const [px, py] = at(e); api.current?.shuffle(px, py); }; cv.addEventListener("pointermove", onMove); cv.addEventListener("pointerdown", onDown); const ro = new ResizeObserver(() => { build(); if (reduce) draw(0); }); ro.observe(cv); const io = new IntersectionObserver(([entry]) => { seen = entry.isIntersecting; if (seen) wake(); }); io.observe(cv); const onVis = () => { if (!document.hidden) wake(); }; document.addEventListener("visibilitychange", onVis); return () => { cancelAnimationFrame(raf); window.clearInterval(timer); api.current = null; cv.removeEventListener("pointermove", onMove); cv.removeEventListener("pointerdown", onDown); ro.disconnect(); io.disconnect(); document.removeEventListener("visibilitychange", onVis); }; }, []); const v = info ? split(info.left * 1000) : null; return (

{EVENT} leaves {info ? info.when : "soon"} / {v ? (info && info.left === 0 ? "Departed" : `${v.d} days ${pad2(v.h)} h ${pad2(v.m)} min ${pad2(v.s)} s`) : "Counting"}

Reserve a seat

); } 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L62",null,{"files":[{"path":"components/we-inc/split-flap-station-board-countdown-that-clatters-down-to-a-launch-date.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]