Components

Image Generation Card

A self-contained UI component that recreates the image generation state you see in tools like ChatGPT, DALL·E, and Midjourney. A subtle blinking grid builds up, then a blur-to-focus reveal sweeps the image in with a soft shine, ending on a live generation timer. Built with Motion and a canvas grid — no AI or model calls required.

Preview Canvas
Generating image0s

Installation

Install component dependencies or run the automated CLI command.

pnpm dlx shadcn@latest add https://sahilcodex.vercel.app/r/ai-image-card.json

Usage

import AiImageCard from "@/components/ui/ai-image-card";
export default function Page() {
return (
<div className="flex min-h-screen items-center justify-center">
<AiImageCard generateDuration={3} imageSrc="/fightclub1.jpeg" />
</div>
);
}
"You have a right to perform your prescribed duty, but you are not entitled to the fruits of actions."
Bhagavad Gita

Design by SahilCodex
© 2026. Built with hands.