Square Matrix

Animated dot grid with wave presets

square-matrix-tw

Customize

Grid Size

Speed

1.00

Wave Frequency

1.0

Wave Amplitude

0.20

Center Drift

0.00

Opacity

1.00

Corner Radius

1.00

Edge Softness

0.60

Cell Gap

0.00

Peak Brightness

2.0

Base Brightness

0.00

Color

Background

Cursor Interaction

Cursor Intensity

1.0

Props

Name	Type	Default	Description
`width`	string \| number	`"100%"`	Container width
`height`	string \| number	`"100%"`	Container height
`className`	string	`""`	Additional CSS classes for styling
`children`	ReactNode	`undefined`	Content rendered above the effect
`gridSize`	number	`10`	Number of grid rows/columns (2–30)
`speed`	number	`1`	Animation speed multiplier (0.01–5.0)
`waveFrequency`	number	`1`	Wave frequency multiplier (0.1–5.0)
`waveAmplitude`	number	`0.2`	Wave amplitude, controls cell size pulsing (0–1)
`cornerRadius`	number	`1`	Corner rounding (0 = square, 0.5 = circle)
`edgeSoftness`	number	`0.6`	Edge softness for antialiasing (0–1)
`cellGap`	number	`0`	Cell padding from 0 (touching) to 1 (invisible)
`peakBrightness`	number	`2`	Brightness at peak of wave (0–5)
`baseBrightness`	number	`0`	Baseline brightness at rest (0–2)
`centerDrift`	number	`0`	Amount the cell center shifts with the wave (0–0.5)
`preset`	number	`0`	Animation preset: 0=radial, 1=diagonal, 2=horizontal, 3=vertical, 4=spiral, 5=checkerboard
`color`	string	`"#ff00ff"`	Foreground color (hex)
`backgroundColor`	string	`"#000000"`	Background color (hex)
`opacity`	number	`1`	Master opacity (0–1)
`cursorInteraction`	boolean	`false`	Enable cursor interaction to create a brightness ripple near pointer
`cursorIntensity`	number	`1`	Cursor effect strength multiplier (0–3)

widthstring | number

Container width

Default"100%"

heightstring | number

Container height

Default"100%"

classNamestring

Additional CSS classes for styling

Default""

childrenReactNode

Content rendered above the effect

Defaultundefined

gridSizenumber

Number of grid rows/columns (2–30)

Default10

speednumber

Animation speed multiplier (0.01–5.0)

Default1

waveFrequencynumber

Wave frequency multiplier (0.1–5.0)

Default1

waveAmplitudenumber

Wave amplitude, controls cell size pulsing (0–1)

Default0.2

cornerRadiusnumber

Corner rounding (0 = square, 0.5 = circle)

Default1

edgeSoftnessnumber

Edge softness for antialiasing (0–1)

Default0.6

cellGapnumber

Cell padding from 0 (touching) to 1 (invisible)

Default0

peakBrightnessnumber

Brightness at peak of wave (0–5)

Default2

baseBrightnessnumber

Baseline brightness at rest (0–2)

Default0

centerDriftnumber

Amount the cell center shifts with the wave (0–0.5)

Default0

presetnumber

Animation preset: 0=radial, 1=diagonal, 2=horizontal, 3=vertical, 4=spiral, 5=checkerboard

Default0

colorstring

Foreground color (hex)

Default"#ff00ff"

backgroundColorstring

Background color (hex)

Default"#000000"

opacitynumber

Master opacity (0–1)

Default1

cursorInteractionboolean

Enable cursor interaction to create a brightness ripple near pointer

Defaultfalse

cursorIntensitynumber

Cursor effect strength multiplier (0–3)

Default1