Square Matrix

Animated dot grid with wave presets

square-matrix-tw

Customize

Tweak the props live

Grid

Grid Size10

Preset

Animation

Speed1

Wave Frequency1

Wave Amplitude0.2

Center Drift0

Opacity1

Cell Shape

Corner Radius1

Edge Softness0.6

Cell Gap0

Brightness

Peak Brightness2

Base Brightness0

Color

#ff00ff

Background

#FFFFFF

Cursor Interaction

Cursor Intensity1

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

Default:undefined

gridSizenumber

Number of grid rows/columns (2–30)

Default:10

speednumber

Animation speed multiplier (0.01–5.0)

Default:1

waveFrequencynumber

Wave frequency multiplier (0.1–5.0)

Default:1

waveAmplitudenumber

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

Default:0.2

cornerRadiusnumber

Corner rounding (0 = square, 0.5 = circle)

Default:1

edgeSoftnessnumber

Edge softness for antialiasing (0–1)

Default:0.6

cellGapnumber

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

Default:0

peakBrightnessnumber

Brightness at peak of wave (0–5)

Default:2

baseBrightnessnumber

Baseline brightness at rest (0–2)

Default:0

centerDriftnumber

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

Default:0

presetnumber

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

Default:0

colorstring

Foreground color (hex)

Default:"#ff00ff"

backgroundColorstring

Background color (hex)

Default:"#000000"

opacitynumber

Master opacity (0–1)

Default:1

cursorInteractionboolean

Enable cursor interaction to create a brightness ripple near pointer

Default:false

cursorIntensitynumber

Cursor effect strength multiplier (0–3)

Default:1