Spotlight Hero
A free interactive hero section with a cursor-following spotlight.
See the breach while it is still one account
Sightline correlates identity, endpoint and cloud events into one incident, so the median time from first anomaly to a contained account is six minutes instead of four hours.
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 Motion, 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.
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, then leaves nothing running: with the pointer still, the page requests no animation frames. Focus moving into the hero, or reduced motion switching on, finishes the entrance at once, so a keyboard user never tabs onto an invisible link. The spotlight eases toward the cursor one transform write per frame, only while it is moving, 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.