Square Matrix

A crisp LED grid rippling in waves of light

square-matrix-tw

pro.reactbits.dev

ComponentsBlocksTemplatesPricing

Get Pro

Lit up, pixel by pixel

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

Get startedBrowse library

9:41

Lit up, pixel by pixel

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

Get startedBrowse library

Lit up, pixel by pixel

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

Get startedLearn more

Customize

Start Color

End Color

Background

Grid Size

Gap

0.26

Roundness

0.35

Glow

0.70

Speed

1.00

Wave Scale

1.00

Amplitude

0.18

Contrast

1.00

Peak Brightness

2.00

Base Brightness

0.00

Angle

0°

Origin X

0.50

Origin Y

0.50

Wake

1.00

Ripple

1.00

InteractiveIntroPaused

Props

Name	Type	Default	Description
`colors`	[string, string]	`["#FF00FF", "#9A2BFF"]`	The two colours the grid blends between, from the origin outward. The hottest cores burn towards white. On light backgrounds they become matching inks.
`backgroundColor`	string	`"transparent"`	Background of the component. Transparent shows the page behind it and picks the light or dark look from it.
`pattern`	"ripple" \| "diagonal" \| "horizontal" \| "vertical" \| "spiral" \| "checker" \| "noise" \| "scan"	`"ripple"`	How the wave travels: rings from the origin, straight bands, a spiral, a checkerboard, slow organic patches, or a single sweep with a soft trail.
`gridSize`	number	`10`	Grid density. The frame is twice this many cells tall.
`cellSize`	number	`undefined`	Fixed distance between cells in pixels. Overrides gridSize when set.
`gap`	number	`0.26`	Space between the lights, as a share of the cell, from 0 to 0.95.
`roundness`	number	`0.35`	Corner rounding of each light, from 0 (square) to 1 (round).
`glow`	number	`0.7`	Halo and bloom around the lit cells, from 0 to 2. Bright crests bleed light into their neighbours.
`speed`	number	`1`	Speed of the wave. 0 holds it still.
`waveScale`	number	`1`	Size of the waves. Larger values make wider rings and bands.
`amplitude`	number	`0.18`	How much the lights swell on the crests and settle in the troughs, from 0 to 1.
`contrast`	number	`1`	How dark the troughs get, from 0 (every cell lit) to 1 (only the unlit panel shows).
`peakBrightness`	number	`2`	Brightness of the crests. Higher values push the hottest cores towards white.
`baseBrightness`	number	`0`	Extra light on every cell, troughs included.
`angle`	number	`0`	Turns the diagonal, horizontal, vertical and scan patterns, in degrees.
`originX`	number	`0.5`	Where the waves start, as a share of the width. The intro cascades out from here too.
`originY`	number	`0.5`	Where the waves start, as a share of the height.
`wake`	number	`1`	How deeply the pointer presses the cells it passes and how long they take to spring back, from 0 to 2.
`rippleStrength`	number	`1`	Strength of the ripple a click sends out, from 0 to 2.
`interactive`	boolean	`true`	Cells under the pointer sink and flare like pressed keys, then spring back. A click sends a ripple from that cell. Clicks stack.
`intro`	boolean	`true`	The cells cascade in from the origin when the component appears.
`paused`	boolean	`false`	Holds the wave still. The pointer still presses cells. Reduced-motion users get a still grid.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`opacity`	number	`1`	Overall opacity of the grid, from 0 to 1.
`width`	string \| number	`"100%"`	Width of the component.
`height`	string \| number	`"100%"`	Height of the component.
`children`	ReactNode	`undefined`	Content laid over the grid. Clicks on its links and buttons never send a ripple.
`ref`	{ ripple, replay }	`undefined`	ripple(x?, y?, strength?) sends a ripple from a point given as shares of the frame. 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 the grid blends between, from the origin outward. The hottest cores burn towards white. On light backgrounds they become matching inks.

Default["#FF00FF", "#9A2BFF"]

backgroundColorstring

Background of the component. Transparent shows the page behind it and picks the light or dark look from it.

Default"transparent"

How the wave travels: rings from the origin, straight bands, a spiral, a checkerboard, slow organic patches, or a single sweep with a soft trail.

Default"ripple"

gridSizenumber

Grid density. The frame is twice this many cells tall.

Default10

cellSizenumber

Fixed distance between cells in pixels. Overrides gridSize when set.

Defaultundefined

gapnumber

Space between the lights, as a share of the cell, from 0 to 0.95.

Default0.26

roundnessnumber

Corner rounding of each light, from 0 (square) to 1 (round).

Default0.35

glownumber

