Aurora Background

Northern lights as folding canvas curtains: irregular ribbons and faint rays drifting across a night sky.

Add to your project

1Connect the Uniquel MCP

Connect Uniquel to your coding agent before using the component ID.

2Copy the component ID

MCP ID

component:backgrounds/aurora-background

Works with your AI tools

Claude*

Codex*

Lovable

Base44

Figma Make

Replit*

Cursor*

* Compatible with most projects that use the default React/Next.js framework.

Built With

React

Tailwind CSSCanvas API

Props

Prop	Type	Description
`children`	`ReactNode`	Content layered above the aurora (headline, CTA, etc.)
`className`	`string`	Styles for the content wrapper
`containerClassName`	`string`	Styles for the outer shell (size, layout)
`theme`	`'dark' \| 'light'`	Night sky or pale daylight ground
`colors`	`string[]`	Aurora tones, sampled left → right across the sky
`intensity`	`number`	Overall brightness of the light
`speed`	`'slow' \| 'medium' \| 'fast'`	How quickly the curtains fold and drift

More Backgrounds Components

Wavy Tide Background

Animated canvas waves that fill the container and drift with the pointer — a softer, SaaS-ready take on classic wavy backgrounds.

Meteor Shower Background

Subtle canvas meteors drifting across a dark sky — a quiet animated background for heroes and landing sections.

Neon Flow Background

Staggered neon trails that sweep across a dark field — colors are prop-driven for easy theming.

Desert Dune Background

Soft layered waves in parallax drift — cool indigo tones by default, colors via props.

Background Grid

A static 3D background grid — a wireframe perspective grid that covers the full container, warped and bowed toward a vanishing point for depth. No animation, no layout shift.