# Diffusion preview
> Image preview that resolves the way diffusion models do: noise and large blocks sharpen over 30 steps into a scene, different each variation.
- Element: `<px-diffusion>`
- React: `import { PxDiffusion } from "@/components/lumesec/px-diffusion"`
- Collection: Pixel Lab (https://elements.lumesec.ai/components/pixel-lab)
- Registry item: https://elements.lumesec.ai/r/px-diffusion.json
- Page: https://elements.lumesec.ai/components/pixel-lab/diffusion



Live preview: https://elements.lumesec.ai/view/px-diffusion

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-diffusion.js"></script>

<px-diffusion></px-diffusion>
```

## Installation

```bash
npx shadcn@latest add @lumesec/px-diffusion
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/px-diffusion.json
```

## Usage

React:

```tsx
import { PxDiffusion } from "@/components/lumesec/px-diffusion";

export function Example() {
  return (
    <PxDiffusion />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-diffusion.js"></script>

<px-diffusion></px-diffusion>
```

## Behaviour

An image generating the way diffusion models work: noise and big blocks that sharpen step by step into a scene. Three prompts, and every variation is different.

## API reference

### Events

Events bubble and cross the shadow boundary unless the description says otherwise.

| Event   | React prop | Detail               | Description                                                                                                                   |
| ------- | ---------- | -------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| `start` | `onStart`  | `{ prompt: string }` | Fires when a generation starts, including the automatic first one. `prompt` is `Mountain dusk`, `Moonlit sea` or `Neon city`. |
| `done`  | `onDone`   | `{}`                 | Fires when the last denoising step completes.                                                                                 |

## Accessibility

* The prompt chips sit in a `role="radiogroup"` with `aria-label="Prompt"`; each is a native button with `role="radio"` and `aria-checked`. There is no arrow-key handling.
* The canvas has `role="img"` with `aria-label="Generated image: <prompt>"`.
* The status ("Denoising · …", "Done in 2.0s") is an `aria-live="polite"` region; the step counter beside it is plain text.
* Reduced motion: each image appears finished at once without the denoising steps.

## Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-muted`.

## Notes

* No model is involved. The three scenes are painted procedurally from a seed, and "New variation" or picking a prompt changes the seed.
* The image is a 60 by 40 grid of cells on a 160px tall canvas; a run takes about two seconds and starts automatically on first render.