How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
Curtain (on load)
- A deep red (#400C01) panel covers the hero. Bottom left: the brand name at 70% opacity. Bottom right: a huge counter (Bebas Neue, 96px to 240px).
- The counter runs from 0 to 100 over 2.4s with an ease-out curve. It holds at 90 until both pictures have loaded (or 8s have passed), and it never restarts if they arrive late.
- 350ms after it reaches 100, the curtain slides up and off the screen (1.3s, cubic-bezier(0.76, 0, 0.24, 1)).
Hero (as the curtain lifts)
- The painting zooms out from 1.35× to its normal size over 3.6s (cubic-bezier(0.22, 1, 0.36, 1)).
- The cloud, the nearest layer, rises from 22% lower and shrinks from 1.7× over the same 3.6s, so the two layers move at different speeds and the scene gets depth.
- Nav, headline, intro line and edition row each rise 24px and fade in over 1.4s, starting 0.9s, 1.1s, 1.3s and 1.5s after the lift.
Water
- Every pixel of the painting stores water height and speed. Each frame, the height spreads to its neighbours (a wave equation with step 1.4) and loses a little energy (× 0.999), and a round dent 5% of the hero wide (intensity 3) is pushed in under the pointer.
- The painting is drawn offset by 0.3 × the water slope, so it refracts, with a sharp highlight (power 60 × 1.5) from a light up and to the left.
- The pointer is tracked on the whole window, so ripples still form when the cursor is over the headline or the cloud. Layout: nav 32px from the edges (brand left with three links; heart, search and account icons, a small dot and a menu icon right). Headline centered at 23% from the top, 452px wide. Edition row at 70.7% from the top. On tablets the links hide; on phones the icons and the middle note hide too. Touch: dragging a finger sideways draws ripples; dragging up or down still scrolls the page. Fallbacks: without WebGL, or if the painting can't be drawn into WebGL, the painting shows as a still image. Reduced motion: no curtain, no zoom, no ripples, everything visible at once.