Progressive Image Generation
A generated picture resolves from blur to sharp across a few discrete refinement passes.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Progressive Image Generation
*
* A generated image arriving the way it is actually produced: in a few
* discrete refinement passes, each one holding long enough to be seen asAbout this pattern
Image generation is slow and, until the last second, invisible — so the wait is spent showing the work. Each pass eases to its target sharpness and then holds, and the hold is the whole trick: a continuous ramp reads as a loading bar, while a stepped one reads as a model committing to detail it did not have before. Saturation and a small settle in scale ride along, a veil clears on the final pass so the finish gets a moment, and the pass meter fills with scaleX rather than width.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- AI assistant
Results appear coarse and are replaced by progressively sharper versions as passes finish.
Related patterns
- Streaming Code BlockGenerated code arrives line by line while the panel grows downward to fit it.
- Multi-Agent HandoffA pip crosses the connector, the receiving card lifts as it takes the work, and the finished one recedes with a drawn check.
- AI Result RevealThe result card rises into place while its confidence value counts up to the final number.