Universidad · Creative Coding · 2026 University · Creative Coding · 2026

AG Telecom

Un header web que cobra vida bajo el ratón. A web header that comes alive under the cursor.

Header real · p5.js Real header · p5.js
Probar el header en vivo Try the live header ↗ Mueve el ratón sobre la cabecera e interactúa con los cubos. Move your mouse over the header and interact with the cubes.
TipoType
Trabajo universitarioUniversity project
DisciplinaDiscipline
Creative Coding
Stack
p5.js · JS
EstadoStatus
EntregadoDelivered

El The encargo brief 01

El ejercicio pedía diseñar un header web interactivo para una empresa, usando programación creativa con p5.js. La empresa elegida fue AG Telecomunicaciones, una compañía ficticia del sector. La consigna técnica incluía animación, interacción con el ratón y diseño responsive. The exercise asked for an interactive web header for a company, using creative coding with p5.js. The chosen company was AG Telecomunicaciones, a fictional telecom firm. The technical brief required animation, mouse interaction and responsive design.

En lugar de quedarme en el mínimo, llevé el trabajo más allá: monté un dosier web completo donde el header funciona en vivo y debajo se despliega una maqueta realista de la web corporativa y la justificación del diseño. Instead of settling for the minimum, I pushed the work further: I built a full web dossier where the header runs live, with a realistic mockup of the corporate site and the design rationale unfolding below it.

Cómo How it funciona works 02

El mar de cubosThe cube sea
Una rejilla de cubos isométricos llena toda la cabecera, animándose en altura y color a lo largo del tiempo para crear una superficie viva incluso en reposo. A grid of isometric cubes fills the entire header, animating in height and color over time to create a living surface even at rest.
Física magnéticaMagnetic physics
Los cubos cercanos al ratón se elevan hacia él como atraídos por un imán — cuanto más cerca, más fuerza. Al alejarse el cursor, vuelven a caer con una física de muelle amortiguado que produce un rebote suave. Cubes near the cursor rise toward it as if magnetically attracted — the closer they are, the stronger the pull. When the cursor moves away, they fall back with damped spring physics, producing a soft bounce.
Clic = impactoClick = impact
Al hacer clic, los cubos de alrededor se hunden por debajo de su posición de reposo, generando un efecto de onda en la superficie. On click, the surrounding cubes sink below their resting position, generating a ripple effect across the surface.
Responsive
El lienzo se adapta al tamaño de la ventana y se reconstruye al redimensionar, manteniendo la composición en cualquier pantalla. The canvas adapts to the window size and rebuilds on resize, keeping the composition intact on any screen.

Ir más Going allá further 03

La entrega pedía un sketch y un dosier en PDF. Decidí además convertir todo el dosier en una página web funcional: el header p5.js corre de verdad en el navegador (en modo instancia para no chocar con el resto de la página), y bajo él se ve la maqueta de la web corporativa entera — servicios, cobertura, "sobre nosotros" y footer. Una forma de demostrar no solo que el header funciona, sino cómo encajaría en un producto real. The deliverable asked for a sketch and a PDF dossier. I also turned the whole dossier into a working web page: the p5.js header runs for real in the browser (in instance mode so it doesn't clash with the rest of the page), and below it sits a mockup of the entire corporate site — services, coverage, "about us" and footer. A way to show not just that the header works, but how it would fit into a real product.