Elevation & Motion
Elevation
Five soft shadows (--shadow-1 → --shadow-5), each derived from the theme's
text colour so they re-tone automatically — dark themes get paler shadows. Their
presence is gated by the per-theme --depth knob (some themes are deliberately
flat).
The last card is the neobrutalist flat-offset shadow the components lean on
(a 2px border in --text-1 plus a hard 3px 3px 0 shadow). The Bevy storybook
reproduces both the soft and the hard styles with BoxShadow.
Motion
Durations and easings, composed into named motion presets:
| Preset | Duration | Easing | For |
|---|---|---|---|
--motion-press | 80ms (fastest) | ease-3 | button press |
--motion-hover | 150ms (fast) | ease-3 | hover states |
--motion-enter | 250ms (base) | ease-out-3 | elements entering |
--motion-exit | 150ms (fast) | ease-in-3 | elements leaving |
--motion-emphasized | 400ms (slow) | ease-spring-2 | emphasized, springy moves |
Base durations: fastest 80ms · fast 150ms · base 250ms · slow 400ms. Easings
range from gentle (ease-1…ease-5) to expressive (ease-elastic-3,
ease-squish-2, the ease-spring-2 linear() spring).