Cómo simular una experiencia 3D con video y scroll (sin modelar nada)

Un producto gira en pantalla. Se acerca, cambia de posición, se desarma pieza por pieza. Todo controlado con el scroll. Parece un modelo 3D. No lo es. Es un video, y lo que controlas al hacer scroll son sus frames.

El punto de partida: un producto que no existe

Para este experimento diseñé NUBA ONE, una cámara pensada para creadores, streaming y videollamadas. El brief era simple: algo tecnológico, minimalista, con una forma interesante al girar. Lente grande, base motorizada, cuerpo metálico oscuro. Premium pero sencillo.

Después de generar varias opciones con IA, llegué al diseño que serviría de punto de partida para todo el proyecto.

Por qué descarté el modelo 3D

La primera intención fue convertir la cámara en un modelo 3D real. Hice varias pruebas y funcionaban, pero la calidad no se acercaba a las imágenes originales generadas con IA. El problema era la herramienta de modelado que estaba usando. Y cuando el producto ocupa casi toda la pantalla, cualquier fallo se nota de inmediato.

En lugar de perseguir un modelo 3D perfecto, cambié de enfoque: simular toda la experiencia con video. La calidad visual del producto se mantiene intacta porque nunca dejas de estar viendo imágenes generadas, no un render aproximado.

Consistencia antes que movimiento

Antes de pensar en animación, necesitaba ver la misma cámara desde todos los ángulos. Partiendo de la imagen original como referencia, generé las vistas frontal, tres cuartos, lateral y trasera, completando el giro completo.

Lo importante en este paso es la consistencia: mismo lente, mismo soporte, misma base, mismo material en cada imagen. Sin esa base sólida, cualquier intento de generar movimiento después va a fallar, porque la IA de video necesita puntos de referencia estables entre el frame inicial y el final.

El giro de 360° con Kling

Con las vistas listas, pasé una imagen inicial (frontal) y una final (trasera) a Kling, pidiendo un giro de 360°. La instrucción clave: la cámara virtual permanece fija, es el producto el que gira sobre su propio eje. Necesitaba un movimiento constante, limpio y sin cortes, porque ese video sería controlado directamente por el scroll.

El resultado superó por completo lo que había conseguido con el modelo 3D. Para enriquecer la experiencia, generé también movimientos adicionales y cambios de fondo, siempre con un criterio: cada video necesita un inicio y un final muy claros, porque esos puntos se convierten en estados dentro de la página.

El despiece: la pieza más compleja

El movimiento más interesante era el despiece. Generé dos imágenes: la cámara completamente ensamblada y otra con todas sus piezas separadas (carcasa, lente, sensor, componentes internos, mecanismo y base). Pasé ambas a Kling pidiendo que cada componente se separara lentamente hasta llegar a la imagen final.

El resultado: la cámara arranca armada y se desarma en sus piezas frente a cámara. Exactamente lo que buscaba.

Diseñar estados, no secciones

Con los recursos listos, pasé todo a Figma manteniendo la interfaz sencilla: logo, header minimalista, y la cámara ocupando el centro de la composición. El protagonista es el producto, no la información alrededor.

El cambio de mentalidad importante fue dejar de diseñar secciones y empezar a diseñar estados:

• Estado uno: la cámara de frente.
• Estado dos: empieza el giro.
• Estado tres: termina el giro y arranca el despiece.

Pensar en estados en lugar de secciones hace que sea mucho más fácil entender qué hay que construir después.

El scroll como línea de tiempo

Con el diseño y los videos listos, todo pasó a Claude Code. Ahí estaba la instrucción más importante del proyecto: ningún video se reproduce solo. El scroll es la línea de tiempo. Bajas y el video avanza. Te detienes y se detiene. Subes y todo sucede al revés.

El resultado final no fue lo primero que obtuve. Fueron varias horas ajustando detalles, pasándole prompts e indicaciones a Claude hasta llegar a la versión que funciona.

El recorrido final: el giro arranca con el scroll, se detiene si te detienes, termina y aparecen las características del producto, cambia de escena y entra el despiece, cada componente se separa hasta la escena final. Y todo funciona igual en reversa.

Lo que queda del experimento

Pensé que necesitaba un modelo 3D para esta experiencia. El resultado real no tenía la calidad que buscaba, así que cambié el enfoque: imágenes generadas para mantener el producto consistente, Kling para crear el movimiento, Figma para diseñar la experiencia y Claude Code para conectar todo al scroll.

Lo más interesante no fue ninguna herramienta por separado, sino combinarlas para lograr algo que ninguna hace sola. Eso no significa que sea fácil, pero acelera el proceso y abre posibilidades que antes, como diseñadores, solo nos imaginábamos.

NUBA ONE no existe. Terminamos creando el producto, su identidad visual y una experiencia completa alrededor de él. El próximo experimento sí usará un producto en 3D real, pero mucho más simple.