Build a reopening page for a fictional 1938 seawater pool, Brinewater Lido, where a small window grows to fill the screen on scroll. Use a full screen scroll container on cream #f6efe2 with navy text #0f2a3d and coral #ef6f5e. The first section is 290vh tall with a sticky 100vh stage. In it sits an inline SVG of the lido at dawn: peach sky, sea, an Art Deco diving tower, striped huts, bunting and a pool in perspective (teal #22a7b4) with coral and white lane ropes and three swimmers drifting away. Clip it with clip-path inset to a 28px radius window, 34% wide and 50% tall on desktop, 80% by 36% below 820px. Serif words "Swim it" and a coral italic "again." flank the window, or sit above and below it on phones. Map scroll to a 0 to 1 progress over 82% of the section, smooth it with a 0.16 lerp and an ease in out cubic: the inset and radius shrink to 0, the scene scales from 1.32 to 1, the words slide 40vw apart and fade. From 72% an overlay rises 24px with "Reopening Saturday 3 May, 7am", the headline "Fifty metres of seawater, back after six years" and two buttons. Below, three info cards (a snap row on phones), a "Scroll to dive in" pill and a 3px progress bar. Reduced motion shows the open view.
Written by Informeek Studio to recreate this design. Prompts are not deterministic: running it again gives a similar result, not an identical one.
Use it in three steps
- Copy the prompt with the button above.
- Paste it into your tool, such as v0, Lovable, Bolt or Claude.
- Make it yours by drawing your own place inside the window and changing the two words beside it.
About this sticky scroll animation
A sticky scroll animation pins one stage in place while the page keeps scrolling underneath, so scroll distance becomes a dial you can turn. Here the dial opens a window. The page starts with a small rounded view of an illustrated seawater lido between the words Swim it and again, and as you scroll the window widens until the pool fills the whole screen and the reopening details rise into view.
The trick is that nothing is resized. The illustration always covers the full stage and a clip path decides how much of it shows, while the picture inside scales down a little, so it feels like stepping through a frame rather than zooming a photo. The words drift apart and fade, which makes room and tells the eye where to look.
Why the prompt works
- It gives the window size at both ends, 34 by 50 percent on desktop and full screen at the finish.
- It smooths the progress with a lerp and an ease, so a jerky trackpad still looks calm.
- It times the overlay, which only arrives in the last quarter of the scroll.
- It plans the phone layout, stacking the words above and below the window.
Where to use it
Openings, hotel and venue pages, product reveals and travel stories, anywhere one picture should set the scene before the facts arrive.
The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.
