# Dimensional Drawing Motion

Turn a finished dimensional drawing sheet into a ~10 s Apple-style motion film, lines...

- Repository: https://github.com/enesozturk/dimensional-drawing (1717 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-10-24
- Runs scripts: yes, review before use

## Install

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

## Description

Turn a finished dimensional drawing sheet into a ~10 s Apple-style motion film, lines draw themselves in, the camera pulls back, layers lift into an exploded view, the full sheet resolves. Use after the dimensional-drawing skill, or when asked to animate a spec sheet or anatomy drawing.

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

# Dimensional drawing → motion

Animate a sheet made with the `dimensional-drawing` skill. The film reads like a pen drawing the sheet while a camera moves over it. Same rules as the drawing: monochrome, slots not content, variable codes, unbranded.

Start from `templates/scene-dialog.js` + `templates/base.css`. It is the reference film (11 s, 1920×1080, 60 fps). Adapt it; do not start blank.

## Where it runs

| You are | Use |
|---|---|
| Claude on claude.ai with the **Motion** artifact type | `adapters/claude-motion.md`. This is the primary, tuned target. |
| Any other agent / no Claude | `adapters/headless/`: Playwright draws each frame, ffmpeg encodes. `npm install`, then `node render.mjs --scene … --css … --out film.mp4`. |

The scene is the same file in both. It only needs a tiny `kit` (`seg, lerp, eo, ei, eio, clamp01, stage, h, css, scene`) and must be a **pure function of time**: `render(t)` sets every property from `t` alone, never from the previous frame. That is what lets a headless renderer jump to any frame.

Other animation libraries (Remotion, Motion Canvas, GSAP, Lottie…) are not tested. Porting is possible because the scene is pure, but check the library's license first (Remotion needs a company license above 3 people).

## Choreography (reference timing, seconds)

Scene time is scaled with `t = t / 0.85`, so the numbers below run about 15 % faster on screen. Change that one factor to speed up or slow down the whole film.

The rest: https://github.com/enesozturk/dimensional-drawing/blob/HEAD/skills/dimensional-drawing-motion/SKILL.md