example-pixi

Drive PixiJS display object properties from Helios subscription callbacks.

94|6|Updated Aug 12, 2025

Search Tags:#timeline #animation #webgl #pixijs #pixi #helios #binding-timeline

Ready to run

npx skills add https://github.com/BintzGavin/helios --skill example-pixi

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: example-pixi
Source: https://github.com/BintzGavin/helios/tree/main/.agents/skills/helios/examples/pixi
Command: npx skills add https://github.com/BintzGavin/helios --skill example-pixi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Helios subscriptions can directly drive PixiJS scene properties, eliminating manual animation loops and enabling reactive visual effects synchronized to time.

Core Features & Use Cases

Drive PixiJS display object properties (position, rotation, scale) from Helios state.
Bind to document.timeline for frame-accurate rendering in WebGL contexts.
Use Case: create responsive UI widgets or game-like scenes where visuals respond to time-driven subscriptions.

Quick Start

Install PixiJS and Helios in your project, create a Pixi Application, initialize Helios, call helios.bindToDocumentTimeline(), and subscribe to state to update Pixi objects (e.g., rotation based on currentTime).

Frequently Asked Questions about example-pixi

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I drive PixiJS animations with Helios subscriptions?▼

You can drive PixiJS animations with Helios by binding Helios to the document timeline and updating graphic state, such as position and rotation, within a subscription callback.

What is the best way to synchronize WebGL 2D graphics with a time-driven state?▼

Binding Helios to the document timeline provides frame-accurate rendering for WebGL 2D graphics by synchronizing display object properties directly with currentTime values.

Do I need to manually manage animation loops when using Helios with PixiJS?▼

No, you do not need manual animation loops because Helios subscriptions can directly drive PixiJS scene properties, enabling reactive visual effects synchronized to time automatically.

Can I bind Helios to the document timeline for frame-accurate rendering in WebGL contexts?▼

Yes, calling helios.bindToDocumentTimeline() binds Helios to the document timeline to achieve frame-accurate rendering and time synchronization within WebGL contexts.

What PixiJS display object properties can be updated from Helios state?▼

You can drive PixiJS display object properties including position, rotation, and scale directly from Helios state to create responsive UI widgets or game-like scenes.

What libraries are required to synchronize graphics properties with time using this approach?▼

You need both PixiJS and Helios installed in your project to synchronize graphics properties with time by driving the Pixi scene from the Helios subscription loop.