A free, animated 3D globe for logistics and global product heroes, dark dotted sphere style. Every colour, text and motion setting is a runtime input.
Updated October 2026
The Wireframe Globe is a 3D globe with a dark dotted sphere look, made for logistics and global product heroes. It animates a rotating dotted globe with flight arcs and a pulse from the hub city, and a tap draws the next route. It also has keyframes you can edit in the ExodeUI timeline: an entrance and an ambient float.
These 24 inputs, plus the replay and tap triggers, can be set from the customizer above, from the ExodeUI studio, or from your code while the element runs.
| Input | What it changes | Type |
|---|---|---|
| headline | Headline | Text |
| sub | Subline | Text |
| cta | Button | Text |
| bgColor | Panel | Colour |
| dotColor | Globe dots | Colour |
| arcColor | Route arcs | Colour |
| accent | Accent | Colour |
| textColor | Text | Colour |
| spin | Spin speed | Number |
| radius | Corner radius | Number |
| intensity | Dot density | Number |
| lift | Hover lift | Number |
| interactive | Mouse interaction | On/off |
| tilt | Hover tilt (deg, 0 = off) | Number |
| press | Press squish | Number |
| float | Extra idle float (px) | Number |
| speed | Animation speed | Number |
| intro | Entrance animation | On/off |
| introStyle | Extra entrance style | Choice |
| introDuration | Entrance duration (s) | Number |
| colorTween | Colour change fade (s) | Number |
| pageMode | Page background | Choice |
| pageTop | Page colour | Colour |
| pageBottom | Page gradient end | Colour |
npm i exodeui.ExodeUICanvas and pass your text, numbers and colours as inputs.import { ExodeUICanvas } from 'exodeui';
export function WireframeGlobeElement({ data }) {
return (
<ExodeUICanvas
src="/ui-trends/files/immersive-3d/02-wire-globe.bexode"
autoPlay
style={{ width: 600, height: 400 }}
inputs={{
headline: data.headline,
sub: data.sub,
// every colour is an input too, for example a brand accent
...data.theme
}}
/>
);
}