메뉴
Installation and quick start guide for Helios video engine. Use when setting up a new Helios project, installing packages, or creating your first composition. Covers package installation, requirements, basic setup, and initial composition structure.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
Collection of agent skills for Helios video engine. Use when working with programmatic video creation, browser-native animations, or Helios compositions. Install individual skills by path for specific capabilities.
Core API for Helios video engine. Use when creating compositions, managing timeline state, controlling playback, or subscribing to frame updates. Covers Helios class instantiation, signals, animation helpers, and DOM synchronization.
Patterns for using Helios with Vanilla Canvas API. Use when building high-performance 2D/3D animations without frameworks.
Chart.js integration patterns for Helios. Use when creating animated data visualizations with Chart.js.
Learn how to use D3.js with Helios for data visualization. Use when creating charts, graphs, or data-driven animations.
Patterns for using Helios with Framer Motion. Use when you want to use Framer Motion's physics and transitions but need frame-perfect synchronization with Helios.
SOC 직업 분류 기준
| name | helios-getting-started |
| description | Installation and quick start guide for Helios video engine. Use when setting up a new Helios project, installing packages, or creating your first composition. Covers package installation, requirements, basic setup, and initial composition structure. |
Quick installation and setup guide for Helios, a browser-native video engine for programmatic animation and rendering.
Before installing Helios, ensure you have:
Good news: FFmpeg is automatically bundled with @helios-project/renderer via the @ffmpeg-installer/ffmpeg package. You don't need to install it manually!
The renderer package includes platform-specific FFmpeg binaries that work out of the box. If you prefer to use a system-installed FFmpeg instead, you can specify a custom path via the ffmpegPath option in the renderer configuration.
Helios is modular—install only what you need.
The @helios-project/core package contains the engine logic, timing drivers, and animation helpers. This is required for any composition.
npm install @helios-project/core
The @helios-project/renderer package is a Node.js library for rendering compositions to video files (MP4, etc.) using Headless Chrome and FFmpeg. Most users want to create MP4 files, so this is the recommended second package.
npm install @helios-project/renderer
For most use cases—creating MP4 videos—install both core and renderer:
npm install @helios-project/core @helios-project/renderer
The @helios-project/player package provides the <helios-player> web component for embedding compositions with playback controls. Useful for previewing compositions during development, but not required for rendering.
npm install @helios-project/player
Create an HTML file (e.g., composition.html) that will serve as your composition:
<!DOCTYPE html>
<html>
<head>
<title>My Composition</title>
<style>
body { margin: 0; overflow: hidden; background: black; }
canvas { display: block; width: 100vw; height: 100vh; }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="module" src="./src/main.js"></script>
</body>
</html>
In your JavaScript file (src/main.js), import and initialize Helios:
import { Helios } from '@helios-project/core';
// Create a 10-second video at 30fps
const helios = new Helios({
duration: 10, // seconds
fps: 30,
width: 1920,
height: 1080,
autoSyncAnimations: true // Sync CSS/WAAPI animations
});
// Bind to document timeline (CRITICAL for Renderer/Player)
helios.bindToDocumentTimeline();
// Expose to window (CRITICAL for detection)
window.helios = helios;
// Subscribe to frame updates
helios.subscribe((state) => {
const { currentFrame, duration, fps } = state;
const progress = currentFrame / (duration * fps);
// Render your frame here
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Example: Draw something based on progress
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width * progress, canvas.height);
});
// Initial render
const state = helios.getState();
helios.subscribe((state) => {
// Render logic here
})();
Your existing CSS animations work without modification:
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
.my-element {
animation: fadeIn 1s ease-out forwards;
}
When you call helios.seek(45), all CSS/WAAPI animations instantly update to frame 45.
This is the primary use case—most users want to create MP4 files from their compositions.
Use the CLI to render your composition:
npx helios render ./composition.html -o output.mp4
Or use the Renderer package programmatically:
import { render } from '@helios-project/renderer';
await render({
input: './composition.html',
output: './output.mp4',
width: 1920,
height: 1080,
fps: 30
});
If you installed the player package, use the <helios-player> web component for preview during development:
<helios-player src="./composition.html" width="1920" height="1080"></helios-player>
<script type="module" src="@helios-project/player"></script>
Helios works with any framework or vanilla JavaScript:
React:
import { useVideoFrame } from '@helios-project/core/react';
function MyComponent() {
const { currentFrame } = useVideoFrame();
return <div>Frame: {currentFrame}</div>;
}
Vue:
import { useVideoFrame } from '@helios-project/core/vue';
const { currentFrame } = useVideoFrame();
Svelte:
import { videoFrame } from '@helios-project/core/svelte';
$: currentFrame = $videoFrame.currentFrame;
Vanilla JS:
helios.subscribe(state => {
console.log(state.currentFrame);
});
When setting up a new Helios composition, ensure:
npm install @helios-project/corenpm install @helios-project/renderernew Helios({ duration, fps })helios.bindToDocumentTimeline() calledwindow.helios = helios sethelios.subscribe(...) used to trigger rendershelios/core skill for detailed API referencehelios/workflows/create-composition for composition creation workflowhelios/examples/react or helios/examples/vue for framework-specific patternshelios/renderer for rendering pipeline details"Cannot find module '@helios-project/core'"
npm install @helios-project/coreAnimations not syncing
autoSyncAnimations: true is set in the Helios constructorhelios.bindToDocumentTimeline() after creating the instanceRenderer fails
ffmpegPath in renderer optionsPlayer not detecting composition
window.helios = helios is set