Preview

npx shadcn@latest add @atroui/magnetic

Move over the card — mild pull, tween settle. Media from Imageory.

Installation

Agent blurb — install command + no npm UI rule. For agents

npx shadcn@latest add @atroui/magnetic

Source lands in your repo. Installation · Registry

Usage

Wrap media tiles only. Real-time pull on move; tween settle on leave. Reduced motion is static. Never default on Button or Menu.

tsx

import { Magnetic } from "@/components/ui/magnetic"
import { IMAGEORY } from "@/lib/imageory"

<Magnetic intensity={0.28} range={64}>
  <img src={IMAGEORY.landscape} alt="" />
</Magnetic>

import { Magnetic } from "@/components/ui/magnetic"
import { IMAGEORY } from "@/lib/imageory"

<Magnetic intensity={0.28} range={64}>
  <img src={IMAGEORY.landscape} alt="" />
</Magnetic>

API reference

Prop	Type	Default	Description
intensity	number	0.25	Pull strength. Clamped ≤0.35.
range	number	48	Active radius in px. Clamped ≤80.