Spotlight Follow
A free animated spotlight background that follows the cursor.
Callender & Wren
Sale 118, twentieth century design
View days open a week before the sale, and every lot carries its condition report, provenance and the last three comparable results. Bid in the room, by phone, or leave a commission with the desk.
Spotlight Follow is a free animated background component for Next.js and React that trails the cursor with a single soft radial glow. It follows the pointer with a small per-frame ease, is styled with Tailwind, and renders as an absolutely positioned fill layer that you drop inside any relative container and layer your content above.
Each animation frame that sees the pointer move restarts the glow's ease from wherever it is, toward the new position, over the --dur-2 motion token, and writes one transform. The loop runs only while the glow is travelling and stops the moment it arrives, so nothing re-renders in React as the cursor moves and nothing runs at rest. The effect is fine-pointer only: on touch screens, and whenever prefers-reduced-motion is set, no listeners are attached at all and the glow rests static at the centre of the container. When the cursor leaves the container the glow eases back to centre, and a static dithered noise overlay keeps the gradient smooth on dark screens.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/bg-spotlightUsage
import { BgSpotlight } from "@/components/bg-spotlight";
export function Example() {
return (
<section className="relative overflow-hidden">
<BgSpotlight />
<div className="relative">
<h2 className="text-4xl font-semibold">Your content here</h2>
<p className="text-muted-foreground">The spotlight trails your cursor behind it.</p>
</div>
</section>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | undefined | Additional classes merged onto the root fill layer. |
Customisation
Spotlight Follow exposes two component tokens, declared in its registry item: --spotlight-color for the glow colour (defaulting to the brand ramp) and --spotlight-size for the glow diameter (defaulting to 600px). Override them from :root, or on any ancestor of the component, to retheme without touching the code:
:root {
--spotlight-color: var(--color-accent-400);
--spotlight-size: 480px;
}Frequently asked questions
- Is Spotlight Follow free for commercial use?
- Yes. Spotlight Follow is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Does Spotlight Follow affect performance or accessibility?
- The follow animates a single transform, one write per animation frame and only while the glow is moving, so React never re-renders as the cursor moves and nothing runs once it settles or while the tab is hidden. The layer is aria-hidden and never receives pointer events or focus, so it cannot intercept clicks on your content. It is fine-pointer only: on touch screens, and with reduced motion enabled, no pointer listeners are attached and the glow stays at rest in the centre of the container.
- How do I change the spotlight colour or size?
- Override the CSS custom properties --spotlight-color and --spotlight-size from :root or any ancestor element. The colour defaults to a token from the library colour system and the size accepts any CSS length to control the glow diameter.