Components

Aurora Glow

Soft coloured lights that slowly drift and pulse behind a section. Draws a single still frame when the visitor prefers reduced motion.

Customize

colors

intensity1

speed1

blur48

Usage

Add AuroraGlow.tsx and color.ts to your project, then render it. The snippet updates with your Customize settings.

Example.tsx

import { AuroraGlow } from './AuroraGlow'

export default function Example() {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', isolation: 'isolate', background: '#0b0e1a' }}>
      <AuroraGlow />
      {/* your content */}
    </section>
  )
}

Name	Type	Default	Description
`colors`	`string[]`	`['#ec4899', '#a855de', '#8c6ee1', '#4696eb']`	Colours of the four lights. Repeats if fewer are given.
`intensity`	`number`	`1`	Opacity multiplier for all lights.
`speed`	`number`	`1`	Drift speed multiplier. 0 holds a still frame.
`blur`	`number`	`48`	Blur radius in px.
`position`	`'absolute' \| 'fixed'`	`'absolute'`	'absolute' fills the parent section. 'fixed' fills the viewport behind the page.
`className`	`string`	`—`	Class name for the canvas.

Get Aurora Glow

Buy this component on its own, or get all three in the Night Sky UI Kit.

Buy Aurora Glow Buy the kit