The project
The site speaks to people who code and to the AI agents that already integrate APIs: code is the protagonist from the first screen and the example writes itself.
The idea that organises it is a dock: every channel moors at the same API, with the same tools and the same data shape.
The challenge
To make 23 different integrations read as one simple thing, and to let a developer see themselves up and running in minutes.
How we built it
Two readers
The site speaks to people who code and to the agents that integrate APIs: code leads from the first screen and every section answers an engineering question.
System
Two families (Instrument Sans and JetBrains Mono), a single vermilion accent and a radius scale that makes sense: 6 for chips, 12 to 16 for panels, 22 for tiles, 40 for the capsule.
Two voices
Every headline has two sentences: the first in ink and the second at 40%. It is the trait that repeats across all the sections.
Comparing on the page
The hero was built in two variants, “Code” and “Diagram”, which were compared on the site itself before choosing.
The details
Sound
Synthesised in the browser, with no files: a click is a burst of narrow-band noise around 3,400 Hz (9 ms) with a 260 Hz sine that falls away and gives it body; on hover, the same, higher and shorter. Each hit varies slightly in pitch. It can be switched off and is remembered.
Colour
The palette of Patchbay, by how much it is used on the delivered site. Hover over a colour.
Usage measured on recordings of the delivered site: every pixel counts towards the nearest colour; photos and gradients aside.
Typography
Measured on the site, at 1440 px.
Spacing
- Base step
- Fluid
- Between sections
- 92 px
- Container
- 1176 px
- 7padding, 153 times
- 9padding, 67 times
- 10padding, 83 times
- 11gap, 56 times
- 12padding, 105 times
- 14padding, 52 times
- 18padding, 72 times
- 20gap, 68 times
- 26padding, 70 times
The paddings, margins and gaps that repeat most on the delivered site, at 1440 px and true scale; fluid sizes (they change with the window width), with no fixed step.
Motion
Motion in CSS: 26 custom animations, no libraries, no canvas or WebGL.
The intro and the terminal
The mark fills with vermilion and the example writes itself, one line every 190 ms.
The dock
The 23 channels in an arc; every 2.4 seconds one moors at the API.
Twenty-three spec sheets
One tab per channel, with what it truly supports: formats, limits and statuses.
Sound
Synthesised in the browser, with no files: a click is a burst of narrow-band noise around 3,400 Hz (9 ms) with a 260 Hz sine that falls away and gives it body; on hover, the same, higher and shorter. Each hit varies slightly in pitch. It can be switched off and is remembered.
Under the hood
Tools
- HTML a medida
- React 18
- CSS
- Web Audio
- Vercel
How it is built
- A single 2,962-line HTML file (234 KB), with React 18 in the browser
- Motion in CSS: 26 custom animations, no libraries, no canvas or WebGL
- Sound synthesised with Web Audio
- Pricing calculator with a logarithmic slider from 1 to 10,000 accounts
- Light and dark themes, remembered in the browser
In numbers
- 23 channels in one API
- 11 sections
- 2.4 s between moorings
- 1 single accent colour
Conclusion
Twenty-three integrations read as one: the dock organises the page and each channel has its sheet with what it truly supports. Anyone who codes sees the example working from the first screen.
Everything fits in a single 234 KB HTML file, with motion in CSS and sound synthesised in the browser, without animation libraries.
“The client’s testimonial about this project goes here: two or three lines, with their charcoal portrait. Placeholder for Eric.”