Proyecto de estudio — 2026 · Demo del nivel Signature
PLIEGO
Gráfica — bold cromática · Packaging y producto
- Astro
- GSAP · Lenis
- CSS 3D
- Blender · AVIF
- SVG animado
Concepto rector
El color como material de construcción.
Un estudio de packaging vende atrevimiento, y su web debe poder tocarse: tipografía enorme, campos de color y microinteracciones que responden como objetos físicos — plegar, encajar, girar. PLIEGO demuestra que el juego y el rigor caben en la misma caja.
La demo, por dentro
- 01
El pliego se pliega
La portada no enseña una caja: enseña el troquel plano y lo cierra con tu scroll, en CSS 3D. Es la promesa del estudio hecha con el propio material de la web.
- 02
Color como material
Tres tintas planas y sombras duras, sin degradados. Cada campo de color se verifica AA contra el texto que lleva encima: valiente no es lo mismo que ilegible.
- 03
CGI, no WebGL
Los productos giran con secuencias AVIF pregeneradas en Blender que el scroll recorre sobre un canvas. Sin modelos ni motor 3D en el navegador: fotogramas sueltos, ninguno por encima de 64 KB, y solo se piden los que el scroll pisa.
- 04
El realce nunca es requisito
Sin JS, con conexión mala o con movimiento reducido, cada secuencia cae a su póster y a sus datos. La web sigue contando lo mismo; sólo deja de moverse.
Tres decisiones de diseño
- 01
Tipografía-objeto
Los titulares se comportan como piezas: se recortan, se apilan, se pliegan. La letra es el packaging de la propia web.
- 02
Color sin miedo, con sistema
Tres tintas planas dominan cada pantalla y el contraste se verifica AA sobre cada campo. Valiente no significa ilegible.
- 03
Jugar sin estorbar
La interacción premia el cursor pero nunca bloquea la lectura, y todo funciona igual en táctil. El juego es un premio, no un peaje.
El estándar, también aquí
- 94
- Lighthouse en móvil
- 3,0 s
- LCP en móvil
- 0,02
- CLS — sin saltos de maqueta
- 64,5 KB
- JS inicial comprimido