/* ========================================================= NETRA AI — Website visualizations (hero iris, capability viz, pipeline, sitemap) ========================================================= */ /* ---------- HeroIris: the giant scanning eye ---------- */ const HeroIris = ({ size = 620 }) => { // pre-compute a bunch of "detection lock" markers that fade in/out around the iris const locks = React.useMemo(() => { return Array.from({ length: 7 }).map((_, i) => ({ a: (i / 7) * Math.PI * 2 + 0.3, r: 200 + (i % 3) * 18, delay: i * 0.7, })); }, []); return ( {/* outer soft glow */} {/* very outermost telemetry ring with tick marks (counter-rotating) */} {Array.from({ length: 120 }).map((_, i) => { const a = (i / 120) * Math.PI * 2; const isMaj = i % 10 === 0; const isMid = i % 5 === 0; const r1 = 285, r2 = isMaj ? 268 : isMid ? 275 : 280; const c = isMaj ? "#4dd6ff" : "rgba(255,255,255,0.18)"; return ( ); })} {/* corner markers — N E S W */} {["N", "E", "S", "W"].map((l, i) => { const a = (i / 4) * Math.PI * 2 - Math.PI / 2; return ( {l} ); })} {/* main rotating analyzer ring (clockwise) */} {/* anchor brackets at 0/90/180/270 */} {[0, 90, 180, 270].map((d) => { const a = (d / 180) * Math.PI; const cx = 300 + Math.cos(a) * 245; const cy = 300 + Math.sin(a) * 245; return ( ); })} {/* mid label ring — Devanagari + brand string */} {Array.from({ length: 8 }).map((_, i) => { const a = (i / 8) * Math.PI * 2 + Math.PI / 8; return ( ); })} NETRA · नेत्र · VISION INTELLIGENCE · PERCEPTION ENGINE · 2026 · NETRA · नेत्र · VISION INTELLIGENCE · PERCEPTION ENGINE · 2026 · {/* concentric scan ring — dashed offset */} {/* IRIS body — outer almond shape giving "eye" feel */} {/* iris radial spokes (the "eye" feel) */} {Array.from({ length: 72 }).map((_, i) => { const a = (i / 72) * Math.PI * 2; const x1 = 300 + Math.cos(a) * 95; const y1 = 300 + Math.sin(a) * 95; const x2 = 300 + Math.cos(a) * 165; const y2 = 300 + Math.sin(a) * 165; const opacity = 0.15 + ((i % 4) * 0.12); return ( ); })} {/* secondary inner spokes — saffron accent */} {Array.from({ length: 36 }).map((_, i) => { const a = (i / 36) * Math.PI * 2; const x1 = 300 + Math.cos(a) * 100; const y1 = 300 + Math.sin(a) * 100; const x2 = 300 + Math.cos(a) * 130; const y2 = 300 + Math.sin(a) * 130; return ( ); })} {/* IRIS fill disc */} {/* fine inner ring */} {/* PUPIL */} {/* pupil reticle */} {/* pupil highlight */} {/* "detection locks" — fading squares around iris */} {locks.map((l, i) => { const x = 300 + Math.cos(l.a) * l.r; const y = 300 + Math.sin(l.a) * l.r; return ( ); })} {/* sweeping scan beam — a thin line rotating */} {/* connecting lines to floating annotations (to give "data flow" sense) */} ); }; /* ---------- Capability micro-visualizations ---------- */ const VizTailgate = () => ( {/* floor perspective lines */} {/* door */} {/* badge reader */} {/* person A — green */} PERSON A · OK {/* person B — crit, animated */} PERSON B · ? {/* alert burst at door */} TAILGATE ); const VizLoiter = () => ( {/* zone */} PERIMETER · LOITER 4M {/* dwell trail (path the person took, sitting around) */} {[ [60, 130], [80, 118], [100, 120], [120, 110], [140, 100], [130, 80], [110, 75], [100, 90], ].map((p, i) => ( ))} {/* person */} {/* timer */} 6m ); const VizObject = () => ( {/* chair */} {/* bag */} {/* AI bbox */} UNATTENDED · 9m {/* ghost person walking away */} ); const VizMask = () => ( {/* face */} {/* obscured face — fine grid noise */} {/* failed face landmarks — red Xs */} {/* scan ring around face */} FACE NOT ENROLLED CONFIDENCE 0.92 · OBSCURED 32s ); const VizAfter = () => ( {/* clock dial */} {/* night arc */} {/* hour ticks */} {Array.from({ length: 12 }).map((_, i) => { const a = (i / 12) * Math.PI * 2 - Math.PI / 2; const r1 = 58, r2 = i % 3 === 0 ? 48 : 52; return ( ); })} {/* numbers */} {[12, 3, 6, 9].map((n, i) => { const a = (i / 4) * Math.PI * 2 - Math.PI / 2; return ( {n} ); })} {/* hands at 22:14 — hour ~ -50deg from top */} {/* badge ping */} 22:14 · BADGE AB-2117 · SERVER ROOM ); const VizCrowd = () => ( {/* heatmap grid */} {/* faint grid */} {Array.from({ length: 8 }).map((_, i) => ( ))} {Array.from({ length: 6 }).map((_, i) => ( ))} {/* density blobs */} {/* dots */} {[ [80, 70], [95, 88], [110, 78], [125, 95], [100, 110], [85, 100], [120, 70], [140, 105], [155, 115], [165, 125], [150, 100], [60, 130], [70, 145], ].map((p, i) => ( ))} 11 PERSONS · 6m² CAP 8 ); /* ---------- Pipeline diagram ---------- */ const Pipeline = () => { return ( {/* nodes */} {[ { x: 90, lbl: "SENSE", title: "Cameras · Badges · Sensors", lines: ["12,847 streams", "Edge ingest 4K@30"] }, { x: 390, lbl: "PERCEIVE", title: "Perception models", lines: ["YOLO-v9 · pose", "ReID · face · OCR"] }, { x: 690, lbl: "REASON", title: "Correlation + LLM", lines: ["Multi-modal fusion", "Rule engine + Netra-LM"] }, { x: 990, lbl: "ACT", title: "Response & evidence", lines: ["Page on-call · lock door", "Clip + chain of custody"] }, ].map((n, i) => ( {/* card */} {/* glow at corner */} {/* number */} 0{i + 1} {/* label */} {n.lbl} {/* title */} {n.title} {/* lines */} {n.lines.map((l, j) => ( › {l} ))} {/* mini glyph */} ))} {/* connecting lines + arrows */} {[270, 570, 870].map((x, i) => ( {/* flowing dots */} ))} {/* under-labels */} {[ { x: 180, t: "p99 < 80ms" }, { x: 480, t: "47 model heads" }, { x: 780, t: "context: 24h estate" }, ].map((u, i) => ( — {u.t} — ))} ); }; const PipeGlyph = ({ kind }) => { // tiny diagram in the lower-right of each pipeline card const tx = 130, ty = 110; if (kind === "SENSE") { return ( ); } if (kind === "PERCEIVE") { return ( ); } if (kind === "REASON") { return ( ); } if (kind === "ACT") { return ( ); } return null; }; Object.assign(window, { HeroIris, VizTailgate, VizLoiter, VizObject, VizMask, VizAfter, VizCrowd, Pipeline });