); } // ========== GLITCH TEXT ========== function Glitch({ children, as = "span", className = "", ...rest }) { const Tag = as; const text = typeof children === "string" ? children : ""; return ( {children} ); } // ========== MARQUEE ========== function Marquee({ children, duration = 40, reverse = false, separator = "✦" }) { const items = React.Children.toArray(children); const renderRow = (k) => ( {items.map((it, i) => ( {it} {separator} ))} ); return (

{renderRow("a")}{renderRow("b")}

); } // ========== NAV ========== const PAGES = [ { id: "home", label: "Home", code: "01" }, { id: "nemesis", label: "Nemesis", code: "02" }, { id: "signup", label: "Closed Test", code: "03" }, { id: "devlog", label: "Devlog", code: "04" }, { id: "about", label: "Studio", code: "05" }, { id: "contact", label: "Contact", code: "06" }, ]; function Logo({ small = false }) { return (

Tiny Gang

STUDIOS / EST 2023

); } function Nav({ page, setPage }) { const [time, setTime] = useState(""); useEffect(() => { const tick = () => { const d = new Date(); const hh = String(d.getUTCHours()).padStart(2, "0"); const mm = String(d.getUTCMinutes()).padStart(2, "0"); const ss = String(d.getUTCSeconds()).padStart(2, "0"); setTime(`${hh}:${mm}:${ss}`); }; tick(); const i = setInterval(tick, 1000); return () => clearInterval(i); }, []); return (

{PAGES.map((p, i) => { const active = p.id === page; return ( ); })}

UTC {time} SYS // ONLINE

); } // ========== FOOTER ========== function Footer({ setPage }) { return ( ); } // ========== BOOT ========== function BootScreen({ onDone }) { const [lines, setLines] = useState([]); const [done, setDone] = useState(false); useEffect(() => { const seq = [ "> tinygang.kernel v2.4.1 :: cold start", "> mounting /dev/neon ............... [ OK ]", "> handshaking with NEMESIS server ... [ OK ]", "> loading visual cortex ............. [ OK ]", "> calibrating CRT output ............ [ OK ]", "> injecting glitch routines ......... [ OK ]", "> ready.", ]; let i = 0; const id = setInterval(() => { setLines(s => [...s, seq[i]]); i++; if (i >= seq.length) { clearInterval(id); setTimeout(() => setDone(true), 350); setTimeout(() => onDone(), 700); } }, 110); return () => clearInterval(id); }, [onDone]); return (

{`████████╗ ██████╗   //  TINY GANG
╚══██╔══╝██╔════╝   //  STUDIOS
   ██║   ██║  ███╗  //  est. 2023
   ██║   ██║   ██║
   ██║   ╚██████╔╝  cold-boot sequence
   ╚═╝    ╚═════╝   ─────────────────`}

        {lines.map((l, i) => {l})}
        ▌

); } // ========== PARTICLE STREAKS BG ========== function NeonRain() { const ref = useRef(null); useEffect(() => { const c = ref.current; const ctx = c.getContext("2d"); let w = c.width = window.innerWidth; let h = c.height = window.innerHeight; const drops = Array.from({ length: 60 }, () => ({ x: Math.random() * w, y: Math.random() * h, l: 8 + Math.random() * 24, s: 1 + Math.random() * 4, hue: Math.random() > 0.5 ? 350 : 200, })); let raf; const tick = () => { ctx.clearRect(0, 0, w, h); drops.forEach(d => { const grad = ctx.createLinearGradient(d.x, d.y, d.x, d.y + d.l); grad.addColorStop(0, `oklch(0.85 0.2 ${d.hue} / 0)`); grad.addColorStop(1, `oklch(0.85 0.2 ${d.hue} / 0.55)`); ctx.strokeStyle = grad; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(d.x, d.y); ctx.lineTo(d.x, d.y + d.l); ctx.stroke(); d.y += d.s; if (d.y > h) { d.y = -d.l; d.x = Math.random() * w; } }); raf = requestAnimationFrame(tick); }; tick(); const onResize = () => { w = c.width = window.innerWidth; h = c.height = window.innerHeight; }; window.addEventListener("resize", onResize); return () => { cancelAnimationFrame(raf); window.removeEventListener("resize", onResize); }; }, []); return

{title}