Keep scrolling
The “Crystal Shatter” transition below is driven entirely by your scroll position. Scroll slowly to study it, fast to feel it.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
Everything begins here.
This is the section your visitors are leaving. Watch how it hands the stage over.
And lands right here.
A clean, 60 FPS arrival. The reading window before the handoff keeps this fully legible until the moment it animates.
That's the transition.
Resolve it by slug through transitionRegistry, or pass the component directly via <Section transition={...}>.