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