Spotlight Shafts React component
A stage-light background shader: five spotlight beams cut through drifting haze from above, swaying slowly, with dust motes glinting only where the light catches them and a warm glow on the floor; the middle spotlight follows the pointer.
About the Spotlight Shafts component
Spotlight Shafts is a dark stage lit from above: five beams of light cut down through drifting haze, swaying slowly, with dust glinting where the light catches it and a soft glow pooling on the floor.
The middle spotlight swings to follow your pointer, which makes it great for drawing the eye to whatever sits under it. It's a WebGL shader and pauses when hidden.
When to use it
Use it for award shows, launches, event and concert pages, theatre and music sites, or any 'announcing…' hero.
Centre the main message under the middle beam; the edges stay darker for supporting text.
Installation
Add the Spotlight Shafts component to your project with the shadcn CLI. It lands in components/spotlight-shafts.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/spotlight-shaftsOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<SpotlightShafts /> accepts 8 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| children Content shown on top of the background. | React.ReactNode | — |
| colors Light colours: warm beams, cool beams, dust motes and the glow on the floor. | [string, string, string, string] | DEFAULT_COLORS |
| background Base colour behind the effect. | string | DEFAULT_BACKGROUND |
| speed Animation speed multiplier. | number | 1 |
| intensity Overall brightness of the effect. | number | 1 |
| interactive The middle spotlight swings to follow the pointer. | boolean | true |
| resolution Render scale: 1 is full resolution, lower values are cheaper on very large screens. | number | 1 |
| paused Freeze the animation on its current frame. | boolean | false |
- children
Content shown on top of the background.
React.ReactNode - colors
Light colours: warm beams, cool beams, dust motes and the glow on the floor.
[string, string, string, string]Default: DEFAULT_COLORS - background
Base colour behind the effect.
stringDefault: DEFAULT_BACKGROUND - speed
Animation speed multiplier.
numberDefault: 1 - intensity
Overall brightness of the effect.
numberDefault: 1 - interactive
The middle spotlight swings to follow the pointer.
booleanDefault: true - resolution
Render scale: 1 is full resolution, lower values are cheaper on very large screens.
numberDefault: 1 - paused
Freeze the animation on its current frame.
booleanDefault: false
npm dependencies
Installed for you by the shadcn CLI.
Spotlight Shafts FAQ
- How do I put content on top?
- Pass it as children. SpotlightShafts is a relative container with the effect drawn behind its children, so give it a height (or make it absolute inset-0 inside a section) and lay your content out inside.
- Can I change the colours?
- Pass colors with four colours: the warm beams, the cool beams, the dust motes and the floor glow. All-warm sets read as theatre, all-cool as concert lighting.
- Is it heavy on performance?
- It's one small WebGL shader. It only animates while it's on screen and the tab is visible, caps the pixel density at 1.5x, and resolution={0.6} renders it smaller and scales it up on very large screens.
- What about reduced motion?
- With reduced motion turned on, or paused set, it draws a single still frame instead of animating. Without WebGL it falls back to a soft CSS gradient in the same colours.
