Turncode into video.
Helios renders browser animations into video. Write animations using normal web technologies and Helios encodes the result into video.
When paired with an AI coding agent, developers can generate animation code from prompts and render it instantly.
npm install @helios-project/core @helios-project/playerFrom prompt to video using real code.
Helios is the rendering engine in this workflow. AI tools generate the animation code. Helios executes it using the browser animation engine and converts the result into video.
Prompt
Describe your video to an AI coding agent
Generate
AI generates animation code using standard CSS & JS
Render
Helios drives the browser animation engine
Video
Frames captured and encoded into video
"Create a 10-second intro animation with the company logo fading in, scaling up from 0.9 to 1.0, followed by a tagline that slides in from below with a spring easing."
Write it how you already know.
Standard CSS animations, the Web Animations API, GSAP, Framer Motion -- they all work because Helios drives the browser, not a simulation.
1/* Your existing CSS animations just work */2@keyframes fadeIn {3 from {4 opacity: 0;5 transform: scale(0.9);6 }7 to {8 opacity: 1;9 transform: scale(1);10 }11}1213.my-element {14 animation: fadeIn 1s ease-out forwards;15}Helios
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }Standard CSS. No changes. The browser does the animation.
Others
const opacity = interpolate(frame, [0, 30], [0, 1]);Manual interpolation on every frame. Reimplemented in JavaScript.
Built on the browser animation engine.
Native always wins. Helios drives the browser instead of simulating it, using the same optimized code that powers every CSS animation on the web.
Drives the Browser Timeline
Uses Chrome DevTools Protocol to virtualize time. The browser's internal clock is detached from wall-clock time, advancing frame-by-frame as fast as the CPU allows.
CSS Animations Just Work
Existing browser animations run natively. Helios controls the timeline while the browser's C++ compositor calculates all interpolated values for every animated property.
Dual Rendering Paths
DOM-to-Video via Playwright for HTML/CSS/SVG compositions. Canvas-to-Video via WebCodecs API for hardware-accelerated encoding of Three.js, Pixi.js, and WebGL content.
GPU Accelerated
Ships with optimized browser launch flags for hardware acceleration. Includes built-in helios.diagnose() to verify GPU availability and guide setup.
Supported Animation Types
The Core Innovation
Production Rendering
policy: 'advance', budget: 33.33
-> Browser advances clock 33.33ms
-> All CSS/WAAPI animations update
-> Layout and paint complete
-> Frame captured
Preview Mode
.forEach(anim => {
anim.currentTime = targetMs;
anim.pause();
});
// Browser's C++ compositor handles
// all interpolation calculations
What you can build.
Each preview corresponds to real capabilities in the Helios engine. Below each is the prompt that would generate the animation code.
Fade & Scale Intro
"Create a logo animation that fades in and scales from 0.9 to 1.0 with ease-out timing"
Kinetic Typography
"Animate a headline where each word slides in sequentially from below with staggered delays"
Particle Burst
"Create a particle system on canvas that explodes outward from center with gravity and bounce"
Data Visualization
"Build an animated bar chart where each bar grows from zero with spring easing"
3D Product Spin
"Render a Three.js scene with a product model rotating 360 degrees with subtle lighting changes"
Morphing Shapes
"Animate SVG paths morphing between geometric shapes with smooth interpolation"
Install Helios.
$ npm install @helios-project/core @helios-project/player$ npx -y skills add BintzGavin/helios-skillsHelios can be used alongside AI coding agents to generate animation code and render videos automatically. Install the skills package to give your AI agent best-practice patterns for working with Helios.
"Create a 10-second product showcase video. Fade in the product image from the left, animate the price with a spring easing, and add a particle effect background using canvas."
Instead of learning new APIs......just use the platform.
Helios is open source under the Elastic License 2.0. Build commercial products, embed it in your apps, use it for free. The only restriction: you can't offer Helios itself as a hosted service.
Solo developer
Free
10-person team
Free
100 renders / month
Free