Skip to main content

​
Introduction to Helios

Helios is a programmatic video engine that runs on web standards.
Stop reinventing animation in JavaScript. Use the platform.
Video is light over time. Helios drives the browser’s native animation engine instead of replacing it.

​
What is Helios?

Helios is a programmatic video creation framework that takes a fundamentally different approach than existing tools. Instead of simulating animation in JavaScript, Helios drives the browser’s native animation engine. Your existing CSS animations, GSAP timelines, Framer Motion springs, and Web Animations API—they all work natively because the browser is doing the animation, not JavaScript.

​
The core philosophy

The history of software teaches a consistent lesson: betting on native platform capabilities almost always beats simulation.
  • CSS animations replaced jQuery .animate() and JS-driven motion
  • Native <video> and <audio> killed Flash
  • IntersectionObserver replaced expensive scroll-listener hacks
  • CSS Scroll Snap is displacing JavaScript carousel libraries
Helios follows this pattern by leveraging:
  • Chrome DevTools Protocol (CDP) for production rendering - virtualizes time at the environment level
  • Web Animations API for preview/development - seeks animations using writable .currentTime properties
  • Standard CSS and platform APIs - your existing web development skills transfer directly

​
Key features

Use what you know

No proprietary APIs to learn. Your existing CSS animations, GSAP timelines, and animation libraries work out of the box. Pure TypeScript with zero framework dependencies.

Any framework (or none)

Works with React, Vue, Svelte, Solid, or vanilla JavaScript. Framework adapters provide idiomatic hooks and composables for each ecosystem.

Browser-native performance

Animation interpolation happens in the browser’s C++ compositor. Hardware-accelerated rendering, WebCodecs support for canvas-heavy work.

Free for commercial use

Build and sell products with Helios under the Elastic License 2.0. No per-seat fees, no render limits, no monetization restrictions.

Preview instantly

Drop-in Web Component player works anywhere. WYSIWYG preview using the same bundled composition code as the final render.

Agent-first design

Built for AI-assisted development with machine-readable documentation, structured errors, and composable primitives that work well with LLM-driven workflows.

​
How it works

Helios uses different time control mechanisms depending on the context:

​
Production rendering (headless Chrome)

Uses the Chrome DevTools Protocol to virtualize time at the environment level: 
// CDP virtualizes the browser's internal clock
Emulation.setVirtualTimePolicy({ policy: 'advance', budget: 33.33 })
→ Browser advances internal clock by exactly 33.33ms
→ All CSS/WAAPI animations update to new time
→ Layout and paint complete
→ Frame captured
This is deterministic: the browser cannot advance until each frame is fully rendered, regardless of scene complexity.

​
Preview mode (browser tab)

Uses the Web Animations API’s writable Animation.currentTime: 
// Seek all animations to target time
document.getAnimations().forEach(anim => {
  anim.currentTime = targetTimeMs;
  anim.pause();
});
This lets developers preview compositions instantly without running a headless browser.

​
Architecture overview

Helios is designed with a modular, headless-first architecture:

​
Core packages

  • @helios-project/core - Headless animation engine with framework adapters
  • @helios-project/player - Web Component player for instant preview
  • @helios-project/renderer - Production rendering pipeline with FFmpeg integration

​
The composition layer

The core is an instantiable JavaScript class that manages state (currentFrame, duration, isPlaying), exposes methods (play, pause, seek), and provides subscription-based reactivity. Framework adapters expose the headless engine idiomatically:
  • React: useVideoFrame() hook
  • Vue: Composition API composables
  • Svelte: Readable stores with $ syntax
  • Vanilla: Direct class instantiation

​
The rendering pipeline

Dual-path architecture selects the optimal strategy:
  1. DOM-to-Video - Uses Playwright to render DOM, capture screenshots. Ideal for HTML, CSS, SVG compositions.
  2. Canvas-to-Video - Uses WebCodecs API for direct frame encoding. Hardware-accelerated VideoEncoder. Bypasses DOM for significant speed gains.

​
Helios vs Remotion

Both Helios and Remotion enable programmatic video creation. Here’s an honest comparison:
HeliosRemotion
ArchitectureNative-aligned (drive browser)Simulation-based (screenshot machine)
AnimationCSS, WAAPI, any libraryinterpolate(), spring() hooks
FrameworkAny (React, Vue, Svelte, vanilla)React only
Learning curveUse what you knowLearn Remotion APIs
Maturity🟡 Beta🟢 Production-ready
PricingFree (ELv2)Free ≤3 devs, then $100+/mo
CSS @keyframes✅ Work natively❌ Clock drifts during render

​
Choose Helios if

  • You want familiar web APIs, not proprietary hooks
  • You’re using Vue, Svelte, or vanilla JS
  • You need canvas/WebGL performance (Three.js, Pixi.js)
  • You want free commercial use without licensing complexity
  • You’re comfortable with beta software

​
Choose Remotion if

  • You need production stability today
  • You’re all-in on React
  • You need distributed rendering now
  • You want extensive documentation and community

​
Use cases

Helios excels at:
  • Data visualization videos - Animate charts, graphs, and dashboards with Chart.js, D3, or any library
  • Product demos - Create polished product walkthroughs with code highlighting and annotations
  • Social media content - Generate shareable video content programmatically
  • Marketing videos - Build launch announcements, promos, and explainers
  • Educational content - Animated tutorials and code walkthroughs
  • Canvas animations - High-performance Three.js, Pixi.js, and P5.js compositions
Helios is currently in beta. The architecture is stable and the API is maturing, making it suitable for early adopters and production experimentation.

​
Next steps

Installation

Install Helios packages and set up your development environment

Quickstart

Create your first video in minutes with our quick tutorial

​
Community and support

This repository is an active experiment in autonomous software engineering, primarily managed by AI agents running on Google’s Jules platform. Expect rapid changes and experimental commits.

Build docs developers (and LLMs) love

Get started for freeTalk to us