Página de Aterrizaje Cinemática con Desplazamiento

Página de Aterrizaje Parallax

Convierte un video corto en una página de aterrizaje cinemática de una sola pantalla donde el gesto de desplazamiento del usuario reproduce el video fotograma a fotograma mientras cinco escenas de texto dramáticas se funden y se desvanecen. El documento nunca se desplaza realmente — la rueda, el toque y la entrada del teclado se interceptan en JS y se convierten en progreso virtual de fotogramas.

Esta habilidad codifica los patrones probados en la referencia incluida en ../../examples/parasites/ (las páginas de aterrizaje github / lion / hope — tres páginas funcionales construidas con esta misma habilidad). Trata esa carpeta como la verdad absoluta si algo aquí es ambiguo.

Dónde se sitúa esta habilidad en la pirámide de YUV.AI

parallax-landing-page está en el nivel medio de la pirámide de habilidades de YUV.AI, junto a yuv-design-system, yuv-decks, yuv-viral-video y video-to-landing-page. El orquestador de nivel superior yuv-pilot enruta aquí cada vez que un clip de video de 5 a 15 segundos necesita convertirse en una página de aterrizaje de un solo héroe con scrub de desplazamiento.

Esta habilidad trae su propio lenguaje visual (Anton + Caveat + Inter, paleta de acentos oro/ámbar/rosa/crema) — NO llama a yuv-design-system. Los dos sistemas coexisten: yuv-design-system posee la paleta de marca en superficies web/app/presentaciones, parallax-landing-page posee la estética cinemática de scrub de desplazamiento específicamente. Para las páginas de aterrizaje parallax de YUV.AI, puedes OPCIONALMENTE agregar una marca de agua de phoenix + la URL canónica de Linktree en el área del pie de página como un hilo de marca — consulta yuv-design-system/assets/ para el archivo de marca de agua. NO intercambies la pila de tipografía Anton/Caveat por la paleta Neon del sistema de diseño — eso perdería la apariencia característica.

Lo que estás construyendo

Cada página de aterrizaje es una única ventana gráfica bloqueada con:

• Un lienzo que llena la pantalla, dibujando un fotograma a la vez (cover-fit, DPR ≤ 2)
• 5 escenas de texto posicionadas absolutamente (kicker + titular Anton en mayúsculas + línea manuscrita Caveat), cada una con su propia ventana de progreso de desplazamiento
• Una navegación fija con PARALLAX // showcase logo y enlaces a páginas de aterrizaje hermanas
• Un cargador que precarga cada fotograma antes de permitir que el usuario interactúe
• Una superposición de viñeta y grano de película
• Una sugerencia de desplazamiento inferior que se desvanece una vez que el usuario comienza a desplazarse
• Un contador de fotogramas en la esquina inferior derecha (ej. 073 / 145)
• Una escena final que es la sección de CTA — sin una sección .end separada debajo

Peso total a q:v 2: aproximadamente 120–220 KB por fotograma × número de fotogramas. Un clip de 6 segundos a 24 fps = 145 fotogramas ≈ 25 MB. Un clip de 10 segundos = 241 fotogramas ≈ 53 MB.

Ubicación de guardado

Predeterminado: ~/Documents/yuv-projects/landings/<slug>/ — siempre guarda las páginas de aterrizaje independientes aquí para que puedas encontrarlas de nuevo. Anula solo si el usuario elige explícitamente una ubicación diferente O si se selecciona el Modo B (integrar en el showcase existente examples/parasites/).

mkdir -p ~/Documents/yuv-projects/landings
cd ~/Documents/yuv-projects/landings
# La habilidad crea <slug>/ aquí a medida que extrae fotogramas y construye el HTML.

Ruta final (Modo A — independiente): ~/Documents/yuv-projects/landings/<slug>/. Ruta final (Modo B — integrar): el directorio de showcase existente que el usuario eligió.

Informa al usuario la ruta final al final de cada compilación.

---

Flujo de trabajo

Hay cuatro fases. No te saltes fases — cada una alimenta a la siguiente.

Fase 1 — Descubrir

Confirma con el usuario:

