Tech Wall

A wall of technical panels lighting up in sequence

tech-wall-tw

Customize

Speed

1.00

Density

5.0

Twist

0.00

Spin

0.00

Pan

0.00

Pan Angle

0.90

Drift

1.00

Wander

1.00

Seam

1.3

Edge Strength

1.10

Glow

0.14

Glow Falloff

9.0

Ambient

0.16

Pulse

0.00

Pulse Rate

1.10

Sweep

0.75

Sweep Angle

0.90

Sweep Scale

1.2

Sweep Speed

0.45

Gain

1.00

Grain

0.040

Grain Rate

Vignette

0.25

Opacity

1.00

Cursor Glow

0.45

Cursor Radius

0.28

Panel

Accent

Edge

Background

Cursor InteractionPaused

Props

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.

speednumber

Overall animation rate.

Default1

densitynumber

How many panels fit across the shorter side.

Default5

rangenumber

Neighbour rings searched per pixel, 1 is faster.

Default2

twistnumber

Resting rotation of the panels, in radians.

Default0

spinnumber

How fast the panels rotate.

Default0

pannumber

How fast the whole wall glides across the frame.

Default0

panAnglenumber

Direction the wall glides, in radians.

Default0.9

driftnumber

How often each panel picks a new anchor.

Default1

wandernumber

How far a panel can travel inside its cell, 0 to 1.

Default1

seamnumber

Seam thickness in pixels.

Default1.3

edgeStrengthnumber

Brightness of the seam.

Default1.1

glownumber

Softness of the light bleeding off the seam.

Default0.14

glowFalloffnumber

How far the seam light reaches.

Default9

ambientnumber

Brightness of an idle panel.

Default0.16

pulsenumber

How much each panel breathes on its own, 0 keeps them steady.

Default0

pulseRatenumber

How fast panels breathe.

Default1.1

sweepnumber

Strength of the wave that lights panels in sequence.

Default0.75

sweepAnglenumber

Direction the sweep travels, in radians.

Default0.9

sweepScalenumber

How many panels the sweep spans.

Default1.2

sweepSpeednumber

How fast the sweep travels.

Default0.45

colorstring

Colour of a resting panel.

Default"#2a1247"

accentColorstring

Colour of a lit panel.

Default"#d946ef"

edgeColorstring

Colour of the seams.

Default"#f0abfc"

gainnumber

Overall exposure.

Default1

grainnumber

Film grain strength, 0 to 1.

Default0.04

grainRatenumber

Grain refresh rate, in hertz.

Default24

vignettenumber

Darkening toward the corners, 0 to 1.

Default0.25

backgroundColorstring

Colour behind the wall, or transparent.

Default"#0a0a0a"

opacitynumber

Opacity of the whole layer.

Default1

cursorInteractionboolean

Let the pointer light up nearby panels.

Defaulttrue

cursorGlownumber

How brightly panels answer the pointer.

Default0.45

cursorRadiusnumber

Radius the pointer reaches, in screen heights.

Default0.28

pausedboolean

Freeze the animation.

Defaultfalse

adaptiveQualityboolean

Scale resolution down when frames get expensive.

Defaulttrue

targetFpsnumber

Frame rate the quality scaler aims for.

Default60

dprnumber

Upper device pixel ratio bound.

Default1.75

classNamestring

Extra classes for the wrapper.

Defaultundefined

childrenReactNode

Content layered above the wall.

Defaultundefined