Blinking Squares
0
Used by 0Controls
Blinking Squares
Fill any background with a grid of independently twinkling squares, shaped by a directional density fade and a cursor-following halo.
KEY FEATURES
- — Adjustable grid density from coarse to fine
- — Per-cell fill size from 10% to full
- — Single color or multi-color palette up to five swatches
- — Independent phase and rate per square so the field never pulses in sync
- — Directional density fade across right, left, top, or bottom edges
- — Tunable fade amount and falloff intensity
- — Toggleable cursor halo that lifts squares within a set radius and boost
- — Master opacity and twinkle speed controls
- — Transparent, DPR-aware canvas that fills its frame
API Reference
All props map directly to the controls panel sliders and color pickers.
LAYOUT
PROP
TYPE
DEFAULT
DESCRIPTION
gridSize
number
100
Number of cells across the long axis; higher packs in more, smaller squares.
fillPercent
number
70
Size of each square within its cell; higher fills more of the cell.
squareColor
color
#BB29FF
Color of every square when in single-color mode.
opacity
number
1
Master opacity applied to all squares, from transparent to solid.
fadeDirection
enum
bottom
Edge the density fade runs toward: right, left, top, bottom, or none.
fadePercent
number
100
How much of the canvas the density fade spans; 100% covers it all.
fadeIntensity
number
25
Steepness of the fade falloff; higher makes the edge sharper.
hasCursorInteraction
boolean
true
Enables a cursor halo that brightens squares near the pointer.
cursorRadius
number
140
Reach of the cursor halo in pixels around the pointer.
cursorBoost
number
100
How strongly the cursor halo reveals nearby squares.
ANIMATION
PROP
TYPE
DEFAULT
DESCRIPTION
twinkleSpeed
number
30
How fast the squares blink; higher twinkles faster.
COLORS
PROP
TYPE
DEFAULT
DESCRIPTION
colorMode
enum
multiple
Coloring mode: a single color or a multi-color palette.
colors
array
[...]
Palette of up to 5 colors that cells pick from in multiple mode.
