Installation
Run the following command
npx shadcn@latest add @aceternity/image-generation-loaderExamples
Scale wave with text
Shimmer
Wave with text
Props
| 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.
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
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
