Mosaic Waves
Waves rolling through a mosaic of shifting tiles
Customize
Props
30| 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 | numberContainer width.
"100%"heightstring | numberContainer height.
"100%"classNamestringAdditional CSS classes.
undefinedchildrenReactNodeContent rendered above the effect.
undefinedpitchnumberDistance between tile centres in CSS pixels.
4fillnumberPortion of each cell the tile fills, from 0 to 1.
0.5shape"square" | "dot"Tile silhouette.
"square"feathernumberSoftness of the tile edge, from 0 to 1.
0.15speednumberHow fast the field drifts.
1warpnumberStrength of the domain warp that folds the field.
0.375warpScalenumberScale of the warp field.
3detailScalenumberScale of the finer warp riding inside the first.
7waveScalenumberScale of the wave field being lit.
4falloffnumberFalloff exponent. Higher values tighten the bright ridges.
5brightnessnumberOverall gain applied to the wave.
5ambientnumberLevel the darkest tiles settle at.
0colorstringColour of the wave.
"#3366ff"hotColorstringColour the brightest ridges shift toward.
"#bfd4ff"backgroundColorstringBackground fill colour. Accepts "transparent".
"#0a0a0a"gammanumberContrast curve applied at the end.
2.2vignettenumberDarkening toward the edges, from 0 to 1.
0opacitynumberMaster alpha, from 0 to 1.
1cursorInteractionbooleanLet the pointer bend and light the field.
truecursorPullnumberHow far the pointer pulls the field.
0.35cursorGlownumberHow much the pointer lights nearby tiles.
0.25cursorReachnumberReach of the pointer, from 0 to 1.
0.28adaptiveQualitybooleanDrop resolution when the frame rate falls short.
truetargetFpsnumberFrame rate the adaptive pass aims for.
60dprnumberUpper bound on device pixel ratio.
2pausedbooleanHold the animation still.
false