Diffusion Image
It starts as pure coloured static. Step by step the noise thins and the picture comes through it coarse to fine, the broad shapes and colours first and the detail last, as a denoiser recovers them, printed in a dither of a few levels a channel with the static changing at each step. A counter ticks the steps, and when it's done the full-resolution image prints in through blue noise. Drive it with your model's progress callbacks, or let it run itself as the placeholder while a request is out.
Needs: None. Canvas 2D. The image must be same-origin or CORS-enabled.
Demo photos by Linh Nguyen, Kenneth Thewissen and Jimmy Fermin on Unsplash
Customize
picture
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | required | The finished image. |
| alt | string | required | What it shows, for screen readers. |
| progress | number | – | How far the generation has got, 0 to 1. Leave unset and it runs itself. |
| steps | number | 30 | Steps the counter counts. |
| duration | number | 6 | Seconds it takes when it runs itself. |
| onDone | () => void | – | Called once the image is fully in. |
| aspect | number | 1 | Width over height. |
| cell | number | 3 | Size of one dither cell in px. |
| className | string | – | Class on the image. |
| style | CSSProperties | – | Style on the image. |