Grid Color Restore

ProNew

A grid of grey tiles in which a band of colour rolls diagonally across, bringing each tile back to life in turn.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/grid-color-restore

Prop	Type	Default	Description
`items`	`{ id: string; title?: string; art?: string; src?: string; alt?: string }[]`	`-`	Tiles. Use `src` for a photo or `art` for a CSS background.
`columns`	`number`	`4`	Columns in the grid.
`duration`	`number`	`7`	Seconds for the wave to cross and return.
`restoreOnHover`	`boolean`	`false`	Opt in: hovering a tile restores its colour (pointer-driven).

Only the opacity of a transparent grey overlay animates; the overlay applies the grayscale with a backdrop filter, so the colour layer under it is never repainted.
With prefers-reduced-motion: reduce tiles stay grey (or colour on hover when enabled).
The grey overlay is decorative; tiles keep their titles or alt text.
Title text sits on a dark gradient strip so it stays readable in grey and colour.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/grid-color-restore

Prop	Type	Default	Description
`items`	`{ id: string; title?: string; art?: string; src?: string; alt?: string }[]`	`-`	Tiles. Use `src` for a photo or `art` for a CSS background.
`columns`	`number`	`4`	Columns in the grid.
`duration`	`number`	`7`	Seconds for the wave to cross and return.
`restoreOnHover`	`boolean`	`false`	Opt in: hovering a tile restores its colour (pointer-driven).

Only the opacity of a transparent grey overlay animates; the overlay applies the grayscale with a backdrop filter, so the colour layer under it is never repainted.
With prefers-reduced-motion: reduce tiles stay grey (or colour on hover when enabled).
The grey overlay is decorative; tiles keep their titles or alt text.
Title text sits on a dark gradient strip so it stays readable in grey and colour.