A client-side transition effect that captures the viewport, slices it into square tiles, and flips each one to reveal the destination. No frameworks. No build tools. Just the platform.
The current viewport is screenshotted pixel-perfectly using html2canvas, producing a canvas of exactly what the user sees.
Both the outgoing and incoming pages are divided into a grid of square tiles. Each tile becomes a 3D card with front and back faces.
Tiles flip in a staggered, randomised order using CSS rotateX. The easing curve gives each flip a satisfying, physical arc.
Client-side DOM-to-canvas rendering. Captures the viewport without any server round-trip.
GPU-accelerated rotateX, preserve-3d, and backface-visibility for smooth tile flips.
Bridges the screenshot across a real page navigation. JPEG compressed to stay within quota.
Page transitions on the web are either trivial fades within a single-page app, or they don't exist at all. Real multi-page sites — where the address bar actually changes — get nothing.
Mirage solves this by capturing the outgoing page as an image, storing it in sessionStorage, navigating to the real destination URL, and reconstructing the transition on arrival.
The captured screenshot is sliced into a grid of square tiles. Each tile is a CSS 3D card — the front face shows the old page, the back face shows the new one. Tiles flip in a randomised, staggered sequence.
The nav bar is excluded from the capture and fades independently, staying responsive throughout. Once the last tile lands, the overlay is removed and the live DOM takes over.
Captures the DOM as a canvas at device pixel ratio. JPEG-compressed at 85% quality for sessionStorage transfer.
Each tile uses rotateX(180deg) with preserve-3d and backface-visibility hidden. GPU-accelerated on all modern browsers.
No pushState tricks. Each page is a standalone HTML file. The address bar, bookmarks, and back button all work natively.
An inline script runs before first paint, reading sessionStorage and covering the viewport with the old screenshot until the flip grid is ready.
This is a live prototype. Click any link in the navigation to trigger the Mirage transition. Use the column control at the bottom of the screen to adjust the grid density.
The effect works across all four pages. Each navigation is a real page load — check your address bar.
Vanilla HTML, CSS, and JavaScript. One external dependency: html2canvas for DOM-to-canvas rendering. No frameworks, no bundlers, no build step.