Skip to content

NewMCP server for your coding agent. Set it up ›

Nexus UI
Get Pro

Diffusion Loader, animated React component

An image-generation placeholder that resolves the way a diffusion model does. A fine film grain sits over a soft wash of colour that flows like ink, then firms into shapes, edges and texture step by step as the noise drains away, with a glow of colour breathing round the frame. At the end a soft focus front sweeps down and brings the sharp picture in. The step count is read out, and Regenerate starts again with a new seed.

  • Pro
  • Loaders
  • Glow

A soft tick on each denoising step and a chime when the picture comes into focus. Sound is off on this site until you switch it on.

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

A lighthouse on a sea cliff at dusk, the first stars out, oil painting

Step 0 of 30
Generating, 0%

Props

PropTypeDefaultWhat it does
promptstring—The prompt shown above the picture.
stepsnumber30How many denoising steps the preview counts through.
durationnumber5.2Seconds for the whole run.
srcstring—An image to resolve into instead of the painted demo (it must allow cross-origin use).
onDone(seed: number) => void—Called with the seed when the picture is done.
enableSoundbooleantrueA tick each step and a chime when it's done. They also follow the site-wide sound switch.
volumenumber0.8Sound level, 0 to 1.
autoplaybooleanfalseRegenerates by itself now and then until the visitor touches it. Never runs under reduced motion.
classNamestring—Extra classes for the card.

Add it to your project

  1. 1

    Set up your project once

    You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:

    npx shadcn@latest init -d

    Starting from nothing? The Quick Start walks through the whole thing.

  2. 2

    Connect the registry with your API key

    Diffusion Loader is a Pro item, so the CLI has to send your API key. Do this once per project:

    1. Create a key at nexus-ui.com/dashboard/api-key. Copy it straight away: it starts with nxs_ and is shown only once.
    2. In your project root, next to package.json, create a file named .env.local with this line, using your own key:
      NEXUS_API_KEY=nxs_your_key_here
    3. Open components.json and add this entry inside the outermost braces, next to "aliases". Leave {name} and ${NEXUS_API_KEY} exactly as written; the CLI fills them in:
      "registries": {
  "@nexus-labs": {
    "url": "https://www.nexus-ui.com/api/registry/{name}",
    "headers": {
      "Authorization": "Bearer ${NEXUS_API_KEY}"
    }
  }
}

How Diffusion Loader works

An image-generation placeholder that resolves the way a diffusion model does. It starts as a fine, filmic grain over a soft wash of colour that flows slowly like ink in water.

The source, the install command and the build prompt come with Pro.

Diffusion Loader questions

Does it make sound, and how do I turn it off?

A soft tick on each denoising step and a chime when the picture comes into focus. Sounds are synthesised with the Web Audio API, so there are no audio files, and they only play after a click or key press. Pass `enableSound={false}` to silence this component, or call `setSoundsEnabled(false)` from `@/lib/ui-sounds` to switch every sound off at once. The CLI installs `@/lib/ui-sounds` with the component.

More loaders