Loading…
3D y motion — experiencias web interactivas
Estos proyectos exploran cómo el 3D y WebGL interactivos pueden hacer tangible la historia de un producto o una marca dentro del navegador. Cada experiencia conecta el movimiento y los efectos visuales con un recorrido de usuario concreto.
- Rol
- Desarrollo web interactivo y WebGL: concepto, configuración de escenas 3D, trabajo con shaders y coreografía de GSAP y scroll de principio a fin en cada proyecto.
- Tecnologías
- Three.jsReact Three FiberGSAP (ScrollTrigger)GLSL ShadersBlenderLenis
Resumen
Una cámara que se convierte en un visor de los recuerdos de alguien, un teclado en el que cada tecla es una herramienta dispersa que espera ser unificada, partículas que se transforman porque el producto trata precisamente de la transformación. Esta es una colección de ese trabajo: landing pages completas construidas alrededor de una idea 3D y estudios independientes más pequeños que exploran una técnica cada vez.
Las capturas estáticas no hacen justicia a este trabajo — cada página se gana su 3D al conectarlo directamente con la historia que cuenta.
Interfaz
Cinco historias, cinco técnicas
Everline — escaparate de alquiler de coches
Un recorrido cinematográfico desde el encendido hasta el showroom: entra en la cabina y observa cómo aparece una flota bajo la iluminación de un estudio.
Interfaz
Cinco historias, cinco técnicas
Everline — escaparate de alquiler de coches
Un recorrido cinematográfico desde el encendido hasta el showroom: entra en la cabina y observa cómo aparece una flota bajo la iluminación de un estudio.
Elementos de laboratorio
No todas las ideas necesitan una página completa a su alrededor
Estudios independientes: una técnica aislada y llevada más lejos de lo que exigiría una sola landing page.
Elementos de laboratorio
No todas las ideas necesitan una página completa a su alrededor
Estudios independientes: una técnica aislada y llevada más lejos de lo que exigiría una sola landing page.
Piedra de vidrio cromático
Una nube de partículas atrapada dentro de un vidrio cromático simulado: refractada dos veces y con bloom aislado para que el brillo permanezca dentro de la silueta en lugar de escaparse.
Configurador de partículas
Decenas de miles de puntos de GPU representados como vapor o esferas iluminadas que cambian entre formas mediante controles en vivo para ajustar posición, movimiento y aspecto.
Campo de shader estriado
Una superficie abstracta animada construida completamente con propiedades de material: reflejos y luces degradadas se desplazan por un shader para simular un campo ondulado y estriado.
Enfoque técnico
Cinco hábitos que evitan que estas experiencias sean la razón por la que una página carga lentamente o un teléfono se calienta: desarrollados a lo largo de distintos proyectos y aplicados desde entonces a cada categoría de trabajo.
Cada vez más pesado, cada vez más ligero
01
La optimización del modelo empieza en Blender, no en el código01La optimización del modelo empieza en Blender, no en el código
Reducir el número de polígonos y el tamaño de las texturas antes de que el modelo llegue al navegador: la mejora de rendimiento más barata ocurre antes de escribir una sola línea de Three.js.
02
Nada carga hasta que hace falta02Nada carga hasta que hace falta
Las escenas y modelos pesados se cargan dinámicamente y se posponen hasta que realmente se necesitan: la carga inicial no paga el coste de una escena 3D a la que el usuario todavía no ha llegado con el scroll.
03
Las animaciones se pausan fuera del viewport03Las animaciones se pausan fuera del viewport
Una escena que no se ve no necesita seguir renderizándose. Las animaciones y los bucles de renderizado se detienen cuando una sección sale de la vista, y las escenas se desmontan por completo si la pestaña pierde el foco.
04
Los triggers de GSAP permanecen cerca de lo que animan04Los triggers de GSAP permanecen cerca de lo que animan
Las instancias de ScrollTrigger se limitan a la sección a la que pertenecen y solo se activan cuando esa sección se aproxima, en lugar de usar una única línea de tiempo enorme que intente tener en cuenta toda la página.
05
En móvil hay una escena diferente, no una más pequeña05En móvil hay una escena diferente, no una más pequeña
Las escenas WebGL pesadas se sustituyen en móvil por versiones más ligeras o imágenes estáticas, en lugar de obligar a la misma escena a ejecutarse con menor calidad: una decisión tomada por proyecto y no un fallback general.
Resultados
No es una historia de métricas, sino de oficio
Cinco narrativas distintas de 3D y motion publicadas, cada una construida alrededor de una técnica diferente: escenas basadas en metáforas, storytelling cinematográfico con scroll, shaders personalizados y un personaje reactivo al scroll de forma persistente
Un conjunto coherente de hábitos de rendimiento — optimización de modelos, carga diferida y pausas adaptadas al viewport — aplicado, refinado y reutilizado en cada proyecto
Estudios independientes de shaders y partículas creados al margen de cualquier landing page como práctica deliberada de técnicas
El mismo instinto por la estructura utilizado en la arquitectura de dashboards y SaaS, aplicado a la organización y carga de estas escenas