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.
Installation
pnpm dlx shadcn@latest add @lumesec/px-diffusionFirst timeRegister the @lumesec registry once, or install by URL+
Adds @lumesec to your components.json:
pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.jsonOr skip the setup and install by URL:
npx shadcn@latest add https://elements.lumesec.ai/r/px-diffusion.jsonUsage
import { PxDiffusion } from "@/components/lumesec/px-diffusion";
export function Example() {
return (
<PxDiffusion />
);
}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.
startReact proponStartDetail{ prompt: string }Fires when a generation starts, including the automatic first one. prompt is Mountain dusk, Moonlit sea or Neon city.
doneReact proponDoneDetail{}Fires when the last denoising step completes.
Accessibility
- The prompt chips sit in a
role="radiogroup"witharia-label="Prompt"; each is a native button withrole="radio"andaria-checked. There is no arrow-key handling. - The canvas has
role="img"witharia-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.
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.
Related
Was this page helpful?