Bobble hover

Introduction

The "Bobble hover" example builds a 3x3 grid of tiles that spring to life as your cursor sweeps across them. The trick is that each tile bobbles in proportion to how fast the pointer was moving when it arrived: drift slowly and you get a gentle nudge, flick across quickly and the tile pops, stretches and tilts before settling back to rest. It's a tactile, physical way to make a grid of images feel alive.

This example uses a handful of Motion APIs to read the pointer and drive the bounce:

• Motion+ usePointerPosition – tracks the global pointer as a pair of motion values.
• useVelocity – derives how fast the pointer is moving on each axis.
• useTransform – combines the two axes into a single speed value.
• useMotionValue – holds each tile's x, y, rotate and scale.
• animate – springs each value back to rest with an injected velocity, creating the bobble.
• motion – renders the tiles and exposes the onHoverStart gesture.