Motion & interaction
Quick, quiet feedback: fills wipe, underlines thicken, cards lift. One easing curve, three durations.
Tokens
| Token | Base | Note |
|---|---|---|
--motion-duration-fast | 150ms | colours, underlines |
--motion-duration-base | 250ms | movement, button fill wipe |
--motion-duration-slow | 700ms | story visual cross-fade |
--motion-ease | cubic-bezier(0.2, 0, 0, 1) | |
--motion-nudge-icon | 2px | button arrow ↗ on hover |
--motion-lift-card | 8px | work card on hover |
Hover and focus
- Buttons: a fill wipes up from the bottom (cream by default,
--color-accent-mainon cream pages and in these examples) and the label turns black in step with it; the ↗ arrow nudges up and right. No stroke. - Nav: an underline appears; the current page stays orange.
- Text links: the underline thickens.
- Work cards: lift 8px and the title underlines.
- Chapter pills: a hovered pill is tinted with 30% accent; the current one is filled.
- Focus: keyboard focus gets the hover feedback plus a visible ring in
currentColor.
Hover rules live only inside @media (hover: hover), so touch devices don't get
sticky hover states after a tap.
Story scroll cross-fade
Every visual change in a case study is the same cross-fade (--motion-duration-slow),
no scrolling hand-offs between sections.
Reduced motion
With prefers-reduced-motion, movement and durations go to zero (no lift, no nudge,
fills swap instantly); colour and underline feedback stays.