Spotlight Follow
A free animated spotlight background that follows the cursor.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- GSAP
- 2 runtime packages
Spotlight Follow is a free animated background component for Next.js and React that trails the cursor with a single soft radial glow. It is driven by GSAP, styled with Tailwind, and renders as an absolutely positioned fill layer that you drop inside any relative container and layer your content above.
The glow follows the pointer through gsap.quickTo, which retargets one persistent tween and writes transforms directly, so nothing re-renders in React as the cursor moves. 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.
Template Empire
A glow that follows, content that stays put
Move your cursor over this section and a single soft spotlight trails it, easing back to centre when you leave. The layer never intercepts a click, on touch screens and under reduced motion it rests still at the centre, and the text above it stays readable at the brightest point of the glow.
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">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 through gsap.quickTo, so the browser compositor does the work and React never re-renders as the cursor moves. 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.