Halo and bloom around the lit cells, from 0 to 2. Bright crests bleed light into their neighbours.

Default0.7

speednumber

Speed of the wave. 0 holds it still.

Default1

waveScalenumber

Size of the waves. Larger values make wider rings and bands.

Default1

amplitudenumber

How much the lights swell on the crests and settle in the troughs, from 0 to 1.

Default0.18

contrastnumber

How dark the troughs get, from 0 (every cell lit) to 1 (only the unlit panel shows).

Default1

peakBrightnessnumber

Brightness of the crests. Higher values push the hottest cores towards white.

Default2

baseBrightnessnumber

Extra light on every cell, troughs included.

Default0

anglenumber

Turns the diagonal, horizontal, vertical and scan patterns, in degrees.

Default0

originXnumber

Where the waves start, as a share of the width. The intro cascades out from here too.

Default0.5

originYnumber

Where the waves start, as a share of the height.

Default0.5

wakenumber

How deeply the pointer presses the cells it passes and how long they take to spring back, from 0 to 2.

Default1

rippleStrengthnumber

Strength of the ripple a click sends out, from 0 to 2.

Default1

interactiveboolean

Cells under the pointer sink and flare like pressed keys, then spring back. A click sends a ripple from that cell. Clicks stack.

Defaulttrue

introboolean

The cells cascade in from the origin when the component appears.

Defaulttrue

pausedboolean

Holds the wave still. The pointer still presses cells. Reduced-motion users get a still grid.

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

opacitynumber

Overall opacity of the grid, from 0 to 1.

Default1

widthstring | number

Width of the component.

Default"100%"

heightstring | number

Height of the component.

Default"100%"

childrenReactNode

Content laid over the grid. Clicks on its links and buttons never send a ripple.

Defaultundefined

ref{ ripple, replay }

ripple(x?, y?, strength?) sends a ripple from a point given as shares of the frame. 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]

["#FF00FF", "#9A2BFF"]

The two colours the grid blends between, from the origin outward. The hottest cores burn towards white. On light backgrounds they become matching inks.

backgroundColor

string

"transparent"

Background of the component. Transparent shows the page behind it and picks the light or dark look from it.

pattern

"ripple"

How the wave travels: rings from the origin, straight bands, a spiral, a checkerboard, slow organic patches, or a single sweep with a soft trail.

gridSize

number

10

Grid density. The frame is twice this many cells tall.

cellSize

number

undefined

Fixed distance between cells in pixels. Overrides gridSize when set.

gap

number

0.26

Space between the lights, as a share of the cell, from 0 to 0.95.

roundness

number

0.35

Corner rounding of each light, from 0 (square) to 1 (round).

glow

number

0.7

Halo and bloom around the lit cells, from 0 to 2. Bright crests bleed light into their neighbours.

speed

number

1

Speed of the wave. 0 holds it still.

waveScale

number

1

Size of the waves. Larger values make wider rings and bands.

amplitude

number

0.18

How much the lights swell on the crests and settle in the troughs, from 0 to 1.

contrast

number

1

How dark the troughs get, from 0 (every cell lit) to 1 (only the unlit panel shows).

peakBrightness

number

2

Brightness of the crests. Higher values push the hottest cores towards white.

baseBrightness

number

0

Extra light on every cell, troughs included.

angle

number

0

Turns the diagonal, horizontal, vertical and scan patterns, in degrees.

originX

number

0.5

Where the waves start, as a share of the width. The intro cascades out from here too.

originY

number

0.5

Where the waves start, as a share of the height.

wake

number

1

How deeply the pointer presses the cells it passes and how long they take to spring back, from 0 to 2.

rippleStrength

number

1

Strength of the ripple a click sends out, from 0 to 2.

interactive

boolean

true

Cells under the pointer sink and flare like pressed keys, then spring back. A click sends a ripple from that cell. Clicks stack.

intro

boolean

true

The cells cascade in from the origin when the component appears.

paused

boolean

false

Holds the wave still. The pointer still presses cells. Reduced-motion users get a still grid.

dpr

number

2

Maximum device pixel ratio for the canvas.

opacity

number

1

Overall opacity of the grid, from 0 to 1.

width

string | number

"100%"

Width of the component.

height

string | number

"100%"

Height of the component.

children

ReactNode

undefined

Content laid over the grid. Clicks on its links and buttons never send a ripple.

ref

{ ripple, replay }

undefined

ripple(x?, y?, strength?) sends a ripple from a point given as shares of the frame. replay() plays the intro again.

className

string

undefined

Classes for the root element.

style

CSSProperties

undefined

Inline styles for the root element.