Hover & Micro-interactions

The small stuff. A hover-swap editorial index, a pixel shape that scatters like air under the cursor, magnetic buttons, 3D tilt with glare and a shared-element nav indicator.

5 demos · hover a stage to interact · press Replay to re-run

Hover index

Hovering a row swaps the panel beside it with a directional wipe — the frame enters from whichever way the pointer moved through the list.

  • AnimatePresence
  • clip-path
  • direction
□WHAT DARWIN COVERS□

MOTION DOESN’T DEPEND ON ONE PERFECT EASING CURVE. KNOWING WHEN TO HOLD STILL IS WHAT MATTERS THE MOST — IT’S CONSISTENT RHYTHM.

Particle scatter

A pixel shape that blows apart like air under the cursor — pushed outward, stirred by turbulence and lifted, then drifting home when you leave. Click to change shape.

  • canvas
  • rAF
  • pointer field
  • eased particles
circlemove to scatter · click to change

Magnetic buttons

Offset from the pointer, smoothed by a spring, with the label trailing behind.

  • useSpring
  • useMotionValue
  • parallax

hover near a button

3D tilt card

Pointer position drives rotateX/rotateY and the glare highlight together.

  • perspective
  • transformStyle
  • useSpring
Member

Motion Lab

Lifetime access

•••• 4291

Shared-element nav

Two layoutIds — one for the hover pill, one for the selected pill — so both glide.

  • layoutId
  • spring
  • hover state

hover to preview · click to select