Route transition examples
Isolated route-transition patterns for the Next.js App Router.
Read the documentation ->- 01
Image growthA selected image grows to fill the viewport before the destination commits.Override - 02
Expanding seamThe clicked row splits the outgoing index as an image expands from its upper edge.Override / page DOM - 03
Theme wipeAn incoming theme-colored panel covers the outgoing page before commit.Preset / no image - 04
Image wipeThe destination image wipes over the outgoing page, then hands off at commit.Preset / image - 05
Image-track translationA horizontal image track translates across the outgoing page before commit.Preset / image - 06
Curtain panelsStaggered panels assemble the destination's settled background.Preset / no image - 07
Mosaic assemblyFour image tiles enter independently and settle into a fixed grid.Preset / images - 08
Image zoomA destination image zooms out into its full-viewport settled state.Preset / image