Pawprint motion
Motion is part of every component, not a separate showcase. It is gentle and playful, never faster than 0.3 s for interaction and never longer than 1.4 s for chart reveals.
| Pattern | Behavior | Where |
|---|---|---|
| Card lift | Rises 3px with a deeper shadow on hover, 250 ms, soft ease-out | Cards, plan cards, pet cards |
| Paw wag | Rotates 14 degrees left and right once on hover | Paw icon in buttons and cards |
| Avatar tilt | Rotates 8 degrees and scales 6% on card hover | Pet avatar |
| Chart draw | Lines draw in over 1.4 s, bars rise with a 70 ms stagger, rings sweep clockwise | All pet charts |
| Press | Buttons scale to 97% on press | Buttons |
| Focus | Ring fades in, 4px soft glow on inputs | Forms |
| Page entrance | Sections fade from 45% opacity, 280 ms | Every page (shared motion) |
Reduced motion: all animations and transitions are removed and charts show in their final state. Theme toggle: bottom-right, remembers the choice, follows the light and dark palettes in Foundations.