Minimal Ripple

Quiet concentric ripples spreading outward from a still point

minimal-ripple-tw

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