# Magnetic Cursor Effect

> Elements attract or repel from the cursor with elastic physics. Perfect for buttons, navigation items, and CTAs on award-winning sites.

Canonical: https://gsapvault.com/effects/magnetic-cursor
Live demo: https://gsapvault.com/demos/magnetic-cursor/index.html

| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £5 |
| Difficulty | intermediate |
| Plugins | Core GSAP only |
| Techniques | cursor-effects, physics, micro-interaction |
| Uses Lenis | No |

## Overview

An elastic magnetic attraction effect that makes elements respond to cursor proximity. Elements gently pull toward the mouse when it enters their magnetic field, creating a tactile, physics-based interaction. The strength, radius, and easing are all configurable per element. Used extensively on award-winning agency websites for buttons, navigation items, and interactive CTAs.

## Features

- Configurable magnetic radius and attraction strength
- Elastic easing that snaps elements back naturally
- Works on any HTML element — buttons, links, images, cards
- Per-element configuration via data attributes
- Separate inner content movement for layered depth effects
- Live magnetic-energy CSS variable for halos and borders
- Elastic tap feedback for coarse-pointer devices
- Pure GSAP implementation — no additional libraries
- Keyboard focus and reduced-motion support

## Use Cases

- Interactive navigation menus and menu items
- Call-to-action buttons with magnetic pull
- Image galleries with hover attraction effects
- Custom cursor interactions on portfolio sites
- Interactive pricing cards and feature highlights

## Vibe-Code Ready Setup

This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## How It Works

Pointer position is measured against each element's cached resting bounds. Inside the configured radius, a smoothstep falloff drives GSAP quickTo setters for translation, rotation, optional reverse inner parallax, and a --magnetic-energy CSS variable. Attract and repel modes flip the direction vector; leaving the field returns every response channel through the selected smooth, snappy, or elastic ease.

## Integration Preview

How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.

### Quick Start

**1. Add GSAP and the effect before the closing `</body>` tag:**

```html
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<script src="path/to/script.js"></script>
```

**2. Add the magnetic attribute to an interactive element:**

```html
<button data-magnetic>Explore</button>
```

### Options

| Attribute | Values | Default | Description |
|---|---|---|---|
| `data-magnetic-mode` | `attract`, `repel` | `attract` | Pulls toward or pushes away from the pointer |
| `data-magnetic-strength` | Pixels | `30` | Maximum element translation |
| `data-magnetic-radius` | Pixels | `200` | Activation radius around the resting center |
| `data-magnetic-ease` | `elastic`, `smooth`, `snappy` | `smooth` | Tracking and return character |
| `data-magnetic-inner` | CSS selector | — | Descendant that receives a second movement layer |
| `data-magnetic-inner-strength` | Pixels | `10` | Maximum inner translation |
| `data-magnetic-inner-reverse` | Presence | — | Moves inner content opposite the outer element |

### Dependencies

- GSAP 3.14.2+

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium effect. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Magnetic Cursor Effect](https://gsapvault.com/effects/magnetic-cursor)
- [Effects & Templates Vault (£39 one-time, best value): every current and future effect and template](https://gsapvault.com/effects)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt