Shapes Dots
Customize
Props
| Property | Type | Default | Description |
|---|---|---|---|
width | string | number | "100%" | Width of the canvas wrapper. Accepts any CSS value or number. |
height | string | number | "100%" | Height of the canvas wrapper. Accepts any CSS value or number. |
className | string | "" | Additional Tailwind or CSS classes applied to the wrapper div. |
cellSize | number | 40 | Pixel size of each grid cell. Smaller values produce more dots; larger values produce fewer. |
influenceRadiusVmin | number | 25 | Radius around the cursor within which shapes react, expressed in vmin (percentage of the viewport's smaller dimension). |
attackTime | number | 0.05 | Time in seconds for a shape to grow. Lower values snap instantly; higher values grow gradually. |
releaseTime | number | 0.6 | Time in seconds for a shape to shrink back to idle after the cursor leaves. |
idleScale | number | 0.09 | Resting scale of shapes when not influenced. 0 is invisible; 1 is full base size. |
minPeakScale | number | 1 | Minimum scale a shape can reach at peak (lower bound of the per-cell random range). Must be less than or equal to maxPeakScale. |
maxPeakScale | number | 3 | Maximum scale a shape can reach at peak (upper bound of the per-cell random range). Must be greater than or equal to minPeakScale. |
overlapGuard | number | 0.86 | Safety margin that prevents adjacent shapes from touching at max scale. 1 allows shapes to just touch; lower values add more gap. |
burstSpeed | number | 1200 | Speed at which the click burst ring expands, in pixels per second. |
burstThickness | number | 180 | Thickness of the click burst ring in pixels. Higher values produce a wider ring. |
backgroundColor | string | "#080808" | Background color of the canvas. Set to "transparent" to skip drawing a background. |
shapes | string[] | ["circle","triangle","square"] | Pool of shape types randomly assigned to cells. Available values: "circle", "square", "triangle". |
colors | (string | { stops: string[] })[] | DEFAULT_COLORS | Pool of colors randomly assigned to shapes. Accepts plain hex strings or gradient objects ({ stops: ["#color1", "#color2"] }). |
opacity | number | 1 | Global opacity of the entire canvas. 0 is fully transparent; 1 is fully opaque. |
dpr | number | 3 | Maximum device pixel ratio cap. Higher values are sharper but more GPU-intensive. |
animationMode | string | "off" | Continuous ambient animation pattern that runs independently of the cursor. Options: "off" | "random" | "pulse" | "ripple" | "left-to-right" | "right-to-left" | "top-to-bottom" | "bottom-to-top" | "wave-horizontal" | "wave-vertical" | "diagonal-tl-br" | "diagonal-br-tl" | "line-right" | "line-left". |
animationSpeed | number | 1 | Speed multiplier for the ambient animation. 2 = double speed; 0.5 = half speed. |
children | ReactNode | undefined | Content rendered absolutely on top of the canvas, useful for text overlays or UI elements. |
widthstring | numberWidth of the canvas wrapper. Accepts any CSS value or number.
"100%"heightstring | numberHeight of the canvas wrapper. Accepts any CSS value or number.
"100%"classNamestringAdditional Tailwind or CSS classes applied to the wrapper div.
""cellSizenumberPixel size of each grid cell. Smaller values produce more dots; larger values produce fewer.
40influenceRadiusVminnumberRadius around the cursor within which shapes react, expressed in vmin (percentage of the viewport's smaller dimension).
25attackTimenumberTime in seconds for a shape to grow. Lower values snap instantly; higher values grow gradually.
0.05releaseTimenumberTime in seconds for a shape to shrink back to idle after the cursor leaves.
0.6idleScalenumberResting scale of shapes when not influenced. 0 is invisible; 1 is full base size.
0.09minPeakScalenumberMinimum scale a shape can reach at peak (lower bound of the per-cell random range). Must be less than or equal to maxPeakScale.
1maxPeakScalenumberMaximum scale a shape can reach at peak (upper bound of the per-cell random range). Must be greater than or equal to minPeakScale.
3overlapGuardnumberSafety margin that prevents adjacent shapes from touching at max scale. 1 allows shapes to just touch; lower values add more gap.
0.86burstSpeednumberSpeed at which the click burst ring expands, in pixels per second.
1200burstThicknessnumberThickness of the click burst ring in pixels. Higher values produce a wider ring.
180backgroundColorstringBackground color of the canvas. Set to "transparent" to skip drawing a background.
"#080808"shapesstring[]Pool of shape types randomly assigned to cells. Available values: "circle", "square", "triangle".
["circle","triangle","square"]colors(string | { stops: string[] })[]Pool of colors randomly assigned to shapes. Accepts plain hex strings or gradient objects ({ stops: ["#color1", "#color2"] }).
DEFAULT_COLORSopacitynumberGlobal opacity of the entire canvas. 0 is fully transparent; 1 is fully opaque.
1dprnumberMaximum device pixel ratio cap. Higher values are sharper but more GPU-intensive.
3animationModestringContinuous ambient animation pattern that runs independently of the cursor. Options: "off" | "random" | "pulse" | "ripple" | "left-to-right" | "right-to-left" | "top-to-bottom" | "bottom-to-top" | "wave-horizontal" | "wave-vertical" | "diagonal-tl-br" | "diagonal-br-tl" | "line-right" | "line-left".
"off"animationSpeednumberSpeed multiplier for the ambient animation. 2 = double speed; 0.5 = half speed.
1childrenReactNodeContent rendered absolutely on top of the canvas, useful for text overlays or UI elements.
undefinedCrafted withbyMohammad Tasin