remotion-helios

Four example promo scenes for a fictional Helios Analytics, built with Remotion — a capability demo in the AI-product-promo style (kinetic type + animated product UI + live data).

Scenes

Composition	What it shows
HeliosIntro	Brand + kinetic masked-reveal headline + a forecast sparkline (actual→dashed forecast)
HeliosDashboard	Product-UI hero: LIVE status pill, $ count-up, forecast toggle, animated line+area chart with forecast tail, legend, axis
HeliosMetrics	Count-up KPI tiles with delta chips, an animated bar chart, and a progress ring
HeliosEndCard	Logo bookend + tagline + CTA pill + URL

Run

npm install            # done
npm run studio         # preview all four with a scrubbable timeline
npm run render:dashboard   # → out/dashboard.mp4  (also :intro :metrics :endcard)

How it's built (the point)

• One brand system in theme.ts (colors) + fonts.ts — every scene pulls from it, so they read as one film.
• Reusable components in ui.tsx (Eyebrow, ClipReveal, Pill, Toggle, StatTile, ProgressBar, Wordmark) and LineChart.tsx / BarChart.tsx. Swap data/props → new video.
• Every motion is a function of the frame: spring() for entrances, interpolate() for count-ups / chart reveals / bars, stroke-dashoffset for line draw-on.
• The four scenes are separate compositions now; they'd chain into one ~16s film via <Series> or @remotion/transitions.

Everything here is data-driven — point the components at real numbers and it renders the real promo.