Upload 6 files

.gitignore

@@ -0,0 +1,31 @@
+# Dependencies
+node_modules/
+.npm
+/.pnp
+.pnp.js
+
+# Testing
+/coverage
+
+# Production
+/dist
+/build
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# IDEs
+.vscode/
+.idea/
+
+# Repository specific
+prompt.md
+reponame_savelog.txt

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Rembrant Oyangoren Albeos
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,40 @@
+---
+license: mit
+sdk: react
+tags:
+  - cyberpunk
+  - ui
+  - react
+  - canvas
+  - glassmorphism
+title: Cyberpunk Nexus Protocol Ticket UI
+pinned: true
+---
+
+# Cyberpunk Nexus Protocol Ticket UI
+
+A premium React-based cyberpunk interface component designed with a "Nexus Protocol" aesthetic. This project demonstrates advanced front-end techniques including dynamic noise/grain rendering on canvas, SVG geometric overlays, and real-time terminal-style code cascades.
+
+![Frontend Preview](image.png)
+
+## Key Features
+
+- **Dynamic Grain Canvas**: Real-time noise and vignette effects for a gritty, hardware-like feel.
+- **Terminal Cascade**: Animated code-stream mask with periodic glitch effects.
+- **Geometric Overlays**: Crisp, low-alpha SVG patterns and crosshairs providing depth.
+- **Responsive "Ticket" Physics**: Perspective-warped card layout with inner glassmorphism.
+- **Premium Typography**: Uses [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono) for a high-clearance, technical look.
+
+## Technical Stack
+
+- **React**: Functional components and advanced hooks (`useRef`, `useEffect`).
+- **Canvas API**: Custom low-level grain and noise generation.
+- **SVG**: Complex vector overlays for geometric precision.
+- **CSS-in-JS**: Dynamic styling for animations and layouts.
+
+## Getting Started
+
+1.  **Dependencies**: This component is standalone but requires `ibm-plex-mono` font (loaded dynamically).
+2.  **Integration**: Simply import `CyberTicket` into your React application.
+
+

prompt.md

@@ -0,0 +1,45 @@
+<command>
+You are a world-class senior UI/UX designer specializing in premium dark cyber-analog ticket aesthetics.
+
+Strictly follow and apply this exact design system to create or redesign any interface. Do not deviate, add colors, change fonts, or soften rules.
+
+MANDATORY DESIGN SYSTEM:
+
+- Background: Pure deep black #0A0A0A
+
+- Surface texture (applied everywhere): Heavy elegant film grain + high-frequency noise texture. Include subtle noise gradient — stronger near edges/corners, softer toward center — to mimic scanned printed ticket with analog imperfections. Add very faint overall vignette darkening toward edges (optional but recommended for depth).
+
+- Colors: Only #FFFFFF (crisp white) for primary text/icons + #B0B0B0 (light gray) for secondary/dimmed text. No other colors, no tints, no glows.
+
+- Typography — IBM Plex Mono ONLY for all text:
+  • Headlines / main branding / large titles: IBM Plex Mono Bold (or SemiBold if too heavy), generous tracking (+10–20% letter-spacing), slightly condensed optical feel at large sizes, uppercase preferred.
+  • Body / paragraphs / dense info / labels: IBM Plex Mono Regular or Medium, standard monospaced rhythm, line-height 1.4–1.6, size/weight contrast for hierarchy, uppercase for short labels/headers when it improves punch and scannability.
+  • Exploit monospaced neo-grotesque terminal/data/code character throughout.
+
+- Card style: Tall vertical ticket-like panel (or horizontal variant), soft rounded corners (12–20 px radius), subtle 3D perspective tilt + gentle drop shadow to give lifted physical printed-ticket depth. Or horizontal version.
+
+- Geometric overlays (subtle, thin white lines #FFFFFF): Perspective triangles, faint grid lines, radiating technical accents — blueprint/schematic technical feeling without clutter.
+
+- Strict layout order (top to bottom):
+  1. Strong top header bar — slightly darker raised panel (#111111–#1A1A1A range) containing left-aligned branding text + right-aligned small symbol/copyright
+  2. Branding block — centered or left-aligned main title with wave/neural icon integrated
+  3. Large visual centerpiece — occupies ~40–50% of height
+  4. Information block — generous vertical spacing, breathing room, left-aligned text
+  5. Minimal ticket-style footer strip — small text, icons (star, copyright, seal/triangle), barcode or similar element, aligned bottom
+
+- Mood & polish: Mysterious, exclusive, high-tech classified artifact. Extreme black-white contrast, Apple-grade micro-details (perfect alignment, kerning, shadow subtlety), instantly readable in dark mode. Must feel like a premium physical ticket that was printed, handled, and scanned — analog grain + digital precision.
+
+VISUAL CENTERPIECE — always include one (use both side-by-side when creating pairs/tickets; otherwise user specifies or default to A for technical interfaces):
+
+A) Technical version: Large perfect circle (or sharp rectangle) mask filled with dense monospaced terminal/code/data cascade — white IBM Plex Mono text blocks, slight glitch/offset row shifts, layered or pseudo-scrolling effect. Apply same heavy film grain + noise gradient inside the mask.
+
+B) Atmospheric version: Full-bleed cinematic moody photograph/scene (desaturated dark tones, low-key lighting, retro-futuristic or abandoned tech vibe). Overlay same heavy film grain + noise gradient + faint vignette.
+
+Now strictly apply this system to create or redesign:
+
+[INSERT YOUR DESCRIPTION / IDEA / REFERENCE HERE]
+
+Optional generation parameters (append if needed): --ar 9:16 --stylize 180 --v 6 --style raw
+
+
+</command>

