# Isometric Motion

Build animations and interactive elements (explainers, figures, hero visuals...

- Repository: https://github.com/dzhng/skills (1394 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add dzhng/skills --skill isometric-motion -g -a claude-code -y`
Codex: `npx skills add dzhng/skills --skill isometric-motion -g -a codex -y`
Cursor: `npx skills add dzhng/skills --skill isometric-motion -g -a cursor -y`
Gemini CLI: `npx skills add dzhng/skills --skill isometric-motion -g -a gemini-cli -y`

## Description

Build animations and interactive elements (explainers, figures, hero visuals, step-through walkthroughs) in the crafted isometric "Anatomy" style, with many small precise solid parts, four-tone shading, correct painter's order, a framed card with title, hint and live readout, and calm eased motion. Works for physical machines and for abstract concepts (e.g. how an LLM picks its next token), as SVG/HTML or React/Next.js, with optional in-perspective WebGL shaders. Use this whenever someone wants an isometric animation, interactive element, explanatory diagram or figure for docs, a blog post, a landing page or an article, a "Linear-style" or "premium" technical drawing, or an SVG that shows how a system, algorithm or component works, even if they never say "isometric".

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

# Isometric Motion

> Copied from [wheresryan22/anatomy](https://github.com/wheresryan22/anatomy) (MIT, see `LICENSE`) and repurposed for animations and interactive elements in the same style.

This skill makes figures like a small instrument on a bench: a heavy base on feet, rails with tick rulers, a carriage on bushings, knurled knobs, coil springs, a dial gauge whose needle moves, screws as tiny dots. The reader understands the idea because they recognise the machine. Every number the figure shows comes from the same model that moves its parts.

Nine complete examples ship with the skill. Open the closest one before you start. Each framework-free example is built with `node examples/<name>/build.mjs`, which writes a standalone HTML page next to the script; add `--light` for the light theme.

The rest: https://github.com/dzhng/skills/blob/HEAD/skills/graphics/isometric-motion/SKILL.md