1. Ruta del video — dónde se encuentra el MP4 fuente.
2. Slug — nombre corto de carpeta/archivo (ej. hope, marcus, desk). Una palabra, minúscula, sin espacios. Esto se convierte tanto en el nombre de la carpeta de fotogramas (<slug>/) como en el nombre del archivo HTML (<slug>.html).
3. Tema / tópico — ¿de qué trata esta página de aterrizaje? ¿Un lanzamiento de producto? ¿Un momento personal? ¿Un encuentro con la vida silvestre? Necesitas esto para escribir el texto.
4. Modo del proyecto — independiente (carpeta nueva) o integrar en el showcase existente de parasites en examples/parasites/ (parte superior de este repositorio). Si el usuario dice «agrégalo al showcase», significa Modo B a continuación.
5. Color de acento — para el script/destacado de CTA: gold (#f5b042), amber (#ff8a3d), accent (rosa #ff4d6d), cream (#f5e9d4), o algo nuevo (agrégalo a :root en style.css y escribe una nueva regla .script.<nombre>).

Si el usuario no ha especificado algunos de estos, propón valores predeterminados y continúa — no te detengas en preguntas que puedan responder una vez que vean el resultado.

Fase 2 — Extraer fotogramas

Ejecuta el script de extracción incluido. Sondea el video con ffprobe y extrae cada fotograma en resolución nativa con -q:v 2 (JPEG casi sin pérdida), nombrándolos frame-001.jpg hasta frame-NNN.jpg (3 dígitos rellenados con ceros).

python <skill>/scripts/extract_frames.py <ruta_del_video> <carpeta_de_salida>

Ejemplo:

python C:/Users/User/.claude/skills/parallax-landing-page/scripts/extract_frames.py \
    C:/Users/User/Documents/parasites/hope/hope.mp4 \
    C:/Users/User/Documents/parasites/hope

El script imprime un bloque de metadatos JSON en stdout. Captúralo — necesitas frame_count y suggested_scroll_budget para el HTML.

Por qué -q:v 2: ezgif y herramientas similares re-comprimen agresivamente (~55 KB/fotograma). ffmpeg nativo a q:v 2 da ~120–220 KB/fotograma en las mismas dimensiones — visiblemente más nítido. No reduzcas la resolución; nunca aumentes la resolución (infla los archivos sin agregar detalle).

Por qué la fórmula de presupuesto de desplazamiento (≈26 px por fotograma): mantiene constante la sensación táctil de «píxeles de desplazamiento por fotograma avanzado» entre las duraciones de los clips. 145 fotogramas → ~4200, 241 fotogramas → ~6300, 90 fotogramas → ~2500 (mínimo). El script lo calcula por ti y lo limita a [2500, 8000].

Fase 3 — Crear la página

Lee la plantilla en <skill>/assets/landing-page-template.html. Es un archivo funcional completo con marcadores {{PLACEHOLDER}} y comentarios <!-- TODO: --> junto a las partes creativas. Escribe un nuevo archivo en <target>/<slug>.html con todo sustituido.

Lista de verificación de sustituciones (cada marcador de posición debe ser reemplazado):

Marcador	Qué poner	Ejemplo
{{PAGE_TITLE}}	<title> HTML	Hope — The Fastest Heart in the Negev
{{PAGE_DESCRIPTION}}	meta descripción, una oración	A moment with Hope, the cheetah of Midbarium.
{{SLUG}}	nombre de carpeta (sin ruta, sin barra)	hope
{{FRAME_COUNT}}	número entero de fotogramas	241
{{FRAME_COUNTER_TEXT}}	001 / NNN con ancho coincidente	001 / 241
{{SCROLL_BUDGET}}	número entero del JSON del extractor	6300
{{PREVIEW_FRAME_MID}}	fotograma medio rellenado con ceros	121
{{PREVIEW_FRAME_END}}	último fotograma rellenado con ceros	241
{{LOADER_TITLE}}	una palabra, mayúsculas	HOPE
{{LOADER_SCRIPT}}	línea manuscrita que termina en …	summoning the runner…
{{NAV_LINKS_HTML}}	bloque completo de etiqueta <a> para nav	ver abajo
{{SCENE_N_*}}	kicker, titular, línea manuscrita para cada una de las 5 escenas	ver guía de copy
{{SCROLL_HINT_TEXT}}	indicación en mayúsculas de 2 a 4 palabras	SCROLL TO RUN
{{CTA_BUTTONS_HTML}}	2 a 4 etiquetas `<a class=