sample.jsx

@@ -0,0 +1,501 @@
+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 (
+        <canvas
+            ref={canvasRef}
+            style={{
+                position: "absolute", inset: 0, width: "100%", height: "100%",
+                pointerEvents: "none", mixBlendMode: "overlay", zIndex: 10,
+            }}
+        />
+    );
+}
+
+// ── SVG geometric overlay ─────────────────────────────────────────────────────
+function GeometricOverlay() {
+    return (
+        <svg
+            viewBox="0 0 480 860"
+            style={{
+                position: "absolute", inset: 0, width: "100%", height: "100%",
+                pointerEvents: "none", zIndex: 5, opacity: 0.12,
+            }}
+            preserveAspectRatio="none"
+        >
+            {/* Corner triangles */}
+            <polygon points="0,0 72,0 0,72" fill="none" stroke="white" strokeWidth="0.8" />
+            <polygon points="480,0 408,0 480,72" fill="none" stroke="white" strokeWidth="0.8" />
+            <polygon points="0,860 72,860 0,788" fill="none" stroke="white" strokeWidth="0.8" />
+            <polygon points="480,860 408,860 480,788" fill="none" stroke="white" strokeWidth="0.8" />
+            {/* Subtle grid lines */}
+            {[0.2, 0.4, 0.6, 0.8].map((t) => (
+                <line key={t} x1={480 * t} y1="0" x2={480 * t} y2="860" stroke="white" strokeWidth="0.4" />
+            ))}
+            {[0.25, 0.5, 0.75].map((t) => (
+                <line key={t} x1="0" y1={860 * t} x2="480" y2={860 * t} stroke="white" strokeWidth="0.4" />
+            ))}
+            {/* Radiating accent lines from center */}
+            <line x1="240" y1="430" x2="0" y2="0" stroke="white" strokeWidth="0.3" />
+            <line x1="240" y1="430" x2="480" y2="0" stroke="white" strokeWidth="0.3" />
+            <line x1="240" y1="430" x2="0" y2="860" stroke="white" strokeWidth="0.3" />
+            <line x1="240" y1="430" x2="480" y2="860" stroke="white" strokeWidth="0.3" />
+            {/* Center circle accent */}
+            <circle cx="240" cy="430" r="200" fill="none" stroke="white" strokeWidth="0.5" />
+            <circle cx="240" cy="430" r="198" fill="none" stroke="white" strokeWidth="0.2" />
+        </svg>
+    );
+}
+
+// ── 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 (
+        <div
+            style={{
+                width: "100%", height: "100%",
+                background: "#000",
+                borderRadius: "50%",
+                overflow: "hidden",
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                padding: "18px 14px",
+                gap: 0,
+                position: "relative",
+            }}
+        >
+            {/* inner vignette */}
+            <div style={{
+                position: "absolute", inset: 0, borderRadius: "50%",
+                background: "radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.72) 100%)",
+                zIndex: 2, pointerEvents: "none",
+            }} />
+            {visible.map((line, i) => (
+                <div
+                    key={i}
+                    style={{
+                        fontFamily: "'IBM Plex Mono', monospace",
+                        fontSize: "9.5px",
+                        fontWeight: i === 0 ? 700 : 400,
+                        letterSpacing: "0.08em",
+                        color: i === 0 ? "#FFFFFF" : i < 3 ? "#D8D8D8" : "#888",
+                        lineHeight: "1.55",
+                        opacity: i === 0 ? 1 : Math.max(0.18, 1 - i * 0.045),
+                        transform: glitch.row === i ? `translateX(${glitch.px}px)` : "none",
+                        whiteSpace: "nowrap",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        transition: "transform 0.04s",
+                        position: "relative",
+                        zIndex: 3,
+                    }}
+                >
+                    {i === 0 ? "▶ " : "  "}{line}
+                </div>
+            ))}
+        </div>
+    );
+}
+
+// ── 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 (
+        <svg width="160" height="36" viewBox="0 0 160 36">
+            {bars.reduce((acc, bar, i) => {
+                const x = acc.x;
+                acc.elements.push(
+                    <rect key={i} x={x} y={2} width={bar.w} height={28} fill="white" />
+                );
+                acc.x += bar.w + bar.gap;
+                return acc;
+            }, { x: 2, elements: [] }).elements}
+        </svg>
+    );
+}
+
+// ── Tear line ─────────────────────────────────────────────────────────────────
+function TearLine() {
+    return (
+        <div style={{ display: "flex", alignItems: "center", gap: 0, margin: "0 -32px" }}>
+            <div style={{
+                width: 22, height: 22, borderRadius: "50%",
+                background: "#0A0A0A", border: "1px solid #2a2a2a", flexShrink: 0,
+            }} />
+            <div style={{
+                flex: 1, height: 1,
+                backgroundImage: "repeating-linear-gradient(90deg, #333 0, #333 6px, transparent 6px, transparent 12px)",
+            }} />
+            <div style={{
+                width: 22, height: 22, borderRadius: "50%",
+                background: "#0A0A0A", border: "1px solid #2a2a2a", flexShrink: 0,
+            }} />
+        </div>
+    );
+}
+
+// ── 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 (
+        <div
+            style={{
+                minHeight: "100vh",
+                background: "#0A0A0A",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                padding: "40px 16px",
+                fontFamily: "'IBM Plex Mono', monospace",
+                position: "relative",
+                overflow: "hidden",
+            }}
+        >
+            {/* full-page grain */}
+            <GrainOverlay strength={0.14} />
+
+            {/* Ticket card */}
+            <div
+                style={{
+                    width: "100%",
+                    maxWidth: 420,
+                    background: "#0A0A0A",
+                    border: "1px solid #222",
+                    borderRadius: 18,
+                    overflow: "hidden",
+                    position: "relative",
+                    transform: "perspective(900px) rotateX(2.5deg) rotateY(-1.5deg)",
+                    boxShadow: "0 32px 80px rgba(0,0,0,0.92), 0 2px 0 #333 inset",
+                }}
+            >
+                <GrainOverlay strength={0.22} />
+                <GeometricOverlay />
+
+                {/* 1 ── TOP HEADER BAR */}
+                <div
+                    style={{
+                        background: "#111",
+                        borderBottom: "1px solid #222",
+                        padding: "12px 20px",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        position: "relative",
+                        zIndex: 20,
+                    }}
+                >
+                    <div>
+                        <div style={{
+                            fontSize: 9, fontWeight: 700, letterSpacing: "0.32em",
+                            color: "#FFF", textTransform: "uppercase",
+                        }}>NEXUS PROTOCOL</div>
+                        <div style={{ fontSize: 7.5, color: "#666", letterSpacing: "0.18em", marginTop: 1 }}>
+                            CLASSIFIED ACCESS DOCUMENT
+                        </div>
+                    </div>
+                    <div style={{ textAlign: "right" }}>
+                        <div style={{ fontSize: 9, color: "#555", letterSpacing: "0.1em" }}>Ω-09</div>
+                        <div style={{ fontSize: 7, color: "#3a3a3a", marginTop: 1 }}>© 2025</div>
+                    </div>
+                </div>
+
+                {/* 2 ── BRANDING BLOCK */}
+                <div style={{ padding: "24px 28px 16px", position: "relative", zIndex: 20 }}>
+                    <div style={{
+                        display: "flex", alignItems: "center", gap: 12, marginBottom: 6,
+                    }}>
+                        {/* Wave/neural icon */}
+                        <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
+                            <circle cx="14" cy="14" r="13" stroke="white" strokeWidth="1" />
+                            <path d="M4 14 Q7 8 10 14 Q13 20 16 14 Q19 8 22 14 Q24 18 24 14"
+                                stroke="white" strokeWidth="1.2" fill="none" strokeLinecap="round" />
+                            <circle cx="14" cy="14" r="2" fill="white" />
+                        </svg>
+                        <div>
+                            <div style={{
+                                fontSize: 22, fontWeight: 700, letterSpacing: "0.18em",
+                                color: "#FFF", textTransform: "uppercase", lineHeight: 1,
+                            }}>NEURAL</div>
+                            <div style={{
+                                fontSize: 22, fontWeight: 400, letterSpacing: "0.34em",
+                                color: "#888", textTransform: "uppercase", lineHeight: 1, marginTop: 2,
+                            }}>ACCESS</div>
+                        </div>
+                    </div>
+                    <div style={{
+                        fontSize: 8, color: "#444", letterSpacing: "0.22em", textTransform: "uppercase",
+                    }}>
+                        HIGH-CLEARANCE ADMISSION DOCUMENT — SERIES 9 — OMEGA TIER
+                    </div>
+                </div>
+
+                {/* 3 ── VISUAL CENTERPIECE — Terminal circle */}
+                <div style={{
+                    padding: "0 28px", position: "relative", zIndex: 20,
+                    display: "flex", justifyContent: "center",
+                }}>
+                    <div style={{
+                        width: 260, height: 260,
+                        borderRadius: "50%",
+                        border: "1px solid #333",
+                        overflow: "hidden",
+                        position: "relative",
+                        boxShadow: "0 0 0 6px #111, 0 0 0 7px #222",
+                    }}>
+                        <TerminalMask />
+                        <GrainOverlay strength={0.26} />
+                    </div>
+                </div>
+
+                {/* scan status pill */}
+                <div style={{
+                    display: "flex", justifyContent: "center", marginTop: 12,
+                    position: "relative", zIndex: 20,
+                }}>
+                    <div style={{
+                        display: "flex", alignItems: "center", gap: 6,
+                        border: "1px solid #2a2a2a", borderRadius: 999,
+                        padding: "4px 14px",
+                        background: "#0f0f0f",
+                    }}>
+                        <div style={{
+                            width: 5, height: 5, borderRadius: "50%",
+                            background: pulse ? "#FFF" : "#444",
+                            transition: "background 0.4s",
+                        }} />
+                        <span style={{ fontSize: 8, letterSpacing: "0.2em", color: "#888", textTransform: "uppercase" }}>
+                            SIGNAL {pulse ? "ACTIVE" : "PINGING"}
+                        </span>
+                    </div>
+                </div>
+
+                {/* 4 ── INFORMATION BLOCK */}
+                <div style={{
+                    padding: "22px 28px 0",
+                    position: "relative", zIndex: 20,
+                    display: "grid", gridTemplateColumns: "1fr 1fr", gap: "16px 12px",
+                }}>
+                    {[
+                        { 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 }) => (
+                        <div key={label}>
+                            <div style={{
+                                fontSize: 7.5, color: "#444", letterSpacing: "0.24em",
+                                textTransform: "uppercase", marginBottom: 3,
+                            }}>{label}</div>
+                            <div style={{
+                                fontSize: 11, color: "#DEDEDE", letterSpacing: "0.1em",
+                                fontWeight: 600,
+                            }}>{value}</div>
+                        </div>
+                    ))}
+                </div>
+
+                {/* divider row */}
+                <div style={{
+                    padding: "20px 28px 0", position: "relative", zIndex: 20,
+                }}>
+                    <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
+                        {Array.from({ length: 3 }).map((_, i) => (
+                            <div key={i} style={{
+                                flex: 1, height: 1,
+                                background: i === 1 ? "#2a2a2a" : "#1a1a1a",
+                            }} />
+                        ))}
+                        <svg width="10" height="10" viewBox="0 0 10 10" fill="none" style={{ opacity: 0.4 }}>
+                            <polygon points="5,0 10,10 0,10" stroke="white" strokeWidth="1" fill="none" />
+                        </svg>
+                        {Array.from({ length: 3 }).map((_, i) => (
+                            <div key={i} style={{
+                                flex: 1, height: 1,
+                                background: i === 1 ? "#2a2a2a" : "#1a1a1a",
+                            }} />
+                        ))}
+                    </div>
+                </div>
+
+                {/* 5 ── TEAR LINE */}
+                <div style={{ padding: "18px 10px 14px", position: "relative", zIndex: 20 }}>
+                    <TearLine />
+                </div>
+
+                {/* 5 ── FOOTER STRIP */}
+                <div style={{
+                    padding: "8px 28px 22px",
+                    position: "relative", zIndex: 20,
+                    display: "flex", alignItems: "center", justifyContent: "space-between",
+                }}>
+                    {/* Barcode */}
+                    <div>
+                        <Barcode />
+                        <div style={{ fontSize: 7, color: "#333", letterSpacing: "0.16em", marginTop: 3 }}>
+                            NX-9912-DELTA-44-0x2F
+                        </div>
+                    </div>
+                    {/* Footer icons & stamp */}
+                    <div style={{ textAlign: "right" }}>
+                        <div style={{ display: "flex", gap: 6, justifyContent: "flex-end", marginBottom: 6 }}>
+                            {["★", "◈", "▲"].map((icon, i) => (
+                                <span key={i} style={{
+                                    fontSize: i === 0 ? 11 : 9, color: "#444",
+                                    fontFamily: "monospace",
+                                }}>{icon}</span>
+                            ))}
+                        </div>
+                        <div style={{
+                            fontSize: 7, color: "#3a3a3a", letterSpacing: "0.2em",
+                            textTransform: "uppercase", lineHeight: 1.6,
+                        }}>
+                            ADMIT<br />ONE
+                        </div>
+                    </div>
+                </div>
+
+                {/* subtle bottom vignette */}
+                <div style={{
+                    position: "absolute", bottom: 0, left: 0, right: 0, height: 80,
+                    background: "linear-gradient(to top, rgba(0,0,0,0.55), transparent)",
+                    pointerEvents: "none", zIndex: 8,
+                }} />
+            </div>
+
+            {/* ambient page label */}
+            <div style={{
+                position: "absolute", bottom: 18, left: "50%", transform: "translateX(-50%)",
+                fontSize: 8, letterSpacing: "0.3em", color: "#2a2a2a",
+                fontFamily: "'IBM Plex Mono', monospace", textTransform: "uppercase",
+                zIndex: 20,
+            }}>
+                NEXUS PROTOCOL — DOCUMENT RENDER v9.1 — CLASSIFIED
+            </div>
+        </div>
+    );
+}