A theatrical, CSS 3D page transition that slices the screen into a grid of tiles and flips each one — like a departure board — to reveal the incoming page. No frameworks, no build tools. Just the browser.
↗VISIT SITEWhat if navigating between pages felt like something physical was happening? Not a fade. Not a slide. Something with weight. When a user clicks a link, the current page is captured as a pixel-perfect screenshot, sliced into a grid of square tiles, and each tile flips around its horizontal axis to reveal the destination page on the reverse side. Once every tile has landed, the image is swapped back to the live DOM and the user continues browsing as normal.
The moment a link is clicked, html2canvas takes a screenshot of the current viewport. The result is stored and the real DOM is hidden behind it.
The screenshot is divided into a grid of square cells — 4 columns by default, rows calculated automatically to fill the viewport.
The destination page is rendered off-screen and captured in the same way. Each grid tile now has a front face (current page) and a back face (incoming page).
Tiles flip in a staggered, randomised order using CSS rotateX(180deg) with preserve-3d and backface-visibility hidden. The easing gives each flip a satisfying, physical arc.
Once every tile has settled, the image overlay is removed and the live DOM is restored. The user can scroll, click, and interact immediately.
Squares flip cleanly around a horizontal axis without looking stretched or compressed. They also create a satisfying, uniform grid regardless of viewport aspect ratio.
A sequential left-to-right or top-to-bottom flip feels mechanical. Randomising the order gives the transition an organic, cascading quality — like tiles on a game board turning over.
The address bar matters. Users expect the URL to change when they move between pages. Bookmarks, sharing, and the back button all need to work. Each page is a standalone HTML file.
It survives a page navigation but not a tab close, which is exactly the lifecycle needed. The JPEG is compressed to stay well within the 5 MB quota.
Some CSS features — complex filters, certain pseudo-elements, cross-origin images without CORS headers — may not render perfectly. For most content-driven pages, the result is indistinguishable from the real DOM.
Screenshotting takes 50–200ms depending on page complexity. On content-heavy pages this may introduce a brief pause before the animation begins.
CSS 3D transforms are GPU-accelerated on modern mobile browsers. The effect runs smoothly on recent devices, though reducing columns to 2–3 is recommended on lower-end hardware.
The transition respects prefers-reduced-motion in principle — a production implementation should bypass the animation entirely when that media query matches.