Crea un sitio web 3D animado con Google AI Studio
Hubo un momento el miércoles por la noche en que moví el ratón sobre una página web y un personaje giró en tiempo real para seguir mi cursor — cabeza ligeramente inclinada, hombros siguiendo, pelo ondeando de una forma que ningún keyframe CSS podría falsificar de manera realista — y pensé: esto parece una cinemática de juego AAA, y lo construí en una tarde.
Sin Unity. Sin Blender. Sin Three.js. Sin shader WebGL de 500 líneas de GLSL. Toda la "capa de animación 3D" es un vídeo morph incrustado en una página web con tres líneas de JavaScript que vinculan la posición de reproducción al movimiento del ratón. El resultado se siente como un sitio web 3D completamente interactivo. En realidad, es una combinación inteligente de una animación morphing generada por IA, una página web estándar creada en Google AI Studio, y un pequeño truco que acopla el scrubbing del vídeo al movimiento horizontal del ratón.
Voy a mostrarte exactamente cómo lo construí — cada paso, cada herramienta, cada punto donde la demo casi falló y qué reparé. Sin abstracciones. Al final tendrás todo lo que necesitas para replicar lo mismo esta noche.
Por qué este truco "3D" funciona (y por qué no es realmente 3D)
Déjame ser honesto sobre la mecánica antes de mostrarte la construcción.
Lo que sucede aquí no es renderizado 3D real. No hay malla poligonal, ni buffer de profundidad, ni proyección de cámara. Es un vídeo prerenderizado de un personaje morpheándose — renderizado por un modelo de vídeo IA — donde JavaScript controla la posición de reproducción basándose en la posición del cursor del usuario. Ratón a la izquierda = el vídeo avanza al principio; ratón a la derecha = el vídeo avanza al final. Como el vídeo muestra una rotación suave, se crea la ilusión de control de rotación 3D.
La razón por la que funciona es psicológica: tu cerebro mapea la entrada del cursor con la respuesta visual e infiere "estoy controlando la rotación". Mientras la latencia sea baja y la animación morphing sea lo bastante suave, la ilusión es convincente.
Esto importa porque te dice dónde invertir tu esfuerzo. La mayor parte de la calidad viene del vídeo morph en sí — no de la construcción web. Una mejor animación morphing supera a un mejor JavaScript por un orden de magnitud.
Paso 1: Roba como un artista (la fase de ideación)
Todo buen proyecto empieza inspirándose. Navega por Awwwards, Dribbble o simplemente los sitios web de marcas que admiras. Busca específicamente: animaciones hero que se sientan orgánicas; animaciones de personajes (no transiciones de UI); y páginas que sugieran profundidad con mínima tecnología 3D real.
Mi concepto: una landing page oscura y cinemática con un personaje central que parece seguir el cursor del usuario, con una navbar minimalista y un efecto de escritura typewriter en el titular.
Si necesitas ayuda con la ideación para builds creativos como este, ese es el tipo de exploración que hago con clientes. Mira mis tipos de proyectos en fiverr.com/s/EgxYmWD.
Paso 2: Crea dos poses del personaje con un editor de imágenes IA
El vídeo morph necesita frames de inicio y fin. Necesitaba el mismo personaje en dos poses diferentes — digamos, ligeramente girado a la izquierda y ligeramente girado a la derecha — que sugieran una rotación sutil.
Consejos que realmente importan: Mantén el cambio de pose sutil. Rotaciones masivas crean artefactos morph feos. 15-30 grados de diferencia de rotación es el punto ideal. Empareja el fondo — cualquier inconsistencia entre los dos frames se convierte en un parpadeo visible en la animación morphing.
Paso 3: Genera el vídeo morph con Google Flow (Veo 3.1)
Aquí es donde ocurre la magia — y necesito corregir un error de nombre. La herramienta es Google Flow, la plataforma de generación de vídeo de Google basada en el modelo Veo 3.1. No es "Clai" ni "Clay" — eso es una distorsión de transcripción.
El flujo de trabajo: ve a Google Flow, sube tus imágenes de inicio y fin como keyframes, establece el prompt como algo tipo: "Smooth cinematic rotation of the character from left to right, maintaining consistent lighting and style." Genera el vídeo.
Detalle crítico: Genera múltiples variantes. Mi primer morph tenía un artefacto raro donde la barbilla del personaje parpadeaba. El tercer intento fue limpio. Trata la generación de vídeo IA como fotografía — haz varias tomas y elige la mejor.
Paso 4: Construye el hero y la navbar en Google AI Studio
Google AI Studio puede generar páginas web HTML/CSS/JS mediante prompts. Le di un prompt detallado pidiendo una landing page oscura y cinemática con fondo de vídeo a pantalla completa, navbar transparente y tipografía grande y negrita centrada.
Google AI Studio generó un archivo HTML limpio y único. ¿Perfecto? No. Había problemas de espaciado y los enlaces de la navbar eran placeholders. Pero la estructura era sólida. Iteré dos veces: una para arreglar el espaciado de la navbar y otra para refinar la tipografía del titular.
Paso 5: Incrusta el vídeo morph como fondo del hero
<video id="hero-video" src="morph.mp4" muted playsinline preload="auto"
style="width:100%; height:100vh; object-fit:cover;"></video>
Crítico: muted y playsinline son ambos necesarios para que la reproducción automática funcione en navegadores móviles. preload="auto" asegura que el vídeo cargue antes de que el usuario empiece a interactuar.
Paso 6: Conecta el movimiento horizontal del ratón al scrubbing del vídeo
Este es el corazón de todo el truco:
const video = document.getElementById('hero-video');
document.addEventListener('mousemove', (e) => {
const progress = e.clientX / window.innerWidth;
video.currentTime = progress * video.duration;
});
Eso es todo. Ratón totalmente a la izquierda = frame 0. Ratón totalmente a la derecha = último frame. Todo lo intermedio se interpola linealmente.
Paso 7: Arregla la experiencia móvil (porque no hay cursor)
Aquí es donde la mayoría de versiones de tutorial de este truco fallan. No hay ratón en el móvil. Mi solución: usar eventos touch para mapear la posición horizontal del toque al mismo scrubbing de vídeo.
document.addEventListener('touchmove', (e) => {
const touch = e.touches[0];
const progress = touch.clientX / window.innerWidth;
video.currentTime = progress * video.duration;
});
Y como fallback, reproduzco el vídeo lentamente en bucle automático para que la página no parezca estática.
Paso 8: Añade un efecto typewriter al titular
Cosmético pero impactante. Pedí a Google AI Studio que añadiera un efecto de animación typewriter. El código generado funcionaba pero tenía un problema de timing — la animación empezaba inmediatamente al cargar la página, antes de que el vídeo cargara. Añadí un retraso vinculado al evento loadeddata del vídeo.
Paso 9: Despliega gratis con GitHub y Vercel
El despliegue fue la parte más fácil: crea un repositorio en GitHub, haz push de tu archivo HTML y el MP4 morph, conecta el repositorio a Vercel (el tier gratuito funciona). Tu sitio web 3D animado está en vivo, alojado gratis, con SSL automático y CDN.
La cosa que salió mal: Mi archivo MP4 era de 28 MB, y el tier gratuito de Vercel tiene un límite de 25 MB por archivo. Usé HandBrake para comprimir el vídeo a 18 MB sin pérdida visible de calidad.
El veredicto honesto: dónde brilla y dónde se rompe
Dónde brilla: La primera impresión es espectacular. El tiempo de construcción es mínimo — unas tres horas. Cero complejidad en tiempo de ejecución — es un vídeo y tres líneas de JS.
Dónde se rompe: La rotación es fija — solo puedes mostrar la rotación definida por el vídeo morph. La calidad del vídeo lo cubre todo — si el morph es malo, no hay arreglo de código. Móvil es ciudadano de segunda clase.
Qué esperar realmente (resultados realistas)
Planifica 2-4 horas para todo el build. Espera generar 3-5 variantes de morph antes de conseguir una sin artefactos molestos. El resultado será impresionante en escritorio y aceptable en móvil. Para landing pages orientadas al cliente, portfolios y showcases creativos, este enfoque es un multiplicador legítimo del factor wow con esfuerzo mínimo.
Preguntas frecuentes
¿Google AI Studio es gratis para construir sitios web?
Google AI Studio tiene un tier gratuito que incluye generación de HTML/CSS/JS. Puedes generar páginas web completas mediante prompts sin pagar nada.
¿Qué herramienta hace la animación morph del personaje? No es "Clai."
La animación morph proviene de Google Flow, basado en el modelo Veo 3.1. "Clai", "Clay" y variantes similares son errores de transcripción.
¿Por qué mi scrubbing de scroll o ratón del vídeo tiene lag?
Tres causas comunes: el vídeo es demasiado largo (mantenlo bajo 5 segundos), el vídeo no está precargado (añade preload="auto"), o el vídeo tiene una tasa de bits demasiado alta (comprimir con HandBrake).
¿Cómo hago que el sitio animado funcione en móvil?
Añade listeners de eventos touchmove que mapeen la posición horizontal del toque a currentTime del vídeo. Añade un fallback de reproducción automática lenta.
¿Debería usar Figma para este build?
Para un build de este tamaño, Figma es excesivo. Google AI Studio puede generar la estructura HTML directamente.
No necesitas un motor de juegos — necesitas una tarde
Las herramientas han cambiado. Lo que solía ser una semana de trabajo de estudio ahora es un experimento de una tarde. Y la parte que lo hace posible no es una sola herramienta — es la combinación: generación de imágenes IA para las poses, generación de vídeo IA para el morph, y generación de código IA para la página web.
Si quieres explorar builds creativos como este para tu marca o tus clientes, ese es exactamente el tipo de proyecto que me encanta. Encuéntrame en fiverr.com/s/EgxYmWD.
Trabajemos juntos
- Fiverr (builds personalizados e integraciones): fiverr.com/s/EgxYmWD
- Portfolio: mejba.me
- Ramlit Limited (soluciones empresariales): ramlit.com
- ColorPark (diseño y branding): colorpark.io
- xCyberSecurity (servicios de seguridad): xcybersecurity.io
