Magnetic Card

Move your cursor across the card. It follows with spring physics and a soft parallax tilt.

Spring · stiffness 220

Installation

pnpm dlx shadcn@latest add https://matos-ui.com/r/magnetic-card.json

import { MagneticCard } from '@/components/matos-ui/magnetic-card'

<MagneticCard>
  <h3>Magnetic Surface</h3>
  <p>Move your cursor to feel the pull.</p>
</MagneticCard>

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Maximum width and padding preset.
`intensity`	`number`	`12`	Pixel distance the card drifts toward the cursor.
`tilt`	`number`	`8`	Maximum 3D tilt in degrees.
`stiffness`	`number`	`220`	Spring stiffness for the follow motion.
`damping`	`number`	`18`	Spring damping for the follow motion.