Blinking Squares
A grid of little squares that quietly twinkle
Customize
Props
14| Name | 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 | 52 | Number of grid cells along the long axis (8–200). 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.65 | 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 | 1.4 | 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 | Master brightness multiplier (0–2) |
opacity | number | 1 | Master alpha (0–1) |
squareColor | string | "#BB29FF" | Square color in hex |
backgroundColor | string | "#000000" | Background fill where the field is empty, in hex |
dpr | number | 1.5 | Maximum device pixel ratio cap (1–3) |
direction"right" | "left" | "top" | "bottom"Edge the dense squares are anchored to. The grid fades to empty in the opposite direction
"right"gridSizenumberNumber of grid cells along the long axis (8–200). Higher = finer grain
52squareSizenumberConstant square fill % within each cell (0.05–0.98). All squares are uniform size; density is what varies
0.57fadeStartnumberWhere the field first becomes non-empty along `direction` (0–1). Anything before this is pure background
0.65fadeEndnumberWhere the field reaches full density along `direction` (0–1). Must be greater than fadeStart
1falloffnumberCurve sharpness between fadeStart and fadeEnd. 1 = linear, higher = stays empty longer then ramps fast (0.3–6)
1.25minBrightnessnumberMinimum brightness of a lit cell (0–1). Lit cells get a random brightness between this and 1.0
0.55twinkleSpeednumberPer-cell twinkle rate in cycles per second (0–4). 0 freezes the field
1.4twinkleStrengthnumberStrength of the per-cell brightness oscillation (0–1). 0 = no blinking
0.94intensitynumberMaster brightness multiplier (0–2)
1opacitynumberMaster alpha (0–1)
1squareColorstringSquare color in hex
"#BB29FF"backgroundColorstringBackground fill where the field is empty, in hex
"#000000"dprnumberMaximum device pixel ratio cap (1–3)
1.5