Components

Aurora Background

Section wrapper bathed in three huge, heavily blurred lumen blobs that drift on very slow loops behind the content, finished with a faint grain and vignette so the glow reads quiet rather than loud.

Quiet, not loud

A faint grain and vignette keep the glow at section depth.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal
npx lumora-ui@latest add aurora-background

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx
import { AuroraBackground } from "@lumora/ui/components/aurora-background";
// or from the barrel:
import { AuroraBackground } from "@lumora/ui";

Props worth knowing

A section wrapper: pass your content as children. animated (default true) drives the slow blob drift and is forced off under reduced motion. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.