SKILL.md
Isometric (2.5D) Animation
Isometric scenes give explainers, UI walkthroughs, and infographics a built, dimensional feel without true perspective: equal-foreshortened axes, stacked Z layers, extruded blocks, exploded diagrams. The look is geometric and deliberate — depth comes from consistent axes and per-face shading, motion from revealing structure one layer at a time.
When to use
- 2.5D scenes for explainers, product UI, or "how it works" infographics.
- Stacked layers / floors / a tech-stack tower that builds bottom-up.
- Extruded blocks, isometric grids, isometric city/server-rack scenes.
- Exploded-view diagrams that pull apart along Z and reassemble.
- A static iso illustration that needs gentle life: camera drift, parallax, hover lift.
Projection: get the axes right first
Two conventions — pick one and never mix:
- True isometric — all three axes 120° apart; on screen the X/Y ground axes run at ±30° from horizontal. This is the math-correct iso. Use for CSS/Three.js.
- 2:1 dimetric ("pixel-art iso") — tiles drawn 2 wide : 1 tall, so axes sit at ~26.57° (
atan(0.5)). Cleaner pixels, the game-art default. Use for tile/sprite scenes.