API & dev tool
A geocoding API site “Geocode” — a beautiful terminal: dark background, phosphor accent, dot grid, mono font: a hero where the request types and JSON arrives with a “42 ms” delay and switches between curl / JS / Python / Go, a sandbox with a dot on a map, endpoints in a bento with micro-demos, a price calculator with a logarithmic slider and a staircase, a region status panel with sparklines, a competitor comparison with expanders, a changelog with install commands and ticking counters, who uses it, developer reviews, “a key in 30 seconds” and a footer with a status light. Inter Tight and JetBrains Mono.
What it is made of
12 catalog blocks in page order. Each one is installed with its own command; nothing is recreated.
1. Header
API service navbar with a status lamp and a “Get a key” buttonnavbar-042
A mono logo, a version chip, an “api · ok” light, “Get a key”, burger.
2. First screen
API hero: the request types itself, the JSON response arrives with a “42 ms” badgehero-042
Language tabs, the request types, JSON arrives line by line, “200 OK · 42 ms”.
3. Sandbox
Geocoder sandbox: address → a dot on a CSS map and a JSON responseapi-001
Address → a dot rides the map, JSON types out, latency and cost.
4. Endpoints
API endpoints as bento tiles with CSS micro-demosbento-011
Six tiles with CSS micro-demos.
5. Pricing
Pay-per-request calculator with a logarithmic slider and a tier staircasepricing-034
A logarithmic slider, tiers free up to 10k, an SVG staircase.
6. Status
API status board: regions with lamps, live p50 and 24-hour sparklinesapi-002
Four regions, lights, p50 / p99, sparklines draw themselves.
7. Comparison
Competitor comparison: rows expand with an API response samplecomparison-015
Rows expand with a sample response.
8. Changelog
API changelog feed with an install command and live request counterschangelog-013
Versions with tags, npm / pip / go with copy, ticking counters.
9. Used by
“Worked with” as a text marqueelogocloud-007
A marquee of names.
10. Reviews
Developer testimonials as comment cards with stack chipstestimonials-034
Comment cards with an @handle and a stack.
11. Key
“A key in 30 seconds” call to action: an email field, the key types itselfcta-035
One field → the key types out character by character, a tick, “copy”.
12. Footer
API service footer with a status lamp and a build linefooter-041
A status light, columns, build chips.
Pro
The exact composition, page source and agent link are in PRO
The demo and the block list are open to everyone. Subscribers see every block's props as in the demo, the theme rules, the image prompts and one link an AI agent uses to build the same page.
Get PRO