Rubber Fluid

Glossy rubber folds of color drifting slowly

rubber-fluid-tw

Customize

First Color

Second Color

Background

Speed

1.00

Scale

1.00

Fold Depth

1.00

Gloss

0.20

Sheen

0.12

Roughness

0.40

Light Angle

135°

Contrast

5.0

Iterations

Rotation Rate

2.00

Warp Power

1.50

Seed Factor

1.00

Wave Strength

1.00

Opacity

1.00

InteractiveIntroPaused

Props

Name	Type	Default	Description
`colors`	[string, string]	`["#9D0FD9", "#FF12FF"]`	The two colours of the folds, blended in OKLCh. The first tints their edges and shadowed sides, the second their glowing crests. On light backgrounds they become deeper, matching tones.
`backgroundColor`	string	`"transparent"`	Colour behind the rubber. The valleys sink into it. Transparent shows the page behind and reads its colour to pick a light or dark rendering.
`speed`	number	`1`	Speed of the slow drift of the folds.
`scale`	number	`1`	Size of the folds. Larger values give broader folds.
`foldDepth`	number	`1`	Relief of the folds under the studio light. Zero gives a flat glow.
`gloss`	number	`0.2`	Strength of the reflection of the studio light.
`sheen`	number	`0.12`	Strength of the soft rim light on the far sides of the folds.
`roughness`	number	`0.4`	Blur of the highlights. Low values give crisp latex, high values soft satin.
`lightAngle`	number	`135`	Direction of the studio light in degrees (0 is right, 90 is up).
`contrast`	number	`5`	How sharply the folds rise from the background. Higher values leave more of the frame in shadow.
`waveStrength`	number	`1`	Strength of the wave a click or tap sends through the rubber, from 0 to 3.
`iterations`	number	`10`	Layers of folding. Fewer layers give broad, calm folds. More add fine creases.
`rotationRate`	number	`2`	How much each layer of folds turns, which sets the swirl.
`warpPower`	number	`1.5`	How far the rubber is stretched. Low values give soft, wide flows.
`seedFactor`	number	`1`	Varies the pattern of folds. Values from 0.3 to 1.5 work best.
`opacity`	number	`1`	Overall opacity of the rubber.
`interactive`	boolean	`true`	Click or tap to send a wave through the rubber. Waves stack. Hovering tightens the surface slightly, so the sheen sharpens.
`intro`	boolean	`true`	The folds spring up and settle when the component appears.
`paused`	boolean	`false`	Stops the motion. Reduced-motion users get a still frame.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`width`	string \| number	`"100%"`	Width of the root element.
`height`	string \| number	`"100%"`	Height of the root element.
`children`	ReactNode	`undefined`	Content laid over the rubber. Clicks on its links and buttons never send waves.
`ref`	{ poke, replay }	`undefined`	poke(x?, y?, strength?) sends a wave from a point (0 to 1 across the component), replay() plays the intro again.
`className`	string	`undefined`	Classes for the root element.
`style`	CSSProperties	`undefined`	Inline styles for the root element.

colors[string, string]

The two colours of the folds, blended in OKLCh. The first tints their edges and shadowed sides, the second their glowing crests. On light backgrounds they become deeper, matching tones.

Default["#9D0FD9", "#FF12FF"]

backgroundColorstring

Colour behind the rubber. The valleys sink into it. Transparent shows the page behind and reads its colour to pick a light or dark rendering.

Default"transparent"

speednumber

Speed of the slow drift of the folds.

Default1

scalenumber

Size of the folds. Larger values give broader folds.

Default1

foldDepthnumber

Relief of the folds under the studio light. Zero gives a flat glow.

Default1

glossnumber

Strength of the reflection of the studio light.

Default0.2

sheennumber

Strength of the soft rim light on the far sides of the folds.

Default0.12

roughnessnumber

Blur of the highlights. Low values give crisp latex, high values soft satin.

Default0.4

