The idea
Most page transitions cut, crossfade, or slide a fresh screen in. This one keeps the very thing you clicked: the thumbnail freezes on its current frame, a wave travels through it, and a curtain wipes up to the next page. The element you touched becomes the transition.
Freeze the frame
At click, the thumbnail is cloned onto a canvas at its exact on-screen frame — even a playing video is paused and captured mid-motion, so nothing snaps to a different still.
Drawing a video to a canvas never reads pixels back, so the capture stays cross-origin safe even when the asset has no CORS headers.
The wave
A Gaussian-windowed sine travels left→right across the frame, displacing image columns vertically via column-slice drawImage. Amplitude, spread, cycles and speed are all live — from a gentle ripple to a hard surge.
Curtain & reveal
The frozen frame rises to the top, then a clip-path curtain wipes bottom→top while the next page slides up from the bottom of the viewport. The handoff is timed so the curtain is about half-raised as the new page arrives.
Single file
The whole thing — cover, detail page, the wave renderer and the live control panel — is one index.html. No framework, no build, no dependencies beyond two webfonts. It is the same transition that drives this site, distilled to its core.