I · Foundations / 07
Motion
The light, the marks and the materials everything else is made of.
Motion#
Calm by default, alive on intent. Motion shows where something came from and where it went; everything can be interrupted; reduced motion keeps every state and drops the travel.
Signature moves
One gesture of our own (the route), and a handful of supporting ones. Try them.
Use
Relationships only: item to boss, boss to dungeon, step to step. It draws once, when the relationship appears.
Avoid
Decoration. If nothing is being connected, nothing draws.
Lightforge Breastplate
Item Level 63
ChestPlate
Requires Level 58
Classic Era drop (unconfirmed in Forever): General Drakkisath, Blackrock Spire
Use
Items you might pick up: a little tilt toward the pointer and a sheen where the light falls. Off under reduced motion and on touch.
| Movement | Tool | Rule | Reduced motion |
|---|---|---|---|
| Scene changes: stage, route, traveller | GSAP (Flip, DrawSVG, MotionPath) | Once per change; interruptible | Arrives in place, route drawn |
| Hover, press, indicators | CSS transitions, linear() springs | 90–450ms; transforms and opacity | Instant |
| Overlays: tooltips, menus, dialogs | CSS @starting-style, allow-discrete | Fade and a short rise | Fade only |
| Theme | View Transitions API | Twilight sweeps in from the switch | Swaps at once |
| Painted world | Image layers, CSS animation | Transforms and opacity; paused off-screen | Still |
| 3D mark | Three.js, loaded once the page is idle | Draws only while it moves | The vector mark |
| Vistas, parallax | CSS scroll-driven animation | Where supported only | Still |
| Across pages: icons, portraits | React ViewTransition | Same object, same name, one morph | Cross-fade |