Squares
An endlessly drifting grid of squares that lights up under the cursor.
canvasgridinteractive
Styled with ONONC's design tokens — shadcn add installs them for you.
Customize
Grid
Square size44px
Motion
Speed1
Direction
Appearance
Line color
Hover color
Interaction
Cursor reach150px
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 44 | Square size in pixels. |
speed | number | 1 | Drift speed (0 = still). |
direction | "diagonal" | "up" | "down" | "left" | "right" | "diagonal" | Direction the grid scrolls. |
lineColor | string | "139,160,255" | Grid line color as r,g,b. |
hoverColor | string | "196,181,253" | Fill color of squares lit near the cursor, as r,g,b. |
reach | number | 150 | Cursor influence radius in px. |
children | ReactNode | — | Content layered above the canvas. |
className | string | — | Extra classes for the wrapper. |