Dot Globe
Глобус из точек на WebGL2: маркеры, дуги с импульсами, вращение мышью. Pro · 3D и моушн › WebGL
Установка
npx valyro-cli@latest login
npx valyro-cli@latest add dot-globenpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { DotGlobe } from 'valyro-ui-pro';Пропсы
| Prop | Type | Default | |
|---|---|---|---|
markers | GlobeMarker[] | [] | Places on the globe: offices, servers, players, deliveries. |
arcs | [number, number][] | [] | Arcs between markers, as pairs of marker indices: routes, connections, trades. |
dots | number | 2600 | Number of dots on the sphere at high quality (fewer at lower quality). |
speed | number | 6 | Turning speed, degrees per second (0 — still). Pauses while dragged, off screen and with paused. |
paused | boolean | false | Holds the turning, e.g. from a pause button of the page (WCAG 2.2.2). |
focusMarker | number | Index of a marker to turn the globe towards. | |
showLabels | boolean | true | Shows the markers' labels while they face the viewer. |
quality | 'auto' | 'low' | 'balanced' | 'high' | 'auto' | Rendering quality: auto picks from the device; low / balanced / high cap dots, resolution and frame rate. |
labels | Partial<DotGlobeLabels> | Text for assistive technology. |
Похожие компоненты
- Shader Aurora — Северное сияние на WebGL-шейдере, тянется к курсору
- Shader Gradient — Живой градиент на шейдере для hero: цвета перетекают и обтекают курсор
- Liquid Surface — Водная гладь на GPU: рябь за курсором, всплеск от клика
- Particle Fabric — Ткань из десятков тысяч светящихся точек: складки, курсор, волны
- Particle Picture — Частицы собираются в картинку или текст и перетекают между ними
- Horizon Grid — Бесконечная сетка-пол, уходящая к светящемуся горизонту
- Reveal — Появление любого компонента при прокрутке: подъём, наплыв, 3D-разворот
- Stagger — Списки, сетки и строки таблиц появляются волной, один за другим
- Tilt — Наклон, подъём, блик и притяжение под курсором для любой карточки
- Layout Group — Перестановка без прыжков: фильтр, сортировка, перестроение сетки
- Presence — Появление и уход: элемент живёт, пока проигрывается выход
- Scene Backdrop — WebGL- или CSS-сцена под обычным интерфейсом: hero, карточки, дашборд
Назад: Particle Picture · Далее: Horizon Grid · Весь раздел «3D и моушн»