GenerativeImage

Image reveal effects that mimic AI generation — particles drift freely then assemble into the image from top to bottom, resolving into the original.

Effects

Blur uses CSS animations. Pixel uses a Canvas 2D particle engine with a loading → assembly → reveal flow.

<GenerativeImage
  src="/ai-output.jpg"
  alt="AI generated"
  width={400}
  height={300}
  effect="blur"
  speed="slow"
/>

How long particles drift before assembly begins.

createPixelEffect({ loadingDuration: 500 })

How long the top-to-bottom assembly wave takes.

createPixelEffect({ assemblyDuration: 1000 })

Lower gap = more particles = finer detail.

createPixelEffect({ gap: 2, particleSize: 2 })

How quickly particles settle into position. Higher = snappier.

createPixelEffect({ easeSpeed: 0.03 })

Particles emit a soft colored light matching their pixel color. Creates a neon/firefly feel.

createPixelEffect({ glow: true, glowRadius: 6 })

Prop	Type	Default	Description
container	HTMLElement	—	DOM element for canvas (required)
image	string	—	Image URL (required)
gap	number	4	Pixel sampling gap
particleSize	number	4	Particle size (px)
loadingDuration	number	1500	Drift phase duration (ms)
assemblyDuration	number	2000	Assembly wave duration (ms)
easeSpeed	number	0.06	Particle easing factor (0–1)
overflow	number	0.15	How far particles can exceed bounds (fraction)
glow	boolean	false	Particles emit colored light matching their pixel
glowRadius	number	6	Glow blur radius (px)
maxCanvasWidth	number	320	Caps particle count by downscaling the source image before sampling
onComplete	() => void	—	Called when real image is visible

Prop	Type	Default	Description
start()	() => void	—	Begin the animation
stop()	() => void	—	Pause the animation
replay()	() => void	—	Reset and replay from loading phase
destroy()	() => void	—	Clean up canvas and DOM