Menu
PixiJS integration patterns for Helios. Use when creating high-performance WebGL 2D animations with PixiJS.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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 | example-pixi |
| description | PixiJS integration patterns for Helios. Use when creating high-performance WebGL 2D animations with PixiJS. |
Integrate Helios with PixiJS by driving the Pixi scene properties from the Helios subscription loop.
import { Helios } from '@helios-project/core';
import { Application, Graphics } from 'pixi.js';
// 1. Initialize Pixi
const app = new Application();
await app.init({ resizeTo: window });
document.body.appendChild(app.canvas);
// 2. Initialize Helios
const helios = new Helios({ fps: 30, duration: 5 });
// 3. Create Scene
const rect = new Graphics().rect(0, 0, 100, 100).fill(0xff0000);
rect.pivot.set(50, 50);
rect.position.set(app.screen.width / 2, app.screen.height / 2);
app.stage.addChild(rect);
// 4. Bind Timeline (Crucial for Renderer)
helios.bindToDocumentTimeline();
// 5. Drive Animation
helios.subscribe((state) => {
const t = state.currentTime;
// Update properties based on time
rect.rotation = t * 1.5;
rect.x = (app.screen.width / 2) + Math.sin(t) * 100;
});
PixiJS and other WebGL libraries often have their own internal tickers. To ensure frame-perfect rendering during export (via Renderer), you must bind Helios to the document.timeline.
helios.bindToDocumentTimeline();
This allows the Renderer (via CdpTimeDriver) to control the global clock, which PixiJS respects if properly synchronized.
If you are strictly driving the scene via helios.subscribe(), you might not need Pixi's internal ticker for animation logic, though Pixi still needs to render. The standard pattern is to let Pixi render naturally but update state in the Helios subscriber.
examples/pixi-canvas-animation/