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.

Preview

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 for an interactive experience.

Move your cursor over the card to see the spotlight effect in action.

Variants

Multi Spotlight

Multiple colored spotlight sources follow your cursor

MultiSpotlightCard

Beam Spotlight

Crossing light beams create a dramatic effect

BeamSpotlightCard

Gradient Follow

Dynamic gradient background follows cursor position

GradientFollowCard

3D Tilt

Perspective tilt with glare effect for depth

TiltSpotlightCard

Custom

Custom Colors

Fully customizable spotlight color and intensity

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

All props are customizable to match your brand colors.

Install

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

Requires shadcn CLI. Run npx shadcn@latest init first if not set up.

Code

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

<SpotlightCard className="w-96">
  <SpotlightCardHeader>
    <SpotlightCardTitle>Spotlight Card</SpotlightCardTitle>
    <SpotlightCardDescription>
      Hover over this card to see the spotlight effect
    </SpotlightCardDescription>
  </SpotlightCardHeader>
  <SpotlightCardContent>
    Your content here
  </SpotlightCardContent>
</SpotlightCard>

Basic usage with the structured card components.

Variants

// Multi-spotlight with multiple color sources
<MultiSpotlightCard colors={["#7877c6", "#ff4d4d", "#4dffae"]}>
  ...
</MultiSpotlightCard>

// Beam spotlight with crossing light beams
<BeamSpotlightCard beamColor="rgba(120, 119, 198, 0.5)">
  ...
</BeamSpotlightCard>

// Gradient follow with moving gradient
<GradientFollowCard gradientColors={["#7877c6", "#5eead4", "#f472b6"]}>
  ...
</GradientFollowCard>

// 3D Tilt with perspective effect
<TiltSpotlightCard maxTilt={15} scale={1.05}>
  ...
</TiltSpotlightCard>

Different spotlight variants for various use cases.

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)