# Magnetic

> Makes any element lean toward the pointer and spring back.

Component · Free · https://lodeui.com/components/magnetic

## When to use

- A primary call to action on a landing page.

## When not to use

- Forms and dense UI.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/magnetic.json
```

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { Magnetic } from "@/components/ui/magnetic";
import { Button } from "@/components/ui/button";

export function Cta() {
  return <Magnetic><Button size="lg">Start free</Button></Magnetic>;
}
```

## API reference

### Magnetic

Leans its child toward the pointer, then springs back.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| strength | `number` | `0.35` | 0–1. |

## Accessibility

- Off under reduced motion and for touch and pen input.

## Motion

- Spring-follows the pointer; returns on leave.

## Responsive behavior

- Mouse only.

## Performance

- Motion values; no re-renders.

## Notes for AI

- Use on one element per view.

## Related

- [Spotlight card](https://lodeui.com/components/spotlight-card) — A card lit by a spotlight that follows the pointer, border included.
- [Tilt card](https://lodeui.com/components/tilt-card) — A card that tilts in 3D toward the pointer with a moving glare.