---
name: dynamic_cursor_interactions
description: Instructions for creating custom, reactive cursors that enhance the user experience and add a unique layer of interactivity.
---

# Dynamic Cursor Interactions Skill

Common cursors are boring. Advanced web pages use custom "dot" or "ring" cursors that react to the context of the page.

## Core Principles
1. **The Custom Pointer**: Hide the default cursor (`cursor: none;`) and replace it with a DOM element (usually a central dot and an outer ring).
2. **Smooth Interpolation**: Use `lerp` (Linear Interpolation) or GSAP to follow the mouse position with a slight "lag" for a premium, heavy-yet-smooth feel.
3. **Contextual Scaling**: Scale the outer ring when hovering over interactive elements (buttons, links).
4. **SVG Filter Integration**: Apply an "invert" or "blur" effect to the cursor as it moves over different colored backgrounds.

## Implementation Patterns

### 1. The Premium Lagging Cursor (JS/CSS)
```js
const cursor = document.querySelector('.cursor');
window.addEventListener('mousemove', e => {
    gsap.to(cursor, { x: e.clientX, y: e.clientY, duration: 0.15, ease: 'power2.out' });
});
```

### 2. Cursor Magnetic Effects
Make the cursor "stick" or "pull" towards buttons when it's within a certain radius for a highly tactile experience.

### 3. State-Based Cursor Shapes
Transform the cursor into a "Plus" when hovering over a gallery, or an "Arrow" for carousels.

## Recommended Tools
- GSAP (For buttery smooth interpolation)
- Native `pointer-events: none;` on the custom cursor element.
- CSS `mix-blend-mode: difference;` for high-contrast visibility.