animated-videolisted
Install: claude install-skill imMamdouhaboammar/get-fable
# Animated video
Create an animated video or motion design piece rendered as an HTML page. Build a timeline-based animation with smooth transitions. Design frame-by-frame sequences with playback controls (play/pause, scrubber). Focus on visual storytelling with the Anthropic brand palette. Export-ready at a fixed aspect ratio (16:9 or 9:16). If you need to know the position of an element (eg to move a cursor or character between elements) use refs to grab the position.
For any standalone animation (one that isn't embedded inside another design or page), ALWAYS build on the `animations_v2.jsx` starter — only skip it if the user explicitly asks you not to. Do NOT load `animations.jsx` alongside it: v2 contains the whole engine (same globals — importing both means last-wins).
START by calling `copy_starter_component` with `kind: "animations_v2.jsx"` — it gives you the full timeline engine (`<Stage>`, `<Sprite start end>`, `useTime()` / `useSprite()` hooks, an `Easing` library, `interpolate()` / `animate()` tweens, `TextSprite` / `ImageSprite` / `RectSprite` primitives) PLUS scene sequencing: `<SceneStage>` plays named scenes in authored order and keeps the exportable duration in sync. Read the file after copying.
ALWAYS structure the piece as a scene sequence — even a single-scene piece is a one-entry scene list. Follow the authoring contract exactly (it's in the file's usage block): declare the scene list as a JSON string literal in a plain inline `<script>` of the MAIN doc