REFERENCE
- Gallery page: https://magpui.com/en/i/shattered-glass-page-transition-f1fad4
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/shattered-glass-page-transition-f1fad4/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/shattered-glass-page-transition-f1fad4/clip.mp4
- Original post: https://x.com/cyze_dev/status/2117320808406167615 by @cyze_dev
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD
A page transition where the current screen shatters like a pane of glass. When the user clicks a CTA (or a theme swatch), cracks radiate from the click point, the screen breaks into 40-80 sharp shards that refract what is behind them, tumble toward the viewer and fall out of frame, and the next page (or the same hero in a new color theme) is revealed underneath. It must feel physical and a bit violent but crisp, about 1.2 seconds, with real refraction and a subtle chromatic split on shard edges.
DESIGN SYSTEM
- Demo page: full-viewport hero, top nav (small logo left, 3 text links center at 13px, 'Log out' + pill CTA right). Centered headline in a bold monospace, 64-72px, line-height 1.05, two lines; subline 14px at 70% opacity; two buttons below (filled pill 40px tall radius 20px, and an outlined ghost pill).
- Themes for the swatch row at the bottom (6 dots of 14px with a 2px ring on the active one): crimson #8E0E1A -> #3A0509 with CTA #FF3B4E; violet #4B1FA8 -> #1A0B3D with CTA #C04BFF; electric blue #0B3A8C -> #050F26 with CTA #39D2FF; forest #0F3D22 with CTA #3DFF8F; paper #F2F2F0 with dark CTA #111; peach #F7DDB8 with CTA #2A1A0E. Each background is a soft vertical radial gradient with a faint grid of thin lines at 4% opacity.
- Shards: clear glass, 1px bright edge highlight #FFFFFF at 70%, RGB split on edges of 1.5-3px (red and cyan offsets), slight specular streak.
MOTION
- Crack (0-180ms): from the pointer, 8-12 radial crack lines and 2-3 concentric rings draw in with stroke-dashoffset, white at 80%, ease cubic-bezier(0.2,0.8,0.2,1); a small flash at the impact (opacity 0 -> 0.35 -> 0, 120ms).
- Break (180-1300ms): shards (Voronoi cells, denser near the impact) get an impulse away from the impact point and toward the camera (z +200 to +900px), random angular velocity 2-8 rad/s, gravity pulls them down; each shard fades to 0 in the last 300ms of its own lifetime. Overall easing feels like cubic-bezier(0.16,1,0.3,1) for the burst then linear fall.
- Reveal: the new theme sits underneath from the first frame; the headline of the new page does a 200ms RGB glitch offset (+-4px) as the last shards leave.
- Camera: a tiny shake (2-4px, 3 oscillations, 250ms) on impact.
SECTIONS
Parts: underlying next page, captured current page as a texture, crack overlay, shard layer, swatch row.
States: idle, crack, shattering, revealed, reduced motion.
IMPLEMENTATION
- Three.js (or OGL) full-screen scene above the DOM. On trigger, snapshot the current page into a texture (render the hero into a canvas, or keep the hero itself rendered in WebGL; html-to-canvas tools are fine for a demo), then switch the DOM to the next theme underneath.
- Pre-compute a Voronoi fracture of the viewport rectangle seeded at the click point; extrude each cell 4-8px into a thin prism. Shard material: a refraction shader that samples the page texture with UV offset by the shard normal (strength 0.02-0.04) and samples the R and B channels with a small extra offset near the edges for the chromatic split, plus a Fresnel edge highlight.
- Simple custom physics (velocity, angular velocity, gravity 1800px/s^2) is enough; no physics engine needed. Dispose geometries and textures after the transition.
- prefers-reduced-motion: skip the shatter and cross-fade the theme in 200ms.
- Keyboard: the CTA works with Enter/Space and triggers from the button's center; keep focus on the new page's main heading after the transition.
- Performance: cap shards at 80, devicePixelRatio max 2, one draw call with instancing if possible; keep the whole effect under 1.4s.
ADAPT TO THE PROJECT
Reuse the project's existing design tokens, fonts and buttons for the page underneath; map the theme colors to the closest existing tokens. Never copy logos, brand names or copy from the original; use placeholder headline and links.
SUCCESS CHECK
- Clicking the CTA at different points makes the cracks and the burst start from that exact point.
- Shards visibly refract the old page and show a thin red/cyan fringe on their edges, then all leave the screen within about 1.3s.
- With reduced motion enabled, the theme changes with a short cross-fade and no shards.
