// Novox animations — radiating "speaking" loader + nova-star video intro.
const { useState: useS, useEffect: useE, useRef: useR } = React;
// True when the visitor asked their OS to reduce motion. JS-driven loops
// (requestAnimationFrame) aren't stopped by the CSS reduced-motion reset,
// so each animation checks this and renders a calm, static frame instead.
function nvxReducedMotion() {
return typeof window !== 'undefined' && window.matchMedia
&& window.matchMedia('(prefers-reduced-motion: reduce)').matches;
}
// The three sound-arc paths for one side, outer → inner radius order.
const NVX_ARCS = [
{ key: 'inner', d: 'M64.6 37.8 A 19 19 0 0 1 64.6 62.2', accent: true, dim: 1.0 },
{ key: 'mid', d: 'M70.7 32.6 A 27 27 0 0 1 70.7 67.4', accent: false, dim: 0.55 },
{ key: 'outer', d: 'M76.8 27.5 A 35 35 0 0 1 76.8 72.5', accent: false, dim: 1.0 },
];
const NVX_STAR = 'M50 35 Q52.1 47.9 65 50 Q52.1 52.1 50 65 Q47.9 52.1 35 50 Q47.9 47.9 50 35 Z';
// ─────────────────────────────────────────────────────────────
// Live "signal" loader — the sound-arcs pulse outward from the star in a
// travelling wave. Used for: loading indicators, "agent is speaking" status.
// ─────────────────────────────────────────────────────────────
function NovoxLoader({ size = 160, color = '#131726', accent = '#F5A623', showAccent = false, speed = 1 }) {
const [t, setT] = useS(0);
useE(() => {
if (nvxReducedMotion()) return; // hold a static frame, no RAF loop
let raf, start;
const loop = (ts) => {
if (!start) start = ts;
setT(((ts - start) / 1000) * speed);
raf = requestAnimationFrame(loop);
};
raf = requestAnimationFrame(loop);
return () => cancelAnimationFrame(raf);
}, [speed]);
// Each arc lags the one inside it → energy radiates from the star outward.
const opacityFor = (i, dim) => {
const wave = (Math.sin(t * 4.2 - i * 1.15) + 1) / 2; // 0..1
return dim * (0.18 + 0.82 * wave);
};
const sideArcs = (mirror) => NVX_ARCS.map((a, i) => (
));
return (
);
}
// ─────────────────────────────────────────────────────────────
// Video intro — star ignites, the sound-arcs draw outward (inner → outer)
// on both sides, then the "Novox" wordmark reveals. 2.4s total, loops on click.
// ─────────────────────────────────────────────────────────────
function NovoxIntro({
width = 560, height = 240,
bg = '#F8F6F1', fg = '#131726', accent = '#F5A623',
onDone,
showCaption = true, showProgress = true, clickToReplay = true,
playId: controlledPlayId,
}) {
const [internalPlayId, setInternalPlayId] = useS(0);
const playId = controlledPlayId !== undefined ? controlledPlayId : internalPlayId;
const [t, setT] = useS(0); // 0..1 normalized
const DURATION = 2400;
useE(() => {
if (nvxReducedMotion()) { setT(1); if (onDone) onDone(); return; } // show fully-drawn mark, no animation
let raf, start;
const loop = (ts) => {
if (!start) start = ts;
const k = Math.min(1, (ts - start) / DURATION);
setT(k);
if (k < 1) raf = requestAnimationFrame(loop);
else if (onDone) onDone();
};
raf = requestAnimationFrame(loop);
return () => cancelAnimationFrame(raf);
}, [playId]);
const easeOut = (x) => 1 - Math.pow(1 - x, 3);
const easeInOut = (x) => x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2;
const clamp01 = (x) => Math.max(0, Math.min(1, x));
// Star: ignites 0.02..0.26 with a soft overshoot, then holds.
const starP = t <= 0.02 ? 0 : easeOut(clamp01((t - 0.02) / 0.24));
const starScale = 0.55 + 0.45 * starP + Math.sin(starP * Math.PI) * 0.08;
// Arcs draw inner → mid → outer, each over its own window. Both sides together.
const arcWindows = [[0.16, 0.44], [0.28, 0.58], [0.40, 0.72]];
const arcProg = (i) => {
const [s, e] = arcWindows[i];
if (t <= s) return 0;
if (t >= e) return 1;
return easeOut((t - s) / (e - s));
};
// Wordmark reveal: 0.58..0.98, slides in from the left.
const wmProg = t < 0.58 ? 0 : t > 0.98 ? 1 : easeInOut((t - 0.58) / 0.4);
const markSize = height * 0.62;
const sideArcs = (mirror) => NVX_ARCS.map((a, i) => (
0 ? 1 : 0) : 1}
pathLength={1} strokeDasharray={1} strokeDashoffset={1 - arcProg(i)} />
));
return (
setInternalPlayId((x) => x + 1) : undefined}>
Novox
{showCaption && (
click to replay · {Math.round(t * DURATION)}ms
)}
{showProgress && (
)}
);
}
// ─────────────────────────────────────────────────────────────
// Ambient nova field — the brand signature as an environment.
// A breathing core glow + concentric sonar rings expanding outward
// (the "signal heard in every direction") + two slow orbital arcs
// echoing the mark's concentric sound-arcs. Pure CSS animation, so
// it composites on the GPU and never re-renders React. Sits behind
// hero / section content as a living backdrop.
// ─────────────────────────────────────────────────────────────
function NovoxField({ accent = '#F5A623', rings = 4, base = 300, glow = 0.5,
orbit = true, style = {} }) {
const ringEls = Array.from({ length: rings }, (_, i) => (
));
return (
{/* breathing core glow */}
{ringEls}
{orbit && (
// One calm guide ring with a single "signal" node travelling around it —
// a clean orbit rather than busy dashed circles. The ring is symmetric so
// it reads as still; only the node moves. 1px stroke at any size.
)}
);
}
// ─────────────────────────────────────────────────────────────
// Live waveform — the voice persona, made visible. A row of bars
// that rise and fall like an agent mid-sentence. CSS-driven; each
// bar carries its own delay + duration so the motion reads organic.
// ─────────────────────────────────────────────────────────────
const NVX_WAVE_PATTERN = [0.4, 0.7, 1.0, 0.55, 0.85, 0.35, 0.95, 0.6, 0.45, 0.8, 0.5, 0.7];
function NovoxWaveform({ bars = 12, color = '#131726', accent = '#F5A623',
height = 32, width = 3, gap = 4, accentEvery = 4, style = {} }) {
return (