Chroma Grid

A responsive grid of grayscale tiles. Hovering the grid reveals their colors.

Default

Move the pointer over the grid to reveal the colors. Radius, damping and fade out are wired to the controls underneath.

Radius300

Damping0.45s

Fade Out0.6s

Prop	Type	Default	Description
`items`	`Array`	`Demo []`	Array of ChromaItem objects to display in the grid.
`radius`	`number`	`300`	Size of the spotlight effect in pixels.
`columns`	`number`	`3`	Number of columns in the grid.
`rows`	`number`	`2`	Number of rows in the grid.
`damping`	`number`	`0.45`	Cursor follow animation duration in seconds.
`fadeOut`	`number`	`0.6`	Fade-out animation duration in seconds when the pointer leaves.
`ease`	`string`	`'power3.out'`	GSAP easing function for animations.

Keyboard shortcuts and ARIA behavior.

The color reveal follows the pointer only. Tiles with a url open it in a new tab on click, and are not focusable.