Dynamic Follow Spotlight

backgrounds

Pointer tracking directional luminous cone spotlight effect.

#spotlight#light#pointer#interactive#background

Live Interactive Preview

Interactive Spotlight

Hover over this card to activate the dynamic cursor illumination beam.

Component Source Code

Select language in the dropdown

Spotlight.tsx

1'use client';
2
3import React, { useState } from 'react';
4
5export default function Spotlight() {
6  const [pos, setPos] = useState({ x: 150, y: 100 });
7
8  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
9    const rect = e.currentTarget.getBoundingClientRect();
10    setPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
11  };
12
13  return (
14    <div
15      onMouseMove={handleMouseMove}
16      className="relative h-64 w-full max-w-md overflow-hidden rounded-3xl border border-slate-200 dark:border-slate-800 bg-slate-950 p-6 flex flex-col justify-center items-center text-center select-none cursor-crosshair"
17    >
18      <div
19        style={{
20          background: `radial-gradient(320px circle at ${pos.x}px ${pos.y}px, rgba(56, 189, 248, 0.25), transparent 80%)`
21        }}
22        className="pointer-events-none absolute inset-0 transition-opacity duration-300"
23      />
24      <h3 className="text-xl font-extrabold text-white relative z-10">Directional Spotlight</h3>
25      <p className="text-xs text-slate-400 mt-1 relative z-10">Move mouse to cast atmospheric radial cone.</p>
26    </div>
27  );
28}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/backgrounds/Spotlight.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import DynamicFollowSpotlight from '@/components/backgrounds/Spotlight';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <DynamicFollowSpotlight />
7    </main>
8  );
9}