Displacement

Clicking sends a radial wave through a grid of tiles, each tile lifting, rotating and returning as the ring passes over it.

experimental / exp-displacement-ripple

Playback

Complexity

Intermediate

Interaction

Click

Stack

Framer Motion, React

Related motions

Hovering pushes a ripple through the card artwork via a displacement field that relaxes back to rest — a shader-style effect on 2D canvas.

The card promotes to a detail panel with a shared-element transition — image, title and body each ease into their new positions rather than cutting.

A wave of font-weight travels across the line, each glyph thickening as the crest passes and thinning behind it.