import { motion, useReducedMotion } from "framer-motion"; import { useEffect, useMemo, useRef, useState } from "react"; import { cn } from "@/lib/utils"; import scanGrid from "@/assets/scan-repos-grid.jpg"; import { useT } from "@/i18n/LanguageProvider"; /** * Hero visual — "The Machine". * * Homage to Person of Interest: a surveillance-AI interface scanning subjects * in real time. White corner brackets frame "irrelevant" nodes, red brackets * mark Persons of Interest. A central admin terminal streams ASCII telemetry, * coordinates tick, a triangular relationship graph forms between subjects, * and a horizon scan-line sweeps the canvas. Pure CRT / DARPA aesthetic. * * Uses semantic tokens (`foreground`, `destructive`, `muted-foreground`, * `background`) so it stays on-theme with the rest of the site while looking * unmistakably like THE MACHINE. */ const SIZE = 460; type Subject = { id: string; x: number; y: number; poi: boolean; // Person of Interest -> red brackets label: string; ssn: string; status: string; }; const STATIC_SUBJECTS: Subject[] = [ { id: "P-01", x: 86, y: 110, poi: true, label: "AURA · COPILOT", ssn: "PRJ-2026-0411", status: "RELEVANT" }, { id: "P-02", x: 348, y: 92, poi: true, label: "ATLAS · RAG-CORE", ssn: "PRJ-2026-0228", status: "RELEVANT" }, { id: "P-03", x: 76, y: 318, poi: false, label: "ECHO · VOICE-OS", ssn: "FUT-2027-0091", status: "FUTURE SIGNAL" }, { id: "P-04", x: 372, y: 332,poi: false, label: "NOVA · AGENT-MESH",ssn: "FUT-2027-0143", status: "FUTURE SIGNAL" }, { id: "P-05", x: 232, y: 60, poi: true, label: "HELIX · OPS-AI", ssn: "PRJ-2026-0001", status: "FLAGSHIP" }, ]; /** Detailed dossiers — typed out in the INNOVATION_TARGET panel */ type Dossier = { id: string; codename: string; vector: string; novelty: number; // 0..1 funding: string; patents: number; arxiv: number; eta: string; payoff: string; classification: "RELEVANT" | "FUTURE SIGNAL" | "FLAGSHIP"; }; const DOSSIERS: Dossier[] = [ { id: "P-05", codename: "HELIX · OPS-AI", vector: "autonomous-devops / self-healing CI", novelty: 0.94, funding: "$ 18.2M Series A", patents: 3, arxiv: 27, eta: "Q3 · 2026", payoff: "−62% MTTR · +4.1× deploy freq", classification: "FLAGSHIP", }, { id: "P-02", codename: "ATLAS · RAG-CORE", vector: "graph-RAG / enterprise knowledge mesh", novelty: 0.89, funding: "$ 9.7M Seed-2", patents: 1, arxiv: 41, eta: "Q1 · 2026", payoff: "−81% hallucination rate", classification: "RELEVANT", }, { id: "P-01", codename: "AURA · COPILOT", vector: "ambient agent / multimodal intent", novelty: 0.87, funding: "$ 12.4M Series A", patents: 2, arxiv: 33, eta: "Q4 · 2026", payoff: "+3.6× engineer throughput", classification: "RELEVANT", }, { id: "P-04", codename: "NOVA · AGENT-MESH", vector: "swarm orchestration / 10⁴ agents", novelty: 0.92, funding: "pre-seed · stealth", patents: 0, arxiv: 12, eta: "Q2 · 2027", payoff: "horizon · category-defining", classification: "FUTURE SIGNAL", }, ]; const ADMIN_LINES = [ "> root@themachine:~# scan --projects --horizon=2y", "> indexing 4,128 repos / 982 research feeds", "> cross-reference patents · arXiv · funding", "> innovation graph delta computed", "> relevance score: 0.9971 · novelty: 0.87", "> dispatching team to opportunity vector", "> emerging signal locked · future detected", "> ARE YOU READY TO BUILD IT?", ]; const COORDS = [ "40.7589° N · 73.9851° W", "40.7128° N · 74.0060° W", "40.7484° N · 73.9857° W", "40.7061° N · 74.0086° W", ]; // Corner-bracket size by subject importance const Brackets = ({ cx, cy, size, red, pulse, reduced, }: { cx: number; cy: number; size: number; red: boolean; pulse: boolean; reduced: boolean; }) => { const half = size / 2; const len = size * 0.32; const stroke = red ? "hsl(var(--destructive))" : "hsl(var(--foreground))"; const sw = red ? 1.6 : 1.1; const corners = [ [cx - half, cy - half, +1, +1], [cx + half, cy - half, -1, +1], [cx - half, cy + half, +1, -1], [cx + half, cy + half, -1, -1], ] as const; return ( {corners.map(([x, y, dx, dy], i) => ( ))} ); }; const AIOrb = () => { const reduced = useReducedMotion() ?? false; const containerRef = useRef(null); const [inView, setInView] = useState(true); const [tick, setTick] = useState(0); const [coordIdx, setCoordIdx] = useState(0); const [logLines, setLogLines] = useState(ADMIN_LINES.slice(0, 3)); const [burst, setBurst] = useState(false); const [dossierIdx, setDossierIdx] = useState(0); const [typed, setTyped] = useState(0); // chars revealed in dossier "payoff" const [now, setNow] = useState(() => new Date().toISOString().replace("T", " · ").slice(0, 19) + " UTC", ); const dossier = DOSSIERS[dossierIdx]; // Viewport gating useEffect(() => { const el = containerRef.current; if (!el) return; const io = new IntersectionObserver( ([e]) => setInView(e.isIntersecting), { threshold: 0.2 }, ); io.observe(el); return () => io.disconnect(); }, []); // Heartbeat useEffect(() => { if (reduced || !inView) return; const id = window.setInterval(() => { setTick((t) => t + 1); setCoordIdx((c) => (c + 1) % COORDS.length); setNow(new Date().toISOString().replace("T", " · ").slice(0, 19) + " UTC"); setLogLines((prev) => { const next = [...prev, ADMIN_LINES[(prev.length) % ADMIN_LINES.length]]; return next.slice(-6); }); }, 1400); return () => window.clearInterval(id); }, [reduced, inView]); // Dossier rotation — new innovative project locked every ~5s useEffect(() => { if (reduced || !inView) return; const id = window.setInterval(() => { setDossierIdx((i) => (i + 1) % DOSSIERS.length); setTyped(0); }, 5200); return () => window.clearInterval(id); }, [reduced, inView]); // Typewriter for the dossier payoff line useEffect(() => { if (reduced) { setTyped(dossier.payoff.length); return; } if (!inView) return; if (typed >= dossier.payoff.length) return; const id = window.setTimeout(() => setTyped((n) => n + 1), 38); return () => window.clearTimeout(id); }, [typed, dossierIdx, reduced, inView, dossier.payoff]); // CTA "burst" -> momentary red overlay useEffect(() => { const onBurst = () => { setBurst(true); window.setTimeout(() => setBurst(false), 1200); }; window.addEventListener("aiorb:burst", onBurst); return () => window.removeEventListener("aiorb:burst", onBurst); }, []); // Triangular relationship lines among POI + assets const links = useMemo(() => { const pts = STATIC_SUBJECTS; const out: { a: Subject; b: Subject }[] = []; for (let i = 0; i < pts.length; i++) { for (let j = i + 1; j < pts.length; j++) { out.push({ a: pts[i], b: pts[j] }); } } return out; }, []); // The currently "interrogated" subject — cycles const focusId = STATIC_SUBJECTS[tick % STATIC_SUBJECTS.length].id; const { t } = useT(); const focused = STATIC_SUBJECTS.find((s) => s.id === focusId)!; const liveSummary = t("orb.live.summary", { n: STATIC_SUBJECTS.length, r: STATIC_SUBJECTS.filter((s) => s.poi).length, f: STATIC_SUBJECTS.filter((s) => !s.poi).length, label: focused.label, status: focused.status, }); return (
{/* Aspect-ratio spacer keeps the SVG viewBox proportions on any width */}
); }; export default AIOrb;