A wall of glowing panels swept by moving light
| Name | Type | Default | Description |
|---|---|---|---|
speed | number | 1 | Overall animation rate. |
density | number | 5 | How many panels fit across the shorter side. |
range | number | 2 | Neighbour rings searched per pixel, 1 is faster. |
twist | number | 0 | Resting rotation of the panels, in radians. |
spin | number | 0 | How fast the panels rotate. |
pan | number | 0 | How fast the whole wall glides across the frame. |
panAngle | number | 0.9 | Direction the wall glides, in radians. |
drift | number | 1 | How often each panel picks a new anchor. |
wander | number | 1 | How far a panel can travel inside its cell, 0 to 1. |
seam | number | 1.3 | Seam thickness in pixels. |
edgeStrength | number | 1.1 | Brightness of the seam. |
glow | number | 0.14 | Softness of the light bleeding off the seam. |
glowFalloff | number | 9 | How far the seam light reaches. |
ambient | number | 0.16 | Brightness of an idle panel. |
pulse | number | 0 | How much each panel breathes on its own, 0 keeps them steady. |
pulseRate | number | 1.1 | How fast panels breathe. |
sweep | number | 0.75 | Strength of the wave that lights panels in sequence. |
sweepAngle | number | 0.9 | Direction the sweep travels, in radians. |
sweepScale | number | 1.2 | How many panels the sweep spans. |
sweepSpeed | number | 0.45 | How fast the sweep travels. |
color | string | "#2a1247" | Colour of a resting panel. |
accentColor | string | "#d946ef" | Colour of a lit panel. |
edgeColor | string | "#f0abfc" | Colour of the seams. |
gain | number | 1 | Overall exposure. |
grain | number | 0.04 | Film grain strength, 0 to 1. |
grainRate | number | 24 | Grain refresh rate, in hertz. |
vignette | number | 0.25 | Darkening toward the corners, 0 to 1. |
backgroundColor | string | "#0a0a0a" | Colour behind the wall, or transparent. |
opacity | number | 1 | Opacity of the whole layer. |
cursorInteraction | boolean | true | Let the pointer light up nearby panels. |
cursorGlow | number | 0.45 | How brightly panels answer the pointer. |
cursorRadius | number | 0.28 | Radius the pointer reaches, in screen heights. |
paused | boolean | false | Freeze the animation. |
adaptiveQuality | boolean | true | Scale resolution down when frames get expensive. |
targetFps | number | 60 | Frame rate the quality scaler aims for. |
dpr | number | 1.75 | Upper device pixel ratio bound. |
className | string | undefined | Extra classes for the wrapper. |
children | ReactNode | undefined | Content layered above the wall. |
speednumberOverall animation rate.
1densitynumberHow many panels fit across the shorter side.
5rangenumberNeighbour rings searched per pixel, 1 is faster.
2twistnumberResting rotation of the panels, in radians.
0spinnumberHow fast the panels rotate.
0pannumberHow fast the whole wall glides across the frame.
0panAnglenumberDirection the wall glides, in radians.
0.9driftnumberHow often each panel picks a new anchor.
1wandernumberHow far a panel can travel inside its cell, 0 to 1.
1seamnumberSeam thickness in pixels.
1.3edgeStrengthnumberBrightness of the seam.
1.1glownumberSoftness of the light bleeding off the seam.
0.14glowFalloffnumberHow far the seam light reaches.
9ambientnumberBrightness of an idle panel.
0.16pulsenumberHow much each panel breathes on its own, 0 keeps them steady.
0pulseRatenumberHow fast panels breathe.
1.1sweepnumberStrength of the wave that lights panels in sequence.
0.75sweepAnglenumberDirection the sweep travels, in radians.
0.9sweepScalenumberHow many panels the sweep spans.
1.2sweepSpeednumberHow fast the sweep travels.
0.45colorstringColour of a resting panel.
"#2a1247"accentColorstringColour of a lit panel.
"#d946ef"edgeColorstringColour of the seams.
"#f0abfc"gainnumberOverall exposure.
1grainnumberFilm grain strength, 0 to 1.
0.04grainRatenumberGrain refresh rate, in hertz.
24vignettenumberDarkening toward the corners, 0 to 1.
0.25backgroundColorstringColour behind the wall, or transparent.
"#0a0a0a"opacitynumberOpacity of the whole layer.
1cursorInteractionbooleanLet the pointer light up nearby panels.
truecursorGlownumberHow brightly panels answer the pointer.
0.45cursorRadiusnumberRadius the pointer reaches, in screen heights.
0.28pausedbooleanFreeze the animation.
falseadaptiveQualitybooleanScale resolution down when frames get expensive.
truetargetFpsnumberFrame rate the quality scaler aims for.
60dprnumberUpper device pixel ratio bound.
1.75classNamestringExtra classes for the wrapper.
undefinedchildrenReactNodeContent layered above the wall.
undefined