import { useState, useEffect, useRef } from "react"; const FONT_URL = "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"; // ── Terminal data cascade lines ─────────────────────────────────────────────── const TERMINAL_LINES = [ "INIT SEQUENCE 0x4F2A...", "AUTH TOKEN: ██████████████", "SCAN FREQ 847.221 MHz", "SECTOR [CLASSIFIED]", "NODE_ID NX-9912-DELTA", "TIMESTAMP 2025.03.06", "CLEARANCE LEVEL-OMEGA", "STATUS AUTHORIZED", "PAYLOAD ENCRYPTED", "UPLINK ACTIVE", "SIGNAL ████░░░░ 61%", "VERIFY SHA256:c0d3f", "MATRIX 7×7 LATTICE", "HASH 0xDEADBEEF", "PING 12.4ms OK", "TRACE DISABLED", "VAULT SEALED", "PROTOCOL OMEGA-9", "ENTROPY HIGH", "FRAME #00441", "BUFFER FLUSHED", "CIPHER AES-256", "RELAY PROXIED", "ECHO SILENT", "LOCK ENGAGED", "GRID REF 44.0N 76.2W", "KERNEL 3.14.159", "DAEMON RUNNING", "WATCHDOG ARMED", "ROUTE OBFUSCATED", ]; function useAnimFrame(cb) { const ref = useRef(); useEffect(() => { let id; const loop = (t) => { cb(t); id = requestAnimationFrame(loop); }; id = requestAnimationFrame(loop); return () => cancelAnimationFrame(id); }, [cb]); } // ── Noise / grain canvas ────────────────────────────────────────────────────── function GrainOverlay({ strength = 0.18 }) { const canvasRef = useRef(); const tick = useRef(0); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); let raf; const draw = () => { tick.current++; if (tick.current % 2 !== 0) { raf = requestAnimationFrame(draw); return; } const { width, height } = canvas; const img = ctx.createImageData(width, height); const d = img.data; for (let i = 0; i < d.length; i += 4) { const px = i / 4; const x = px % width; const y = Math.floor(px / width); // Vignette factor — stronger at edges const cx = x / width - 0.5, cy = y / height - 0.5; const dist = Math.sqrt(cx * cx + cy * cy); const vignette = Math.min(1, dist * 2.2); const noise = (Math.random() - 0.5) * 255 * (strength + vignette * 0.18); d[i] = d[i + 1] = d[i + 2] = 128 + noise; d[i + 3] = Math.floor(18 + vignette * 30); } ctx.putImageData(img, 0, 0); raf = requestAnimationFrame(draw); }; const resize = () => { canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; }; resize(); draw(); window.addEventListener("resize", resize); return () => { cancelAnimationFrame(raf); window.removeEventListener("resize", resize); }; }, [strength]); return ( ); } // ── SVG geometric overlay ───────────────────────────────────────────────────── function GeometricOverlay() { return ( {/* Corner triangles */} {/* Subtle grid lines */} {[0.2, 0.4, 0.6, 0.8].map((t) => ( ))} {[0.25, 0.5, 0.75].map((t) => ( ))} {/* Radiating accent lines from center */} {/* Center circle accent */} ); } // ── Terminal code cascade ───────────────────────────────────────────────────── function TerminalMask() { const [offset, setOffset] = useState(0); const [glitch, setGlitch] = useState({ row: -1, px: 0 }); useEffect(() => { const iv = setInterval(() => { setOffset((o) => (o + 1) % TERMINAL_LINES.length); }, 120); const gv = setInterval(() => { setGlitch({ row: Math.floor(Math.random() * 18), px: (Math.random() - 0.5) * 8 }); setTimeout(() => setGlitch({ row: -1, px: 0 }), 80); }, 900); return () => { clearInterval(iv); clearInterval(gv); }; }, []); const visible = Array.from({ length: 20 }, (_, i) => TERMINAL_LINES[(offset + i) % TERMINAL_LINES.length] ); return (
{/* inner vignette */}
{visible.map((line, i) => (
{i === 0 ? "▶ " : " "}{line}
))}
); } // ── Barcode SVG ─────────────────────────────────────────────────────────────── function Barcode() { const bars = Array.from({ length: 60 }, (_, i) => { const w = [1, 1, 2, 1, 3, 1, 2, 1, 1, 2][i % 10]; return { w, gap: [2, 1, 2, 3, 1, 2, 1, 2, 3, 1][i % 10] }; }); return ( {bars.reduce((acc, bar, i) => { const x = acc.x; acc.elements.push( ); acc.x += bar.w + bar.gap; return acc; }, { x: 2, elements: [] }).elements} ); } // ── Tear line ───────────────────────────────────────────────────────────────── function TearLine() { return (
); } // ── Main component ──────────────────────────────────────────────────────────── export default function CyberTicket() { const [pulse, setPulse] = useState(false); useEffect(() => { // inject font if (!document.getElementById("ibm-plex-mono")) { const link = document.createElement("link"); link.id = "ibm-plex-mono"; link.rel = "stylesheet"; link.href = FONT_URL; document.head.appendChild(link); } const iv = setInterval(() => setPulse((p) => !p), 1400); return () => clearInterval(iv); }, []); return (
{/* full-page grain */} {/* Ticket card */}
{/* 1 ── TOP HEADER BAR */}
NEXUS PROTOCOL
CLASSIFIED ACCESS DOCUMENT
Ω-09
© 2025
{/* 2 ── BRANDING BLOCK */}
{/* Wave/neural icon */}
NEURAL
ACCESS
HIGH-CLEARANCE ADMISSION DOCUMENT — SERIES 9 — OMEGA TIER
{/* 3 ── VISUAL CENTERPIECE — Terminal circle */}
{/* scan status pill */}
SIGNAL {pulse ? "ACTIVE" : "PINGING"}
{/* 4 ── INFORMATION BLOCK */}
{[ { label: "BEARER", value: "AGENT_NX-44" }, { label: "ISSUED", value: "2025.03.06" }, { label: "CLEARANCE", value: "OMEGA / Ω" }, { label: "EXPIRES", value: "2025.12.31" }, { label: "SECTOR", value: "DELTA-9" }, { label: "NODE", value: "0xDEAD·BF9" }, ].map(({ label, value }) => (
{label}
{value}
))}
{/* divider row */}
{Array.from({ length: 3 }).map((_, i) => (
))} {Array.from({ length: 3 }).map((_, i) => (
))}
{/* 5 ── TEAR LINE */}
{/* 5 ── FOOTER STRIP */}
{/* Barcode */}
NX-9912-DELTA-44-0x2F
{/* Footer icons & stamp */}
{["★", "◈", "▲"].map((icon, i) => ( {icon} ))}
ADMIT
ONE
{/* subtle bottom vignette */}
{/* ambient page label */}
NEXUS PROTOCOL — DOCUMENT RENDER v9.1 — CLASSIFIED
); }