{"slug": "helios-turn-code-into-video", "title": "Helios: Turn Code into Video", "summary": "Helios, a new open-source tool, renders browser animations into video by driving the browser's native animation engine, enabling developers to use standard CSS and JS animations without reimplementation. When paired with AI coding agents, it allows generating animation code from prompts and rendering it instantly, supporting frameworks like GSAP and Framer Motion.", "body_md": "# Turncode into video.\n\nHelios renders browser animations into video. Write animations using normal web technologies and Helios encodes the result into video.\n\nWhen paired with an AI coding agent, developers can generate animation code from prompts and render it instantly.\n\n`npm install @helios-project/core @helios-project/player`\n\n## From prompt to video using real code.\n\nHelios 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.\n\n### Prompt\n\nDescribe your video to an AI coding agent\n\n### Generate\n\nAI generates animation code using standard CSS & JS\n\n### Render\n\nHelios drives the browser animation engine\n\n### Video\n\nFrames captured and encoded into video\n\n\"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.\"\n\n## Write it how you already know.\n\nStandard CSS animations, the Web Animations API, GSAP, Framer Motion -- they all work because Helios drives the browser, not a simulation.\n\n```\n1/* 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}\n```\n\n#### Helios\n\n`@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }`\n\nStandard CSS. No changes. The browser does the animation.\n\n#### Others\n\n`const opacity = interpolate(frame, [0, 30], [0, 1]);`\n\nManual interpolation on every frame. Reimplemented in JavaScript.\n\n## Built on the browser animation engine.\n\nNative always wins. Helios drives the browser instead of simulating it, using the same optimized code that powers every CSS animation on the web.\n\n### Drives the Browser Timeline\n\nUses 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.\n\n### CSS Animations Just Work\n\nExisting browser animations run natively. Helios controls the timeline while the browser's C++ compositor calculates all interpolated values for every animated property.\n\n### Dual Rendering Paths\n\nDOM-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.\n\n### GPU Accelerated\n\nShips with optimized browser launch flags for hardware acceleration. Includes built-in helios.diagnose() to verify GPU availability and guide setup.\n\n### Supported Animation Types\n\n```\nThe Core InnovationProduction RenderingCDP: Emulation.setVirtualTimePolicy  policy: 'advance', budget: 33.33  -> Browser advances clock 33.33ms  -> All CSS/WAAPI animations update  -> Layout and paint complete  -> Frame capturedPreview Modedocument.getAnimations()  .forEach(anim => {    anim.currentTime = targetMs;    anim.pause();  });  // Browser's C++ compositor handles  // all interpolation calculations\n```\n\n## What you can build.\n\nEach preview corresponds to real capabilities in the Helios engine. Below each is the prompt that would generate the animation code.\n\n### Fade & Scale Intro\n\n\"Create a logo animation that fades in and scales from 0.9 to 1.0 with ease-out timing\"\n\n### Kinetic Typography\n\n\"Animate a headline where each word slides in sequentially from below with staggered delays\"\n\n### Particle Burst\n\n\"Create a particle system on canvas that explodes outward from center with gravity and bounce\"\n\n### Data Visualization\n\n\"Build an animated bar chart where each bar grows from zero with spring easing\"\n\n### 3D Product Spin\n\n\"Render a Three.js scene with a product model rotating 360 degrees with subtle lighting changes\"\n\n### Morphing Shapes\n\n\"Animate SVG paths morphing between geometric shapes with smooth interpolation\"\n\n## Install Helios.\n\n`$ npm install @helios-project/core @helios-project/player`\n\n`$ npx -y skills add BintzGavin/helios-skills`\n\nHelios 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.\n\n\"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.\"\n\n## Instead of learning new APIs......just use the platform.\n\nHelios 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.\n\nSolo developer\n\nFree\n\n10-person team\n\nFree\n\n100 renders / month\n\nFree", "url": "https://wpnews.pro/news/helios-turn-code-into-video", "canonical_source": "https://www.heliosrender.com", "published_at": "2026-06-17 02:54:57+00:00", "updated_at": "2026-06-17 03:22:38.424764+00:00", "lang": "en", "topics": ["developer-tools", "ai-tools", "generative-ai"], "entities": ["Helios", "Chrome DevTools Protocol", "Playwright", "WebCodecs API", "Three.js", "Pixi.js", "GSAP", "Framer Motion"], "alternates": {"html": "https://wpnews.pro/news/helios-turn-code-into-video", "markdown": "https://wpnews.pro/news/helios-turn-code-into-video.md", "text": "https://wpnews.pro/news/helios-turn-code-into-video.txt", "jsonld": "https://wpnews.pro/news/helios-turn-code-into-video.jsonld"}}