Pin & Morph

ScrollVanilla JS · zero dependenciesborder-radius + transform per frame

circle

scroll inside ↓

-- fps

prefers-reduced-motion detected — the morph follows your scroll directly

X-ray · layers

Pinthe shape holds center stage

Morphcircle → square by radius

Spin + colourrotation and hue ride along

Parameters

Size from → to1.6×

Spin135°

Hue travel80°

Track length1500 px

your version · updates as you tinker

How this effect works

The circle-to-square morph is one CSS property doing all the acting: border-radius: 50% → 0%, driven by the scroll progress. A circle is just a square wearing maximum border-radius, so interpolating the radius is the morph — no paths, no SVG, no math beyond a multiply. Scale and rotation ride the same progress number in the same transform string.

The reason this genre works is the pin: because the shape can't leave center stage, all the scroll energy you put in has to go somewhere, and it visibly goes into transformation. You feel like you're operating a machine rather than passing a picture. Unpin it (toggle the layer off) and the identical morph reads as decoration drifting by — same numbers, completely different relationship with the reader.

Production notes: prefers-reduced-motion: direct scroll mapping, no extras · border-radius + transform — cheap · label the stations (circle/square) if the morph carries meaning · the copied snippet is self-contained with its own demo scroll box.