Spotlight Hero
A free interactive hero section with a cursor-following spotlight.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- GSAP
- 2 runtime packages
Spotlight Hero is a free interactive hero section for Next.js and React that raises your headline, subtitle and calls to action into view over a soft spotlight that follows the cursor. It is built with GSAP and ScrollTrigger, styled with Tailwind, and composes the Spotlight Follow background component through a registry dependency.
You pass a title, an optional subtitle and up to two calls to action, and the section handles the rest: the three content blocks rise in sequence once the hero enters the viewport, the glow trails the pointer anywhere over the section, and a static scrim keeps the text readable at the glow's brightest point. On touch screens, or with prefers-reduced-motion enabled, everything renders immediately and the glow rests static at the centre of the section.
A first screen that follows every move
Spotlight Hero pairs a soft glow that trails the cursor with a calm staggered reveal for your headline and calls to action, so the page feels alive from the very first pointer move.
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/hero-spotlightUsage
import { HeroSpotlight } from "@/components/hero-spotlight";
export default function Page() {
return (
<HeroSpotlight
title="Launch pages that move like products"
subtitle="A staggered reveal behind a cursor-following spotlight."
cta={{ label: "Get started", href: "/signup" }}
secondaryCta={{ label: "Read the docs", href: "/docs" }}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | required | Headline copy, rendered as the section's single h1. |
| subtitle | string | undefined | Supporting copy rendered below the headline. |
| cta | { label: string; href: string } | required | Primary call to action, rendered as a real anchor. |
| secondaryCta | { label: string; href: string } | undefined | Optional secondary call to action, rendered as a real anchor. |
| className | string | undefined | Additional classes merged onto the section root. |
Customisation
Spotlight Hero declares no tokens of its own; the background is themed through the Spotlight Follow component it installs as a registry dependency. Override --spotlight-color for the glow colour and --spotlight-size for the glow diameter, from :root or any ancestor of the hero, to retheme the whole section without touching the code:
:root {
--spotlight-color: var(--color-accent-400);
--spotlight-size: 480px;
}Frequently asked questions
- Is Spotlight Hero free for commercial use?
- Yes. Spotlight Hero is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Does Spotlight Hero affect performance or accessibility?
- The entrance animates transforms and opacity only, inside space the layout has already reserved, so there is no layout shift, and it runs once when the section enters the viewport. The spotlight follows the cursor through a single retargeted transform tween, so React never re-renders as the pointer moves, and the glow layer is aria-hidden and never intercepts clicks on the calls to action. Both calls to action are real anchors with visible focus rings, the headline is a single accessible h1, and with reduced motion enabled the full content renders immediately over a static centred glow.
- How do I change the spotlight colour or size behind the hero?
- Override the CSS custom properties --spotlight-color and --spotlight-size from :root or any ancestor element. They belong to the Spotlight Follow background component that Spotlight Hero installs automatically.