Spotlight Card

A sleek dark-themed card with an interactive spotlight effect that follows your mouse cursor. Features smooth animations, gradient borders, and modern glass-morphism design perfect for showcasing content.

interactivecarduispotlightdarkglass

Layout

Component Preview

Interactive preview of the Spotlight Card component

Spotlight Card

Interactive hover effect

Experience the magic of interactive design with smooth animations and elegant hover effects.

Built with modern tech

Install dependencies

Run this command to install all required dependencies

npm i motion clsx tailwind-merge lucide-react

Add util file

lib/utils.ts

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Copy the source code

components/ui/spotlight-card.tsx

"use client"

import type React from "react"

import { useState, useRef } from "react"
import { motion } from "framer-motion"
import { ArrowUpRight, Sparkles } from "lucide-react"

export default function Component() {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
  const [isHovered, setIsHovered] = useState(false)
  const cardRef = useRef<HTMLDivElement>(null)

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!cardRef.current) return

    const rect = cardRef.current.getBoundingClientRect()
    const x = e.clientX - rect.left
    const y = e.clientY - rect.top

    setMousePosition({ x, y })
  }

  return (
    <div className="min-h-screen bg-black flex items-center justify-center p-8">
      <motion.div
        ref={cardRef}
        className="relative w-96 h-64 bg-gradient-to-br from-gray-900 to-black rounded-2xl border border-gray-800 overflow-hidden cursor-pointer group"
        onMouseMove={handleMouseMove}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
        whileHover={{ scale: 1.02 }}
        transition={{ duration: 0.2 }}
      >
        {/* Spotlight Effect */}
        <motion.div
          className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
          style={{
            background: `radial-gradient(600px circle at ${mousePosition.x}px ${mousePosition.y}px, rgba(255,255,255,0.1), transparent 40%)`,
          }}
        />

        {/* Glow Border Effect */}
        <motion.div
          className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"
          style={{
            background: `radial-gradient(600px circle at ${mousePosition.x}px ${mousePosition.y}px, rgba(59, 130, 246, 0.15), transparent 40%)`,
            filter: "blur(0.5px)",
          }}
        />

        {/* Card Content */}
        <div className="relative z-10 p-8 h-full flex flex-col justify-between">
          <div className="flex items-start justify-between">
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
                <Sparkles className="w-6 h-6 text-white" />
              </div>
              <div>
                <h3 className="text-white font-semibold text-lg">Spotlight Card</h3>
                <p className="text-gray-400 text-sm">Interactive hover effect</p>
              </div>
            </div>
            <motion.div
              className="w-8 h-8 bg-white/10 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100"
              whileHover={{ scale: 1.1 }}
              transition={{ duration: 0.2 }}
            >
              <ArrowUpRight className="w-4 h-4 text-white" />
            </motion.div>
          </div>

          <div className="space-y-3">
            <p className="text-gray-300 text-sm leading-relaxed">
              Experience the magic of interactive design with smooth animations and elegant hover effects.
            </p>

            <div className="flex items-center gap-2">
              <div className="flex -space-x-2">
                <div className="w-6 h-6 bg-gradient-to-r from-pink-500 to-rose-500 rounded-full border-2 border-gray-900" />
                <div className="w-6 h-6 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full border-2 border-gray-900" />
                <div className="w-6 h-6 bg-gradient-to-r from-green-500 to-emerald-500 rounded-full border-2 border-gray-900" />
              </div>
              <span className="text-gray-400 text-xs">Built with modern tech</span>
            </div>
          </div>
        </div>

        {/* Subtle Grid Pattern */}
        <div
          className="absolute inset-0 opacity-[0.02]"
          style={{
            backgroundImage: `
              linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
              linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px)
            `,
            backgroundSize: "20px 20px",
          }}
        />

        {/* Bottom Glow */}
        <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-blue-500/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
      </motion.div>
    </div>
  )
}

Ready to use this component?

Follow the installation steps above and start building with Spotlight Card.