// OptimaFlo 60s explainer — scenes
// Timeline:
// 0–6 Scene 1: Tool chaos (the problem)
// 6–12 Scene 2: Cost pain (numbers)
// 12–18 Scene 3: OptimaFlo intro
// 18–30 Scene 4: Prompt → Pipeline materializes (Ingest, Warehouse, Transform, Orchestrate, BI)
// 30–38 Scene 5: Dashboard reveal
// 38–46 Scene 6: BYOC + Human-in-the-loop
// 46–54 Scene 7: Savings (cost + time)
// 54–60 Scene 8: CTA
// ── Design tokens (mirrors design system) ─────────────────────────────────
const ofTokens = {
cream: '#FEFCF9',
card: '#F5F0EB',
line: '#E7DFD3',
ink900: '#1A1614',
ink800: '#2C2825',
ink700: '#44403C',
ink400: '#B8AFA6',
amber500: '#F59E0B',
amber600: '#D97706',
amber700: '#92400E',
bronze: '#B97A3D',
silver: '#9CA09E',
gold: '#E1A11A',
fHead: '"Plus Jakarta Sans", "Cal Sans", Inter, system-ui, sans-serif',
fCal: '"Cal Sans", "Plus Jakarta Sans", Inter, system-ui, sans-serif',
fBody: 'Inter, system-ui, sans-serif',
fMono: '"JetBrains Mono", ui-monospace, SFMono-Regular, monospace'
};
// ── Inline OptimaFlo logomark — uses the brand PNG (transparent bg) ───────
function OFLogo({ size = 110, showWordmark = true, src = 'assets/logo.png' }) {
const r = size;
return (
{showWordmark &&
OptimaFlo
}
);
}
// ── Background: warm cream with subtle radial dot pattern ─────────────────
function StageBg({ mask = 'radial-gradient(circle at 50% 40%, black, transparent 80%)' }) {
return (
);
}
// ── Eyebrow label (mono caps) ─────────────────────────────────────────────
function Eyebrow({ children, color = ofTokens.amber600, x, y, align = 'left' }) {
const { localTime } = useSprite();
const opacity = clamp(localTime / 0.4, 0, 1);
const tx = align === 'center' ? '-50%' : '0';
return (
{children}
);
}
// ── ToolChip (tool-being-replaced) — text styled as a logo chip ───────────
function ToolChip({ label, x, y, rotate = 0, scale = 1, glow = false, color = ofTokens.ink800 }) {
return (
);
}
// ── Cross-out line over a chip ────────────────────────────────────────────
function CrossOut({ x, y, w = 220, progress = 0, angle = -8 }) {
return (
);
}
// ───────────────────────────────────────────────────────────────────────────
// SCENE 1 — The current stack: six categories, six bills. 0–6s
// ───────────────────────────────────────────────────────────────────────────
function Scene1Chaos() {
const { localTime } = useSprite();
// Six tool cards laid out in a 3x2 grid — each shows category, vendor, cost
const tools = [
{ cat: 'Ingestion', name: 'Fivetran', cost: '$5K / mo' },
{ cat: 'Warehouse', name: 'Snowflake', cost: '$15K / mo' },
{ cat: 'Transform', name: 'dbt Cloud', cost: '$3K / mo' },
{ cat: 'Orchestrate', name: 'Airflow', cost: 'self-host' },
{ cat: 'BI', name: 'Tableau', cost: '$2K / mo' },
{ cat: 'Quality', name: 'Monte Carlo', cost: '$3K / mo' },
];
// Scene fades in/out at edges
const sceneFade = localTime < 0.4
? Easing.easeOutCubic(localTime / 0.4)
: localTime > 5.4
? 1 - Easing.easeInCubic((localTime - 5.4) / 0.6)
: 1;
// Headline at 0.0s
const headT = clamp(localTime / 0.6, 0, 1);
// Each card pops in with stagger
const cardState = (i) => {
const start = 0.5 + i * 0.18;
const t = clamp((localTime - start) / 0.55, 0, 1);
const op = clamp((localTime - start) / 0.35, 0, 1);
const eased = Easing.easeOutCubic(t);
return {
scale: 0.94 + eased * 0.06,
y: (1 - eased) * 24,
op,
};
};
// Bottom callout at 3.6s
const calloutT = clamp((localTime - 3.6) / 0.55, 0, 1);
const calloutOp = Easing.easeOutCubic(calloutT);
// Grid layout: 3 columns, 2 rows — evenly spaced (h & v gaps equal)
const colW = 480;
const colGap = 48;
const rowH = 232;
const rowGap = 48;
const gridLeft = (1920 - (colW * 3 + colGap * 2)) / 2;
const rowTop = 380;
const cardW = colW;
const cardH = rowH;
return (
{/* Headline */}
The modern data stack
Six categories. Six bills.
{/* Cards */}
{tools.map((t, i) => {
const col = i % 3;
const row = Math.floor(i / 3);
const x = gridLeft + col * (colW + colGap);
const y = rowTop + row * (rowH + rowGap);
const s = cardState(i);
return (
{/* Category */}
{t.cat}
{/* Vendor */}
{t.name}
{/* Cost */}
{t.cost}
);
})}
{/* Bottom callout: + data team */}
+
A 3-person data team — 4–6 months to hire.
);
}
// ───────────────────────────────────────────────────────────────────────────
// SCENE 2 — Cost pain. 6–12s
// ───────────────────────────────────────────────────────────────────────────
function Scene2Cost() {
const { localTime } = useSprite();
const sceneFade = localTime < 0.5 ?
Easing.easeOutCubic(localTime / 0.5) :
localTime > 5.4 ?
1 - Easing.easeInCubic((localTime - 5.4) / 0.6) :
1;
// Big number counts up to 100
const numT = clamp((localTime - 0.5) / 2.2, 0, 1);
const eased = Easing.easeOutQuart(numT);
const value = Math.round(eased * 100);
// Big number scales/settles
const numScale = interpolate([0, 1, 5, 6], [0.85, 1.0, 1.0, 0.96], Easing.easeOutCubic)(localTime);
// Three sub-bullets stagger in
const bullets = [
{ label: 'PER MONTH', value: '$25K–$100K', sub: 'Across tools + headcount' },
{ label: 'TO HIRE A TEAM', value: '4–6 mo', sub: 'Data eng, analytics eng, analyst' },
{ label: 'VENDORS TO MANAGE', value: '6+', sub: 'Six contracts. Six on-call rotations.' }];
return (
{/* Eyebrow */}
The Cost
{/* Big "$X00K / month" */}
$
{value}
K
per month, to build the stack from scratch
{/* Sub bullets */}
{bullets.map((b, i) => {
const t = clamp((localTime - 2.6 - i * 0.25) / 0.5, 0, 1);
const eased = Easing.easeOutBack(t);
const op = clamp((localTime - 2.6 - i * 0.25) / 0.3, 0, 1);
return (
{b.label}
{b.value}
{b.sub}
);
})}
);
}
// ───────────────────────────────────────────────────────────────────────────
// SCENE 3 — Meet OptimaFlo. 12–18s
// ───────────────────────────────────────────────────────────────────────────
function Scene3Intro() {
const { localTime } = useSprite();
// Logo enters with a spring at 0.3s
const logoT = clamp((localTime - 0.3) / 0.7, 0, 1);
const logoEased = Easing.easeOutBack(logoT);
const logoOp = clamp((localTime - 0.3) / 0.4, 0, 1);
// Headline at 1.3s
const headT = clamp((localTime - 1.3) / 0.6, 0, 1);
const headOp = Easing.easeOutCubic(headT);
const headY = (1 - headOp) * 26;
// "AI data team" highlight glow at 2.0s
const glowT = clamp((localTime - 2.0) / 0.8, 0, 1);
// Sub at 3.0s
const subT = clamp((localTime - 3.0) / 0.6, 0, 1);
const subOp = Easing.easeOutCubic(subT);
// Exit fade
const exit = localTime > 5.4 ? 1 - Easing.easeInCubic((localTime - 5.4) / 0.6) : 1;
// Subtle camera pull-in
const camZoom = interpolate([0, 6], [1.0, 1.04], Easing.easeInOutCubic)(localTime);
return (
{/* Amber radial flourish behind logo */}
{/* Logo */}
{/* Headline */}
Meet your{' '}
AI data team.
{/* underline sweep */}
{/* Sub */}
Ingestion. Warehouse. Transforms. Orchestration. BI.One platform. One subscription. Deployed in your cloud.
);
}
// ───────────────────────────────────────────────────────────────────────────
// SCENE 4 — Prompt → Pipeline. 18–30s (12s)
// ───────────────────────────────────────────────────────────────────────────
// Concierge prompt window
function PromptWindow({ typed, x, y, width = 980, focused = true }) {
return (
{/* Header */}
✦
OptimaFlo Manager
Plain English →
{/* Body */}
{typed}
0 ? ofTokens.amber600 : ofTokens.line}`,
borderRadius: 18,
padding: '16px 18px',
boxShadow: highlight > 0 ?
`0 20px 40px -15px rgba(217,119,6,0.30), 0 0 0 ${highlight * 4}px rgba(245,158,11,${0.15 * highlight})` :
'0 8px 18px -10px rgba(0,0,0,0.12)',
display: 'flex',
flexDirection: 'column',
gap: 6
}}>
{/* Top: icon + name */}
{kind === 'src' ? '⬢' : kind === 'tx' ? '∿' : kind === 'wh' ? '◉' : kind === 'orc' ? '↻' : '▤'}
{label}
{/* Sub label */}
{sub}
{/* Tier pill */}
{tier &&
}
);
}
function Scene4PromptPipeline() {
const { localTime } = useSprite();
// Phase A (0–4s): prompt window center stage, text types out
// Phase B (4–8s): prompt window shrinks to top, pipeline materializes node by node
// Phase C (8–12s): pulse runs along the pipeline (bronze → silver → gold)
const promptText = "Show daily revenue by region from Postgres + Stripe — with a freshness alert.";
// Typing: chars per second ~40 → 80 chars in 2s
const typeStart = 0.6;
const typeEnd = 3.4;
const typeProgress = clamp((localTime - typeStart) / (typeEnd - typeStart), 0, 1);
const charCount = Math.floor(typeProgress * promptText.length);
const typed = promptText.slice(0, charCount);
// Phase transition
const phaseB = clamp((localTime - 4.0) / 0.7, 0, 1);
const phaseBe = Easing.easeInOutCubic(phaseB);
// Prompt window position: starts center (y=380), moves to top (y=80), shrinks
const promptY = interpolate([0, 1], [380, 70], Easing.linear)(phaseBe);
const promptScale = interpolate([0, 1], [1.0, 0.62], Easing.linear)(phaseBe);
const promptW = 980;
// Eyebrow above prompt
const eyebrowOp = phaseBe < 0.3 ? clamp(localTime / 0.4, 0, 1) : 1 - phaseBe;
// Pipeline nodes layout (after phaseB)
// 5 nodes left → right: Sources, Warehouse, Transform, Orchestrate, BI
const nodes = [
{ id: 'src', label: 'Sources', sub: 'Postgres · Stripe · GA4', kind: 'src', tier: 'bronze', x: 220, y: 620 },
{ id: 'wh', label: 'Warehouse', sub: 'Iceberg · BYOC', kind: 'wh', tier: 'bronze', x: 580, y: 620 },
{ id: 'tx', label: 'Transform', sub: 'SQL · dbt-style', kind: 'tx', tier: 'silver', x: 960, y: 620 },
{ id: 'orc', label: 'Orchestrate', sub: 'Airflow-grade', kind: 'orc', tier: 'silver', x: 1340, y: 620 },
{ id: 'bi', label: 'Dashboards', sub: 'Live + governed', kind: 'bi', tier: 'gold', x: 1700, y: 620 }];
// Node appear sequence: starts at localTime 4.8, each 0.35s apart
const nodeAppear = (i) => {
const start = 4.8 + i * 0.35;
return clamp((localTime - start) / 0.55, 0, 1);
};
// Pulse position (Phase C — after 7.5s)
// Runs over the 4 link segments in 3.5s
const pulseT = clamp((localTime - 7.5) / 3.5, 0, 1);
const pulseIdx = pulseT * 4; // 0..4
const linkProgress = (i) => clamp(pulseIdx - i, 0, 1);
// Highlight on the node the pulse is currently entering
const nodeHighlight = (i) => {
// highlight grows as pulse approaches node, peaks at arrival
const target = i; // pulse hits node i when pulseIdx >= i
const d = Math.abs(pulseIdx - target);
return Math.max(0, 1 - d * 1.8);
};
// Concierge AI status badge during phase C
const statusOp = clamp((localTime - 6.0) / 0.5, 0, 1);
// Final caption appears at 10s
const finalT = clamp((localTime - 10.0) / 0.5, 0, 1);
// Scene exit
const exit = localTime > 11.4 ? 1 - Easing.easeInCubic((localTime - 11.4) / 0.6) : 1;
return (
{/* Eyebrow */}
Describe it. Build it.
{/* Prompt window */}
{/* Concierge "thinking → building" status */}
{localTime > 5.5 &&
}
{/* Stage labels above nodes */}
{phaseBe > 0.5 && nodes.map((n, i) => {
const labels = ['Ingest', 'Warehouse', 'Transform', 'Orchestrate', 'BI'];
const op = nodeAppear(i);
return (
{labels[i]}
);
})}
{/* Links between nodes */}
{phaseBe > 0.5 && nodes.slice(0, -1).map((n, i) => {
const next = nodes[i + 1];
// Link visible only after both endpoints appear
const apA = nodeAppear(i);
const apB = nodeAppear(i + 1);
const visible = Math.min(apA, apB);
// Pulse-driven progress
const prog = pulseT > 0 ? linkProgress(i) : visible * 0.5;
return (
);
})}
{/* Nodes */}
{phaseBe > 0.5 && nodes.map((n, i) =>
)}
{/* Final caption */}
{finalT > 0 &&
You describe it. The AI builds it.
}
);
}
// ── DashboardMock — a hand-built OptimaFlo dashboard (replaces canvas img) ──
function DashboardMock({ progress = 1 }) {
// KPI tiles
const kpis = [
{ label: 'Revenue', value: '$142,310', delta: '+18.2%', up: true, spark: [4,6,5,8,7,10,12,11,14,16,15,18] },
{ label: 'Orders', value: '1,284', delta: '+12.4%', up: true, spark: [6,7,7,9,8,10,11,12,13,14,14,15] },
{ label: 'Avg order val', value: '$110.84', delta: '+5.6%', up: true, spark: [10,10,11,12,11,12,13,13,12,13,14,14] },
{ label: 'Conv. rate', value: '3.24%', delta: '−0.3%', up: false, spark: [9,10,9,8,9,8,7,8,7,7,7,6] },
];
// Top regions
const regions = [
{ name: 'United States', pct: 86, value: '$122.4K' },
{ name: 'Canada', pct: 38, value: '$54.1K' },
{ name: 'United Kingdom',pct: 28, value: '$39.6K' },
{ name: 'Germany', pct: 22, value: '$31.2K' },
];
// Main chart — current period (amber) vs previous (gray, dashed)
// 12 daily points, returns smooth bezier-ish polyline path
const curr = [180, 165, 175, 150, 160, 130, 140, 115, 95, 105, 80, 60];
const prev = [200, 195, 200, 185, 190, 180, 175, 170, 165, 170, 160, 155];
const W = 950, H = 360;
const stepX = W / (curr.length - 1);
const buildPath = (pts) => pts.map((y, i) => `${i === 0 ? 'M' : 'L'} ${(i * stepX).toFixed(1)} ${y}`).join(' ');
const buildArea = (pts) => buildPath(pts) + ` L ${W} ${H} L 0 ${H} Z`;
// Animated stroke draw via dashoffset
// Each path "approx length" = sum of segment lengths
const pathLen = (pts) => pts.slice(1).reduce((acc, y, i) => {
const dx = stepX, dy = y - pts[i];
return acc + Math.hypot(dx, dy);
}, 0);
const currLen = pathLen(curr);
const prevLen = pathLen(prev);
const drawProg = clamp(progress, 0, 1);
return (
{/* Header bar */}
Workspace · acme · gold
Daily Revenue
{/* Segmented control */}
{['7D', '30D', '90D', '12M'].map((s, i) => (
{s}
))}
{/* Live pill */}
{/* KPI row */}
{kpis.map((k, i) => (
{k.label}
{k.value}
{k.up ? '▲' : '▼'} {k.delta}
{/* sparkline */}
`${(j / (k.spark.length - 1)) * 90},${22 - (v / 20) * 20}`).join(' ')}
/>
))}
{/* Main chart + sidebar */}
{/* Chart card */}
Revenue by day
{/* Legend */}
{/* SVG chart */}
{/* Grid lines */}
{[0, 0.25, 0.5, 0.75, 1].map((g, i) => (
${Math.round((1 - g) * 200)}K
))}
{/* X labels */}
{['Mar 1','5','10','15','20','25','30'].map((lbl, i) => (
{lbl}
))}
{/* Previous period — gray dashed */}
{/* End-of-chart dot */}
{drawProg > 0.98 && (
)}
{/* Sidebar: top regions */}
Top regions
{regions.map((r, i) => (
))}
{/* Footer pill: pipeline source */}
GOLD
bi.gold.daily_revenue · refreshed hourly
{/* Eyebrow + headline */}
The output
Clean dashboards. Live data.
{/* Dashboard frame */}
{/* Floating badges */}
{badges.map((b, i) => {
const t = clamp((localTime - b.delay) / 0.5, 0, 1);
const op = clamp((localTime - b.delay) / 0.3, 0, 1);
const eased = Easing.easeOutBack(t);
return (
);
})}
);
}
// ───────────────────────────────────────────────────────────────────────────
// SCENE 6 — BYOC + Human-in-the-loop. 38–46s (8s)
// ───────────────────────────────────────────────────────────────────────────
function Scene6Trust() {
const { localTime } = useSprite();
// Headline at 0.3s
const headT = clamp((localTime - 0.2) / 0.6, 0, 1);
// Left card (BYOC) at 0.8s
const leftT = clamp((localTime - 0.8) / 0.7, 0, 1);
const leftE = Easing.easeOutBack(leftT);
// Right card (HITL) at 1.3s
const rightT = clamp((localTime - 1.3) / 0.7, 0, 1);
const rightE = Easing.easeOutBack(rightT);
// Approve click animation at 4.8s
const clickT = clamp((localTime - 4.8) / 0.5, 0, 1);
// After click, "Approved" check
const checkT = clamp((localTime - 5.4) / 0.4, 0, 1);
// Exit
const exit = localTime > 7.4 ? 1 - Easing.easeInCubic((localTime - 7.4) / 0.6) : 1;
return (
{/* Headline */}
Trust by design
Your cloud. Your rules.
{/* Two cards side by side */}
{/* LEFT — BYOC */}
BYOC · Bring your own cloud
Data never leaves your perimeter.
{/* Cloud illustration: a "perimeter" box with cloud + your data inside */}
YOUR VPC
{/* Cloud providers */}
{['AWS', 'GCP', 'Azure'].map((p, i) =>
{p}
)}
{/* Data table mock */}
customers.parquet
regions/us-east-1/iceberg/...
encrypted at rest · KMS
{/* RIGHT — HITL */}
Human in the loop
Review and ship. Never babysit.
{/* Manager interrupt card (mirrors OptimaFlo Manager review flow) */}
{/* Card header — Manager + status */}
M
Manager — ready to run
4 steps planned · awaiting your approval
{/* Structured plan — pipeline fields */}
{[
{ k: 'Pipeline', v: 'daily_revenue', tag: null },
{ k: 'Schedule', v: 'Hourly · 09:00–18:00 ET', tag: null },
{ k: 'Destination', v: 'bi.gold.daily_revenue', tag: 'GOLD' },
{ k: 'Tests', v: 'not_null · unique · freshness', tag: '3 passing' },
].map(row => (
{row.k}
{row.v}
{row.tag && (
{row.tag}
)}
))}
{/* Buttons */}
Edit plan
0 ?
`0 0 0 ${10 * (1 - clickT)}px rgba(245,158,11,${0.35 * (1 - clickT)})` :
'0 4px 10px -2px rgba(217,119,6,0.30)',
transform: clickT > 0 && clickT < 0.4 ? 'translateY(2px)' : 'translateY(0)',
display: 'inline-flex', alignItems: 'center', gap: 8
}}>
Approve & run
{checkT > 0 &&
✓
}
{/* "You" cursor pointer that flies in to click */}
{localTime > 4.0 && localTime < 5.8 && (() => {
const flyT = clamp((localTime - 4.0) / 0.8, 0, 1);
const cx = interpolate([0, 1], [700, 460], Easing.easeOutCubic)(flyT);
const cy = interpolate([0, 1], [620, 490], Easing.easeOutCubic)(flyT);
return (
);
})()}
);
}
// ───────────────────────────────────────────────────────────────────────────
// SCENE 7 — Savings (cost + time). 46–54s (8s)
// ───────────────────────────────────────────────────────────────────────────
function Scene7Savings() {
const { localTime } = useSprite();
const headT = clamp((localTime - 0.2) / 0.5, 0, 1);
// Cost row appears at 0.8s, big strikethrough animates at 2.0s
const costT = clamp((localTime - 0.7) / 0.6, 0, 1);
const strikeT = clamp((localTime - 2.0) / 0.6, 0, 1);
// Time row appears at 3.4s
const timeT = clamp((localTime - 3.4) / 0.6, 0, 1);
const timeStrikeT = clamp((localTime - 4.7) / 0.6, 0, 1);
// Final punchline
const finalT = clamp((localTime - 6.0) / 0.6, 0, 1);
const exit = localTime > 7.4 ? 1 - Easing.easeInCubic((localTime - 7.4) / 0.6) : 1;
const Row = ({ y, eyebrow, oldVal, newVal, oldOp, oldStrike, newOp, oldUnit, newUnit, newSub }) =>
{/* OLD */}
{eyebrow} — before
{oldVal}
{oldUnit}
{/* Strike — overlays the full inline-flex (both value + unit) */}
{/* Arrow */}
→
{/* NEW */}
{eyebrow} — with optimaflo
{newVal}
{newUnit}
{newSub &&
{newSub}
}
{/* Headline */}
The math
40× cheaper. Hundreds of times faster.
|
|
{/* Punchline */}
No per-seat. No per-row. No surprise bills.
);
}
// ───────────────────────────────────────────────────────────────────────────
// SCENE 8 — CTA. 54–60s (6s)
// ───────────────────────────────────────────────────────────────────────────
function Scene8CTA() {
const { localTime } = useSprite();
const logoT = clamp((localTime - 0.2) / 0.7, 0, 1);
const logoE = Easing.easeOutBack(logoT);
const taglineT = clamp((localTime - 0.9) / 0.6, 0, 1);
const subT = clamp((localTime - 1.7) / 0.6, 0, 1);
const ctaT = clamp((localTime - 2.4) / 0.6, 0, 1);
const metaT = clamp((localTime - 3.2) / 0.6, 0, 1);
// CTA breathes
const breathe = 1 + 0.02 * Math.sin(localTime * 2.0);
return (
{/* Amber radial behind logo */}
{/* Logo */}
{/* Tagline */}
From raw data to clean dashboards.
{/* Sub */}
The AI data platform for growing companies.
{/* URL / meta */}
optimaflo.io · Now in early beta
);
}
// ───────────────────────────────────────────────────────────────────────────
// MAIN COMPOSITION
// ───────────────────────────────────────────────────────────────────────────
function Composition() {
const t = useTime();
// Update screen label for comment context (per second)
React.useEffect(() => {
const sec = Math.floor(t);
const root = document.querySelector('[data-video-root]');
if (root) root.setAttribute('data-screen-label', `t=${sec}s`);
}, [Math.floor(t)]);
return (
);
}
// Export
Object.assign(window, {
Composition, ofTokens,
Scene1Chaos, Scene2Cost, Scene3Intro,
Scene4PromptPipeline, Scene5Dashboard,
Scene6Trust, Scene7Savings, Scene8CTA
});