Landing page con vídeo ligado al scroll
En una frase: es una web cuyo vídeo, hecho con IA, avanza mientras bajas.
Una landing page es la página de presentación de un negocio o una marca. Aquí, el vídeo de fondo se genera con IA a partir de unas pocas fotos. Claude Code, una IA que programa, escribe el código.
La receta sale de un solo vídeo del creador midudev. Sus números no sirven como precio para otros casos. Su vídeo está patrocinado por Higgsfield, la herramienta de vídeo que usa.
Tema avanzado
Esta ficha habla de herramientas para quien programa. Aquí tienes la idea; los pasos con código están en la versión adulta.
Cómo se ve
Qué hace falta
- Claude Code y un proyecto web nuevo hecho con Astro, una herramienta para crear webs.
- Una cuenta de Higgsfield con créditos, que se pagan. La cuenta y los pagos son cosa de un adulto.
- Fotos del sitio, mejor en horizontal. Con fotos verticales, el modelo tiene que inventar más.
- Dos skills de diseño: paquetes de instrucciones que enseñan una tarea a Claude Code. Una diseña la página; la otra crea un mundo 3D que recorres con el scroll.
Qué pasa, paso a paso
- Se crea el proyecto y se pasan las fotos a un formato ligero, WebP. Así la web carga más rápido.
- Se conecta Higgsfield a Claude Code con MCP, un enchufe común para apps. Después se añaden las dos skills. La de diseño se instala solo en ese proyecto. Sirve para que la web no parezca hecha por una IA.
- Se pregunta el precio antes de generar nada: modelos, créditos por clip y calidad. Solo se pide información, sin lanzar el trabajo. Así no hay sorpresas en el gasto.
- Se genera un clip corto por cada par de fotos seguidas. Es como un puzle: si una pieza sale mal, cambias solo esa. El modelo recibe la primera y la última imagen de cada clip, sin sonido. Conviene probar varios modelos con el paso más difícil y quedarse con uno.
- Todos los clips piden lo mismo: cámara en primera persona, sin cortes ni personas. Para llenar el formato panorámico, la IA inventa partes del sitio. Claude Code puede descartar y rehacer clips, pero no ve todos los fallos. Hay que revisarlos a mano, uno a uno. Se mira que no salten y que se parezcan al sitio real.
- Se piden versiones ligeras para la web y se une el vídeo al scroll. Al bajar, el vídeo avanza; al subir, retrocede. Antes de publicar, se revisa en el móvil y se mira la velocidad.
Para que el vídeo no vaya a trompicones al subir, hay un truco técnico. Además, las instrucciones del ejemplo citan una pieza de código que no está. El código publicado usa otra. Las dos cosas se explican en la versión adulta.
El vídeo deja sin resolver cómo se ve en el móvil. El código publicado después trae una versión más ligera y otra con menos movimiento. Conviene probar las dos antes de dar la receta por buena.
Un ejemplo de la vida real
¿Has dibujado alguna vez en las esquinas de un cuaderno y pasado las hojas rápido? El dibujo parece moverse. Esta web hace lo mismo: cada vez que bajas, pasa una hoja del vídeo.
En el vídeo de la fuente, el autor usa unas pocas fotos de un restaurante. Con ellas genera clips cortos y los une en un recorrido. Al bajar por la web, parece que entras andando en el local. Claude Code descartó y rehízo dos clips. Eso no asegura que no quede ningún fallo.
Errores que conviene evitar
- Pedir muchos clips de golpe. A veces se corta y solo llegan algunos; los demás se piden aparte.
- Mezclar fotos verticales y horizontales: el modelo inventa más de lo que se ve.
- Unir los clips con fundidos. El autor los descartó porque quedaban muy básicos.
- Generar sin preguntar el precio. El gasto se dispara sin control.
- Usar el mismo vídeo en el móvil. En pantalla vertical se ve solo el centro, y lo importante puede quedar fuera.
Pruébalo tú
- ¿Por qué se generan clips cortos por pares de fotos y no un vídeo entero?
- ¿Por qué conviene preguntar el precio antes de generar nada?
Respuestas
- Porque si un clip sale mal, solo repites ese. Con un vídeo entero, tendrías que repetirlo todo y gastar otra vez.
- Porque generar vídeo gasta créditos, y los créditos se pagan. Sin estimarlo, el gasto puede salir mucho más alto de lo previsto.
Palabras clave
- Landing page: página de presentación de un negocio o una marca.
- Scroll: moverte arriba y abajo por una página, con el dedo o el ratón.
- Clip: trozo corto de vídeo.
- Skill: paquete de instrucciones que enseña una tarea a Claude Code.
- Créditos: saldo que se gasta al generar vídeo con Higgsfield.