Particle Fabric
Fabric of tens of thousands of glowing points: folds, cursor, waves. Pro · 3D and motion › WebGL
A sheet of tens of thousands of glowing points draped in slow, travelling folds — a living backdrop for a hero or a section. Every point is placed by the vertex shader from its index alone (no vertex buffers, nothing per point in JavaScript): fold currents, one long drape, a lift under the pointer and ripples from clicks. Where the cloth turns away the points crowd together and the folds light up by themselves. Point count, pixel ratio and frame rate follow quality; it draws only on screen; colours are theme tokens (light themes get ink instead of light). With reduced motion one still frame; without WebGL2 a dotted CSS stand-in.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add particle-fabricnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { ParticleFabric } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
density | number | 1 | How many points weave the cloth, relative to the default (about 36 000 on high quality): 0.25–2. |
folds | number | 6 | Number of fold currents running across the cloth, 1–8: more is busier. |
depth | number | 1 | Height of the folds: 0 is a flat sheet, 1 the default drape, up to 2. |
speed | number | 1 | How fast the folds travel: 1 is the default pace, 0 freezes them. |
tilt | number | 30 | How far the cloth tips back from the viewer, degrees. |
pointSize | number | 2.6 | Size of a point, CSS px. |
colors | string[] | Up to three CSS colours across the cloth and its crests. Default: the theme's chart colours 1–3. | |
quality | 'auto' | 'low' | 'balanced' | 'high' | 'auto' | Rendering quality: auto picks from the device; low / balanced / high set the point count, pixel ratio and frame rate. |
interactive | boolean | true | The pointer lifts the cloth under it, and a click or tap sends a ripple across it. |
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 Picture — Particles assemble into an image or text and flow between them
- 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: Liquid Surface · Next: Particle Picture · All 3D and motion