Menu
Blinking Squares
Customize
Grid Size10
Square Size0.57
Fade Start0.33
Fade End1
Falloff1.25
Min Brightness0.55
Twinkle Speed0.2
Twinkle Strength1
Intensity1.65
Opacity1
DPR Cap1.5
Props
| Property | Type | Default | Description |
|---|---|---|---|
direction | "right" | "left" | "top" | "bottom" | "right" | Edge the dense squares are anchored to. The grid fades to empty in the opposite direction. |
gridSize | number | 10 | Number of grid cells along the long axis (5–100). Higher = finer grain. |
squareSize | number | 0.57 | Constant square fill % within each cell (0.05–0.98). All squares are uniform size; density is what varies. |
fadeStart | number | 0.33 | Where the field first becomes non-empty along direction (0–1). Anything before this is pure background. |
fadeEnd | number | 1 | Where the field reaches full density along direction (0–1). Must be greater than fadeStart. |
falloff | number | 1.25 | Curve sharpness between fadeStart and fadeEnd. 1 = linear, higher = stays empty longer then ramps fast (0.3–6). |
minBrightness | number | 0.55 | Minimum brightness of a lit cell (0–1). Lit cells get a random brightness between this and 1.0. |
twinkleSpeed | number | 0.2 | Per-cell twinkle rate in cycles per second (0–4). 0 freezes the field. |
twinkleStrength | number | 0.94 | Strength of the per-cell brightness oscillation (0–1). 0 = no blinking. |
intensity | number | 1.65 | Master brightness multiplier (0–2). |
opacity | number | 1 | Master alpha (0–1). |
squareColor | string | "#d35af8" | Square color in hex. |
backgroundColor | string | "transparent" | Background fill color. Defaults to transparent so any parent background shows through. |
dpr | number | 1.5 | Maximum device pixel ratio cap (1–3). Higher = sharper on retina screens, heavier on GPU. |
className | string | "" | Additional Tailwind or CSS class names applied to the wrapper div. |
style | React.CSSProperties | {} | Inline styles applied to the wrapper div. |
children | React.ReactNode | undefined | Content rendered on top of the canvas inside a relative z-10 div. |
directionType"right" | "left" | "top" | "bottom"
Default
"right"Edge the dense squares are anchored to. The grid fades to empty in the opposite direction.
gridSizeTypenumber
Default
10Number of grid cells along the long axis (5–100). Higher = finer grain.
squareSizeTypenumber
Default
0.57Constant square fill % within each cell (0.05–0.98). All squares are uniform size; density is what varies.
fadeStartTypenumber
Default
0.33Where the field first becomes non-empty along direction (0–1). Anything before this is pure background.
fadeEndTypenumber
Default
1Where the field reaches full density along direction (0–1). Must be greater than fadeStart.
falloffTypenumber
Default
1.25Curve sharpness between fadeStart and fadeEnd. 1 = linear, higher = stays empty longer then ramps fast (0.3–6).
minBrightnessTypenumber
Default
0.55Minimum brightness of a lit cell (0–1). Lit cells get a random brightness between this and 1.0.
twinkleSpeedTypenumber
Default
0.2Per-cell twinkle rate in cycles per second (0–4). 0 freezes the field.
twinkleStrengthTypenumber
Default
0.94Strength of the per-cell brightness oscillation (0–1). 0 = no blinking.
intensityTypenumber
Default
1.65Master brightness multiplier (0–2).
opacityTypenumber
Default
1Master alpha (0–1).
squareColorTypestring
Default
"#d35af8"Square color in hex.
backgroundColorTypestring
Default
"transparent"Background fill color. Defaults to transparent so any parent background shows through.
dprTypenumber
Default
1.5Maximum device pixel ratio cap (1–3). Higher = sharper on retina screens, heavier on GPU.
classNameTypestring
Default
""Additional Tailwind or CSS class names applied to the wrapper div.
styleTypeReact.CSSProperties
Default
{}Inline styles applied to the wrapper div.
childrenTypeReact.ReactNode
Default
undefinedContent rendered on top of the canvas inside a relative z-10 div.
Crafted withbyMohammad Tasin