// va-common.jsx — Vizalyze demo: brand tokens + reusable motion components. // Loaded as a Babel script after animations.jsx. Exports to window at the bottom. const VZ = { bg: '#0a0b10', bg2: '#0d0f16', panel: '#12141d', border: 'rgba(255,255,255,0.10)', white: '#f4f5f8', gray: '#9aa3b2', grayDim: '#6b7280', blue: '#0B6DFF', purple: '#6A42E8', pink: '#F24FA0', grad: 'linear-gradient(100deg, #0B6DFF 0%, #6A42E8 52%, #F24FA0 100%)', gradSoft:'linear-gradient(100deg, #2f7dff 0%, #8a6bf0 52%, #f56fb6 100%)', font: "'Inter', system-ui, -apple-system, sans-serif", mono: "'JetBrains Mono', ui-monospace, SFMono-Regular, monospace", }; const W = 1920, H = 1080; // ── easing reveal helper ───────────────────────────────────────────────────── // Reads the enclosing Sprite's localTime. Fades/slides in at `start`, and // auto-fades out `fadeOut` seconds before the sprite ends. function Reveal({ start = 0, dur = 0.6, y = 22, x = 0, fadeOut = 0.45, blur = 0, children, style = {} }) { const { localTime, duration } = useSprite(); const inT = clamp((localTime - start) / dur, 0, 1); const ein = Easing.easeOutCubic(inT); const exitStart = Math.max(0, duration - fadeOut); const outT = fadeOut > 0 ? clamp((localTime - exitStart) / fadeOut, 0, 1) : 0; const eout = Easing.easeInCubic(outT); const opacity = ein * (1 - eout); const ty = (1 - ein) * y - eout * 10; const tx = (1 - ein) * x; return (
{children}
); } // ── gradient text ──────────────────────────────────────────────────────────── function GradientText({ children, style = {} }) { return ( {children} ); } // ── animated background: dot grid + slow drifting brand glow ────────────────── function BrandBackground({ glow = 1 }) { const t = useTime(); const gx = 50 + Math.sin(t * 0.12) * 18; const gy = 42 + Math.cos(t * 0.09) * 14; return (
); } // ── Vizalyze VA mark — draws itself by `draw` prop (0..1) ───────────────────── const VA_MAIN = "M230 395 C270 458 305 535 350 615 C382 672 421 706 466 644 C514 579 548 458 611 361 C658 289 721 299 758 373 C798 453 819 524 858 611"; const VA_INNER = "M438 654 C487 628 524 571 577 531 C622 497 668 508 710 484"; function AnimatedLogo({ size = 120, draw = 1, showDot = true, idSuffix = 'a' }) { const mainRef = React.useRef(null); const [dot, setDot] = React.useState({ x: 230, y: 395 }); React.useEffect(() => { const el = mainRef.current; if (!el) return; const len = el.getTotalLength(); const p = clamp(draw, 0, 1); try { const pt = el.getPointAtLength(len * p); setDot({ x: pt.x, y: pt.y }); } catch (e) {} }, [draw]); const gid = `vg-${idSuffix}`, iid = `vi-${idSuffix}`; const dp = clamp(draw, 0, 1); const innerP = clamp((draw - 0.12) / 0.88, 0, 1); return ( {showDot && dp > 0.02 && dp < 0.999 && ( )} ); } // ── wordmark lockup ─────────────────────────────────────────────────────────── function Wordmark({ size = 44, draw = 1, logoSize, gap = 18, color = VZ.white }) { return (
Vizalyze
); } // ── screenshot card with directed pan-zoom camera ───────────────────────────── // cam: array of {p, scale, fx, fy} (p = local progress 0..1, fx/fy normalized focus) function Shot({ src, x, y, w, h, cam, radius = 16, entry = 0.6, exit = 0.45, frame = true }) { const { localTime, duration, progress } = useSprite(); const inT = Easing.easeOutCubic(clamp(localTime / entry, 0, 1)); const exitStart = Math.max(0, duration - exit); const outT = Easing.easeInCubic(clamp((localTime - exitStart) / exit, 0, 1)); const opacity = inT * (1 - outT); const cardScale = (0.965 + 0.035 * inT) * (1 - 0.02 * outT); // camera keyframes over progress const ps = cam.map(c => c.p); const sc = interpolate(ps, cam.map(c => c.scale), Easing.easeInOutCubic)(progress); const fx = interpolate(ps, cam.map(c => c.fx), Easing.easeInOutCubic)(progress); const fy = interpolate(ps, cam.map(c => c.fy), Easing.easeInOutCubic)(progress); return (
{frame && (
)}
); } // ── kicker (mono section label with index) ──────────────────────────────────── function Kicker({ index, label }) { return (
{index} {label}
); } // ── format / feature chip ───────────────────────────────────────────────────── function Chip({ children, mono = true, accent = false }) { return ( {children} ); } // ── animated cursor ──────────────────────────────────────────────────────────── // path: [{p, x, y}] keyframes over local progress; clickAt: progress to pop a click ring function Cursor({ path, clickAt = [] }) { const { progress } = useSprite(); const ps = path.map(p => p.p); const x = interpolate(ps, path.map(p => p.x), Easing.easeInOutCubic)(progress); const y = interpolate(ps, path.map(p => p.y), Easing.easeInOutCubic)(progress); // click ring let ring = null; for (const c of clickAt) { const dt = progress - c; if (dt >= 0 && dt < 0.06) { const k = dt / 0.06; ring = { r: 8 + k * 34, o: 1 - k }; break; } } const press = clickAt.some(c => Math.abs(progress - c) < 0.025) ? 0.85 : 1; return (
{ring && (
)}
); } // ── persistent minimal frame (logo lockup + beat counter) ───────────────────── function FrameChrome({ index, total, label }) { return (
Vizalyze
{String(index).padStart(2, '0')} / {String(total).padStart(2, '0')} {label && {label}}
); } // ── global progress line along bottom edge ──────────────────────────────────── function ProgressLine() { const { time, duration } = useTimeline(); return (
); } Object.assign(window, { VZ, W, H, Reveal, GradientText, BrandBackground, AnimatedLogo, Wordmark, Shot, Kicker, Chip, Cursor, FrameChrome, ProgressLine, });