React AI Image Generation Loaders
ReactFrame has 4 React loaders for AI image generation (1 free). Instead of a spinner, each one animates while the image is being generated (a particle sphere, a field of light-reactive dots, rolling topographic lines) and then reveals the finished picture.
How to choose
- One image at a time: ai-image-loader-01, 02 or 03, depending on the look you want during generation.
- Several variations at once, like Midjourney's grid: ai-image-loader-04.
All 4 components
- AI Image Loader 01Premium
- An AI image-generation loader, a canvas-drawn particle sphere with a rippling light ring cross-fades into the finished picture, with cycling status messages and a regenerate button.
- AI Image Loader 02Premium
- An AI image-generation loader, a canvas-drawn field of light-reactive dots cross-fades into the finished picture with a one-shot sparkle burst, cycling status messages, and a regenerate button.
- AI Image Loader 03Free
- An AI image-generation loader, canvas-drawn rolling topographic lines grow in and a top-to-bottom sweep reveals the finished picture, with cycling status messages and a regenerate button.
- npx shadcn@latest add https://reactframe.com/r/ai-image-loader-03.json
- AI Image Loader 04Premium
- A four-tile AI image generation grid, each tile sharpens through a mipmap ladder from one reference photo's varied takes, with Vary, Upscale and Grid actions per selected tile, and custom/silver themes.
Questions
- How do I connect the loader to my generation API?
- Set preview to "generating" while your request runs, then pass the returned image (image.src) and set preview to "done"; the component plays the reveal. onComplete fires when it finishes.
- Are these components free?
- 1 of the 4 are free (AI Image Loader 03); the others are premium and included in All-Access.
- How do I install them?
- Free components install with the shadcn CLI, for example: npx shadcn@latest add @reactframe/<slug>. You get the full React + Tailwind source in your project, with Motion as the only animation dependency.
Related collections
Want a whole page built from these? Ask your AI to build it with ReactFrame.