New lib/anim.js (countUp, fadeSlideIn, segThumb), all reduced-motion
aware:
- Shared-element morph: tapping a card tags its art with
view-transition-name; the detail skeleton now renders the real sprite
at hero size (router passes the match, animates the skeleton mount), so
the sprite flies from the grid into the hero and the skeleton→content
swap is seamless.
- Segmented controls (Team / Search / Breeding) get a sliding pill that
measures each button and eases between them.
- Count-ups: the dex-feed progress number and the detail Stats total
tick up.
- Detail tab content fades/rises on switch.
- Global :active scale-press on buttons/chips/rows, plus soft
background/border transitions.
- Hero sprite has a slow idle bob.
- Router swallows the AbortError when a fast follow-up nav skips an
in-flight view transition.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017Ve7HLspzeG2xDPtJQ8vmu
- Router uses the View Transitions API to cross-fade placeholder -> content
on navigation (falls back to a plain swap where unsupported or when the
user prefers reduced motion)
- Shaped shimmer skeletons for the Pokémon / move / item detail pages
(src/components/skeletons.js) so there's no layout shift on load
- Views fade+rise in; progress ring draws its arc from empty on mount;
caught / seen / favourite toggles pop when switched on
- Offline indicator pill (online/offline events) + 'Back online' toast
- All new motion gated behind prefers-reduced-motion
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
