An interactive 3D map of the Vercel ecosystem. Every product is a node floating in space, connected by real force-directed physics: Next.js, the AI and agent stack, compute and infra, storage, devtools, observability, and the Marketplace integrations (including the ones added the day this was built, like Resend).
Built to feel unmistakably Vercel: a strict monochrome Geist design, a pure black canvas with a subtle dot-grid, and a signature black-triangle node whose edge is lit by a light source riding along it, exactly like the vercel.com hero.
- Full-screen 3D force graph (
react-force-graph-3d+three) with an orbital camera, idle auto-rotate, drag-to-move nodes, slow flowing particles on links, and a restrained bloom. - Click a node and it becomes a glowing black triangle; unrelated nodes dim and the camera glides over. A side panel shows the description, real docs and site links, connected nodes, and a Vercel-style install widget with an agent dropdown (Plugin, Claude Code, Codex, Cursor, GitHub Copilot).
- ⌘K command palette search and a discreet category filter.
- Responsive: on touch the panel becomes a bottom sheet, the camera keeps the selected node in view, and every node shows a subtle always-on label (there is no hover on mobile).
- A dithering wave shader (
@paper-design/shaders-react) rolls softly under the info panel.
| Layer | Tech |
|---|---|
| Framework | Next.js 16 (App Router, TypeScript) |
| Styling | Tailwind CSS v4, Geist (Sans + Mono) |
| 3D | react-force-graph-3d, three.js |
| Shaders | @paper-design/shaders-react |
pnpm install
pnpm devThe whole ecosystem lives in one typed source of truth,
data/ecosystem.ts: EcoNode (category, description, docs
and site links, importance) plus realistic links. The importance field is left
open so it can later be swapped for real GitHub-star metrics via a cached API
route, without touching the rest of the app.