Shape Grid

Animated grid with shape variants (square, hexagon, circle, triangle) and direction customization.

Default

Every prop is wired to the controls underneath. Hover the grid to light up cells, and raise Hover Trail to leave a fading tail behind the cursor.

Demo Content

FeaturesAbout Sign up

New Creative Components

Get started Learn more

Border Color

Hover Color

Shape

Direction

Shape Size40

Animation Speed0.5

Hover Trail0

Prop	Type	Default	Description
`direction`	`string`	`'right'`	Direction of the grid animation. Options: 'diagonal', 'up', 'right', 'down', 'left'.
`speed`	`number`	`1`	Animation speed multiplier.
`borderColor`	`string`	`'#999'`	Color of the shape borders.
`squareSize`	`number`	`40`	Size of individual shapes in pixels.
`hoverFillColor`	`string`	`'#222'`	Fill color when hovering over shapes.
`shape`	`string`	`'square'`	Shape of the grid tiles. Options: 'square', 'hexagon', 'circle', 'triangle'.
`hoverTrailAmount`	`number`	`0`	Number of previously hovered shapes to keep visible as a fading trail. 0 disables the trail.

Keyboard shortcuts and ARIA behavior.

Purely decorative canvas. The animation pauses while the canvas is off screen or the tab is hidden.