example-lottie
Lottie integration patterns for Helios. Use when rendering Lottie (Bodymovin) JSON animations synchronously with Helios.
Best use case
example-lottie is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Lottie integration patterns for Helios. Use when rendering Lottie (Bodymovin) JSON animations synchronously with Helios.
Teams using example-lottie 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/lottie/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How example-lottie Compares
| Feature / Agent | example-lottie | 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?
Lottie integration patterns for Helios. Use when rendering Lottie (Bodymovin) JSON animations synchronously with Helios.
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
# Lottie + Helios
Integrate Lottie (lottie-web) with Helios by manually seeking the Lottie instance based on the Helios timeline.
## Quick Start
```typescript
import { Helios } from '@helios-project/core';
import lottie from 'lottie-web';
import animationData from './animation.json';
const helios = new Helios({ fps: 30, duration: 5 });
const container = document.getElementById('lottie-container');
// 1. Load Animation (Autoplay OFF)
const anim = lottie.loadAnimation({
container,
renderer: 'svg', // or 'canvas'
loop: false,
autoplay: false, // Critical
animationData
});
// 2. Drive with Helios
helios.subscribe(({ currentFrame, fps }) => {
// Convert to milliseconds
const timeMs = (currentFrame / fps) * 1000;
// Seek to exact time
// Second arg 'false' means "time based", not "frame based"
// (Lottie frames != Helios frames usually)
anim.goToAndStop(timeMs, false);
});
```
## Key Patterns
### Time-Based Seeking
Lottie animations have their own internal frame rate. It is usually safer and smoother to seek by time (milliseconds) rather than trying to map Helios frames to Lottie frames, unless you strictly control both.
```javascript
anim.goToAndStop(timeMs, false);
```
### Renderer Choice
- **`svg`**: Good for crisp vectors in DOM mode.
- **`canvas`**: Better for performance in Canvas mode or complex scenes.
## Source Files
- Example: `examples/lottie-animation/`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-signals-animation
Learn how to use Helios Signals for high-performance, fine-grained reactivity. Use for complex dependency graphs or when optimizing performance.
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-gsap
Patterns for using Helios with GSAP (GreenSock). Use when integrating GSAP timelines with the Helios timeline for precise scrubbing and rendering.