← All components
Atmospheres / background
Shape Grid
Drifting geometric cells leave a softly fading pointer trail.
Open in studio ↗PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Give the parent an explicit height. All four original geometry branches and the radial vignette are retained.
- Speed uses the source’s nominal60Hz movement; zero stops drifting while hover highlights can still settle.
- Cell size is at least12px, buffers are capped at2048px per dimension, and very large canvases increase cell size to bound geometry. Trails are capped at100 cells.
- Pointer and keyboard arrows highlight cells. Reduced motion leaves a still grid.
- The included Demo.tsx and styles recreate the full preview.
React 19
React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
shape | square|hexagon|circle|triangle | square | Cell shape |
direction | diagonal|up|right|down|left | right | Direction |
speed | number | 1 | Drift speed |
squareSize | number | 40 | Cell size |
borderColor | string | CanvasGradient | CanvasPattern | #999 | Line color |
hoverFillColor | string | CanvasGradient | CanvasPattern | #222 | Hover fill |
hoverTrailAmount | number | 0 | Trail length |
className | string | '' | Canvas classes. |
style | CSSProperties | undefined | Canvas styles. |
paused | boolean | false | Freeze the current presentation. |
replayToken | number | 0 | Change to replay/reset the component. |