Mosaic Waves

Waves rolling through a mosaic of shifting tiles

mosaic-waves-tw

pro.reactbits.dev

ComponentsBlocksTemplatesPricing

Get Pro

Waves of tiled motion

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

Get startedBrowse library

9:41

Waves of tiled motion

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

Get startedBrowse library

Waves of tiled motion

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

Get startedLearn more

Customize

Pitch

Fill

0.50

Feather

0.15

Speed

1.00

Warp

0.38

Warp Scale

3.0

Detail Scale

7.0

Wave Scale

4.0

Falloff

5.0

Brightness

5.0

Ambient

0.00

Gamma

2.20

Vignette

0.00

Opacity

1.00

Color

Hot Color

Background

Cursor Interaction

Cursor Pull

0.35

Cursor Glow

0.25

Cursor Reach

0.28

Adaptive QualityPaused

Props

Name	Type	Default	Description
`width`	string \| number	`"100%"`	Container width.
`height`	string \| number	`"100%"`	Container height.
`className`	string	`undefined`	Additional CSS classes.
`children`	ReactNode	`undefined`	Content rendered above the effect.
`pitch`	number	`4`	Distance between tile centres in CSS pixels.
`fill`	number	`0.5`	Portion of each cell the tile fills, from 0 to 1.
`shape`	"square" \| "dot"	`"square"`	Tile silhouette.
`feather`	number	`0.15`	Softness of the tile edge, from 0 to 1.
`speed`	number	`1`	How fast the field drifts.
`warp`	number	`0.375`	Strength of the domain warp that folds the field.
`warpScale`	number	`3`	Scale of the warp field.
`detailScale`	number	`7`	Scale of the finer warp riding inside the first.
`waveScale`	number	`4`	Scale of the wave field being lit.
`falloff`	number	`5`	Falloff exponent. Higher values tighten the bright ridges.
`brightness`	number	`5`	Overall gain applied to the wave.
`ambient`	number	`0`	Level the darkest tiles settle at.
`color`	string	`"#3366ff"`	Colour of the wave.
`hotColor`	string	`"#bfd4ff"`	Colour the brightest ridges shift toward.
`backgroundColor`	string	`"#0a0a0a"`	Background fill colour. Accepts "transparent".
`gamma`	number	`2.2`	Contrast curve applied at the end.
`vignette`	number	`0`	Darkening toward the edges, from 0 to 1.
`opacity`	number	`1`	Master alpha, from 0 to 1.
`cursorInteraction`	boolean	`true`	Let the pointer bend and light the field.
`cursorPull`	number	`0.35`	How far the pointer pulls the field.
`cursorGlow`	number	`0.25`	How much the pointer lights nearby tiles.
`cursorReach`	number	`0.28`	Reach of the pointer, from 0 to 1.
`adaptiveQuality`	boolean	`true`	Drop resolution when the frame rate falls short.
`targetFps`	number	`60`	Frame rate the adaptive pass aims for.
`dpr`	number	`2`	Upper bound on device pixel ratio.
`paused`	boolean	`false`	Hold the animation still.

widthstring | number

Container width.

Default"100%"

heightstring | number

Container height.

Default"100%"

classNamestring

Additional CSS classes.

Defaultundefined

childrenReactNode

Content rendered above the effect.

Defaultundefined

pitchnumber

Distance between tile centres in CSS pixels.

Default4

fillnumber

Portion of each cell the tile fills, from 0 to 1.

Default0.5

shape"square" | "dot"

Tile silhouette.

Default"square"

feathernumber

Softness of the tile edge, from 0 to 1.

Default0.15

speednumber

How fast the field drifts.

Default1

warpnumber

Strength of the domain warp that folds the field.

Default0.375

warpScalenumber

Scale of the warp field.

Default3

detailScalenumber

Scale of the finer warp riding inside the first.

Default7

waveScalenumber

Scale of the wave field being lit.

Default4

falloffnumber

Falloff exponent. Higher values tighten the bright ridges.

Default5

brightnessnumber

Overall gain applied to the wave.

Default5

ambientnumber

Level the darkest tiles settle at.

Default0

colorstring

Colour of the wave.

Default"#3366ff"

hotColorstring

Colour the brightest ridges shift toward.

Default"#bfd4ff"

backgroundColorstring

Background fill colour. Accepts "transparent".

Default"#0a0a0a"

gammanumber

Contrast curve applied at the end.

Default2.2

vignettenumber

Darkening toward the edges, from 0 to 1.

Default0

opacitynumber

Master alpha, from 0 to 1.

Default1

cursorInteractionboolean

Let the pointer bend and light the field.

Defaulttrue

cursorPullnumber

How far the pointer pulls the field.

Default0.35

cursorGlownumber

How much the pointer lights nearby tiles.

Default0.25

cursorReachnumber

Reach of the pointer, from 0 to 1.

Default0.28

adaptiveQualityboolean

Drop resolution when the frame rate falls short.

Defaulttrue

targetFpsnumber

Frame rate the adaptive pass aims for.

Default60

dprnumber

Upper bound on device pixel ratio.

Default2

pausedboolean

Hold the animation still.

Defaultfalse

Name

Type

Default

Description

width

string | number

"100%"

Container width.

height

string | number

"100%"

Container height.

className

string

undefined

Additional CSS classes.

children

ReactNode

undefined

Content rendered above the effect.

pitch

number

4

Distance between tile centres in CSS pixels.

fill

number

0.5

Portion of each cell the tile fills, from 0 to 1.

shape

"square" | "dot"

"square"

Tile silhouette.

feather

number

0.15

Softness of the tile edge, from 0 to 1.

speed

number

1

How fast the field drifts.

warp

number

0.375

Strength of the domain warp that folds the field.

warpScale

number

3

Scale of the warp field.

detailScale

number

7

Scale of the finer warp riding inside the first.

waveScale

number

4

Scale of the wave field being lit.

falloff

number

5

Falloff exponent. Higher values tighten the bright ridges.

brightness

number

5

Overall gain applied to the wave.

ambient

number

0

Level the darkest tiles settle at.

color

string

"#3366ff"

Colour of the wave.

hotColor

string

"#bfd4ff"

Colour the brightest ridges shift toward.

backgroundColor

string

"#0a0a0a"

Background fill colour. Accepts "transparent".

gamma

number

2.2

Contrast curve applied at the end.

vignette

number

0

Darkening toward the edges, from 0 to 1.

opacity

number

1

Master alpha, from 0 to 1.

cursorInteraction

boolean

true

Let the pointer bend and light the field.

cursorPull

number

0.35

How far the pointer pulls the field.

cursorGlow

number

0.25

How much the pointer lights nearby tiles.

cursorReach

number

0.28

Reach of the pointer, from 0 to 1.

adaptiveQuality

boolean

true

Drop resolution when the frame rate falls short.

targetFps

number

60

Frame rate the adaptive pass aims for.

dpr

number

2

Upper bound on device pixel ratio.

paused

boolean

false

Hold the animation still.