How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
Layout
- The hero is as tall as 56% of its width (never more than 1074px, never less than 650px), with the background colour filling it. The product photo is centred, 62% of the hero's height tall (never wider than 60% of the screen), starting 34% of the way down, and at rest turned 6° clockwise. It can be tall or wide.
- The headline is huge (9.64% of the width, between 76px and 185px), centred at the top, uppercase, tightly set, on two short lines (a \n in the text breaks the line). The photo sits in front of the headline and only just reaches its lower edge; the splats sit behind the headline.
- The small copy sits bottom left at 3.35% from the edge, 338px wide.
On load
- The headline rises 80px while fading in (1.1s, a quick ease-out). The product drops in from 40% of its height lower, a little smaller and turned the other way, to its place, with a small overshoot (1.4s, after 0.15s). The splats and the copy fade in (1s, after 0.6s and 0.8s).
The ink (mouse and pen only)
- Moving the pointer over the hero lays down circular blobs along its path, one every 6px or so. The faster the pointer moves the bigger the blobs (28px plus 0.9 times the distance moved in a frame, never over 70px), each with a little random wobble.
- Each blob shrinks away over about 80 frames (it loses 0.012 of its size per frame) and then disappears, so the trail dissolves from its tail. No more than 900 blobs exist at a time.
- The blobs are drawn on a canvas in the background colour, with a darker copy of each (half the brightness, offset 5px right and 4px down, 7px bigger) under it as a rim. The canvas is blended with mix-blend-mode: difference, so the background colour turns black where the ink is and the black headline turns the background colour inside it. A "goo" SVG filter (blur, then a hard alpha threshold) fuses the blobs into one liquid shape.
- The ink canvas stays above the headline and below the photo, so the product is never painted over. (The photo is in front of the ink, so keep the headline's lower line clear of it.)
Pointer depth (mouse and pen only)
- The pointer's position over the hero is turned into two numbers from -1 to 1, smoothed so each frame closes 8% of the gap.
- The product moves 40px sideways and 24px up or down, tips up to 14° forward or back and 18° left or right toward the pointer, and rotates 4° more. Its shadow slides 30px the opposite way. The headline moves 18px and 10px against the pointer; the three splats move and spin by different amounts (60px, -45px and 80px sideways) so the layers separate.
- When the pointer leaves, everything eases back to rest.
Scroll
- Scroll progress is how far the hero has moved up past the top of the screen, from 0 to 1 over its height, smoothed (12% per frame). It works on touch screens too.
- As it grows the product lifts 150px, turns 14° the other way and grows 16%. The headline lifts 120px; the splats lift 200px, 140px and 260px; the small copy lifts 60px and fades out. Fallbacks: touch screens and other devices that can't hover get no ink and no pointer tilt (so scrolling is never hijacked) but still get the load animation and the scroll effect. With "reduce motion" on, nothing animates: the ink is off, the product doesn't tip and everything is simply in place. The animation loop only runs while the hero is on screen and something is moving, so a still page costs nothing.