Cursor Following

Make clip-path follow the mouse cursor. Create interactive, cursor-responsive effects.

Key Concepts

• Mouse tracking
• Dynamic positioning
• Interactive effects

Technical Details

onMouseMove={(e) => {
  const rect = e.currentTarget.getBoundingClientRect();
  const x = ((e.clientX - rect.left) / rect.width) * 100;
  const y = ((e.clientY - rect.top) / rect.height) * 100;
  setClipPath(`circle(25% at ${x}% ${y}%)`);
}