メニュー
Workflow for creating a new Helios composition. Use when building a new animation project or converting an existing animation to run in Helios.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
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.
| name | create-composition |
| description | Workflow for creating a new Helios composition. Use when building a new animation project or converting an existing animation to run in Helios. |
A Helios composition is a web page (HTML/JS) that uses the @helios-project/core library to drive animations. This page can be viewed in the Browser, embedded in the Player, or rendered to video by the Renderer.
Create a composition.html file. This is the entry point.
<!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.ts"></script>
</body>
</html>
In your script (main.ts or inline), initialize Helios and set up the render loop.
import { Helios } from '@helios-project/core';
// 1. Config
const width = 1920;
const height = 1080;
const fps = 30;
const duration = 10; // seconds
// 2. Define Input Schema (Optional but recommended)
const schema = {
type: 'object',
properties: {
title: { type: 'string', default: "Hello World" },
color: { type: 'string', default: "#ff0000" }
}
};
// 3. Setup Canvas
const canvas = document.getElementById('canvas') as HTMLCanvasElement;
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
// 4. Initialize Engine
const helios = new Helios({
duration,
fps,
width,
height,
schema, // Pass schema
inputProps: { title: "Hello World", color: "#ff0000" }, // Initial props
autoSyncAnimations: true // Optional: Sync CSS/WAAPI
});
// 5. Bind to Document Timeline (CRITICAL for Renderer/Player)
helios.bindToDocumentTimeline();
// 6. Expose to Window (CRITICAL for detection)
// @ts-ignore
window.helios = helios;
// 7. Define Render Function
function draw(frame: number, props: any) {
// Clear
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, width, height);
// Calculate time/progress
const time = frame / fps;
const progress = time / duration;
// Draw something using props
const x = progress * width;
ctx.fillStyle = props.color;
ctx.font = '100px sans-serif';
ctx.fillText(props.title, x, height/2);
}
// 8. Subscribe to State Changes
helios.subscribe((state) => {
draw(state.currentFrame, state.inputProps);
});
// 9. Initial Draw
const state = helios.getState();
draw(state.currentFrame, state.inputProps);
new Helios(...) called with duration/fps/props.helios.bindToDocumentTimeline() called.window.helios = helios set.helios.subscribe(...) used to trigger renders.If you are using CSS animations or Web Animations API (WAAPI), set autoSyncAnimations: true in the constructor. Helios will automatically hijack the document timeline and sync these animations to the current frame when scrubbing.
For React, Vue, or Svelte, wrap this logic in a component or hook.
See examples/react/SKILL.md, examples/vue/SKILL.md, or examples/svelte/SKILL.md.