// Cinematic primitives for the Ventrin promo.
// Cursor, toast, stat counter, camera frame, vignette, key hint, etc.
// ── Animated cursor ────────────────────────────────────────────────────────
// path = [{x, y, at}] keyframes in absolute stage coords + scene-local seconds.
// Optional click events: clicks = [{at, decay}]
function Cursor({ path, clicks = [], color = '#1a1d21' }) {
const { localTime } = useSprite();
// Position via interpolate over keyframes
let x = path[0].x, y = path[0].y;
for (let i = 0; i < path.length - 1; i++) {
const a = path[i], b = path[i + 1];
if (localTime >= a.at && localTime <= b.at) {
const span = b.at - a.at;
const t = span <= 0 ? 1 : (localTime - a.at) / span;
const eased = Easing.easeInOutCubic(t);
x = a.x + (b.x - a.x) * eased;
y = a.y + (b.y - a.y) * eased;
break;
}
if (localTime > b.at) { x = b.x; y = b.y; }
}
// Click pulse (a quick ring that expands and fades)
const activeClick = clicks.find(c => localTime >= c.at && localTime < c.at + (c.decay || 0.6));
return (
<>
{activeClick && (() => {
const cp = (localTime - activeClick.at) / (activeClick.decay || 0.6);
return (
);
})()}
);
}
// ── Notification toast ─────────────────────────────────────────────────────
// Slides in from the right, holds, slides out.
function Toast({
start, end, x, y,
width = 360,
icon = 'alert',
title, subtitle, source,
variant = 'alert', // 'alert' | 'slack' | 'compliance' | 'system'
}) {
const { localTime } = useSprite();
if (localTime < start || localTime > end + 0.4) return null;
const inP = clamp((localTime - start) / 0.4, 0, 1);
const outP = clamp((localTime - end) / 0.4, 0, 1);
const eIn = Easing.easeOutBack(inP);
const opacity = clamp(inP * 2, 0, 1) * (1 - outP);
const tx = (1 - eIn) * 40 - outP * 12;
const palette = {
alert: { bg: '#1a1d21', ink: '#f3f1ec', accent: '#a86e1a', tint: '#f6ead4' },
slack: { bg: '#fff', ink: '#1a1d21', accent: '#4870a8', tint: '#dce5ef' },
compliance: { bg: '#1a1d21', ink: '#f3f1ec', accent: '#8a2f2f', tint: '#f1dcdc' },
system: { bg: '#fff', ink: '#1a1d21', accent: '#2c4a6a', tint: '#dce5ef' },
}[variant];
return (
{icon === 'slack' ? '#' : icon === 'shield' ? '⛨' : '!'}
{source && (
{source}
)}
{title}
{subtitle && (
{subtitle}
)}
);
}
// ── Stat counter ───────────────────────────────────────────────────────────
// Counts from `from` to `to` between scene-local times `start` and `end`.
function StatCounter({ from = 0, to = 100, start = 0, end = 1, prefix = '', suffix = '', format }) {
const { localTime } = useSprite();
const p = clamp((localTime - start) / Math.max(0.001, end - start), 0, 1);
const eased = Easing.easeOutCubic(p);
const value = from + (to - from) * eased;
const display = format ? format(value) : Math.round(value).toLocaleString();
return {prefix}{display}{suffix};
}
// ── Camera frame ───────────────────────────────────────────────────────────
// Wraps children in a transformable container that pans/zooms over time.
// keyframes = [{at, x, y, scale}] in scene-local seconds
function Camera({ keyframes, origin = '50% 50%', children }) {
const { localTime } = useSprite();
let x = keyframes[0].x ?? 0;
let y = keyframes[0].y ?? 0;
let s = keyframes[0].scale ?? 1;
for (let i = 0; i < keyframes.length - 1; i++) {
const a = keyframes[i], b = keyframes[i + 1];
if (localTime >= a.at && localTime <= b.at) {
const span = b.at - a.at;
const t = span <= 0 ? 1 : (localTime - a.at) / span;
const eased = Easing.easeInOutCubic(t);
x = (a.x ?? 0) + ((b.x ?? 0) - (a.x ?? 0)) * eased;
y = (a.y ?? 0) + ((b.y ?? 0) - (a.y ?? 0)) * eased;
s = (a.scale ?? 1) + ((b.scale ?? 1) - (a.scale ?? 1)) * eased;
break;
}
if (localTime > b.at) { x = b.x ?? 0; y = b.y ?? 0; s = b.scale ?? 1; }
}
return (
{children}
);
}
// ── Letterbox bars for cinematic moments ───────────────────────────────────
function Letterbox({ visible = true, height = 96, color = '#0c1014' }) {
const { localTime, duration } = useSprite();
// Auto-fade based on visibility flag and sprite range
const p = visible ? clamp(localTime / 0.4, 0, 1) : 0;
return (
<>
);
}
// ── Subtle scanline overlay ────────────────────────────────────────────────
function Vignette({ strength = 0.35 }) {
return (
);
}
// ── Pulse ring at a point (good for "detected!" beats) ─────────────────────
function PulseRing({ x, y, start, color = '#8a2f2f', count = 2, period = 0.6, size = 60 }) {
const { localTime } = useSprite();
const dots = [];
for (let i = 0; i < count; i++) {
const localStart = start + i * (period / count);
const p = clamp((localTime - localStart) / period, 0, 1);
if (p <= 0 || p >= 1) continue;
const r = size * p;
dots.push(
);
}
return <>{dots};
}
// ── Caption / lower-third title card ──────────────────────────────────────
function Caption({ start, end, text, x = 160, y, color = '#1a1d21' }) {
const { localTime } = useSprite();
if (localTime < start || localTime > end + 0.3) return null;
const inP = clamp((localTime - start) / 0.35, 0, 1);
const outP = clamp((localTime - end) / 0.3, 0, 1);
const opacity = inP * (1 - outP);
return (
{text}
);
}
// ── Keystroke hint ────────────────────────────────────────────────────────
function KeyHint({ keys }) {
return (
{keys.map((k, i) => (
{i > 0 && +}
{k}
))}
);
}
Object.assign(window, {
Cursor, Toast, StatCounter, Camera, Letterbox, Vignette, PulseRing, Caption, KeyHint,
});