Particle Image
ProHalf a million GPU particles lift off a photo, drift on noise, and smear on hover.
webglparticlesimagegpgpunoisecursorfull bleed
Props
| Prop | Type | Default | Description |
|---|---|---|---|
imageUrl | string | - | Image sampled for particle colour. Must be same-origin or CORS-enabled. |
alt | string | - | Accessible name. Omit for a purely decorative backdrop. |
particleCount | number | 500000 | Quantity of active particles. Clamped to 1,000,000. |
particleSize | number | 2 | Particle diameter in CSS pixels. |
particleOpacity | number | 0.85 | Peak particle alpha, reached mid-life. |
speed | number | 1 | Flow field evolution rate. 0 freezes the field into fixed currents. |
noiseScale | number | 0.0005 | Flow field frequency. Lower values produce longer, smoother currents. |
noiseStrength | number | 0.05 | Acceleration magnitude per frame, in pixels. |
damping | number | 0.95 | Velocity preserved each frame. |
lifespan | number | 200 | Frames a particle lives before respawning on a fresh pixel. |
fit | "cover" | "contain" | "cover" | How the photo maps into the canvas. Contain fits the whole frame and never crops the subject. |
showImage | boolean | true | Draw the source image behind the particles. |
imageOpacity | number | 1 | Backdrop image alpha. |
backgroundColor | string | "transparent" | Hex fill behind the image, or "transparent" to show the page through. |
cursorInteraction | boolean | true | Enable pointer-driven particle dragging. |
cursorStrength | number | 0.1 | Share of pointer momentum transferred to particles. |
cursorRadius | number | 100 | Pointer influence radius in CSS pixels. |
width | string | number | "100%" | Container width. |
height | string | number | "100%" | Container height. |
dpr | number | - | Device pixel ratio cap. Capped at 2 when omitted. |
paused | boolean | false | Freeze the simulation on its current frame. |
children | React.ReactNode | - | Content layered above the effect. |