Animation Principles
The motion rules every component follows.
Motion must mean something
Every animation in Wancraft answers a question for the user: did it register? (press feedback), where did it go? (layout transitions), what should I read first? (staggers), is it following me? (springs). Decoration that answers nothing is removed.
Springs for physics, easing for editorial
- Physical interactions — following a pointer, dragging, toggling — use springs, so motion can be interrupted naturally.
- Editorial transitions — text reveals, page-level choreography — use precise easing curves (the house curve is
cubic-bezier(0.22, 1, 0.36, 1)).
Animate cheap properties
Components animate transform and opacity wherever possible. Pointer-driven effects write to motion values or CSS custom properties instead of React state, so moving the mouse never re-renders the component tree.
Reduced motion is a first-class state
When prefers-reduced-motion: reduce is set, components switch to a designed static state: magnetism turns off, reveals show their final text, marquees stop and become scrollable, continuous canvases draw a single frame.
Test it
In Chrome DevTools open the Rendering panel and set Emulate CSS media feature prefers-reduced-motion toreduce.