| Behavior | Where | Timing |
|---|---|---|
| Fill grows to 110% | Primary and secondary buttons | 200ms |
| Underline wipe, left to right | Text links | 200ms, ease-in-out-circ |
| Magnetic pull toward the cursor | All buttons (desktop only) | 0.3s, GSAP power1.out |
| Image zooms to 105% | Card and media images | 300ms |
| Tilted photos straighten | Photo tiles and collages | 300ms, ease-in-out-circ |
| Border deepens to Primary 700 | Outlined cards | 300ms |
| Panel fills with Primary 700, text turns white | Filled cards | 300ms |
| Arrow nudges right | Announcements | 200ms |
| Brushstroke drifts on scroll | Heroes | GSAP ScrollTrigger, scrub 1.5 |
Hover any example on Buttons & Links or Boxes & Cards to see these in action.
Rules
- Default transition: 300ms, in-out quad (
transition). Buttons: 200ms. - No bounce, spring or overshoot.
- Motion follows the pointer or the scroll; nothing moves on its own.
- When the visitor prefers reduced motion, turn off magnetic hover and brushstroke drift; keep color and border changes.