ShapeGrid
shape-gridScrolls configurable geometric shapes endlessly with hover fills and fading trails.
Usage
Basic usage
The default grid scrolls infinitely to the right, and the side line eats --color-border token; canvas needs to be filled with absolute inset-0.
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.16 0.02 255)" }}>
<ShapeGrid className="absolute inset-0 opacity-90" />
</div>Shape and Orientation
shape Choose one of four (square / circle / triangle / hexagon), direction controls the scroll direction.
<ShapeGrid
shape="hexagon"
direction="diagonal"
squareSize={32}
className="absolute inset-0 opacity-90"
/>Hover tailing
hoverTrailAmount>0 makes the hovering unit leave a fade trail, hoverFillColor specifies the fill color (try moving the mouse).
<ShapeGrid
shape="circle"
direction="up"
hoverTrailAmount={6}
hoverFillColor="var(--color-chart-2)"
className="absolute inset-0 opacity-90"
/>Triangle mesh · Warm fill
triangle is arranged in staggered shapes, speed is for faster scrolling, and hoverFillColor is for theme accent colors.
<ShapeGrid
shape="triangle"
direction="left"
speed={1.5}
hoverFillColor="var(--color-chart-3)"
className="absolute inset-0 opacity-90"
/>When to Use
Use it for a continuously panning geometric-cell background with pointer highlights, such as a kanban or landing-page surface. For a static dot pattern, use DotPattern; for a static line grid, use GridPattern. ShapeGrid uses Canvas 2D rather than WebGL and supports four cell shapes plus optional hover trails.
Import
import { ShapeGrid } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| direction | "right"|"left"|"up"|"down"|"diagonal" | "right" | Grid scroll direction |
| speed | number | 1 | Scrolling speed (pixels/frame, internal clamp lower limit 0.1); forced stillness under reduced-motion |
| borderColor | string | var(--color-border) | Cell edge color, any CSS color string |
| squareSize | number | 40 | Unit side length (px), also determines the mesh density |
| hoverFillColor | string | var(--color-primary) | Cell fill color on hover, fade in/out easing |
| shape | "square"|"circle"|"triangle"|"hexagon" | "square" | Element shape |
| hoverTrailAmount | number | 0 | Hover trailing length (how many historical units are retained to fade out), 0 = no trailing |
| className | string | — | Passthrough to root canvas |
| style | CSSProperties | — | Inline styles passed through to the root canvas |
Usage Guidelines
- It is a canvas itself and does not have
absolute inset-0. It must be filled with className positioning (absolute inset-0in the example); the parent container must have positioning + size +overflow-hidden. - The color token fed to the canvas must be prefixed with
--color-(such asvar(--color-chart-2)). If barevar(--primary)is not parsed, see [[hulian-token-color-var-needs-color-prefix]]. - In reduced-motion, the speed is treated as 0 (still), and the motion effect should not be used as key feedback.
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.16 0.02 255)" }}>
<ShapeGrid
shape="square"
direction="right"
speed={1}
squareSize={40}
hoverTrailAmount={0}
className="absolute inset-0 opacity-90"
/>
</div>