Preferences

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.

direction"right" | "left" | "top" | "bottom"

Edge the dense squares are anchored to. The grid fades to empty in the opposite direction.

Default"right"

gridSizenumber

Number of grid cells along the long axis (5–100). Higher = finer grain.

Default10

squareSizenumber

Constant square fill % within each cell (0.05–0.98). All squares are uniform size; density is what varies.

Default0.57

fadeStartnumber

Where the field first becomes non-empty along direction (0–1). Anything before this is pure background.

Default0.33

fadeEndnumber

Where the field reaches full density along direction (0–1). Must be greater than fadeStart.

Default1

falloffnumber

Curve sharpness between fadeStart and fadeEnd. 1 = linear, higher = stays empty longer then ramps fast (0.3–6).

Default1.25

minBrightnessnumber

Minimum brightness of a lit cell (0–1). Lit cells get a random brightness between this and 1.0.

Default0.55

twinkleSpeednumber

Per-cell twinkle rate in cycles per second (0–4). 0 freezes the field.

Default0.2

twinkleStrengthnumber

Strength of the per-cell brightness oscillation (0–1). 0 = no blinking.

Default0.94

intensitynumber

Master brightness multiplier (0–2).

Default1.65

opacitynumber

Master alpha (0–1).

Default1

squareColorstring

Square color in hex.

Default"#d35af8"

backgroundColorstring

Background fill color. Defaults to transparent so any parent background shows through.

Default"transparent"

dprnumber

Maximum device pixel ratio cap (1–3). Higher = sharper on retina screens, heavier on GPU.

Default1.5

classNamestring

Additional Tailwind or CSS class names applied to the wrapper div.

Default""

styleReact.CSSProperties

Inline styles applied to the wrapper div.

Default{}

childrenReact.ReactNode

Content rendered on top of the canvas inside a relative z-10 div.

Defaultundefined

Crafted withbyMohammad Tasin