Skip to main content

Motion and feel

Momentum​

Drag and release. The globe coasts and settles rather than stopping dead: the difference between a control that feels cheap and one that feels considered.

momentum: true;   // default

Velocity is sampled during the drag, capped so a violent flick cannot send it spinning, and decays about 10% per frame to a stop in roughly a second and a half.

Loading globe…

Auto-rotation​

autoRotate: true,      // default, globe mode only
rotateSpeed: 0.09,     // degrees per frame

Rotation pauses while dragging and while momentum is still carrying, then resumes.

Spring easing​

flyTo uses a damped spring rather than a linear interpolation, so arrivals settle instead of stopping abruptly.

globe.flyTo(139.69, 35.68);                    // eased
globe.flyTo(139.69, 35.68, { instant: true }); // jump
globe.flyTo(139.69, 35.68, { zoom: 4 });

Day and night​

terminator: true shades the night side using the real solar position.

createGlobe(canvas, {
  terminator: true,
  time: null,                       // null tracks the current time
});

globe.setTime(Date.UTC(2024, 5, 21, 12));   // June solstice, noon UTC
Loading globe…

The maths is proper astronomy, not an approximation: subsolarPoint() returns 23.44° on the June solstice and the terminator is drawn as the exact projected great circle. It is also exported on its own if you want the sun position for something else:

import { subsolarPoint } from "canvas-globe";

subsolarPoint(Date.UTC(2024, 5, 21, 12));   // { lon: 0.48, lat: 23.43 }

Reduced motion​

When the visitor has prefers-reduced-motion: reduce set:

  • auto-rotation stops
  • flyTo jumps instead of easing
  • marker pulse rings hold still
  • arcs stop travelling
  • ping bursts do not fire
  • orbit rings stop turning

This is on by default and changes live if the setting changes. Opt out with respectReducedMotion: false.

Frame rate​

fps: 30;   // default

Rendering is capped, and frames are skipped entirely when nothing is moving. A static chart costs nothing after the first paint. See Performance.

If you change state outside the option setters and need a repaint:

globe.invalidate();   // request one more frame
globe.render();       // draw right now, synchronously