/** The Conscious Code — atoms: Logo, buttons, badges, eyebrow chips. */ const { useEffect, useRef, useState } = React; /* The hexagonal isometric cube logo with asterisk. Pass `large` for hero use, `iconOnly` to drop the wordmark, `glowing` to add the pulsing asterisk glow. */ function Logo({ large = false, iconOnly = false, minimized = false, glowing = false }) { const size = large ? 176 : minimized ? 36 : 52; const wordSize = large ? 48 : 22; return (

{'{'} * {'}'}

{!iconOnly && !minimized && (

the conscious code

)}

); } function PrimaryButton({ children, onClick, disabled, fullWidth, sm }) { return ( ); } function GlassButton({ children, onClick, fullWidth, sm }) { return ( ); } /* Eyebrow chip with a pulsing status dot — pattern used above every hero/section. */ function EyebrowChip({ pulse = true, children }) { return ( {pulse && } {children} ); } function Eyebrow({ children }) { return

{children}

; } function PhaseLabel({ children, phase = 1 }) { const color = phase === 1 ? 'var(--tcc-primary)' : 'var(--tcc-on-surface-dim)'; return ( {children} ); } /* Triple-weight heading — the signature pattern (light / bold / light-muted). */ function TripleHeading({ the, bold, tail, size = 'h2', centered = false }) { const styles = { h2: { fontSize: 'clamp(2rem, 4.2vw, 4.5rem)' }, h3: { fontSize: 'clamp(1.75rem, 3vw, 3rem)' }, h4: { fontSize: 'clamp(1.5rem, 2.4vw, 2.25rem)' }, }; return (

{the} {bold} {tail}

); } /* IntersectionObserver-driven reveal. */ function Reveal({ children, delay = 0, as: As = 'div' }) { const ref = useRef(null); const [active, setActive] = useState(false); useEffect(() => { const obs = new IntersectionObserver( ([e]) => { if (e.isIntersecting) { setActive(true); obs.disconnect(); } }, { threshold: 0.12 } ); if (ref.current) obs.observe(ref.current); return () => obs.disconnect(); }, []); return ( {children} ); } /* Animated starscape canvas — sparse, throttled, pauses when not visible. */ function Starscape() { const ref = useRef(null); useEffect(() => { const c = ref.current; if (!c) return; const ctx = c.getContext('2d', { alpha: true }); if (!ctx) return; let raf, stars = [], lastDraw = 0, running = true; const FPS = 20; const FRAME_MS = 1000 / FPS; const resize = () => { // Lower fixed resolution; CSS scales to viewport. Don't apply DPR. const W = Math.min(1280, window.innerWidth); const H = Math.min(800, window.innerHeight); c.width = W; c.height = H; c.style.width = window.innerWidth + 'px'; c.style.height = window.innerHeight + 'px'; stars = []; // Even sparser: 1 star per 18000 px² const n = Math.floor((W * H) / 18000); for (let i = 0; i < n; i++) { stars.push({ x: Math.random() * W, y: Math.random() * H, r: Math.random() * 1.2 + 0.3, a: Math.random(), s: Math.random() * 0.015 + 0.005, }); } }; const draw = (t) => { raf = requestAnimationFrame(draw); if (!running) return; if (t - lastDraw < FRAME_MS) return; lastDraw = t; ctx.clearRect(0, 0, c.width, c.height); stars.forEach(st => { st.a += st.s; if (st.a > 1 || st.a < 0.1) st.s = -st.s; st.y -= 0.3; if (st.y < 0) st.y = c.height; ctx.beginPath(); ctx.arc(st.x, st.y, st.r, 0, Math.PI * 2); ctx.fillStyle = `rgba(0,255,204,${st.a * 0.25})`; ctx.fill(); }); }; // Pause when document is hidden (tab not focused). const visHandler = () => { running = !document.hidden; }; window.addEventListener('resize', resize); document.addEventListener('visibilitychange', visHandler); resize(); raf = requestAnimationFrame(draw); return () => { window.removeEventListener('resize', resize); document.removeEventListener('visibilitychange', visHandler); cancelAnimationFrame(raf); }; }, []); return