Card Spotlight

Motion

Free, copy-pasteable Tailwind CSS & Framer Motion Card Spotlight component. Accessible, fully responsive, dark-mode ready, and customizable.

On this page

Implementation Usage Feature Cards Props

Elevate your feature grids and pricing tiers with a premium Tailwind card spotlight. Incorporating a glossy Tailwind CSS hover effect, these cards track the user's mouse with a softly glowing radial gradient, creating a tangible, interactive feel.

Combine this spotlight effect with a Tilt Card for maximum interactivity, or use it to house standard static Features.

Implementation

"use client";

import React, { useRef, useState } from "react";
import { cn } from "@/lib/utils";

interface CardSpotlightProps {
  children: React.ReactNode;
  className?: string;
  spotlightColor?: string;
}

export const CardSpotlight: React.FC<CardSpotlightProps> = ({
  children, className = "",
  spotlightColor = "rgba(0, 0, 0, 0.04)",
}) => {
  const divRef = useRef<HTMLDivElement>(null);
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [opacity, setOpacity] = useState(0);

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!divRef.current) return;
    const rect = divRef.current.getBoundingClientRect();
    setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });
  };

  return (
    <div ref={divRef} onMouseMove={handleMouseMove}
      onMouseEnter={() => setOpacity(1)} onMouseLeave={() => setOpacity(0)}
      className={cn("relative overflow-hidden rounded-2xl border bg-white dark:bg-gray-950 p-6", className)}>
      <div className="pointer-events-none absolute -inset-px opacity-0 transition-opacity duration-500"
        style={{
          opacity,
          background: `radial-gradient(500px circle at ${position.x}px ${position.y}px, ${spotlightColor}, transparent 40%)`,
        }} />
      <div className="relative z-10">{children}</div>
    </div>
  );
};

Usage

Feature Cards

Performance

Lightweight

Optimized components with minimal footprint. No unnecessary re-renders.

Flexibility

Composable

Built with composition in mind. Mix and match to create your own patterns.

<CardSpotlight className="max-w-xs">
  <h3>Lightweight</h3>
  <p>Optimized components with minimal footprint.</p>
</CardSpotlight>

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Card content
`className`	`string`	`""`	Additional CSS classes
`spotlightColor`	`string`	`"rgba(0,0,0,0.04)"`	Spotlight gradient color

Number Ticker

Shimmer Button