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.

El vídeo de midudev muestra un restaurante, Claude Code y el MCP de Higgsfield [00:00].1 El repositorio consultado contiene siete paradas y seis clips: sus números pueden diferir de los del vídeo durante el desarrollo.2 Es una receta de un solo caso; no una estimación universal de coste.

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.3 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.4 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].5
  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].6
  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. En el vídeo, Claude Code descartó y rehízo dos clips [19:22]. No garantiza detectar todos los defectos: comprueba tú continuidad, artefactos y fidelidad al espacio.
  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 facilitar el desplazamiento hacia atrás, el repositorio recomienda fotogramas clave frecuentes (-g 6), no uno en cada frame; también se puede valorar una secuencia de imágenes según peso y rendimiento. El proyecto usa Astro, GSAP y Lenis y se despliega en Cloudflare Workers.2 Sus prompts están en PROMPTS.md, pero citan un motor (references/scrub-engine.js) ausente del repositorio. El código disponible usa src/lib/world.ts: parte de esa implementación si quieres reproducirlo. La referencia propia incluye un esbozo sin probar.
  14. Revisar móvil y rendimiento antes de publicar. El vídeo deja pendiente el encuadre móvil [24:19]; el repositorio posterior incluye versiones de 720p y adaptación a movimiento reducido.2 Comprueba ambas antes de dar la receta por reproducida.

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].

Véase también

Referencias

Enlaces externos

  • mcp-higgsfield-landing: código de la landing del vídeo (Astro, GSAP, Lenis, Cloudflare Workers). Los prompts están en PROMPTS.md; la implementación final y el historial del repositorio pueden diferir de sus instrucciones.
  • ai-design-skills: skill landing-page-design, MIT.
  • scroll-world: skill que convierte una marca en una landing con mundo 3D al hacer scroll, MIT.
  • higgsfield-ai/skills: skills oficiales de Higgsfield, MIT.

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. mcp-higgsfield-landing. midudev, repositorio de GitHub, actualizado el 2026-10-10. Consultado el 2026-10-10. ↩ ↩2 ↩3

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

  4. higgsfield-ai/skills (MIT) y paquete @higgsfield/cli (licencia declarada MIT; comprueba la versión al instalar). Higgsfield AI. Consultado el 2026-10-10. ↩

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

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

Backlinks