H
UI by hampton.io
Back to Components
Cards

Spotlight Hover Card

Card with a cursor-following spotlight glow and soft hover lift.

PropsUsage ExampleVariations
Focus

Spotlight Hover Card

A cursor-following glow that reveals depth and detail.

Dependencies

  • clsx
  • tailwind-merge
  • framer-motion

Files

  • components/ui/spotlight-hover-card.tsx

Installation

Using shadcn CLI

npx shadcn add spotlight-hover-card --url https://ui.hampton.io

Manual installation

Copy the component file to your project and install dependencies:

npm install clsx tailwind-merge framer-motion

Related Cards Components

Ambient Glow Card

A feature card with a rotating ambient aura for premium highlights.

Animated Card Hover

Hover tilt card with optional glare and depth effect.

Animated Gradient Border Card

Card with a rotating gradient border for premium emphasis.

Bento Card

Card component for bento grid layouts. Supports multiple sizes (1x1, 2x1, 1x2, 2x2) with optional gradient backgrounds.

Bento Grid

Asymmetric bento layout tiles with ambient glow and shine animations.

Card

Flexible card container with header, content, and footer sections.