El proyecto
La web habla a quien programa y a los agentes de IA que ya integran APIs: el código es protagonista desde el primer pantallazo y el ejemplo se escribe solo.
La idea que la ordena es un muelle: cada canal atraca en la misma API, con las mismas herramientas y la misma forma de datos.
El reto
Que 23 integraciones distintas se entiendan como una sola cosa, sencilla, y que un desarrollador se vea funcionando en minutos.
Cómo la construimos
Dos lectores
La web habla a quien programa y a los agentes que integran APIs: el código manda desde el primer pantallazo y cada sección responde una pregunta de ingeniería.
Sistema
Dos familias (Instrument Sans y JetBrains Mono), un solo acento bermellón y una escala de radios con sentido: 6 para chips, 12 a 16 para paneles, 22 para teselas, 40 para la cápsula.
Dos voces
Cada titular tiene dos frases: la primera en tinta y la segunda al 40 %. Es el rasgo que se repite en todas las secciones.
Comparar en la página
El hero se construyó en dos variantes, «Código» y «Esquema», que se compararon en la propia web antes de elegir.
Los detalles
Sonido
Sintetizado en el navegador, sin archivos: un clic es un golpe de ruido en banda estrecha alrededor de 3.400 Hz (9 ms) con un seno de 260 Hz que cae y le da cuerpo; al pasar el cursor, lo mismo más agudo y más corto. Cada golpe varía un poco de tono. Se puede apagar y se recuerda.
Color
La paleta de Patchbay, por lo que se usa en la web entregada. Pasa por encima de cada color.
Uso medido en las grabaciones de la web entregada: cada píxel cuenta para el color más cercano; fotos y degradados aparte.
Tipografía
Medido en la web, a 1440 px.
Espaciado
- Paso base
- Fluido
- Entre secciones
- 92 px
- Contenedor
- 1176 px
- 7relleno, 153 veces
- 9relleno, 67 veces
- 10relleno, 83 veces
- 11entre elementos, 56 veces
- 12relleno, 105 veces
- 14relleno, 52 veces
- 18relleno, 72 veces
- 20entre elementos, 68 veces
- 26relleno, 70 veces
Los rellenos, márgenes y huecos que más se repiten en la web entregada, a 1440 px y a escala real; tamaños fluidos (cambian con el ancho de la ventana), sin un paso fijo.
Movimiento
Movimiento en CSS: 26 animaciones propias, sin librerías, sin canvas ni WebGL.
La intro y el terminal
La marca se llena de bermellón y el ejemplo se escribe solo, una línea cada 190 ms.
El muelle
Los 23 canales en un arco; cada 2,4 segundos uno atraca en la API.
Veintitrés fichas técnicas
Una pestaña por canal, con lo que admite de verdad: formatos, límites y estados.
Sonido
Sintetizado en el navegador, sin archivos: un clic es un golpe de ruido en banda estrecha alrededor de 3.400 Hz (9 ms) con un seno de 260 Hz que cae y le da cuerpo; al pasar el cursor, lo mismo más agudo y más corto. Cada golpe varía un poco de tono. Se puede apagar y se recuerda.
Por dentro
Herramientas
- HTML a medida
- React 18
- CSS
- Web Audio
- Vercel
Cómo está hecha
- Un único HTML de 2.962 líneas (234 KB), con React 18 en el navegador
- Movimiento en CSS: 26 animaciones propias, sin librerías, sin canvas ni WebGL
- Sonido sintetizado con Web Audio
- Calculadora de precios con un deslizador logarítmico de 1 a 10.000 cuentas
- Tema claro y oscuro, recordados en el navegador
En cifras
- 23 canales en una API
- 11 secciones
- 2,4 s entre atraques
- 1 solo color de acento
Conclusión
Veintitrés integraciones se leen como una sola: el muelle ordena la página y cada canal tiene su ficha con lo que admite de verdad. Quien programa ve el ejemplo funcionando desde el primer pantallazo.
Todo cabe en un único HTML de 234 KB, con el movimiento en CSS y el sonido sintetizado en el navegador, sin librerías de animación.
«Aquí va el testimonio del cliente sobre este proyecto: dos o tres líneas, con su retrato al carboncillo. Marcador para Eric.»