Square Matrix
Animated dot grid with wave presets
square-matrix-tw
Customize
Grid
10
Animation
1
1
0.2
0
1
Cell Shape
1
0.6
0
Brightness
2
0
Color
1
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) |