Dot Globe
WebGL2 dot globe: markers, pulsing arcs, drag to rotate. Pro · 3D and motion › WebGL
A globe of glowing dots on WebGL2 — offices, servers, deliveries or players as markers, with arcs whose pulses run between them, each on its own beat; markers ripple and a soft atmosphere rims the limb. It settles in with a last quarter-turn as it appears, turns slowly, follows a drag with momentum, answers the arrow keys and turns to a marker on request; labels follow the markers on the near side. Thousands of dots are drawn in two passes (far side faint, near side bright) by one shader, at a capped pixel ratio, only while on screen; paused, it draws nothing until something changes. The markers are also a plain list for assistive technology. Reduced motion: no turning, a still frame that redraws when dragged. Without WebGL2: a CSS sphere.
Installation
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';Props
| 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. |
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
- Particle Picture — Particles assemble into an image or text and flow between them
- 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 Picture · Next: Horizon Grid · All 3D and motion