Cursor Spotlight

Move your cursor over the box. Tap to feel the spring compress.

#Step 1 - Mouse position

Start simple: track the cursor with useState and position a div at those coordinates. No animation, no spring, just raw onPointerMove updating state.

Loading...

#Step 2 - CSS transition

Add transition: transform 300ms ease to smooth the movement. It feels smoother, but the timing is fixed and it can't react to how you move. Try interrupting it mid-animation.

Loading...

#Step 3 - Spring physics

Replace the CSS transition with useSpring. Now the animation reacts to your movement, overshoots when you move fast, settles gently when you stop. Drag the sliders to feel the difference.

Loading...

#Step 4 - Opacity fade

Add a separate opacity spring that fades the spotlight in on onPointerEnter and out on onPointerLeave. The fade uses its own spring so it doesn't fight with the position.

Loading...

#Step 5 - Blend mode

Add mix-blend-difference. The spotlight now inverts whatever is behind it, text, images, anything. Without it, you just get a yellow circle on top.

Loading...

#Step 6 - Press feedback

Add onPointerDown / onPointerUp to compress the spotlight to 85% on press. A micro-interaction that makes it feel physical.

Loading...

#Configuration

Tweak everything: spring values, spotlight size, press scale. The code updates in real-time.

Loading...