Particle Fabric
Ткань из десятков тысяч светящихся точек: складки, курсор, волны. Pro · 3D и моушн › WebGL
Установка
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';Пропсы
| 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. |
Похожие компоненты
- Shader Aurora — Северное сияние на WebGL-шейдере, тянется к курсору
- Shader Gradient — Живой градиент на шейдере для hero: цвета перетекают и обтекают курсор
- Liquid Surface — Водная гладь на GPU: рябь за курсором, всплеск от клика
- Particle Picture — Частицы собираются в картинку или текст и перетекают между ними
- Dot Globe — Глобус из точек на WebGL2: маркеры, дуги с импульсами, вращение мышью
- Horizon Grid — Бесконечная сетка-пол, уходящая к светящемуся горизонту
- Reveal — Появление любого компонента при прокрутке: подъём, наплыв, 3D-разворот
- Stagger — Списки, сетки и строки таблиц появляются волной, один за другим
- Tilt — Наклон, подъём, блик и притяжение под курсором для любой карточки
- Layout Group — Перестановка без прыжков: фильтр, сортировка, перестроение сетки
- Presence — Появление и уход: элемент живёт, пока проигрывается выход
- Scene Backdrop — WebGL- или CSS-сцена под обычным интерфейсом: hero, карточки, дашборд
Назад: Liquid Surface · Далее: Particle Picture · Весь раздел «3D и моушн»