Card Spotlight

Motion

Interactive Tailwind card spotlight and Tailwind CSS hover effect components featuring radial gradients that follow the cursor.

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