Image Generation Loader

A canvas loader that scans across an image with animated pixel grids, text masks, and progress overlays.

Manu Arora

Multi cards empty state skeletons

Installation

npx shadcn@latest add @aceternity/image-generation-loader

Manu Arora

Multi cards empty state skeletons

Prop	Type	Default	Description
`className`	`string`	-	Adds classes to the canvas element.
`cellSize`	`number`	`5`	Sets each square's size in pixels.
`gap`	`number`	`2`	Sets the gap between grid cells in pixels.
`bandHeight`	`number`	`48`	Sets the height of the moving band in pixels.
`duration`	`number`	`4000`	Sets the vertical scan duration in milliseconds.
`effect`	`"shimmer" \| "wave" \| "scale-wave" \| "none"`	`"shimmer"`	Selects the animation inside the moving band.
`waveAmplitude`	`number`	`12`	Sets the wave distortion strength.
`scaleAmplitude`	`number`	`0.75`	Sets how much selected cells grow in the scale wave.
`colors`	`readonly [string, string]`	Blue 300 to blue 600	Sets the grid color range. CSS variables are supported.
`text`	`string`	-	Maps uppercase text to the pixel grid.
`textLetterSpacing`	`number`	One grid column	Sets letter spacing in pixels.
`textWordSpacing`	`number`	Three grid columns	Sets word spacing in pixels.
`overlayOpacity`	`number`	`0.3`	Sets the opacity of the completed-area overlay.
`overlayExitDuration`	`number`	`700`	Sets the overlay fade duration in milliseconds.
`easing`	`string \| [number, number, number, number] \| ((progress) => number)`	`"ease-in-out"`	Sets the easing for vertical movement.

Place the loader inside a relative container with hidden overflow. The canvas and progress overlay automatically use the container's size.

Next.js 15, Tailwind CSS v4 and Motion for react powered templates

200+ templates and blocks combined

Ready to copy paste component blocks, save days of development time