How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
Layout
- Padding is generous (96px to 160px on top). The top row has the giant sentence on the left (9.4% of the width, between 56px and 180px, uppercase, at most 11 characters per line so it breaks into several lines) and the newsletter on the right, bottom-aligned; they stack on narrow screens. Under them, a thin rule and four link columns (two on phones), then a bottom row: logo left, legal line in the middle, "Back to top" right.
The ink (mouse and pen only)
- Moving the pointer over the footer lays blobs along its path, one every 6px or so. The faster the pointer the bigger the blob (24px plus 0.9 times the distance moved, never over 64px), each with a little wobble. Blobs shrink away (they lose 0.014 of their size per frame) and are removed, so the trail dissolves from its tail. At most 700 exist at a time.
- They are drawn on a canvas in the ink colour (light blue in the demo), with a darker rim (half the brightness, offset 5px right and 4px down, 7px bigger), blended with mix-blend-mode: difference and fused by a "goo" SVG filter (blur, then a hard alpha threshold). Over the dark footer this reads as a bright liquid trail, and the cream sentence inside it inverts. The links, the logo and the form sit above the ink, so they stay readable and clickable.
Headline depth (mouse and pen only)
- The pointer's position over the whole footer becomes two numbers from -1 to 1, smoothed (8% per frame). The giant sentence moves 22px and 12px against the pointer and tips up to 7° (up and down) and 9° (left and right), with 1200px of perspective. It eases back when the pointer leaves.
Newsletter
- One line of label, one underlined field and a pill button. Hovering the button wipes a cream bar across it. Pressing Enter or the button checks the address: if it isn't shaped like an email, the underline turns red and a short message appears under the field (it clears as soon as you type); if it is, the field and button are replaced by the "done" line, which rises in (0.9s), and onJoin(email) is called.
Links and the rest
- Links dim to 78% cream and, on hover, turn full cream and slide 10px to the right. "Back to top" has an underline that wipes away on hover and scrolls smoothly to the top. Fallbacks: touch screens and other devices that can't hover get no ink and no depth. With "reduce motion" on, there is no ink, no depth, no wipe and no smooth scroll.