Diffusion Denoise: Noise Clears Into Your Logo

What it looks like

1. From the first frame, every particle heads to its spot on your logo, but random noise shakes it on every frame.
2. The noise starts at up to 24 pixels in each direction and shrinks steadily to zero over the cycle.
3. Particles also move toward their spots faster as the noise fades, so the shape snaps into focus near the end.
4. The result looks like an image coming out of the denoising steps of a diffusion model.

Good for

• AI products and image generators
• Loading screens for generation or processing tasks
• Brands that want a subtle, technical reveal

Default settings

Use it on your site

1. Open the workbench with Diffusion Denoise selected.
2. Upload your logo (PNG, SVG, JPG or WebP). You can also drag it onto the page or paste it with Ctrl+V / ⌘+V.
3. Adjust particle size, shape and speed, then choose Export Code.
4. Pick a format. The HTML file is free; the Vue and React components need Pro.

In the exported code, this effect is selected with:

<!-- Vue 3 (PixelLogoLoader.vue) -->
<PixelLogoLoader variant="diffusion-denoise" />

// React (PixelLogoLoader.tsx)
<PixelLogoLoader variant="diffusion-denoise" />

// HTML (index.html)
const variant = 'diffusion-denoise';

Step-by-step guides: HTML · Vue 3 · React