La idea de este experimento nació al ver en Instagram una animación en la que un dibujo respondía al movimiento del cursor. Me gustó la propuesta y quise hacer mi propia prueba en Vikingia: llevar ese mismo tipo de interacción a mi web, pero con un personaje de apariencia realista y construido a mi manera.
No parto de cero con la idea original; me inspiré en aquel ejemplo que vi en redes. Mi trabajo fue adaptarlo: crear el personaje, preparar sus distintas miradas, generar los vídeos y convertirlo en una experiencia que se puede probar en mi propio portfolio.
Este artículo cuenta cómo lo hice de verdad: las imágenes que preparé, los vídeos que generé, las herramientas que utilicé, las pruebas que no quedaban bien y las correcciones que fui pidiendo hasta llegar al resultado actual.
Qué quería conseguir
La idea era sencilla: que quien entre en el portfolio pueda jugar un momento con la cabecera y ver que el personaje le acompaña con la mirada. No quería un vídeo automático ni una animación sin sentido. Quería una pequeña reacción que hiciera la página más viva, pero que dejara claro desde el primer momento qué debe hacer la persona: mover el cursor.
Las herramientas que utilicé
- ChatGPT: para trabajar la idea conmigo, preparar los textos que acompañan al proyecto, crear y mejorar los prompts, y desarrollar la parte de código de la web.
- Una herramienta de generación de imágenes con IA: para crear la imagen de partida de Ragnar. En otros proyectos esta fase se puede realizar con ChatGPT u otra herramienta similar.
- Google Vids: para convertir en vídeo las versiones en las que Ragnar mira a la izquierda y a la derecha.
- Google Flow: para crear la versión central.
- HTML, CSS y JavaScript: para colocar los vídeos en la web y hacer que cambien cuando mueves el cursor.
- Elementor: para publicar la prueba dentro de Vikingia y adaptarla a ordenador y móvil.
Cómo lo hice, paso a paso
1. Decidir qué debía ocurrir al mover el cursor
Primero definí algo muy concreto: qué debía pasar en cada zona de la cabecera. Si el cursor estaba a la izquierda, Ragnar debía mirar hacia la izquierda. Si estaba en el centro, debía mirar al frente. Si estaba a la derecha, debía mirar hacia la derecha.
Con esa idea clara pude preparar exactamente los recursos que necesitaba: una versión izquierda, una central y una derecha. Así, cada vídeo tiene una función clara y la persona entiende enseguida por qué la imagen cambia.
2. Crear la imagen de partida
Después preparé una imagen de referencia de Ragnar. Esa imagen marca cómo es el personaje, qué ropa lleva, dónde está, cómo es la luz y desde qué ángulo lo vemos.
Era importante empezar siempre desde una misma base. Si cada imagen pareciera hecha para una escena distinta, los vídeos no encajarían entre sí y el cambio de una posición a otra se vería raro.
3. Convertir la imagen en varios vídeos
Con la imagen de referencia preparada, generé tres vídeos cortos: uno mirando a la izquierda, otro mirando al frente y otro mirando a la derecha.
Para esta prueba utilicé Google Vids en las versiones laterales y Google Flow en la versión central. Podría haber usado otras herramientas de vídeo con IA; lo importante era pedir que mantuvieran el mismo personaje, la misma ropa, el mismo lugar y una cámara parecida.
4. Preparar los vídeos para que encajaran
Antes de usarlos en la web, preparé todos los clips con el mismo tamaño y la misma velocidad. De este modo, al cambiar de uno a otro no se mueve el encuadre ni cambia de tamaño el personaje.
Es un detalle poco llamativo, pero marca la diferencia: si un clip tiene otra medida o el personaje aparece más cerca, el ojo nota el cambio inmediatamente.
5. Llevar los vídeos a la página
Después se creó la página de prueba. El código detecta dónde está el cursor dentro de la cabecera y muestra el vídeo que corresponde: izquierda, centro o derecha.
La primera versión ya permitía comprobar la idea. Movías el cursor y Ragnar respondía. Pero verla en marcha me permitió detectar algo que no se aprecia al mirar los vídeos por separado.
6. Probarla de verdad y encontrar el fallo
Hice varias pruebas moviendo y deteniendo el cursor. En una de ellas vi claramente el problema: si lo dejaba a la derecha y después volvía al centro, el cambio se veía como un mal corte de vídeo. Parecía que faltaba un fotograma o que la edición tenía un salto.
La página funcionaba, pero para mí no era suficiente. Si una persona lo nota aunque sea un instante, la experiencia deja de sentirse natural.
7. Pedir correcciones y comparar versiones
A partir de ese momento fuimos preparando varias versiones para mejorar el paso de una mirada a otra. Probamos formas distintas de cambiar entre vídeos, suavizamos los cambios y añadimos una reacción cuando el cursor permanecía quieto.
Yo fui revisando cada prueba y señalando qué mejoraba y qué seguía sin convencerme. La versión 7 fue la que vi más conseguida, aunque detecté que todavía podía aparecer algún pequeño fallo. Por eso el resultado actual está publicado como un laboratorio: funciona, se puede probar y también deja margen para seguir afinándolo.
8. Publicarlo en Vikingia
Cuando la experiencia ya tenía el aspecto que buscaba, se integró en una página de Vikingia con Elementor. También se revisó para que se viera bien en pantallas grandes y en móvil.
La prueba está separada del resto del portfolio para que cualquiera pueda abrirla y comprobarla por sí mismo.
Qué hice yo durante el proceso
Mi trabajo no fue pedir una imagen y aceptar el primer resultado. Yo decidí qué quería que hiciera la cabecera, pedí las versiones izquierda, central y derecha, probé cada una de ellas y señalé los momentos que no se sentían bien.
También decidí no quedarme con una primera versión que solo “funcionaba”. Preferí revisar el movimiento, detener el cursor, volver atrás y comprobar si el resultado seguía pareciendo natural. Esa revisión es la que llevó a pedir cambios concretos y a continuar trabajando varias versiones.
ChatGPT me ayudó a transformar esas observaciones en prompts, nuevas pruebas y cambios en la página. La decisión de qué tenía sentido conservar, qué debía corregirse y qué resultado representaba mejor la idea fue siempre mía.
Lo que he aprendido
- Una imagen creada con IA puede convertirse en una experiencia web, no quedarse solo en una imagen.
- Para que varios vídeos encajen, hay que mantener el mismo personaje, la misma escena y un encuadre parecido.
- La primera versión sirve para probar una idea; las siguientes son las que hacen que se vea bien.
- Probar algo personalmente es imprescindible: hay fallos que solo aparecen cuando lo usas con calma.
- La IA ayuda a crear más rápido, pero la revisión humana es la que decide si el resultado realmente funciona.
Prueba el resultado
Este hero es un experimento en marcha. Puedes mover el cursor y comprobar cómo responde Ragnar en cada dirección.
Abrir el hero interactivo con cursor →
Proyecto experimental desarrollado para Vikingia. No representa trabajo ni resultados realizados para un cliente.