Northern Lights React component
A night sky shader with shimmering aurora curtains that ripple and pulse over a mountain ridge and twinkling stars; the curtains brighten and lean toward the pointer, and anything you place inside sits on top.
About the Northern Lights component
Northern Lights is a full-bleed background of a night sky with aurora curtains rippling slowly across it: soft glowing bands with a sharp lower edge and fine rays, drifting and pulsing over a dark mountain ridge, under a field of twinkling stars.
Point at it and the curtains nearby brighten and lean toward you. It's a WebGL shader, so it stays smooth at any size, and it pauses itself when it's off screen or the tab is hidden.
When to use it
Use it behind a hero heading, a travel or outdoor brand landing page, an event or night-time campaign, or a calm sign-up screen.
Keep the text above it short and high-contrast; the bright bands sit in the middle of the frame.
Installation
Add the Northern Lights component to your project with the shadcn CLI. It lands in components/northern-lights.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/northern-lightsOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<NorthernLights /> 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 Aurora colours, bottom edge to top of the curtains, then the star colour. | [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 Curtains near the pointer brighten and lean toward it. | 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
Aurora colours, bottom edge to top of the curtains, then the star colour.
[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
Curtains near the pointer brighten and lean toward it.
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.
Northern Lights FAQ
- How do I put content on top?
- Pass it as children. NorthernLights 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 curtain's lower edge, its middle, its top and the stars. Greens and teals look like a real aurora; pinks and violets look like a rarer red aurora.
- 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.
