atlas run

pro

Get the prompt, project and Figma file with monthly ($29 a month) or yearly ($249 a year). Plus tax where it applies.

An interactive-map motion piece on a 1080 × 1080 stage that scales to any window, in a seamless 22-second loop. A tilted orthographic globe of Europe in Natural Earth's shaded relief, re-graded dark, with a faint lat/long grid, a vignette, film grain and a glass map-control bar. A scripted cursor explores it: hovering a country draws a white outline and a light name tooltip. A click sends a red ripple, the camera flies in, and the country rises from the map as a raised tile: red extruded walls, a soft drop shadow, its own relief lit and warmed on top, the rest of the map dimmed, and a neon coast that traces itself with a bright tip. The capital gets a pulsing marker and a leader line, the name sets letter by letter on the map with its coordinates, and a data card counts up the capital, population and area. Spain, France, Italy and Greece in turn, joined by a dashed great-circle route between the capitals; visited countries settle back as thin red outlines, the camera pulls back to the whole route, and everything fades as the loop closes. The globe is one WebGL2 shader that inverts the projection per pixel; the grid, borders, extrusion and labels are Canvas 2D with d3-geo; the tilt is CSS 3D. Borders are Natural Earth's in the internationally recognised view. Swap the four stops, their figures and the camera moves in two small files.

what you get

prompt
Paste it into Claude, Codex, Kimi or Cursor to rebuild this template. Tested: we rebuild every template from its prompt before it goes live.
project
The Vite + React source code as a .zip, ready to run.
figma file
The editable design as a .fig file to import into Figma.

what's inside

  • map
  • globe
  • webgl shader
  • canvas 2d
  • camera zoom
  • cursor animation
  • tooltip
  • draw-on lines
  • counters
  • callouts
  • autoplay loop
  • film grain

stack

  • react
  • vite
  • typescript
  • webgl
  • canvas
  • d3-geo
  • css 3d

fonts

Geist, Geist Mono

Free fonts, linked in the prompt.

colors

  • #030303
  • #FF4536
  • #FF8A78
  • #F4F2EE
  • #0E0E0E

license

With monthly or yearly: personal and commercial work, client projects included. Don't resell or share the template, prompt or files.

read the license