# Example Signals Animation

> Learn how to use Helios Signals for high-performance, fine-grained reactivity. Use for complex dependency graphs or when optimizing performance.

- Skill: `bintzgavin/example-signals-animation` (Agent Skill)
- Install (CLI): `npx skillmds@latest add bintzgavin/example-signals-animation`
- Raw SKILL.md: https://api.skillmd.com/api/skills/bintzgavin/example-signals-animation/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: bintzgavin (https://skillmd.com/u/bintzgavin)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/bintzgavin/example-signals-animation

---


# 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`