Aurora

A mesmerizing aurora borealis effect with layered, flowing ribbons of light. Built with Three.js and @react-three/fiber.

Interactive Demo

Loading aurora...

Usage

import { Aurora } from "@mantleui/react/three";

<Aurora
  colors={["#3b82f6", "#8b5cf6", "#22c55e"]}
  speed={1}
  layers={3}
  opacity={0.5}
  height={400}
/>

Props

Prop	Type	Default	Description
`colors`	`string[]`	`["#3b82f6", "#8b5cf6", "#22c55e"]`	Aurora ribbon colors.
`speed`	`number`	`1`	Animation speed multiplier.
`layers`	`number`	`3`	Number of ribbon layers.
`opacity`	`number`	`0.5`	Ribbon opacity.
`height`	`string \| number`	`400`	Height of the container.
`backgroundColor`	`string`	`"transparent"`	Background color of the container.

colors["#3b82f6", "#8b5cf6", "#22c55e"]

string[]

Aurora ribbon colors.

speed1

number

Animation speed multiplier.

layers3

number

Number of ribbon layers.

opacity0.5

number

Ribbon opacity.

height400

string | number

Height of the container.

backgroundColor"transparent"

string

Background color of the container.