DocsAurora Flow

Aurora Flow

A procedural atmospheric hero background with layered silk flow, diffused aurora light, subtle interaction, and production-ready presets.

Installation

pnpm dlx shadcn@latest add @componentry/aurora-flow

Usage

Aurora Flow renders one WebGL quad, caps pixel density, pauses outside the viewport, and draws only a static frame when reduced motion is requested.

import { AuroraFlow } from "@/components/ui/aurora-flow"

<AuroraFlow
  preset="ocean"
  className="min-h-[600px]"
/>

API Reference

Property	Type	Default
`colors` Up to five custom hex colors overriding the selected preset.	`readonly string[]`	—
`preset` Production palette: ocean, aurora, sky, cloud, sunset, midnight, ice, dream, nebula, emerald, lavender, or mono.	`AuroraFlowPreset`	`"ocean"`
`speed` Global motion speed multiplier.	`number`	`1`
`intensity` Strength of flowing color and silk highlights.	`number`	`1`
`opacity` Final canvas opacity.	`number`	`1`
`blur` Diffusion softness applied to atmospheric fields.	`number`	`1`
`contrast` Final color contrast.	`number`	`1.04`
`brightness` Final scene brightness.	`number`	`1`
`grain` Enables fine film-inspired grain.	`boolean`	`true`
`grainOpacity` Strength of fine grain.	`number`	`0.22`
`layers` Procedural FBM depth, clamped from 3 to 7.	`number`	`6`
`flowScale` Scale of the broad atmospheric structures.	`number`	`1`
`flowStrength` Strength of domain warping and silk folds.	`number`	`1`
`flowDirection` Primary flow direction in degrees.	`number`	`-18`
`animationSpeed` Fine multiplier for procedural evolution.	`number`	`1`
`pointerInteraction` Enables restrained pointer-driven flow bending.	`boolean`	`true`
`pointerStrength` Maximum pointer influence.	`number`	`0.7`
`scrollInteraction` Enables subtle scroll-driven depth movement.	`boolean`	`false`
`parallaxStrength` Strength of scroll parallax.	`number`	`0.5`
`lighting` Enables the broad traveling bloom.	`boolean`	`true`
`lightingIntensity` Brightness of traveling light.	`number`	`0.8`
`lightingRadius` Diffusion radius of traveling light.	`number`	`1`
`lightingSpeed` Independent light movement speed.	`number`	`0.8`
`ambientGlow` Enables the broad central ambient lift.	`boolean`	`true`
`ambientOpacity` Strength of ambient illumination.	`number`	`0.7`
`noise` Enables low-frequency atmospheric haze.	`boolean`	`true`
`noiseOpacity` Strength of atmospheric haze.	`number`	`0.16`
`noiseScale` Scale of the haze field.	`number`	`1`
`vignette` Enables soft edge falloff.	`boolean`	`true`
`vignetteStrength` Strength of edge falloff.	`number`	`0.55`
`borderRadius` Radius applied to the background container.	`CSSProperties['borderRadius']`	`0`
`className` Additional classes for sizing and placement.	`string`	—
`style` Additional inline styles for the root container.	`CSSProperties`	—
`children` Optional content rendered above the atmospheric canvas.	`ReactNode`	—

View source

Click the icon in the preview panel to browse source for each variant.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X

Property

Type

Default

colors

Up to five custom hex colors overriding the selected preset.

readonly string[]

—

preset

Production palette: ocean, aurora, sky, cloud, sunset, midnight, ice, dream, nebula, emerald, lavender, or mono.

AuroraFlowPreset

"ocean"

speed

Global motion speed multiplier.

number

1

intensity

Strength of flowing color and silk highlights.

number

1

opacity

Final canvas opacity.

number

1

blur

Diffusion softness applied to atmospheric fields.

number

1

contrast

Final color contrast.

number

1.04

brightness

Final scene brightness.

number

1

grain

Enables fine film-inspired grain.

boolean

true

grainOpacity

Strength of fine grain.

number

0.22

layers

Procedural FBM depth, clamped from 3 to 7.

number

6

flowScale

Scale of the broad atmospheric structures.

number

1

flowStrength

Strength of domain warping and silk folds.

number

1

flowDirection

Primary flow direction in degrees.

number

-18

animationSpeed

Fine multiplier for procedural evolution.

number

1

pointerInteraction

Enables restrained pointer-driven flow bending.

boolean

true

pointerStrength

Maximum pointer influence.

number

0.7

scrollInteraction

Enables subtle scroll-driven depth movement.

boolean

false

parallaxStrength

Strength of scroll parallax.

number

0.5

lighting

Enables the broad traveling bloom.

boolean

true

lightingIntensity

Brightness of traveling light.

number

0.8

lightingRadius

Diffusion radius of traveling light.

number

1

lightingSpeed

Independent light movement speed.

number

0.8

ambientGlow

Enables the broad central ambient lift.

boolean

true

ambientOpacity

Strength of ambient illumination.

number

0.7

noise

Enables low-frequency atmospheric haze.

boolean

true

noiseOpacity

Strength of atmospheric haze.

number

0.16

noiseScale

Scale of the haze field.

number

1

vignette

Enables soft edge falloff.

boolean

true

vignetteStrength

Strength of edge falloff.

number

0.55

borderRadius

Radius applied to the background container.

CSSProperties['borderRadius']

0

className

Additional classes for sizing and placement.

string

—

style

Additional inline styles for the root container.

CSSProperties

—

children

Optional content rendered above the atmospheric canvas.

ReactNode

—