How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Cover: a fixed full-screen layer in the dark colour, above everything, that ignores the pointer.
- Window: the logo shape is cut out of the cover with an SVG mask. It is centred on the screen and starts 60px across on its longest side.
- Zoom: over 2s (ease-in-out), the shape grows by 32,000px on desktop and 12,000px under 1000px wide, always centred. Because the growth is so large, the window passes the screen edges in the first ~0.2s. At the end the cover is removed.
- Wash: a layer in the page's background colour at 30% opacity sits over the page and fades out over the first 12% of the zoom, so the page looks slightly misted through the small window.
- Shape: any solid SVG path. The demo uses a hexagon, the outline of The Design Stack's cube mark.
- Fallbacks: reduced motion skips the intro. If JavaScript never runs, the cover hides itself after 4s.