Exécutez n'importe quel Skill dans Manus
en un clic

Exécutez n'importe quel Skill dans Manus en un clic

create-composition

Étoiles88

Forks5

Mis à jour25 février 2026 à 11:42

Workflow for creating a new Helios composition. Use when building a new animation project or converting an existing animation to run in Helios.

Installation

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Exécuter dans Manus

Source

BintzGavin

BintzGavin/helios

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Exécuter dans Manus

Métiers associésSOC

Basé sur la classification professionnelle SOC

Développeurs de logicielsProfessions informatiques et mathématiques·SOC 15-1252

SKILL.md

readonly

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.

Create Composition Workflow

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.

1. Basic Structure

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>

2. Initialize Helios

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);

Checklist

Instance Created: new Helios(...) called with duration/fps/props.
Timeline Bound: helios.bindToDocumentTimeline() called.
Window Exposed: window.helios = helios set.
State Subscribed: helios.subscribe(...) used to trigger renders.
Canvas/DOM Ready: Elements are sized correctly (usually 100vw/100vh or fixed resolution).

Auto-Sync Animations

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.

Frameworks

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.

Plus depuis ce dépôt

même dépôt

helios-skills

BintzGavin/helios

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.

2026-02-2588

helios-core

BintzGavin/helios

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.

2026-02-2588

example-canvas

BintzGavin/helios

Patterns for using Helios with Vanilla Canvas API. Use when building high-performance 2D/3D animations without frameworks.

2026-02-2588

example-chartjs

BintzGavin/helios

Chart.js integration patterns for Helios. Use when creating animated data visualizations with Chart.js.

2026-02-2588

example-d3-animation

BintzGavin/helios

Learn how to use D3.js with Helios for data visualization. Use when creating charts, graphs, or data-driven animations.

2026-02-2588

example-framer-motion

BintzGavin/helios

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.

2026-02-2588

Create Composition Workflow

1. Basic Structure

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>

2. Initialize Helios

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);

Checklist

Instance Created: new Helios(...) called with duration/fps/props.

Timeline Bound: helios.bindToDocumentTimeline() called.

Window Exposed: window.helios = helios set.

State Subscribed: helios.subscribe(...) used to trigger renders.

Canvas/DOM Ready: Elements are sized correctly (usually 100vw/100vh or fixed resolution).

Auto-Sync Animations

Frameworks

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.