Meridian

Field notes

A dark hero for an API or infra product: a dotted globe drawn from real coastlines, with traffic arcs firing between cities and landing in a ping. Drag to spin it. No models, no textures, no map requests.

• 3D
• WebGL shader
• Pointer interaction
• API & infra
• Dark theme

Meridian is a landing page for a fictional edge network: a full-screen hero with a turning globe, a live requests-per-second counter, a stat row, three feature cards, and a closing call to action with the deploy command. The globe is made of about 4,000 land dots, and seventeen routes between fourteen cities light up in turn: a bright head races along each arc and sets off a ring where it lands.

The coastlines come from Natural Earth (public domain), baked once into a 2.7 KB bitmap inside the source, so the page makes no map requests and the one prompt rebuilds it exactly. Drag sideways to spin the globe; it keeps a little momentum and then goes back to its own slow turn. Anyone who prefers reduced motion sees it still, with every route drawn in.

How it's built

• Coastlines without a map file: Natural Earth land was rasterised once to a 180 × 90 grid, one bit per 2° cell, and pasted into the source as a 2.7 KB base64 string. The globe decodes it with atob and looks up any latitude and longitude in one line.
• Dots that sit evenly: 16,000 points are laid on a Fibonacci lattice, so they are spaced the same at the poles and the equator, and only the ones over land are kept, about 4,000 of them in a single Points draw call. A dark sphere just inside hides the far side.
• Arcs are tubes with a travelling head: each route is a great circle between two cities, lifted off the surface by a sine that grows with distance. The fragment shader lights the part of the tube just behind a moving head, brighter than white so Bloom catches it, and a ring pings where it lands.
• A loop that closes: the globe turns exactly once per 20 s loop and each arc fires two or three whole times, so the preview wraps without a seam. On the page, a sideways drag adds yaw with momentum on top of the turn.

Inside the prompt

Every file below is written out in full, so your agent creates the project exactly — no guessing, no missing pieces.

meridian-globe/
├─ .gitignore
├─ index.html
├─ package.json
├─ tsconfig.json
├─ vite.config.ts
└─ src/
   ├─ App.tsx
   ├─ index.css
   ├─ main.tsx
   ├─ vite-env.d.ts
   ├─ components/
   │  ├─ GlobeScene.tsx
   │  ├─ Hero.tsx
   │  └─ Sections.tsx
   ├─ lib/
   │  ├─ data.ts
   │  ├─ geo.ts
   │  └─ loop.ts
   └─ shaders/
      └─ globeShaders.ts

Recut it

• Move the edge cities or add your ownsrc/lib/data.ts → CITIES
• Change which cities talk to each othersrc/lib/data.ts → ROUTES
• Rewrite the stats and feature cardssrc/lib/data.ts → STATS / FEATURES
• Recolour the dots, the arcs, or the glowsrc/components/GlobeScene.tsx → DOT / TEAL / HOT
• Make the globe denser, bigger, or place it elsewheresrc/components/GlobeScene.tsx → Globe()
• Make arcs fly higher or lowersrc/lib/geo.ts → arcPath()
• Rename the product and the headlinesrc/components/Hero.tsx → Hero()