Aura Blob

A soft glowing blob surrounded by a shifting aura

aura-blob-tw

pro.reactbits.dev

ComponentsBlocksTemplatesPricing

Get Pro

Give your brand an aura

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedBrowse library

9:41

Give your brand an aura

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedBrowse library

Give your brand an aura

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedLearn more

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-

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.