Karthic1981/hoodini-ai-agents-skills.gitni-ai-agents-skills

Video → Página de Aterrizaje con Desplazamiento Cinematográfico

Construye una página de aterrizaje cinematográfica donde el heroe es un video que se reproduce al hacer scroll en lugar de con el tiempo — como las páginas de producto de Apple o la página de aterrizaje de GitHub Copilot. Los fotogramas se extraen del video fuente y se intercambian a medida que el usuario se desplaza; debajo del heroe sticky, las secciones de desplazamiento normal contienen texto y CTA.

Cuándo invocar

• El usuario sube un video y pide una página de aterrizaje, sitio con desplazamiento, heroe de fotogramas con scroll o sitio web desde un video
• Menciones de 'scroll tipo Apple', 'página de aterrizaje de GitHub Copilot', 'limpiar al hacer scroll', 'fotograma al hacer scroll'
• Equivalentes en hebreo: "דף נחיתה מסרטון", "אתר עם גלילה", "סרטון בגלילה"

Ubicación de guardado

Predeterminado: ~/Documents/yuv-projects/landings/<slug>/ — guarda siempre las páginas de aterrizaje aquí para que puedas encontrarlas de nuevo. Crea el directorio padre si falta.

mkdir -p ~/Documents/yuv-projects/landings
cd ~/Documents/yuv-projects/landings
# Construye <slug>/ aquí.

Ruta final: ~/Documents/yuv-projects/landings/<slug>/. Informa al usuario dónde está la página al final de cada construcción.

---

Flujo de trabajo (8 pasos)

1. Sondear la fuente — ffprobe para duración, fps, dimensiones, audio.
2. Elegir número de fotogramas — predeterminado 80. Mínimo 40 (entrecortado si es menor), máximo 160 (página pesada). Elegir según la duración: ≤10s → 50, 10–30s → 80, 30–60s → 120, >60s → 160.
3. Decidir directorio de salida — predeterminado ~/Documents/yuv-projects/landings/<slug>/. El <slug> es corto, derivado del nombre del video o del tema. Solo sobrescribe si se solicita explícitamente.
4. Extraer fotogramas — ejecuta references/extract-frames.py <video-fuente> <directorio-salida> [cantidad]. Genera directorio-salida/frames/f_0001.jpg… con calidad JPG consistente 82 y un ancho máximo de 1920 (reducido si la fuente es más grande).
5. Copiar y personalizar references/landing-template.html en directorio-salida/index.html:
   • Reemplaza el marcador de posición __FRAMES__ con etiquetas <img> para cada fotograma (el script de construcción lo hace automáticamente cuando pasas --build-html).
   • Rellena __HEADLINE__, __TAGLINE__, __CTA_TEXT__, __CTA_HREF__, secciones.
   • Para contenido en hebreo: establece <html lang="he" dir="rtl"> y cambia las fuentes a Rubik/Assistant (consulta references/design-notes.md).
6. Optimizar fotogramas — el script de construcción ya escala a 1920px de ancho máximo. Si el peso total de la página supera los 12 MB, reduce la calidad a 75 o disminuye el número de fotogramas.
7. Vista previa — python -m http.server dentro del directorio de salida y abre http://localhost:8000. El desplazamiento se siente suave en una máquina decente.
8. Desplegar — coloca la carpeta en Vercel/Netlify/Cloudflare Pages. No se necesita paso de construcción.

El mecanismo de desplazamiento

• Scroller exterior .scroll-stage con altura en unidades de viewport (predeterminado 600vh = desplazar 5 pantallas para recorrer todos los fotogramas).
• Heroe sticky position: sticky; top: 0; height: 100vh que contiene todos los fotogramas posicionados absolutamente y ocultos excepto el activo.
• Listener de scroll calcula progress = scrolledIntoStage / scrollableHeight limitado entre 0 y 1.
• idx = floor(progress * (N - 1)) — intercambia la clase .active a ese fotograma.
• Envuelve el listener en requestAnimationFrame para mantener 60fps.

Reglas de diseño

• Si el proyecto es de marca YUV.AI (Yuval personalmente, su portafolio, su marca): llama a yuv-design-system y bloquéalo a un modo según el medio:
  • Modo Neon (PREDETERMINADO para la web de YUV.AI): rosa intenso (#FF1464) + cian neón (#00E5FF) + blanco o negro intenso. Anton + Inter (inglés) / Rubik + Assistant (hebreo). Radios 0px o 999px.
  • Modo Editorial Cálido: solo para Hope, Marcus, bigcats.ai, practical.yuv.ai — rosa + amarillo + hueso, blanco roto nunca #fff puro.
  • Nunca usar modo Decks (púrpura/amarillo Fly High) para una página de aterrizaje — esa paleta está reservada solo para presentaciones de diapositivas.
• Si el proyecto no es de marca YUV.AI: no aplicar yuv-design-system. Elegir una paleta que se ajuste al estado de ánimo del video fuente. Anton + Inter siguen siendo valores predeterminados razonables pero no obligatorios.
• Las superposiciones del heroe deben ser sutiles — una viñeta y un solo titular grande; no ahogues el fotograma.
• Secciones debajo del heroe: lienzo claro (blanco en modo Neon, blanco roto en modo Editorial Cálido, hueso si es genérico-cálido), título grande Anton, texto del cuerpo en Inter a 18–22px, CTA como una píldora afilada (border-radius: 999px) — relleno rosa en modo Neon, color apropiado a la marca en caso contrario.
• Para hebreo: respeta RTL, usa Rubik 900 para titulares, Assistant 400/500 para cuerpo.

Referencias de archivos

Archivo	Propósito
references/extract-frames.py	Extractor de fotogramas basado en ffmpeg; opcionalmente construye el HTML completo de una vez
references/landing-template.html	Esqueleto de página de aterrizaje autónomo con el mecanismo de desplazamiento
references/design-notes.md	Valores predeterminados de tipografía, paleta y movimiento