Skip to main content

​
Overview

The Spotlight component creates a dramatic spotlight visual effect using an SVG ellipse with Gaussian blur filtering. It’s designed to add atmospheric lighting to hero sections and background elements.

​
Visual Effect

The component renders:
  • A large, blurred elliptical light source
  • Positioned absolutely for layering
  • Animated movement via the animate-spotlight Tailwind animation
  • Semi-transparent fill (21% opacity by default)

​
Source Location

/workspace/source/src/app/components/ui/Spotlight.tsx

​
Props

​
className
string
Additional Tailwind classes to customize positioning and appearance. Merged with default classes using cn() utility.
​
fill
string
default:"white"
SVG fill color for the spotlight ellipse. Accepts any valid CSS color value.

​
Type Definition

From /workspace/source/src/app/components/ui/Spotlight.tsx:4-7: 
type SpotlightProps = {
  className?: string;
  fill?: string;
};

​
Default Styling

The component applies these default classes: 
"animate-spotlight pointer-events-none absolute z-[1] h-[169%] w-[138%] lg:w-[84%] opacity-100"
Key style notes:
  • pointer-events-none: Allows clicks to pass through to underlying elements
  • absolute: Requires parent with relative positioning
  • z-[1]: Places spotlight just above base layer
  • Responsive width: 138% on mobile, 84% on large screens

​
SVG Structure

The SVG contains:
  1. Viewbox: 0 0 3787 2842 (fixed aspect ratio)
  2. Ellipse: Transformed and rotated for directional lighting
  3. Filter: Gaussian blur with 151px standard deviation

​
Ellipse Parameters

From /workspace/source/src/app/components/ui/Spotlight.tsx:21-29: 
<ellipse
  cx="1924.71"
  cy="273.501"
  rx="1924.71"
  ry="273.501"
  transform="matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)"
  fill={fill || "white"}
  fillOpacity="0.21"
/>

​
Animation

The component relies on a Tailwind CSS custom animation named animate-spotlight, which should be defined in your tailwind.config.js file.
Expected animation definition: 
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        spotlight: "spotlight 2s ease .75s 1 forwards",
      },
      keyframes: {
        spotlight: {
          "0%": {
            opacity: 0,
            transform: "translate(-72%, -62%) scale(0.5)",
          },
          "100%": {
            opacity: 1,
            transform: "translate(-50%,-40%) scale(1)",
          },
        },
      },
    },
  },
};

​
Usage Example

import { Spotlight } from "@/components/ui/Spotlight";

export default function Hero() {
  return (
    <div className="relative h-screen bg-black overflow-hidden">
      {/* Spotlight effect */}
      <Spotlight
        className="-top-40 left-0 md:left-60 md:-top-20"
        fill="white"
      />
      
      {/* Content */}
      <div className="relative z-10">
        <h1>Your Hero Content</h1>
      </div>
    </div>
  );
}

​
Customization Examples

​
Colored Spotlight

<Spotlight fill="#1db954" className="top-0 right-0" />

​
Multiple Spotlights

<div className="relative">
  <Spotlight fill="cyan" className="top-0 left-0" />
  <Spotlight fill="purple" className="bottom-0 right-0" />
  {/* Content */}
</div>

​
Technical Details

​
Filter Definition

From /workspace/source/src/app/components/ui/Spotlight.tsx:32-52: 
<filter
  id="filter"
  x="0.860352"
  y="0.838989"
  width="3785.16"
  height="2840.26"
  filterUnits="userSpaceOnUse"
  colorInterpolationFilters="sRGB"
>
  <feFlood floodOpacity="0" result="BackgroundImageFix" />
  <feBlend
    mode="normal"
    in="SourceGraphic"
    in2="BackgroundImageFix"
    result="shape"
  />
  <feGaussianBlur
    stdDeviation="151"
    result="effect1_foregroundBlur_1065_8"
  />
</filter>
The Gaussian blur with stdDeviation="151" creates the soft, diffused lighting effect. Adjust this value for sharper or softer spotlights.

​
Best Practices

  1. Parent Container: Always use within a positioned parent (relative, absolute, or fixed)
  2. Z-Index Management: Ensure content has higher z-index than the spotlight
  3. Performance: Use sparingly—SVG filters can impact rendering performance
  4. Dark Backgrounds: Works best against dark or black backgrounds for maximum contrast

​
Dependencies

  • @/lib/utils - Provides the cn() utility for class merging
  • React
  • Tailwind CSS (for animate-spotlight animation)

Build docs developers (and LLMs) love

Get started for freeTalk to us