> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/BintzGavin/helios/llms.txt
> Use this file to discover all available pages before exploring further.
# Introduction to Helios
> A programmatic video engine that runs on web standards. Stop reinventing animation in JavaScript. Use the platform.
# 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 `` and `` 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
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.
Works with React, Vue, Svelte, Solid, or vanilla JavaScript. Framework adapters provide idiomatic hooks and composables for each ecosystem.
Animation interpolation happens in the browser's C++ compositor. Hardware-accelerated rendering, WebCodecs support for canvas-heavy work.
Build and sell products with Helios under the Elastic License 2.0. No per-seat fees, no render limits, no monetization restrictions.
Drop-in Web Component player works anywhere. WYSIWYG preview using the same bundled composition code as the final render.
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:
```typescript theme={null}
// 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`:
```typescript theme={null}
// 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](https://www.remotion.dev/) enable programmatic video creation. Here's an honest comparison:
| | Helios | Remotion |
| -------------------- | --------------------------------- | ------------------------------------- |
| **Architecture** | Native-aligned (drive browser) | Simulation-based (screenshot machine) |
| **Animation** | CSS, WAAPI, any library | `interpolate()`, `spring()` hooks |
| **Framework** | Any (React, Vue, Svelte, vanilla) | React only |
| **Learning curve** | Use what you know | Learn Remotion APIs |
| **Maturity** | 🟡 Beta | 🟢 Production-ready |
| **Pricing** | Free (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
Install Helios packages and set up your development environment
Create your first video in minutes with our quick tutorial
## Community and support
* **GitHub**: [BintzGavin/helios](https://github.com/BintzGavin/helios)
* **License**: Elastic License 2.0 (ELv2) - Free for commercial use
* **Issues**: Report bugs and request features on [GitHub Issues](https://github.com/BintzGavin/helios/issues)
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.