Magnetic Card

A card that tilts in 3D toward the cursor, with a moving glare.

Magnetic Card

Move your cursor across me.

Example.tsx

import { MagneticCard } from "@/components/better/magnetic-card"

export function Example() {
  return (
    <MagneticCard
      tilt={12}
      drift={10}
      glare={true}
      title="Magnetic Card"
      subtitle="Move your cursor across me."
      className="w-64"
    />
  )
}

Dependencies

motion

Props

Prop	Type	Default	Description
children	ReactNode	—
className	string	—
tilt	number	12	Max tilt in degrees at the card's edges.
drift	number	10	How far the card drifts toward the cursor, in px.
glare	boolean	true	Show the moving glare highlight.
image	string	—	Optional image URL shown as a banner (not an upload — just a src to display).
title	string	—	Title for the built-in card layout. Provide this (or `image`) to use it instead of children.
subtitle	string	—	Subtitle under the title.