Particle Picture
Particles assemble into an image or text and flow between them. Pro · 3D and motion › WebGL
Thousands of particles that gather into a picture or a word, then stream along arcs into the next one. Each shape is rasterised once at the area's proportions and dealt out to the particles (pictures keep their colours, text takes the theme's); the GPU moves them all, the CPU only picks up where they are when a new morph starts mid-way. The pointer pushes particles aside and a press blows the shape apart for a moment. Until the first frame — on the server, without JavaScript or WebGL2 — the current picture or text itself is shown, and it is what assistive technology reads. With reduced motion the shapes switch without the flight.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add particle-picturenpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { ParticlePicture } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
shapes * | ParticleShape[] | The pictures and texts the particles gather into, in order. Images must be same-origin or served with CORS. | |
index | number | Index of the shape shown (controlled). | |
defaultIndex | number | 0 | Index of the shape shown at first (uncontrolled). |
onIndexChange | (index: number) => void | Called when the particles head for another shape — by themselves every interval ms, or from outside. | |
interval | number | 0 | Moves on to the next shape every so many ms; 0 waits for index. |
paused | boolean | false | Holds the current shape (moving content must be pausable, WCAG 2.2.2); the automatic change also pauses on hover and focus. |
duration | number | 1800 | Length of a morph, ms. |
density | number | 1 | How many particles, relative to the default (about 16 000 on high quality): 0.25–2. |
particleSize | number | Size of a particle, CSS px; by default it follows the sampling grid. | |
quality | 'auto' | 'low' | 'balanced' | 'high' | 'auto' | Rendering quality: auto picks from the device; low / balanced / high set the particle count, sampling grid and pixel ratio. |
interactive | boolean | true | The pointer pushes particles aside, and a click or tap blows the shape apart for a moment. |
Related components
- Shader Aurora — WebGL shader aurora that reaches toward the cursor
- Shader Gradient — Live shader gradient for heroes: colors flow around the cursor
- Liquid Surface — GPU water surface: ripples follow the cursor, splash on click
- Particle Fabric — Fabric of tens of thousands of glowing points: folds, cursor, waves
- Dot Globe — WebGL2 dot globe: markers, pulsing arcs, drag to rotate
- Horizon Grid — Endless grid floor fading into a glowing horizon
- Reveal — Reveal any component on scroll: rise, fade in, 3D unfold
- Stagger — Lists, grids and table rows appear in a wave, one after another
- Tilt — Tilt, lift, glare and magnetic pull under the cursor for any card
- Layout Group — Jump-free reordering: filter, sort, regrid
- Presence — Enter and exit: an element stays mounted until its exit animation ends
- Scene Backdrop — WebGL or CSS scene behind a regular UI: hero, cards, dashboard
Previous: Particle Fabric · Next: Dot Globe · All 3D and motion