lightAnglenumber

Direction of the studio light in degrees (0 is right, 90 is up).

Default135

contrastnumber

How sharply the folds rise from the background. Higher values leave more of the frame in shadow.

Default5

waveStrengthnumber

Strength of the wave a click or tap sends through the rubber, from 0 to 3.

Default1

iterationsnumber

Layers of folding. Fewer layers give broad, calm folds. More add fine creases.

Default10

rotationRatenumber

How much each layer of folds turns, which sets the swirl.

Default2

warpPowernumber

How far the rubber is stretched. Low values give soft, wide flows.

Default1.5

seedFactornumber

Varies the pattern of folds. Values from 0.3 to 1.5 work best.

Default1

opacitynumber

Overall opacity of the rubber.

Default1

interactiveboolean

Click or tap to send a wave through the rubber. Waves stack. Hovering tightens the surface slightly, so the sheen sharpens.

Defaulttrue

introboolean

The folds spring up and settle when the component appears.

Defaulttrue

pausedboolean

Stops the motion. Reduced-motion users get a still frame.

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

widthstring | number

Width of the root element.

Default"100%"

heightstring | number

Height of the root element.

Default"100%"

childrenReactNode

Content laid over the rubber. Clicks on its links and buttons never send waves.

Defaultundefined

ref{ poke, replay }

poke(x?, y?, strength?) sends a wave from a point (0 to 1 across the component), replay() plays the intro again.

Defaultundefined

classNamestring

Classes for the root element.

Defaultundefined

styleCSSProperties

Inline styles for the root element.

Defaultundefined

Name

Type

Default

Description

colors

[string, string]

["#9D0FD9", "#FF12FF"]

The two colours of the folds, blended in OKLCh. The first tints their edges and shadowed sides, the second their glowing crests. On light backgrounds they become deeper, matching tones.

backgroundColor

string

"transparent"

Colour behind the rubber. The valleys sink into it. Transparent shows the page behind and reads its colour to pick a light or dark rendering.

speed

number

1

Speed of the slow drift of the folds.

scale

number

1

Size of the folds. Larger values give broader folds.

foldDepth

number

1

Relief of the folds under the studio light. Zero gives a flat glow.

gloss

number

0.2

Strength of the reflection of the studio light.

sheen

number

0.12

Strength of the soft rim light on the far sides of the folds.

roughness

number

0.4

Blur of the highlights. Low values give crisp latex, high values soft satin.

lightAngle

number

135

Direction of the studio light in degrees (0 is right, 90 is up).

contrast

number

5

How sharply the folds rise from the background. Higher values leave more of the frame in shadow.

waveStrength

number

1

Strength of the wave a click or tap sends through the rubber, from 0 to 3.

iterations

number

10

Layers of folding. Fewer layers give broad, calm folds. More add fine creases.

rotationRate

number

2

How much each layer of folds turns, which sets the swirl.

warpPower

number

1.5

How far the rubber is stretched. Low values give soft, wide flows.

seedFactor

number

1

Varies the pattern of folds. Values from 0.3 to 1.5 work best.

opacity

number

1

Overall opacity of the rubber.

interactive

boolean

true

Click or tap to send a wave through the rubber. Waves stack. Hovering tightens the surface slightly, so the sheen sharpens.

intro

boolean

true

The folds spring up and settle when the component appears.

paused

boolean

false

Stops the motion. Reduced-motion users get a still frame.

dpr

number

2

Maximum device pixel ratio for the canvas.

width

string | number

"100%"

Width of the root element.

height

string | number

"100%"

Height of the root element.

children

ReactNode

undefined

Content laid over the rubber. Clicks on its links and buttons never send waves.

ref

{ poke, replay }

undefined

poke(x?, y?, strength?) sends a wave from a point (0 to 1 across the component), replay() plays the intro again.

className

string

undefined

Classes for the root element.

style

CSSProperties

undefined

Inline styles for the root element.