Gooey Backdrop and Headline Roll
A practice product page with two hand-tuned interactions: a gooey WebGL backdrop that tracks the pointer, and a headline column that rolls one line per click.
Overview
A single-page practice build carrying two interactions wired by hand: the photography behind the page is displaced by a WebGL layer that tracks the pointer, and the headline column rolls one line per click.
Approach
Shery's imageEffect mounts a three.js plane over the backdrop and drives a
turbulence-displacement shader through it with the gooey branch enabled and
pointer input on. The library's defaults are only a starting point — noise
scale, metaball radius, displacement amount and the discard and antialias
thresholds are each pulled off their initial values until the distortion reads
as the image itself moving rather than as a filter sitting on top of it.
The headline is a stack of lines advanced by offsetting top by one hundred per
cent of the line height with a steep ease. A flag ignores clicks while a
transition is in flight, and the line that just left is repositioned below the
stack in the tween's completion callback, which is what lets the sequence loop
indefinitely with no measurement and no DOM churn.
Tech stack
Notes
The page is laid out with placeholder copy deliberately: it exists so the two effects can be pushed without worrying what they do to a real layout. Nothing moves until the pointer does or a line is clicked, so the still on this card is the flattest it ever looks.