refactor: overhaul view transitions with granular per-page animation components

Browse Source

- Replace single `<ViewTransition>` wrapper in layout with `FadeTransition` and `DirectionalTransition` components applied per page
- Add `components/page-transition.tsx` with reusable transition wrappers
- Expand view transition CSS with named classes: fade, slide, nav-forward/back, morph, text-morph, scale — all driven by CSS custom property durations
- Use React `<ViewTransition name=... share="text-morph">` for shared note title element between list and detail views
- Wrap comments suspense boundary with enter/exit slide transitions
- Add `persistent-nav` and `persistent-footer` view-transition-name groups to keep chrome static during navigation
- Fix reduced-motion override to target delay and duration instead of `animation: none`
- Add tracking-tight and letter-spacing tweaks to home page typography

...

This commit is contained in:

Jake Jarvis

2026-04-25 10:50:31 -04:00

parent ad90539df4

commit b2416ff0db

16 changed files with 1091 additions and 671 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

pnpm-lock.yaml

Generated

+572 -553

File diff suppressed because it is too large Load Diff