jaspermayone.com
Personal Website for @jaspermayone.com
jaspermayone.com
claude for view transitions
+56
+56
CLAUDE.md
+56
CLAUDE.md
···
63
63
- Preconnect links for external resources
64
64
65
65
When making changes, ensure you maintain the existing patterns for component structure, TypeScript typing, and Tailwind styling conventions.
66
+
67
+
## View Transitions
68
+
69
+
This project uses the **View Transitions API** to provide smooth, animated transitions between pages.
70
+
71
+
### Implementation
72
+
73
+
- **Library**: `next-view-transitions` (v0.3.4+)
74
+
- **Setup**: Root layout wrapped with `<ViewTransitions>` component
75
+
- **Router**: All navigation uses `useTransitionRouter()` from `next-view-transitions`
76
+
- **Internal Links**: Use `Link` from `next-view-transitions` instead of `next/link`
77
+
78
+
### Transition Types
79
+
80
+
The site implements several types of transitions:
81
+
82
+
1. **Page Transitions** - Smooth crossfade (300ms) when navigating between pages
83
+
2. **Shared Elements** - Specific elements transition smoothly across pages:
84
+
- `page-title` - The animated page title (400ms)
85
+
- `main-navigation` - The navigation menu (350ms)
86
+
- `profile-image` - Profile picture on home page (500ms)
87
+
- `footer` - Footer element (200ms)
88
+
89
+
### CSS Configuration
90
+
91
+
View transition styles are defined in `/src/styles/globals.css`:
92
+
93
+
- Default page transition uses fade-in/fade-out animations
94
+
- Shared element transitions have custom durations
95
+
- All animations use browser-native View Transitions API
96
+
97
+
### Browser Support
98
+
99
+
- ✅ **Chrome/Edge 111+**: Full support
100
+
- ✅ **Safari 18+**: Full support
101
+
- ⚠️ **Firefox**: Pending (graceful degradation to instant navigation)
102
+
- **Fallback**: Pages navigate normally without transitions in unsupported browsers
103
+
104
+
### Adding Transitions to New Elements
105
+
106
+
To add a view transition to a new element:
107
+
108
+
1. Add `viewTransitionName: "your-element-name"` to the element's style object
109
+
2. Define transition styles in `globals.css`:
110
+
```css
111
+
::view-transition-old(your-element-name),
112
+
::view-transition-new(your-element-name) {
113
+
animation-duration: 0.4s;
114
+
}
115
+
```
116
+
117
+
### Important Notes
118
+
119
+
- View transitions only work for **internal navigation** (same-origin)
120
+
- External links bypass view transitions automatically
121
+
- Transitions are purely visual and don't affect page load performance