ONONC

Squares

An endlessly drifting grid of squares that lights up under the cursor.

canvasgridinteractive

Customize

Grid

Square size44px

Motion

Speed1
Direction

Appearance

Line color
Hover color

Interaction

Cursor reach150px

Props

PropTypeDefaultDescription
sizenumber44Square size in pixels.
speednumber1Drift speed (0 = still).
direction"diagonal" | "up" | "down" | "left" | "right""diagonal"Direction the grid scrolls.
lineColorstring"139,160,255"Grid line color as r,g,b.
hoverColorstring"196,181,253"Fill color of squares lit near the cursor, as r,g,b.
reachnumber150Cursor influence radius in px.
childrenReactNodeContent layered above the canvas.
classNamestringExtra classes for the wrapper.