Origen_
La moka cae girando sobre la palabra ALBA. Se puede arrastrar para darle vueltas.
← Proyectos
[Proyecto 06 · Web 3D]
ALBA_
Una moka octagonal que gira, se desarma y prepara café mientras haces scroll. ALBA es una marca ficticia que creamos en el lab para explorar cómo contar un producto en 3D: del modelado en Blender a una web que corre en tiempo real en el navegador.
TipoProyecto propio · Lab
FormatoWeb 3D interactiva
Nuestro rolConcepto, 3D y desarrollo
[alba-moka.vercel.app]
[La idea]
Una página de producto donde el scroll no baja por la página: mueve el objeto. Cada giro de la rueda gira la moka, la desarma o le sube el café_
[Recorrido por el sitio]
[Cinco escenas]
Un café,
de principio a fin_
El 3D se queda fijo a pantalla completa y el scroll avanza la historia. La información vive en las esquinas y una palabra gigante detrás del objeto cambia en cada escena.
Forma_
La cámara la rodea mientras una franja de texto corre detrás: ocho caras, una flama, tres minutos.
Despiece_
Seis piezas se separan con etiquetas técnicas ancladas al 3D, como en un plano de ingeniería.
Flama_
Todo se oscurece. Se enciende la flama, se abre la tapa, sube el café y un cronómetro cuenta los tres minutos.
Ritual_
Vuelve la luz, la moka da una vuelta completa y aparece el configurador con precio y compra.
[Configurador]
Cambia el asa,
cambia la marca_
Cuatro colores de baquelita. Al elegir uno se tiñen el asa, la perilla y el logo del 3D, y el acento de todo el sitio cambia con ellos.
[El modelo]
Hecha pieza
por pieza_
Modelada en Blender a escala real, 196 mm de alto, con cada pieza separada para poder desarmarla. Comprimida pesa 300 KB.
[Despiece en el navegador]
- CalderaCuerpo octagonal, fondo cóncavo, cuello torneado con cinco vueltas de rosca y válvula de seguridad de latón.
- EmbudoCanasta con el café molido en un pequeño montículo de grano irregular.
- Filtro y empaqueDisco con cientos de perforaciones y empaque de caucho.
- JarraPico pronunciado, chimenea, rosca interior y una placa con el logo en relieve.
- Asa y tapaAsa plana de baquelita, bisagra con nudillos y perilla.
- AcabadoAluminio cepillado con reflejos de estudio, aristas pulidas por el uso y huellas donde se agarra.
[En el celular]
La misma historia
en vertical_
La cámara se aleja y las etiquetas se acomodan para pantallas angostas, sin perder el despiece.
[Bajo el capó]
Lo que hicimos_
Marca, sistema de diseño, modelo 3D y la web, de punta a punta.
Marca y sistema de diseño
Nombre, logo octagonal, paleta espresso y terracota, y tipografía editorial con etiquetas de plano técnico.
Modelado en Blender
Piezas con pivote propio para el despiece y la tapa con bisagra, exportadas a GLB con compresión Draco.
Scroll como línea de tiempo
Una sola línea de tiempo amarrada al scroll mueve cámara, piezas, luz, vapor y textos.
Materiales que se sienten reales
Aluminio cepillado con reflejos anisotrópicos, desgaste y huellas: texturas generadas en código para que la web siga siendo ligera.
Interacción
Arrastrar para girar con inercia, inclinación según la velocidad del scroll, cursor propio y botones magnéticos.
Configurador
El color del asa se aplica en el 3D y en el acento de toda la interfaz al mismo tiempo.
BlenderThree.jsGSAP · ScrollTriggerSplitTextLenisViteDracoVercel
[En línea]
Prepara un café_
Haz scroll, desármala y elige el color de tu asa. Se ve mejor en computadora.
Ir a ALBA ↗[¿Tienes un producto que contar en 3D?]
Hablemos_