# Motion Figure

Builds figures that move or respond to the reader, such as sliders and animated diagrams.

- Repository: https://github.com/rohitg00/ai-engineering-from-scratch (76237 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-29
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add rohitg00/ai-engineering-from-scratch --skill motion-figure -g -a claude-code -y`
Codex: `npx skills add rohitg00/ai-engineering-from-scratch --skill motion-figure -g -a codex -y`
Cursor: `npx skills add rohitg00/ai-engineering-from-scratch --skill motion-figure -g -a cursor -y`
Gemini CLI: `npx skills add rohitg00/ai-engineering-from-scratch --skill motion-figure -g -a gemini-cli -y`

## Description

Builds figures that move or respond to the reader, in three tiers: SMIL animations and slider widgets inside lessons, interactive mechanism figures that show the named parts of a real system with a computed verdict, and ordered dither bands in the course palette. Triggers: "animated figure", "add a slider widget", "interactive figure", "show how this system works", "make this diagram move", "dither masthead", "mechanism figure", "figure fence".

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Motion figure

This skill makes figures that move or respond to input. It has three tiers. Use this skill with Claude, Cursor, Codex, OpenClaw, Hermes, or any agent that reads SKILL.md.

| Tier | What it makes | Where it goes |
|---|---|---|
| 1. Lesson figure | Declarative SMIL animation, or a slider widget that redraws an SVG. Both mount from a ```figure fence. | Course lessons |
| 2. Mechanism figure | An HTML panel that shows the named parts of a system. The reader drives one control and reads a computed verdict. | Standalone pages, READMEs, essays, the course site outside lessons |
| 3. Dither field | A WebGL band of ordered dither dots in the paper, accent, and ink colours, with four seeded motions. | Page mastheads and section breaks |

Tier 1 has the most rules, because the lesson runtime has hard limits. Tiers 2 and 3 have their own reference files.

## When to use

- A lesson explains a process that changes over time: a token that moves through stages, a queue that fills, a loop that repeats.
- A lesson explains a formula where one input changes the output: learning rate, temperature, chunk size, batch size.
- An author writes "animate this figure", "add a slider", or "make the diagram interactive".
- A page needs a demo where the reader changes one thing and sees what the system does: a cache, a queue, a context window, a router. Use tier 2.
- A page needs a slow moving header in the course colours. Use tier 3.

## When not to use

- The idea is a fixed structure with no time axis and no input. Make a static SVG figure. The sibling skill `blueprint-figure` covers static figures.
- The page is a full explainer page with its own state model and machine geometry. The sibling skill `isometric-explainer` covers that.
- You only need palette, fonts, or prose rules. The sibling skill `course-style` holds those. This skill copies the parts it needs into `references/tokens.md`.

## Method

The rest: https://github.com/rohitg00/ai-engineering-from-scratch/blob/HEAD/.claude/skills/motion-figure/SKILL.md