Spotlight Cursor Hero React component
A hero in a dark room: the pointer carries a soft light that lights up the headline and uncovers notes hidden around it. Left alone, the light wanders by itself.
About the Spotlight Cursor Hero component
Spotlight Cursor Hero turns the first screen into a dark room. The headline sits dim until the pointer's light passes over it, and small notes hidden around the page only show inside the beam.
Left alone, the light wanders on a slow figure of eight, so the effect still plays on phones and for people who never move the mouse. The description and buttons stay fully lit at all times.
When to use it
Use it for security, monitoring, data and research products, or anything whose promise is finding what others miss.
Keep anything people must read out of the findings, since those only show inside the light.
Installation
Add the Spotlight Cursor Hero component to your project with the shadcn CLI. It lands in components/spotlight-cursor-hero.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/spotlight-cursor-heroOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<SpotlightCursorHero /> accepts 11 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| eyebrow | string | "Lantern for production systems" |
| title | string | "See what your stack is hiding" |
| description | string | "Point it at any service and it finds the slow, the stale and the forgotten before your c… |
| primaryAction | { label: string; href?: string; onClick?: () => void } | null | { label: "Start a scan" } |
| secondaryAction | { label: string; href?: string; onClick?: () => void; } | null | { label: "Read the docs" } |
| findings Notes that only show inside the light. | { x: number; y: number; label: string; value: string }[] | DEFAULT_FINDINGS |
| radius Radius of the light, in px. | number | 240 |
| wander The light keeps wandering when nothing is steering it. | boolean | true |
| color Colour of the light. | string | — |
| minHeight Height from tablet width up, in px. | number | 720 |
- theme"dark" | "light"Default: "dark"
- eyebrowstringDefault: "Lantern for production systems"
- titlestringDefault: "See what your stack is hiding"
- descriptionstringDefault: "Point it at any service and it finds the slow, the stale and the forgotten before your c…
- primaryAction{ label: string; href?: string; onClick?: () => void } | nullDefault: { label: "Start a scan" }
- secondaryAction{ label: string; href?: string; onClick?: () => void; } | nullDefault: { label: "Read the docs" }
- findings
Notes that only show inside the light.
{ x: number; y: number; label: string; value: string }[]Default: DEFAULT_FINDINGS - radius
Radius of the light, in px.
numberDefault: 240 - wander
The light keeps wandering when nothing is steering it.
booleanDefault: true - color
Colour of the light.
string - minHeight
Height from tablet width up, in px.
numberDefault: 720
Collections
Use-case pages that compare Spotlight Cursor Hero with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Spotlight Cursor Hero FAQ
- Can people read the headline without the light?
- Yes. The dim headline is real text and stays on the page, and screen readers read it normally. The bright copy is hidden from them.
- How do I place the hidden notes?
- Pass findings with x and y as percentages of the hero.
- How does it work on phones?
- The light wanders by itself, and dragging a finger steers it.
- Can I change the colour of the light?
- Yes, with the color prop. It tints the glow around the beam.
