);
// ============================================================================
// AMBIENT LIVE BACKGROUND — animated mesh of detection boxes scanning across
// ============================================================================
function AmbientBackground() {
const ref = useRef(null);
useEffect(() => {
const canvas = ref.current;
if (!canvas) return;
const ctx = canvas.getContext("2d");
let raf;
const dpr = Math.min(window.devicePixelRatio || 1, 2);
function resize() {
canvas.width = window.innerWidth * dpr;
canvas.height = window.innerHeight * dpr;
canvas.style.width = window.innerWidth + "px";
canvas.style.height = window.innerHeight + "px";
ctx.scale(dpr, dpr);
}
resize();
window.addEventListener("resize", resize);
const N = 18;
const parts = Array.from({ length: N }, () => ({
x: Math.random(), y: Math.random(),
vx: (Math.random() - 0.5) * 0.00012,
vy: (Math.random() - 0.5) * 0.00012,
w: 60 + Math.random() * 140,
h: 30 + Math.random() * 60,
phase: Math.random() * Math.PI * 2,
speed: 0.3 + Math.random() * 0.7,
}));
function draw(t) {
const W = window.innerWidth, H = window.innerHeight;
ctx.clearRect(0, 0, W, H);
// mesh dots
const grid = 80;
ctx.fillStyle = "rgba(167,139,250,0.05)";
for (let x = 0; x < W; x += grid) {
for (let y = 0; y < H; y += grid) {
ctx.fillRect(x, y, 1, 1);
}
}
// scanning sweep
const sweep = ((t * 0.00008) % 1) * (W + 200) - 100;
const grad = ctx.createLinearGradient(sweep - 200, 0, sweep + 200, 0);
grad.addColorStop(0, "rgba(167,139,250,0)");
grad.addColorStop(0.5, "rgba(167,139,250,0.04)");
grad.addColorStop(1, "rgba(167,139,250,0)");
ctx.fillStyle = grad;
ctx.fillRect(0, 0, W, H);
// detection rectangles
parts.forEach((p) => {
p.x += p.vx;
p.y += p.vy;
if (p.x < -0.1 || p.x > 1.1) p.vx *= -1;
if (p.y < -0.1 || p.y > 1.1) p.vy *= -1;
const breath = (Math.sin(t * 0.001 * p.speed + p.phase) + 1) / 2;
const op = 0.05 + breath * 0.14;
const x = p.x * W, y = p.y * H;
ctx.strokeStyle = `rgba(167,139,250,${op})`;
ctx.lineWidth = 1;
ctx.setLineDash([4, 4]);
ctx.strokeRect(x, y, p.w, p.h);
ctx.setLineDash([]);
ctx.strokeStyle = `rgba(167,139,250,${op * 1.5})`;
ctx.lineWidth = 1.5;
const c = 7;
ctx.beginPath();
ctx.moveTo(x, y + c); ctx.lineTo(x, y); ctx.lineTo(x + c, y);
ctx.moveTo(x + p.w - c, y); ctx.lineTo(x + p.w, y); ctx.lineTo(x + p.w, y + c);
ctx.moveTo(x, y + p.h - c); ctx.lineTo(x, y + p.h); ctx.lineTo(x + c, y + p.h);
ctx.moveTo(x + p.w - c, y + p.h); ctx.lineTo(x + p.w, y + p.h); ctx.lineTo(x + p.w, y + p.h - c);
ctx.stroke();
});
raf = requestAnimationFrame(draw);
}
raf = requestAnimationFrame(draw);
return () => { cancelAnimationFrame(raf); window.removeEventListener("resize", resize); };
}, []);
return ;
}
// ============================================================================
// NAV
// ============================================================================
function Nav() {
return (
);
}
// ============================================================================
// HERO — single unified section: copy + comparison demo + verdict table
// ============================================================================
const SIQ_DETECTIONS = [
{ brand: "Oppo", asset: "Digital Overlay", t: 9.4, c: 99.8 },
{ brand: "Oppo", asset: "Pitch Ring", t: 3.2, c: 95.0 },
{ brand: "Puma", asset: "Gloves", t: 2.4, c: 92.0 },
{ brand: "Oppo", asset: "Wicket", t: 2.0, c: 90.0 },
{ brand: "Oppo", asset: "Jersey Front", t: 1.8, c: 98.0 },
{ brand: "Oppo", asset: "Jersey Sleeve", t: 0.8, c: 92.0 },
];
const HIVE_DETECTIONS = [
{ brand: "Oppo", t: 8.0, c: 87, flag: null },
{ brand: "Puma", t: 1.0, c: 78, flag: null },
{ brand: "Nike", t: 1.0, c: 47, flag: "HALLUCINATED" },
{ brand: "On-Running", t: 1.0, c: 0, flag: "HALLUCINATED" },
];
function Hero({ headline }) {
const videoRef = useRef(null);
const [time, setTime] = useState(0);
const [paused, setPaused] = useState(false);
useEffect(() => {
const v = videoRef.current;
if (!v) return;
const onTime = () => setTime(v.currentTime);
v.addEventListener("timeupdate", onTime);
return () => v.removeEventListener("timeupdate", onTime);
}, []);
const togglePlay = () => {
const v = videoRef.current;
if (!v) return;
if (v.paused) { v.play(); setPaused(false); } else { v.pause(); setPaused(true); }
};
// Split headline into words to stylize the last 2 words with gradient
const words = headline.trim().split(" ");
const lead = words.slice(0, -2).join(" ");
const tail = words.slice(-2).join(" ");
return (
SponsorIQ measures sponsorship across broadcast, digital, and social — pairing a vision pipeline that detects every on-screen surface with a listening engine that tracks every conversation. Built on cutting-edge computer vision and vision-language models. Trusted by Two Circles.