Signature / Moleculestable

Aurora Background

Animated gradient mesh backdrop with floating blurred blobs.

@glinui/uiComponent: aurora-background

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add aurora-background

Usage$

Place AuroraBackground inside a relative container. It renders blurred gradient blobs that float with CSS animations. Perfect for hero sections and landing pages.

Basic$

Aurora

TSX

1import { AuroraBackground } from "@glinui/ui"
2
3export function AuroraBackgroundDemo() {
4return (
5  <div className="relative flex h-64 w-full items-center justify-center overflow-hidden rounded-xl border border-neutral-200 bg-neutral-950 dark:border-neutral-800">
6    <AuroraBackground />
7    <span className="relative z-10 text-3xl font-bold text-white">Aurora</span>
8  </div>
9)
10}

Examples$

Custom Colors$

Cool Tones

TSX

1import { AuroraBackground } from "@glinui/ui"
2
3export function AuroraColorsDemo() {
4return (
5  <div className="relative flex h-64 w-full items-center justify-center overflow-hidden rounded-xl border border-neutral-200 bg-neutral-950 dark:border-neutral-800">
6    <AuroraBackground colors={["#06b6d4", "#3b82f6", "#8b5cf6"]} intensity={0.5} />
7    <span className="relative z-10 text-3xl font-bold text-white">Cool Tones</span>
8  </div>
9)
10}

More Blobs$

Dense Aurora

TSX

1import { AuroraBackground } from "@glinui/ui"
2
3export function AuroraManyBlobsDemo() {
4return (
5  <div className="relative flex h-64 w-full items-center justify-center overflow-hidden rounded-xl border border-neutral-200 bg-neutral-950 dark:border-neutral-800">
6    <AuroraBackground blobCount={5} duration={12} blur={100} />
7    <span className="relative z-10 text-2xl font-bold text-white">Dense Aurora</span>
8  </div>
9)
10}

Accessibility$

The component renders with aria-hidden — invisible to assistive technologies.
Purely decorative; carries no semantic meaning.

Reduced Motion$

When prefers-reduced-motion: reduce is active, all blob animations are paused via motion-reduce:[animation:none]. The static gradient blobs remain visible.

API Reference$

Prop	Type	Required	Default	Description
`blobCount`	`number`	No	`3`	Number of gradient blobs
`blur`	`number`	No	`80`	Blur intensity in px
`colors`	`string[]`	No	`["#a855f7", "#6366f1", "#ec4899"]`	Base colors for the aurora
`duration`	`number`	No	`8`	Animation duration in seconds
`intensity`	`number`	No	`0.4`	Opacity of the aurora layer (0-1)

Source$

TSX

1import { AuroraBackground } from "@glinui/ui"

packages/ui/src/components/aurora-background.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/aurora-background.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

AuroraBackgroundProps

`AuroraBackgroundProps`

Prop	Type	Required	Default	Description
`blobCount`	`number`	No	`3`	Number of gradient blobs
`blur`	`number`	No	`80`	Blur intensity in px
`colors`	`string[]`	No	`["#a855f7", "#6366f1", "#ec4899"]`	Base colors for the aurora
`duration`	`number`	No	`8`	Animation duration in seconds
`intensity`	`number`	No	`0.4`	Opacity of the aurora layer (0-1)