How I Built Tectonic, a 3D Geography Game for the Web — Tectonic geography game on a 3D globe

Tectonic began with a simple dissatisfaction: many geography games ask players to recognize a highlighted shape or recall a capital, but very few make the map itself the object of play.

I wanted to build a geography puzzle where learning came from reconstruction. The player would pick up real country shapes, place them on a globe, and grow a connected world one border at a time. The result is Tectonic, a free browser game with a timed daily globe challenge and 200 regional map puzzles.

The design problem: the whole world is too much at once

A drawer with 194 countries sounds comprehensive. In practice, it is paralyzing. Showing every piece as immediately playable creates too many choices, especially on a phone, and it turns the game into a search interface before it becomes a geography puzzle.

The breakthrough was to make borders part of the rules.

Every Globe run begins with one large seed country already placed. From there, only countries that share a border with the growing cluster can be dragged. If the seed is Brazil, for example, the first useful questions are local: which countries border Brazil, and where do they fit around it?

This frontier system reduced the choice space without inventing artificial levels. It also gave the game a natural teaching rhythm. Players learn continental structure through adjacency, then gradually connect those local neighborhoods into a global map.

Making real country shapes feel like game pieces

Geographic data is accurate but not automatically playable. Country outlines can contain multiple rings, tiny islands, awkward centroids, and dramatic differences in scale. A strict drop test would make large countries easy and small island nations nearly impossible.

Tectonic converts each country into several useful representations:

  • geographic rings for the placed shape
  • a centroid for placement and camera framing
  • a simplified silhouette for the drawer tile
  • an adjacency list for the active frontier
  • an angular size used to tune placement tolerance

The drop tolerance scales with the country's size and includes a generous minimum for small shapes. The aim is to test whether the player understands the location, not whether they can perform pixel-perfect surgery on a rotating sphere.

A world that visibly comes together

I wanted placement to feel constructive rather than merely correct.

Loose pieces use soft pastel low-poly materials, which keeps the drawer readable and makes each country feel tangible. Once a piece locks into its real position, it changes into the same terrain language as the countries already on the globe. Over time, the screen shifts from scattered pieces to one connected landscape.

The camera follows the placed cluster and adjusts its framing as the map expands. Correct drops add a synthesized chime, a small haptic response on supported devices, and floating feedback. Because the sounds are generated with Web Audio, the game does not need to download a library of samples.

These details do not change the geography rules, but they make each correct answer feel like progress toward a larger object.

Designing a daily game that never feels like failure

Tectonic's official Daily gives everyone the same date-seeded starting country and 60 seconds to place as many connected countries as possible. The free seed does not count; only player placements contribute to the result.

When the clock reaches zero, the run ends normally. There is no failure screen and no need to complete all 194 countries. A player who places three countries has still built something, learned something, and earned a valid score.

The placement count becomes a Performance Absolute Score from 0 to 1,000. This lets Tectonic join three very different daily games—Scalar, Continuum, and Whenabouts—without pretending their raw measurements are the same.

The first Daily completion is the official result. Later attempts become Practice, which keeps replay available without turning the shared leaderboard into an unlimited-retry competition.

One mechanic was not enough for the geography I wanted to include

The Globe mode works well for countries, but it cannot express every interesting map. States, prefectures, island groups, and historical-looking regional silhouettes needed a different format.

That led to Tectonic Regions: 200 flat jigsaw levels covering continents, archipelagos, and national subdivisions. A searchable catalog makes the collection approachable, while each level keeps the same central pleasure of assembling real geography.

Regions uses a Terra Incognita system. At the start, only the largest target is visible. Placing it reveals neighboring targets with a radar-like pulse. The map therefore unfolds through adjacency, echoing the Globe's frontier rule in a form that works for flat regional puzzles.

The two modes have separate goals. Daily Globe contributes to the shared Scalargame streak and score. Regions tracks local time, moves, accuracy, and personal bests, with no pressure to protect a daily result.

Shipping a 3D game without making every visitor download it

Tectonic lives inside Scalargame, a React application that also hosts three lightweight 2D games. Adding a full Three.js stack and a large geography library to the main download would have slowed the entire site for people who never opened Tectonic.

The solution was route-level isolation:

  • React Three Fiber, Drei, and the 3D scene load only on Tectonic routes
  • globe, level, and terrain data remain static files rather than API responses
  • large assets are excluded from the PWA's install-time precache
  • visited assets use bounded runtime caching for faster repeat play
  • WebGL support is checked before the canvas mounts

The content pipeline generates one compact globe dataset, a catalog and geometry file for each regional level, and terrain heightmaps. Keeping those files separate means a player opening one region does not download terrain for the other 199.

What the project became

Tectonic shipped as both a focused daily geography game and a larger map-puzzle collection:

  • 194 countries on a playable 3D globe
  • one shared 60-second Daily challenge
  • Arcade and Zen variants for optional play
  • 200 flat Regions levels
  • real outlines, adjacency, and terrain-backed pieces
  • mobile, desktop, sound, haptics, reduced-motion support, and a WebGL fallback

The most important outcome is the interaction itself. Tectonic does not ask players only to remember geography. It lets them rebuild it.

Play Tectonic in your browser or explore the shorter Tectonic project artifact.