How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
Layout
- The section fills the screen (100% of the screen height, never under 560px). Each slide is positioned inside it: the photo is centred near the top (64% of the section's height, never wider than 56% of the screen; it can be tall or wide) and turned by the slide's own angle; the name is centred at 60% of the height, tilted -2.14°, in huge uppercase type (9.64% of the width, never more than 17% of the screen height); the short line is at 15% from the left, 84% down; the sentence is at 68% from the left, 81% down, 22% wide. Two small splats float near the photo.
- Left and right arrows sit at the edges (44% down), and three small dots at the bottom centre show where you are.
Changing slide
- The arrow, a dot, the left and right arrow keys, or a horizontal swipe (touch, more than 50px and clearly sideways) change the slide. The arrows wrap around. Keys work only while the carousel is more than half on screen, so they never fight with the rest of the page.
- The slide changes in 1 second with a strong ease-in-out (cubic-bezier(0.77, 0, 0.18, 1)). The outgoing slide moves 110% of the screen width in the direction of travel while the incoming one starts the same distance on the other side. It is a pure sideways move: no fading. Splats start 0.04s after the photo, the name 0.08s, the two lines of copy 0.12s.
- A change is ignored for the first 0.6s of another one, so fast clicking can't tear the layers.
- The first slide is simply there on load, with no entrance.
The ink splash
- At the start of a change a canvas paints the new colour: a big circle grows from a point 12% across (when going forward) or 88% across (going back), 45% down, to cover the whole section over 1.3s with a strong ease-out. Around its advancing edge, 7 small drops are thrown out every frame, each growing a little, so the edge is ragged. All of it runs through the "goo" SVG filter (blur, then a hard alpha threshold) so the drops fuse with the circle into one liquid edge, and each drop has a darker rim (72% brightness, offset 5px right and 4px down).
- When the splash has covered the section, the section's own background is set to the new colour and the canvas is cleared. The canvas is drawn at 1x resolution on purpose: the filter runs over the whole section every frame.
Colour
- The text, arrows and dots take whichever of near-black or cream has the higher contrast with the new background. The change is timed to land as the splash covers it (0.6s, after 0.35s).
Pointer depth (mouse and pen only)
- The pointer's position over the section is turned into two numbers from -1 to 1, smoothed (8% per frame). The photo moves 40px sideways and 24px up or down, tips up to 14° forward or back and 18° left or right, rotates 4° more, and its shadow slides 30px the other way. Fallbacks: touch screens get no pointer tilt but swipe works. With "reduce motion" on, slides and colours change instantly with no sliding and no splash. The arrows and dots are real buttons (keyboard-focusable) and the region is announced as a carousel.