Aura Blob

A soft glowing blob surrounded by a slowly shifting aura

aura-blob-tw

Customize

Speed

0.50

Layers

Stagger

2.30

Radius

4.0

Density

0.90

Softness

0.010

Warp

0.25

Warp Scale

1.8

Gain

2.6

Exposure

130

Contrast

1.00

Camera Distance

13.0

Focal

1.00

Hue Drift

1.00

Pulse

0.12

Pulse Rate

0.50

Grain

0.05

Cursor Tilt

0.60

Opacity

1.00

Color

Mid Color

Deep Color

Background

Cursor InteractionPaused

Props

Name	Type	Default	Description
`speed`	number	`0.5`	How fast the shells tumble.
`layers`	number	`10`	Number of nested shells accumulated along each ray. The main cost knob.
`stagger`	number	`2.3`	Rotation offset applied between consecutive shells, in radians.
`radius`	number	`4`	Radius of the shell the aura wraps around.
`density`	number	`0.9`	Thickness response of the shell. Lower spreads the glow wider.
`softness`	number	`0.01`	Smallest distance the accumulator will divide by.
`warp`	number	`0.25`	Strength of the ridged distortion breaking up the shells.
`warpScale`	number	`1.8`	Spatial frequency of the distortion.
`gain`	number	`2.6`	Overall brightness before tone mapping.
`exposure`	number	`130`	Tone mapping headroom. Higher keeps more of the falloff.
`contrast`	number	`1`	Tone response curve. Above 1 deepens the shadows.
`cameraDistance`	number	`13`	Distance of the eye from the shell.
`focal`	number	`1`	Focal length of the virtual lens.
`color`	string	`"#f472b6"`	First palette colour.
`midColor`	string	`"#a855f7"`	Second palette colour.
`deepColor`	string	`"#4338ca"`	Third palette colour.
`hueDrift`	number	`1`	How fast the palette cycles through the shells.
`pulse`	number	`0.12`	Depth of the slow brightness breath. 0 disables it.
`pulseRate`	number	`0.5`	Speed of the brightness breath.
`grain`	number	`0.05`	Film grain strength, 0 to 1.
`grainSize`	number	`1`	Grain cell size in CSS pixels.
`grainRate`	number	`24`	Grain refreshes per second.
`backgroundColor`	string	`"#0a0a0a"`	Panel backdrop, or "transparent" to show the page through.
`opacity`	number	`1`	Master alpha.
`cursorInteraction`	boolean	`true`	Let the pointer swing the shells around.
`cursorTilt`	number	`0.6`	How far the pointer tilts the view, 0 to 1.
`paused`	boolean	`false`	Freeze the animation.
`adaptiveQuality`	boolean	`true`	Scale back resolution when the frame budget slips.
`targetFps`	number	`60`	Frame rate the quality meter aims to hold.
`dpr`	number	`1.75`	Upper device pixel ratio bound.
`className`	string	`-`	Optional className applied to the root.
`children`	ReactNode	`-`	Content layered above the aura.

speednumber

How fast the shells tumble.

Default0.5

layersnumber

Number of nested shells accumulated along each ray. The main cost knob.

Default10

staggernumber

Rotation offset applied between consecutive shells, in radians.

Default2.3

radiusnumber

Radius of the shell the aura wraps around.

Default4

densitynumber

Thickness response of the shell. Lower spreads the glow wider.

Default0.9

softnessnumber

Smallest distance the accumulator will divide by.

Default0.01

warpnumber

Strength of the ridged distortion breaking up the shells.

Default0.25

warpScalenumber

Spatial frequency of the distortion.

Default1.8

gainnumber

Overall brightness before tone mapping.

Default2.6

exposurenumber

Tone mapping headroom. Higher keeps more of the falloff.

Default130

contrastnumber

Tone response curve. Above 1 deepens the shadows.

Default1

cameraDistancenumber

Distance of the eye from the shell.

Default13

focalnumber

Focal length of the virtual lens.

Default1

colorstring

First palette colour.

Default"#f472b6"

midColorstring

Second palette colour.

Default"#a855f7"

deepColorstring

Third palette colour.

Default"#4338ca"

hueDriftnumber

How fast the palette cycles through the shells.

Default1

pulsenumber

Depth of the slow brightness breath. 0 disables it.

Default0.12

pulseRatenumber

Speed of the brightness breath.

Default0.5

grainnumber

Film grain strength, 0 to 1.

Default0.05

grainSizenumber

Grain cell size in CSS pixels.

Default1

grainRatenumber

Grain refreshes per second.

Default24

backgroundColorstring

Panel backdrop, or "transparent" to show the page through.

Default"#0a0a0a"

opacitynumber

Master alpha.

Default1

cursorInteractionboolean

Let the pointer swing the shells around.

Defaulttrue

cursorTiltnumber

How far the pointer tilts the view, 0 to 1.

Default0.6

pausedboolean

Freeze the animation.

Defaultfalse

adaptiveQualityboolean

Scale back resolution when the frame budget slips.

Defaulttrue

targetFpsnumber

Frame rate the quality meter aims to hold.

Default60

dprnumber

Upper device pixel ratio bound.

Default1.75

classNamestring

Optional className applied to the root.

Default-

childrenReactNode

Content layered above the aura.

Default-