example-signals-animation
Learn how to use Helios Signals for high-performance, fine-grained reactivity. Use for complex dependency graphs or when optimizing performance.
Best use case
example-signals-animation is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Learn how to use Helios Signals for high-performance, fine-grained reactivity. Use for complex dependency graphs or when optimizing performance.
Teams using example-signals-animation should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/signals/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How example-signals-animation Compares
| Feature / Agent | example-signals-animation | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Learn how to use Helios Signals for high-performance, fine-grained reactivity. Use for complex dependency graphs or when optimizing performance.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Signals Animation
Helios exposes a Signal-based reactivity system (similar to SolidJS or Preact Signals) for managing state efficiently.
## Quick Start
```typescript
import { Helios, computed, effect } from '@helios-project/core';
const helios = new Helios({ duration: 10, fps: 60 });
// Access signals directly
const frame = helios.currentFrame; // ReadonlySignal<number>
// Create computed values
const rotation = computed(() => {
return (frame.value / 60) * 360; // Rotate 360 deg per second
});
// React to changes
effect(() => {
const div = document.getElementById('box');
div.style.transform = `rotate(${rotation.value}deg)`;
});
```
## Key Patterns
### Derived State
Use `computed()` to create state that depends on other signals. It only re-evaluates when dependencies change.
```typescript
const progress = computed(() => helios.currentFrame.value / (helios.duration * helios.fps));
const width = computed(() => progress.value * 100 + '%');
```
### Side Effects
Use `effect()` to perform DOM updates or rendering logic. Effects run immediately and re-run whenever any signal accessed inside them changes.
### Performance
Signals are more efficient than `helios.subscribe()` for complex graphs because they update fine-grained dependencies rather than the entire state tree.
## Source
- Example: `examples/signals-animation/`
- API: `packages/core/src/signals.ts`Related Skills
example-vue
Patterns for using Helios with Vue. Use when building compositions in a Vue environment.
example-vanilla
Patterns for using Helios with Vanilla JavaScript/TypeScript. Use when building compositions without a framework, or for simple DOM/Canvas manipulations.
example-threejs
Patterns for using Helios with Three.js and React Three Fiber. Use when creating 3D animations or integrating WebGL scenes.
example-tailwind-animation
Learn how to use Tailwind CSS with Helios. Use for styling compositions and animating with utility classes.
example-svelte
Patterns for using Helios with Svelte. Use when building compositions in a Svelte environment, utilizing Svelte stores for reactive frame updates.
example-solid
Patterns for using Helios with SolidJS. Use when building compositions in a SolidJS environment, utilizing signals for fine-grained reactivity.
example-react
Patterns for using Helios with React. Use when building compositions in a React environment.
example-podcast-visualizer
Workflow for creating a podcast visualizer with multi-track audio mixing and DOM-based synchronization. Use when building audio-reactive compositions.
example-pixi
PixiJS integration patterns for Helios. Use when creating high-performance WebGL 2D animations with PixiJS.
example-p5-animation
Learn how to use P5.js with Helios. Use when creating creative coding sketches or generative art.
example-lottie
Lottie integration patterns for Helios. Use when rendering Lottie (Bodymovin) JSON animations synchronously with Helios.
example-gsap
Patterns for using Helios with GSAP (GreenSock). Use when integrating GSAP timelines with the Helios timeline for precise scrubbing and rendering.