How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Blob: a noisy liquid shape around the (smoothed) cursor position. Its edge is rippled by moving noise, which also flicks off separate droplets. It shows the next photo inside and grows in when the pointer is over the hero (about 40% of the screen height across) and shrinks away when it leaves.
- Click: the blob grows until it covers the whole screen (fast at first, settling by about 0.7s). Then the next photo becomes the base, and a fresh blob regrows under the cursor showing the photo after that.
- Type rows: three rows, each a 9vw-tall window. The headline is 11vw ultra-condensed uppercase (line-height 0.9) in white. - On click, each row's line slides up and out while the next slides up in from below (1s, cubic-bezier(0.87, 0, 0.13, 1)). - Clicks during a change are ignored.
- Layout: a centred area 80% wide. A nav along the top has the logo (3vw tall) and two links on each side (0.75vw bold uppercase, 3vw apart). The rows sit on the left, vertically centred, with a white button (2.2vw condensed) 2vw below. On the right is a column 17% wide with a small right-aligned line, a 10vw-tall photo and two short paragraphs.
- Under 1000px: the layout widens to 90%, the type doubles in size (18vw windows, 22vw type), the right column hides, and a tap works like a click.
- Fallbacks: without WebGL the photos simply cross-fade on click. Reduced motion does the same, with the type swapping instantly.