Wensity

AI Image Loading Animation

Pro

Dots rise from a dark floor, form the picture, and clear into the photograph.

aicanvasimageparticlesgeneration
AI Image Loading Animation component preview

Overview

AI Image Loading Animation is a React and Tailwind CSS loader for AI image generation, in Next.js or any React app, drawn on a 2D canvas. Dots rest on a dark floor, rise into a cloud of guesses, then sample your photo's pixels and settle into its shape and color as the picture sharpens. A ring and counter reach 100 percent the moment it is sharp, and duration can change mid run without a jump. Off screen it idles, and reduced motion jumps to the photo. The image is read through crossOrigin, so host it where CORS allows your domain.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add ai-image-generator

Usage

Import AiImageGenerator from @/components/wensity/ai-image-generator and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
import { AiImageGenerator } from "@/components/wensity/ai-image-generator";


export default function Example() {
  return (
    <AiImageGenerator
      src="https://assets.wensity.com/photos/food-culinary/blood-orange-still.webp"
      alt="Blood orange still life"
      duration={10}
      loop
      color="#ffffff"
    />
  );
}

Props

PropTypeDefaultDescription
srcstring"https://assets.wensity.com/photos/food-culinary/blood-orange-still.webp"Photograph the field resolves into.
altstring"Blood orange still life"Accessible name for the generated picture.
durationnumber10Generation time in seconds, from the empty floor to the sharp photograph. Changing it mid-run bends the remaining time instead of jumping.
loopbooleantrueStart again after a short hold on the finished picture. When false the card rests on the photograph until clicked.
colorstring"#ffffff"Resting color of the dots. White keeps the field black and white. Any other hex paints that shade until the photograph takes over.
onComplete() => void-Called each time a picture finishes generating.

Featured in React AI chat UI components.