Globe animations and effects
CanvasGlobe 1.2 adds 54 optional effects without increasing the core bundle. Effects are plain objects installed with globe.use(). They can paint below the globe, above it, or across the finished frame.
:::tip Try every effect live
Open the Effect Studio to compare all 54 effects, adjust their settings, replay animations, and copy generated code.
:::
import { createGlobe } from "canvas-globe";
import { particleAssemble, scanlines, counterRoll } from "canvas-globe/fx";
const globe = createGlobe(document.querySelector("#globe"), {
preset: "midnight",
autoRotate: true,
});
globe
.use(particleAssemble())
.use(scanlines({ strength: 0.12 }))
.use(counterRoll({ to: 12840, caption: "Customers worldwide" }));
Remove one effect by reference or name, or remove every effect at once:
const effect = scanlines();
globe.use(effect);
globe.remove(effect);
globe.remove("scanlines");
globe.clearEffects();
Effect catalogue
Entrances
| Effect | Best used for |
|---|---|
particleAssemble() | Land dots flying into place |
radarSweep() | A scanning reveal |
markerCascade() | Pins arriving in sequence |
mapUnfold() | Globe-to-map transitions |
dropFromOrbit() | A dramatic location opener |
Ambient looks
| Effect | Best used for |
|---|---|
breathe() | A slow rim pulse |
starfield() | Layered moving stars |
scanlines() | A restrained display texture |
cityLights() | Night-side city light |
lightTrails() | Long-exposure movement |
torch() | Pointer-led exploration |
meshGradient() | Moving colour behind the globe |
shineSweep() | A passing highlight |
glassSphere() | A polished glass finish |
neonFlicker() | A subtle electrical flicker |
aurora() | Polar light curtains |
dayNightSweep() | A complete day/night cycle |
Data reveals
| Effect | Best used for |
|---|---|
counterRoll() | A headline metric |
tally() | Counting locations |
splitFlap() | Departure-board numbers |
shockwave() | A surface-wide event |
choroplethCascade() | Ranked country data |
routeDashes() | Travel and logistics routes |
arcLaunch() | Routes leaving a hub |
spikesRising() | Values rising from locations |
pinDrop() | Physical marker arrivals |
markerBloom() | Marker pulse reveals |
ghostTrail() | Fading earlier positions |
dotDensity() | One dot per unit |
Camera and transitions
orbitSubject(), matchCut(), parallaxTilt(), trimPaths(), liquidWipe(), and dropFromOrbit() cover camera moves and scene transitions.
Titles and stylised scenes
glitch(), firework(), lowerThird(), textOnCircle(), countryMatte(), windField(), jellySquash(), dataDesk(), and cursorLight() add presentation graphics and distinctive visual treatments.
Pointer interactions
For a smaller interaction-only import, use canvas-globe/fx/interaction.
import { measureTool, serviceRadius, geoQuiz } from "canvas-globe/fx/interaction";
globe.use(measureTool());
The interaction entry point contains magneticMarkers(), hoverLift(), measureTool(), lassoSelect(), pingProbe(), parallaxTilt(), cursorLight(), drillDown(), radialMenu(), spinToWin(), serviceRadius(), timezoneOverlap(), compareCountries(), and geoQuiz().
lassoSelect() starts in rotate mode, so adding the effect does not disable normal globe navigation. Set drawMode: true while your interface is in selection mode, then restore it to false when the user switches back to rotating the globe. The Effect Studio includes a working Rotate globe / Draw selection control and copy-ready setup code.
Every pointer effect removes its listeners when you call remove() or destroy().
Reproducible frames
The effect clock can be pinned to a specific millisecond. This makes frame capture and seamless loops predictable.
globe.seek(1250); // freeze at 1.25 seconds
globe.renderFrame(2400); // draw the frame at 2.4 seconds
globe.play(); // return to live time
Most effects are fully seekable. windField() uses prior frames, so export it in sequential order. Live media, new pings, and a terminator using the current time are also dynamic inputs. Fix those inputs when identical exported frames are required.
Performance and package size
The effects entry point is about 25 KB gzipped and is not imported by the core package. Import only the module your project needs. The main canvas-globe bundle remains about 125 KB gzipped, including world geometry.
See effect authoring to build your own effect, or use recipes for complete ready-made compositions.