Minimal Ripple

Concentric ripples spreading from the center

minimal-ripple-tw

pro.reactbits.dev

ComponentsBlocksTemplatesPricing

Get Pro

Small touches, wide ripples

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

Get startedBrowse library

9:41

Small touches, wide ripples

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

Get startedBrowse library

Small touches, wide ripples

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

Get startedLearn more

Customize

Speed

4.0

Frequency

26.0

Thickness

0.070

Softness

0.020

Radius

0.95

Fade

0.05

Decay

0.80

Gain

1.30

Contrast

1.00

Pulse

0.15

Pulse Rate

0.60

Grain

0.050

Grain Size

Grain Rate

Opacity

1.00

Color

Hot Color

Background

Cursor Interaction

Cursor Follow

0.90

Paused

Props

Name	Type	Default	Description
`speed`	number	`4`	How fast the rings travel outward.
`frequency`	number	`26`	Number of rings packed into the field.
`thickness`	number	`0.07`	Brightness of each ring core.
`softness`	number	`0.02`	Softness of the ring falloff, small values sharpen it.
`radius`	number	`0.95`	Radius at which the rings fade out.
`fade`	number	`0.05`	Inner edge of the fade as a fraction of radius.
`decay`	number	`0.8`	Exponential dimming with distance from the origin.
`gain`	number	`1.3`	Overall brightness.
`contrast`	number	`1`	Tone response curve, above 1 deepens the gaps.
`pulse`	number	`0.15`	Depth of the slow brightness breath, 0 disables it.
`pulseRate`	number	`0.6`	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.
`color`	string	`"#0e7490"`	Colour of the dim part of a ring.
`hotColor`	string	`"#a5f3fc"`	Colour reached at the ring core.
`backgroundColor`	string	`"#0a0a0a"`	Panel backdrop, or "transparent" to show the page through.
`opacity`	number	`1`	Master alpha.
`cursorInteraction`	boolean	`true`	Let the rings radiate from the pointer.
`cursorFollow`	number	`0.9`	How far the origin follows the pointer, 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	`2`	Upper device pixel ratio bound.
`className`	string	`undefined`	Extra classes for the panel.
`children`	ReactNode	`undefined`	Content layered above the panel.

speednumber

How fast the rings travel outward.

Default4

frequencynumber

Number of rings packed into the field.

Default26

thicknessnumber

Brightness of each ring core.

Default0.07

softnessnumber

Softness of the ring falloff, small values sharpen it.

Default0.02

radiusnumber

Radius at which the rings fade out.

Default0.95

fadenumber

Inner edge of the fade as a fraction of radius.

Default0.05

decaynumber

Exponential dimming with distance from the origin.

Default0.8

gainnumber

Overall brightness.

Default1.3

contrastnumber

Tone response curve, above 1 deepens the gaps.

Default1

pulsenumber

Depth of the slow brightness breath, 0 disables it.

Default0.15

pulseRatenumber

Speed of the brightness breath.

Default0.6

grainnumber

Film grain strength, 0 to 1.

Default0.05

grainSizenumber

Grain cell size in CSS pixels.

Default1

grainRatenumber

Grain refreshes per second.

Default24

colorstring

Colour of the dim part of a ring.

Default"#0e7490"

hotColorstring

Colour reached at the ring core.

Default"#a5f3fc"

backgroundColorstring

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

Default"#0a0a0a"

opacitynumber

Master alpha.

Default1

cursorInteractionboolean

Let the rings radiate from the pointer.

Defaulttrue

cursorFollownumber

How far the origin follows the pointer, 0 to 1.

Default0.9

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.

Default2

classNamestring

Extra classes for the panel.

Defaultundefined

childrenReactNode

Content layered above the panel.

Defaultundefined

Name

Type

Default

Description

speed

number

4

How fast the rings travel outward.

frequency

number

26

Number of rings packed into the field.

thickness

number

0.07

Brightness of each ring core.

softness

number

0.02

Softness of the ring falloff, small values sharpen it.

radius

number

0.95

Radius at which the rings fade out.

fade

number

0.05

Inner edge of the fade as a fraction of radius.

decay

number

0.8

Exponential dimming with distance from the origin.

gain

number

1.3

Overall brightness.

contrast

number

1

Tone response curve, above 1 deepens the gaps.

pulse

number

0.15

Depth of the slow brightness breath, 0 disables it.

pulseRate

number

0.6

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.

color

string

"#0e7490"

Colour of the dim part of a ring.

hotColor

string

"#a5f3fc"

Colour reached at the ring core.

backgroundColor

string

"#0a0a0a"

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

opacity

number

1

Master alpha.

cursorInteraction

boolean

true

Let the rings radiate from the pointer.

cursorFollow

number

0.9

How far the origin follows the pointer, 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

2

Upper device pixel ratio bound.

className

string

undefined

Extra classes for the panel.

children

ReactNode

undefined

Content layered above the panel.