Wiki sobre Inteligencia Artificial

Versión infantil

Landing page con vídeo ligado al scroll

Revisada el 2026-10-10 · vigente hasta 2027-01-08

Consiste en una landing cuyo vídeo de fondo avanza con el scroll, generado con IA a partir de unas pocas fotos. Se generan los clips por pares de fotos, se unen y se sincronizan con la página; Claude Code escribe el código.

Hecho con seis fotos de un restaurante, Claude Code y el MCP de Higgsfield, según el vídeo de midudev [00:00].1 Es una receta de un solo caso: los números son los del autor.

Requisitos

  • Claude Code instalado y un proyecto Astro nuevo (stack del vídeo, [01:40]).
  • Una cuenta de Higgsfield con créditos. El autor tenía un plan con unos 2.940 créditos [08:43].
  • Fotos del espacio. Mejor en horizontal, aunque no es obligatorio: las verticales obligan al modelo a inventar más [10:08].
  • Dos skills de diseño: landing-page-design y scroll-world (ver enlaces externos).

Pasos

  1. Crear el proyecto con Astro y levantarlo en local para comprobar que funciona [01:42].
  2. Optimizar las fotos a WebP antes de nada: menos peso, menos latencia y una web más rápida [04:39].
  3. Conectar el MCP de Higgsfield. El vídeo lo hizo con un prompt que instala la CLI, autentica y añade skills [03:14]. La página oficial de Higgsfield describe otra vía: añadir un conector personalizado con la URL https://mcp.higgsfield.ai en Settings → Connectors, y menciona Claude Code como cliente compatible.2 Para no depender de nadie, la instalación sale de fuentes oficiales: la CLI @higgsfield/cli y las skills de higgsfield-ai/skills, ambas MIT.3 Sus pasos, sin probar, están en la referencia propia.
  4. Instalar la skill de diseño landing-page-design (MIT) en el proyecto, no en global, para que la landing no parezca hecha por una IA. La skill cubre estrategia, estructura, tipografías y copy [05:21].4
  5. Instalar la skill scroll-world (MIT), que convierte una marca en una landing con mundo 3D que se recorre con el scroll. El autor la instaló desde un marketplace de plugins en unos segundos [06:48].5
  6. Pedir el coste antes de generar nada. Hay que pedir solo información: modelos, créditos por clip y resolución, sin lanzar la generación [07:50]. Así se evita la sorpresa de un vídeo que sale mucho más caro de lo previsto [08:06].
  7. Dividir el recorrido en clips cortos, uno por cada par de fotos consecutivas, y no en un vídeo único. Si hay que repetir, se repite solo el clip que falla [09:05].
  8. Elegir modelos que acepten fotograma inicial y final sin audio. El vídeo compara Kling 3.0 (buen movimiento de cámara, más caro), MiniMax H3 (más barato, 2K y pesos abiertos según el autor) y otros modelos de Higgsfield [09:33]–[10:09]. Hay que probar varios con la transición más difícil y quedarse con uno [12:06].
  9. Pedir a Claude Code el prompt de cada clip y el ajuste común de los seis: 16:9, sin audio, cámara en primera persona con gimbal, sin cortes ni vibración [11:24]–[11:50] y [13:50]. Como prompt negativo: sin fundidos, morphing, parpadeo, zoom brusco, distorsiones ni personas [16:55].
  10. Generar los clips. Higgsfield completa los fotogramas que faltan para encajar en 16:9, así que el modelo inventa parte del local [17:35].
  11. Revisar los clips uno a uno. Si uno no encaja, Claude Code lo detecta y lo rehace solo [19:22]. En el vídeo hubo dos descartes automáticos.
  12. Pedir las versiones web: MP4 por compatibilidad y WebM sin audio, optimizadas [20:50].
  13. Integrar el vídeo con el scroll. Con Astro, GSAP y Lenis, el scroll controla el progreso del vídeo. Para que el retroceso no vaya a trompicones, el vídeo debe tener un fotograma clave en cada frame o convertirse en una secuencia de imágenes en canvas [11:50]. El repositorio del vídeo usa esa base y se despliega en Cloudflare Workers.6 Ojo: sus prompts citan un motor de scroll (references/scrub-engine.js) que no está en el repositorio, así que no conviene depender de él. La referencia propia incluye un esbozo del motor, sin probar.
  14. Revisar móvil y rendimiento antes de publicar. El autor deja pendiente el encuadre en móvil, que pide vídeos específicos para no perder el centro de la imagen [24:19].

Errores frecuentes

  • Lote cortado por timeout: solo entra parte de los clips. Hay que relanzar los que faltan por separado [18:12].
  • Fotos de distinta orientación: el modelo inventa más contenido de lo visible [17:35].
  • Transición de fundido: queda muy básica y el autor la descarta [15:12]–[15:26].
  • Generar sin estimar coste: el gasto acaba en el rango alto sin control. El resultado final costó unos 137 créditos con MiniMax, a 2K, ocho clips y tres ediciones de imagen [20:07].
  • Usar el vídeo tal cual en móvil: el encuadre central deja fuera lo importante [24:19].

Cómo lo uso

Sin uso propio documentado todavía.

Véase también

Referencias

Enlaces externos

  • mcp-higgsfield-landing: código de la landing del vídeo (Astro, GSAP, Lenis, Cloudflare Workers). El vídeo dice que los prompts van en un archivo aparte; no lo he comprobado en el repositorio.
  • ai-design-skills: skill landing-page-design, MIT. Unas 2.460 estrellas a fecha de consulta.
  • scroll-world: skill que convierte una marca en una landing con mundo 3D al hacer scroll, MIT. Unas 9.900 estrellas a fecha de consulta.
  • higgsfield-ai/skills: skills oficiales de Higgsfield, MIT.
  • Referencia propia: prompts y pasos: versión genérica de la técnica, escrita por nosotros.

Footnotes

  1. Crea una Landing ESPECTACULAR con Claude Code. midudev, vídeo de YouTube, 2026-10-09. Fuente de nivel 4 (creador). El vídeo está patrocinado por Higgsfield, como indica su descripción. Cada dato lleva el minuto entre corchetes. Consultado el 2026-10-10. ↩

  2. Generate AI Videos From Claude with Higgsfield MCP. Higgsfield, blog oficial, 2026-05-08. Consultado el 2026-10-10. ↩

  3. higgsfield-ai/skills (MIT) y paquete @higgsfield/cli (MIT, versión 1.1.26 a fecha de consulta). Higgsfield AI. Consultado el 2026-10-10. ↩

  4. ai-design-skills. Elaya Design, repositorio de GitHub con licencia MIT. Consultado el 2026-10-10. ↩

  5. scroll-world. oso95, repositorio de GitHub con licencia MIT. Consultado el 2026-10-10. ↩

  6. mcp-higgsfield-landing. midudev, repositorio de GitHub, actualizado el 2026-10-10. Consultado el 2026-10-10. ↩

Graph View

Backlinks