# Motion

> Hover, scroll and transition behaviors on renovare.org, their timings, and reduced-motion rules.

*Unhurried and organic.*

| 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](https://styleguide.renovare.org/buttons/) or [Boxes & Cards](https://styleguide.renovare.org/boxes/) 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.