Spotlight Card

Interactive cards with cursor-following spotlight effects, animated gradient borders, and 3D tilt animations. Inspired by the premium designs of Vercel, Linear, and Stripe.

Install

pnpm dlx shadcn@latest add "https://componentry.harshjdhv.com/r/spotlight-card.json"

Examples

Default

Spotlight Effect

Hover over this card to see the spotlight follow your cursor

This card features an animated gradient border and a soft spotlight glow that tracks your mouse movement.

import {
  SpotlightCard,
  SpotlightCardContent,
  SpotlightCardHeader,
  SpotlightCardTitle,
  SpotlightCardDescription,
} from "@/components/ui/spotlight-card"

<SpotlightCard className="w-96">
  <SpotlightCardHeader>
    <SpotlightCardTitle>Spotlight Effect</SpotlightCardTitle>
    <SpotlightCardDescription>
      Hover over this card to see the spotlight follow your cursor
    </SpotlightCardDescription>
  </SpotlightCardHeader>
  <SpotlightCardContent>
    <p className="text-neutral-300 text-sm">
      This card features an animated gradient border and a soft
      spotlight glow that tracks your mouse movement.
    </p>
  </SpotlightCardContent>
</SpotlightCard>

Custom Colors

Fully customizable spotlight color and intensity

Customize the spotlight color, glow intensity, border radius, and more to match your design system.

import {
  SpotlightCard,
  SpotlightCardContent,
  SpotlightCardHeader,
  SpotlightCardTitle,
  SpotlightCardDescription,
} from "@/components/ui/spotlight-card"

<SpotlightCard
  className="w-96"
  spotlightColor="rgba(255, 100, 100, 0.4)"
  glowIntensity={0.2}
  borderRadius={24}
>
  <SpotlightCardHeader>
    <SpotlightCardTitle>Custom Colors</SpotlightCardTitle>
    <SpotlightCardDescription>
      Fully customizable spotlight color and intensity
    </SpotlightCardDescription>
  </SpotlightCardHeader>
  <SpotlightCardContent>
    <p className="text-neutral-300 text-sm">
      Customize the spotlight color, glow intensity, border radius,
      and more to match your design system.
    </p>
  </SpotlightCardContent>
</SpotlightCard>

Multi Spotlight

Multiple colored spotlight sources follow your cursor

import { MultiSpotlightCard } from "@/components/ui/spotlight-card"

<MultiSpotlightCard className="w-full max-w-lg mx-auto p-6 h-64">
  <h4 className="text-white font-medium mb-2">Multi Spotlight</h4>
  <p className="text-neutral-400 text-sm">
    Multiple colored spotlight sources follow your cursor
  </p>
</MultiSpotlightCard>

Beam Spotlight

Crossing light beams create a dramatic effect

import { BeamSpotlightCard } from "@/components/ui/spotlight-card"

<BeamSpotlightCard className="w-full max-w-lg mx-auto p-6 h-64">
  <h4 className="text-white font-medium mb-2">Beam Spotlight</h4>
  <p className="text-neutral-400 text-sm">
    Crossing light beams create a dramatic effect
  </p>
</BeamSpotlightCard>

Gradient Follow

Dynamic gradient background follows cursor position

import { GradientFollowCard } from "@/components/ui/spotlight-card"

<GradientFollowCard className="w-full max-w-lg mx-auto p-6 h-64">
  <h4 className="text-white font-medium mb-2">Gradient Follow</h4>
  <p className="text-neutral-400 text-sm">
    Dynamic gradient background follows cursor position
  </p>
</GradientFollowCard>

3D Tilt

Perspective tilt with glare effect for depth

import { TiltSpotlightCard } from "@/components/ui/spotlight-card"

<TiltSpotlightCard className="w-full max-w-lg mx-auto p-6 h-64">
  <h4 className="text-white font-medium mb-2">3D Tilt</h4>
  <p className="text-neutral-400 text-sm">
    Perspective tilt with glare effect for depth
  </p>
</TiltSpotlightCard>

Features

Cursor Tracking

Spotlight effect smoothly follows mouse position across the card

Animated Border

Rotating gradient border creates a subtle animated glow

3D Tilt Effect

Perspective-based tilt with glare for realistic depth

Multiple Variants

Choose from spotlight, multi-spotlight, beam, gradient, or tilt

Customizable

Fully configurable colors, intensity, radius, and animation

Performance

GPU-accelerated animations with smooth 60fps transitions

Props

spotlightColor

Color of the spotlight effect (default: rgba(120, 119, 198, 0.3))

glowIntensity

Intensity of the glow effect 0-1 (default: 0.15)

borderRadius

Border radius in pixels (default: 16)

maxTilt

Maximum tilt angle in degrees for TiltSpotlightCard (default: 10)