Proyecto 03 / 03Web de producto · 3D2025Demo en vivo
AeonTech
Descripción
Web ficticia de presentación para unos auriculares inalámbricos llamados AeonTech. Desarrollada con Next.js y Three.js, incluye modelos 3D interactivos para una experiencia inmersiva de producto.
- Rol
- Concepto, diseño, front-end e integración 3D
- Calendario
- 2025 — proyecto propio
- Cliente
- Proyecto propio
- Despliegue
- Vercel
Sobre el proyecto
¿Puede una página vender un producto que no puedes tocar?
Web ficticia de presentación de producto para unos auriculares inalámbricos llamados AeonTech. El foco del proyecto era conseguir una experiencia inmersiva de producto combinando Next.js con Three.js.
Incluye modelos 3D interactivos, animaciones ligadas al scroll y un diseño orientado a conversión, todo optimizado para carga rápida.
La restricción que me puse fue el peso: un visor 3D de producto que aun así cargue rápido, con el modelo descargándose solo cuando la página ya es interactiva.
Mi rol
Lo que
hice realmente
Una pieza de iniciativa propia, hecha para empujar hasta dónde podía llevar el 3D en tiempo real en la web.
- 01
Concepto y dirección de arte
Inventé el producto, su posicionamiento y la narrativa de la página, y diseñé alrededor de eso.
- 02
Integración 3D
Montaje de la escena Three.js, la iluminación y la interacción de arrastrar para rotar el modelo de los auriculares.
- 03
Coreografía de scroll
Até la rotación del modelo y la aparición de secciones al scroll para que la página se lea como una demo continua de producto.
- 04
Trabajo de rendimiento
Carga diferida del payload 3D, assets comprimidos y un primer pintado solo de texto.
Tecnologías
- Framework89.1%
Next.js
Enrutado de la App Router y optimización de imágenes, desplegado directo a Vercel.
- Lenguaje89.1%
TypeScript
Props tipadas entre la escena, los controles y los componentes de sección.
- Estilos9.2%
CSS
Mantiene coherente el sistema de layout en una página de scroll largo.
- Lenguaje1.7%
JavaScript
La lógica de interacción puntual que queda fuera del árbol tipado.
- 3D
Three.js
Renderiza el modelo de los auriculares y su iluminación en tiempo real.
Demo en vivo
Desplegada en Vercel
Modelo 3D interactivo
Arrastra para rotar el modelo
Resultado
Una página de producto inmersiva que sigue cargando rápido.
- Modelo 3D interactivo que se puede arrastrar para rotar.
- Animación ligada al scroll que une copy y producto.
- Payload 3D diferido para que el primer pintado siga siendo ligero.