AI CSS Animations

Isometric Hairline Animation

Isometric product illustration in motion: 2:1 dimetric objects drawn only in constant grey hairlines, white faces hiding back lines, rounded slabs, one dark accent per frame, every move settling on a spring.

By Chase @cth9191 Oct 4, 2026

Type
skill
Made with
Claude Code
Built in
Canvas
Topics
Line art · Product UI · 3D

The skill

Calm, precise product illustration: objects in 2:1 dimetric isometric on a white ground, drawn only with constant hairlines. Grey silhouettes and edges, lighter inner and receding lines, faces filled white so nearer objects hide farther lines. Rounded slabs and plates with visible thickness, stacked layers, grids of repeated parts (keys, vents, pillars, ports), and one tiny dark accent per frame. Motion on 1s with spring settles; otherwise still. Studied from MIT-licensed isometric line figures (references kept local, never copied).

[…]

## Frame checklist (on top of the skill's grammar/FRAME.md)

1. **Every edge sits on an iso axis** (slope ±0.5 or vertical), except a part that is visibly rotating.
2. **Hairlines are constant** at any zoom and the same weight everywhere (2.0px at 1080); only the colour changes (edge vs inner).
3. **Nearer faces are white and hide what is behind** — no line shows through a solid; check the painter's order wherever two objects overlap on screen.
4. **One dark accent, and it is the focus** (the cursor, the live LED). Other lamps toggle between outline and grey, never dark.
5. **Detail comes from repetition** — a grid of keys, vents, ports, plates — not from texture or shading. Big faces stay empty.
6. **Slabs have thickness and rounded corners**, and stacks show their layers (a gap or an inset between plates).
7. **White space around the object** is part of the look: one object group in the middle, the caption well below it, nothing touching the frame edge.
8. **Every move settles on a spring** and then holds still.
9. No shadows, gradients, grain or colour.

From Chase's repo, under the MIT license.

Similar prompts