);
// ─────────────────────────────────────────────────────────
// SCENE 1 — Cold open
// ─────────────────────────────────────────────────────────
const Scene1 = () => (
<>
{/* Floating tilted UI screens drifting behind the headline */}
{/* Center foreground — the headline */}
helios · business analytics, in plain words
What would you like to know?
A chat-first analyst for your business. Ask anything about your sales,
bookings, and customers — get answers in seconds, not dashboards.
);
// ─────────────────────────────────────────────────────────
// SCENE 2 — The problem (spreadsheets everywhere, nothing shared)
// Reshaped from a real customer call: "no single source of truth,
// managing multiple spreadsheets, no dashboard sharing".
// ─────────────────────────────────────────────────────────
// A faux spreadsheet card — green tab bar + grid of cells, tilted in 3D.
// Conveys "yet another sheet" instantly without needing real data.
const SheetCard = ({
title, owner, edited, rows = 5, cols = 5, accent = "#1a8754",
style, className, drift, duration, delay,
rx = 0, ry = 0, rz = 0,
}) => (
{/* Title bar with the spreadsheet-green accent */}
{title}·xlsx
{/* Toolbar row */}
{[24, 18, 18, 14].map((w, i) => (
))}
{/* Cells */}
{Array.from({ length: rows }).map((_, r) => (
{Array.from({ length: cols }).map((_, c) => (
{r === 0
? ["item", "wk1", "wk2", "wk3", "Δ"][c]
: c === 0
? ["Lash fill","Brows","Mani","Pedi","Acrylic"][r-1]
: (1200 + r * 173 + c * 91).toString()}
))}
))}
{/* Foot — "edited by" sticker */}
{owner.split(" ").map(s => s[0]).join("")}
edited by {owner}{edited}
);
// "v3", "FINAL", "v3-mira-edit" version stickers — the small chaos sigils.
const VersionTag = ({ children, style, className }) => (
{children}
);
// Slide 2 — modern, punchy, customer-call shaped:
// "no single source of truth · spreadsheets everywhere · no dashboard sharing"
// Composition: HUGE backdrop type (twelve), an offset spreadsheet collage on
// the right, a single sharp truth-stat in the center.
const Scene2 = () => (
<>
{/* Massive ghost numeral as backdrop — the "twelve" of the headline */}
12
{/* Spreadsheet collage — fanned, all in the right half */}
{/* Version-chaos stickers — the "v3, FINAL, FINAL_v2" sigils */}
v3FINALv3-mira-editFINAL_v2
{/* Foreground — left column. Headline stays clear of the collage. */}
{/* Quote attribution chip — anchors the slide as customer-truth */}
what every founder tells us
Same business. Twelve truths.
Every tool exports its own spreadsheet. Each owner keeps their own copy.
Dashboards stay in one person's tab — never shared, never current.
{/* Pain rail — two-column, no bullet circles. Just verdicts. */}
{[
["no single source of truth", "every sheet says something different"],
["spreadsheets everywhere", "v3, FINAL, FINAL_v2 — pick one"],
["no dashboard sharing", "the answer dies on one screen"],
["the week beats the answer", "by friday, you've moved on"],
].map(([h, sub]) => (
{h}
{sub}
))}
);
// ─────────────────────────────────────────────────────────
// SCENE 3 — Just ask (composer hero)
// ─────────────────────────────────────────────────────────
const Scene3 = () => (
<>
{/* Magenta halo behind composer */}
{/* The hero composer screen, tilted forward and to the right */}
{/* Foreground left — copy */}
chapter two · just ask
No spreadsheets. No filters. Just ask.
Type a question the way you'd ask a colleague.
Helios reads from your tools and writes back the answer — with the chart,
the table, and the why.
);
// ─────────────────────────────────────────────────────────
// SCENE 4 — Get answers, not dashboards
// ─────────────────────────────────────────────────────────
const PopChartCard = () => {
const data = [1100, 720, 1840, 2110, 2680, 3210, 1180];
const days = ["mon","tue","wed","thu","fri","sat","sun"];
const max = Math.max(...data);
const W = 360, H = 130, P = 14, BW = 28;
const peak = data.indexOf(max);
return (
Revenue by daylast week · €
Tuesday came in at €720,
about 35% below your weekday average.
);
};
const Scene4 = () => (
<>
{/* Chat thread tilted in 3D */}
{/* Pop-out chart card — depth element in front of the thread */}
{/* Floating tool pill — depth element behind */}
queried Square·312 rows
{/* Foreground left — copy */}
chapter three · answers
Get answers, not dashboards.
Helios writes back in plain prose with the chart in line — and shows
its work, so you can trust the numbers.
);
// ─────────────────────────────────────────────────────────
// SCENE 5 — Home: your morning, briefed
// The Home screen IS the answer to "always watching" — lead signal,
// KPIs, weekly digest, health rail, all on one canvas.
// ─────────────────────────────────────────────────────────
// Floating callouts that point INTO regions of the home screen.
// They sit on a layer in front of the tilted screen, with their own depth.
const HomeCallout = ({ label, x, y, w = 240, delay = 0, anchor = "left" }) => (
{label.eyebrow}
{label.title}
{/* Connector line — short stroke from the card toward the screen */}
);
const Scene5 = () => (
<>
{/* The Home screen — large, tilted, the centerpiece */}
{/* Floating callouts that label the regions of the screen */}
{/* Foreground left — copy */}
chapter four · the home screen
Your morning, on one screen.
Open Helios and the week is already read for you — the one thing that
needs attention, the numbers that moved, a two-minute prose digest, and
the conversations you left open. No dashboard archaeology.
);
// ─────────────────────────────────────────────────────────
// SCENE 6 — Know before your team knows.
// A phone lock screen with a Helios push at 7:42 AM, the clock,
// and a faded "team standup · 9:00" calendar block underneath.
// ─────────────────────────────────────────────────────────
const SceneKnow = () => (
<>
{/* Huge background clock — 07:42 — sets the time-of-day mood */}
07:42
{/* Phone lock screen with the Helios push notification */}
{/* Status bar */}
7:42●●●●5G96%
{/* Big time */}
Thursday, November 6
7:42
{/* The Helios push */}
HELIOSnow
Tuesday afternoon ran 38% under your usual.
4 cancellations between 2 — 5 PM. None rebooked. Worth a look before standup.
{/* Faded calendar block — standup at 9:00 */}
Team standup
9:00 — 9:15 · in 78 min
{/* Foreground left — copy */}
chapter five · know first
Know before your team knows.
Helios watches your numbers overnight. A push lands at breakfast, not
at the end of the month — so you walk into standup already knowing
what changed, why, and what to ask about.
{[
{ eyebrow: "7:42 am", text: "Helios spots the dip" },
{ eyebrow: "8:10 am", text: "You read the why on the train" },
{ eyebrow: "9:00 am", text: "Standup starts. You're already 3 steps ahead." },
].map(b => (
{b.eyebrow}
{b.text}
))}
);
// ─────────────────────────────────────────────────────────
// SCENE 7 — Ask anywhere (your data inside Claude / ChatGPT)
// Three branded chat tiles fanned in 3D, each answering the same business
// question. Proves "the AI you already use, now knows your business."
// ─────────────────────────────────────────────────────────
// A single chat tile — header bar with brand icon + body with Q&A.
// Three variants: helios (rich KPI tiles), claude (conversational prose
// with tool chip), chatgpt (bulleted list with tool chip).
const ChatTile = ({ brand, style, className }) => {
const config = {
helios: {
name: "Helios",
icon: (
);
};
const SceneAskAnywhere = () => (
<>
{/* Three chat tiles fanned in 3D depth — Claude is centerpiece (in front),
Helios upper-back, ChatGPT lower-front-right. Same question, three surfaces. */}
{/* Foreground left — copy */}
chapter six · ask anywhere
Same intelligence. Three surfaces.
Plug your business into the AI you already use — Claude, ChatGPT,
or the Helios app. Same live answers, wherever you're working.
{/* MCP credibility chip */}
powered by MCP · the open standard
);
// ─────────────────────────────────────────────────────────
// SCENE 8 — Get started (CTA) with cycling connectors + aha moment
// The headline cycles: "Connect Square in 30 seconds" → Stripe → Shopify…
// then lands on the aha: "Suddenly, every number agrees."
// ─────────────────────────────────────────────────────────
const CONNECTORS = [
{ name: "Square", meta: "POS · 312 today", accent: "#0070BA" },
{ name: "Stripe", meta: "payments", accent: "#635BFF" },
{ name: "Shopify", meta: "orders", accent: "#5E8E3E" },
{ name: "Calendar", meta: "bookings", accent: "#1F8A5B" },
{ name: "Mindbody", meta: "members", accent: "#0F4F2A" },
{ name: "QuickBooks", meta: "accounting", accent: "#2CA01C" },
];
const Scene6 = () => {
const [step, setStep] = React.useState(0); // 0..5 = cycling, 6 = aha
React.useEffect(() => {
const t = setInterval(() => {
setStep(s => (s >= 6 ? 0 : s + 1));
}, 1500);
return () => clearInterval(t);
}, []);
const aha = step === 6;
const active = CONNECTORS[step % CONNECTORS.length];
return (
<>
{/* Foreground — title + CTA, top-center */}
{aha ? "chapter seven · the aha" : "chapter seven · ready when you are"}
{/* Cycling headline. Key on step so it re-mounts and re-animates. */}
{!aha ? (
Connect {active.name} in 30 seconds.
) : (
Suddenly, every number agrees.
)}
{aha
? "One source of truth. One screen. Every tool — and everyone on the team — looking at the same answer."
: "Free for the first 30 days. No credit card. Cancel anytime."}
{/* CTA appears on the aha step */}
{aha && (
)}
{/* Connector arc — every tile present; the active one lifts/highlights.
On aha step, all tiles glow magenta-edged and lift together. */}