Fx Grid Trace Fade

ProNew

Opt-in pointer effect: grid cells light behind the pointer and fade out.

Customize

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

Pointer-driven. This is an opt-in component: nothing in the library mounts it for you, and it renders nothing under reduced motion.


pnpm dlx shadcn@latest add @tealmac-pro/fx-grid-trace-fade

Prop	Type	Default	Description
`children`	`ReactNode`	-	Content the grid sits over.
`enabled`	`boolean`	`false`	Turns the effect on. Pointer effects are opt-in.
`cell`	`number`	`28`	Cell size in pixels.
`fade`	`number`	`1.2`	Seconds a lit cell takes to fade.
`className`	`string`	-	Classes for the root element.

Pointer-driven and opt-in: nothing happens until enabled is set, and it never mounts under prefers-reduced-motion.
The overlay is decorative: it is hidden from assistive technology and never captures pointer events or focus.
The frame loop sleeps when every cell is dark.