Magic Card

A spotlight that follows the pointer and highlights the border on hover — gradient fill or soft orb glow.

Default

Gradient spotlight that follows the pointer. Pass gradientColor for light and dark surfaces.

Loading…

Installation

CLI

npx @sonojs/ui@latest add magic-card

Also needs

npm i motion

Usage

page.tsx

import { MagicCard } from "@/components/magic-card"

export function Example() {
  return (
    <MagicCard>
      <div className="p-4">
        <p>Hello World</p>
        <span>Hover me</span>
      </div>
    </MagicCard>
  )
}

Props

Prop	Type	Default	Description
children	React.ReactNode	-	Content rendered inside the card.
className	string	-	Extra classes on the card root.
mode	"gradient" · "orb"	"gradient"	Spotlight style: gradient wash or orb glow.
gradientSize	number	200	Radius of the gradient spotlight in pixels.
gradientColor	string	"#262626"	Fill color of the gradient spotlight (gradient mode).
gradientOpacity	number	0.8	Opacity of the gradient spotlight (gradient mode).
gradientFrom	string	"#9E7AFF"	Start color of the border gradient.
gradientTo	string	"#FE8BBB"	End color of the border gradient.
glowFrom	string	"#ee4f27"	Orb glow start color (orb mode).
glowTo	string	"#6b21ef"	Orb glow end color (orb mode).
glowAngle	number	90	Orb glow gradient angle in degrees (orb mode).
glowSize	number	420	Orb glow diameter in pixels (orb mode).
glowBlur	number	60	Orb glow blur in pixels (orb mode).
glowOpacity	number	0.9	Orb glow opacity while hovered (orb mode).