Skip to main content

Ready-made animated globe recipes

A recipe combines globe options, effects, and optional timed behaviour into one reusable composition. Recipes are plain objects, so you can inspect or modify them before applying them.

import { createGlobe } from "canvas-globe";
import { applyRecipe, devPlatformGlobe } from "canvas-globe/recipes";

const globe = createGlobe(document.querySelector("#globe"));
const undo = applyRecipe(globe, devPlatformGlobe());

// Restore the previous options and remove recipe effects.
undo();

Included recipes​

RecipeGood fit
devPlatformGlobe()A dark developer-product hero with arcs and glowing points
keynoteGlobe()A polished presentation slide with one large metric
satelliteOrbits()Space, infrastructure, and communications products
growthOverTime()Customers, launches, signups, or coverage accumulating over time
celebrationBurst()Milestones and launch moments
cityTour()Travel, office, customer, or event location stories

Customise a recipe​

import { applyRecipe, cityTour } from "canvas-globe/recipes";

const recipe = cityTour({
  stops: [
    { lon: 72.58, lat: 23.03 },
    { lon: -0.12, lat: 51.5 },
    { lon: 139.69, lat: 35.68 },
  ],
  dwell: 1800,
  zoom: 2.4,
});

recipe.options = { ...recipe.options, preset: "midnight" };
const undo = applyRecipe(globe, recipe);

applyRecipe() snapshots every option it changes. Its returned teardown restores those values, removes installed effects, and stops timers started by the recipe.

For smaller visual pieces, use individual effects. For lower-level control, create a custom effect object.

Review pricing and production licensing.