Magnetic Button

Button that magnetically attracts toward the cursor on hover.

effectsbuttonmagnetichover

Installation

Terminalbash

npx motioncraft add magnetic-button

magnetic-button.tsxtsx

import { MagneticButton } from "@/components/effects/magnetic-button";

<MagneticButton>Hover Me</MagneticButton>

Prop	Type	Default	Description
children*	ReactNode	—	Button content
className	string	—	Additional CSS classes

Image gallery where items are attracted to and repelled by the cursor with spring physics.

Text that reveals an image on hover, following the cursor position with spring animations.

Canvas-based text that warps and distorts on hover with horizontal slice displacement.

Input field with animated label, focus ring, and validation states.