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

Vidéo → Page d'atterrissage avec défilement

Créez une page d'atterrissage cinématographique où le héros est une vidéo qui se déroule sur le défilement au lieu du temps — comme les pages produit Apple ou la page d'accueil de GitHub Copilot. Les images sont extraites de la vidéo source et échangées au fur et à mesure que l'utilisateur fait défiler ; sous le héros fixe, des sections normales contiennent le texte et l'appel à l'action.

Quand invoquer

• L'utilisateur dépose une vidéo et demande une page d'atterrissage, un site à défilement, un héros à images défilantes ou un site web à partir d'une vidéo
• Mention de "défilement style Apple", "page d'accueil GitHub Copilot", "défilement image par image"
• Équivalents hébreu : "דף נחיתה מסרטון", "אתר עם גלילה", "סרטון בגלילה"

Emplacement de sauvegarde

Par défaut : ~/Documents/yuv-projects/landings/<slug>/ — sauvegardez toujours les pages d'atterrissage ici pour pouvoir les retrouver. Créez le dossier parent s'il manque.

mkdir -p ~/Documents/yuv-projects/landings
cd ~/Documents/yuv-projects/landings
# Construisez <slug>/ ici.

Chemin final : ~/Documents/yuv-projects/landings/<slug>/. Dites à l'utilisateur où se trouve la page à la fin de chaque construction.

---

Workflow (8 étapes)

1. Sonder la source — ffprobe pour la durée, fps, dimensions, audio.
2. Choisir le nombre d'images — par défaut 80. Plancher 40 (saccadé si moins), plafond 160 (page lourde). Choisir selon la durée : ≤10s → 50, 10–30s → 80, 30–60s → 120, >60s → 160.
3. Décider du répertoire de sortie — par défaut ~/Documents/yuv-projects/landings/<slug>/. Le <slug> est court, dérivé du nom de la vidéo ou du sujet. Remplacez uniquement sur demande explicite.
4. Extraire les images — exécutez references/extract-frames.py <source-video> <output-dir> [count]. Produit output-dir/frames/f_0001.jpg… avec une qualité JPG constante de 82 et une largeur max de 1920 (réduite si la source est plus grande).
5. Copier et personnaliser references/landing-template.html dans output-dir/index.html :
   • Remplacez le placeholder __FRAMES__ par des balises <img> pour chaque image (le script de build le fait automatiquement si vous passez --build-html).
   • Remplissez __HEADLINE__, __TAGLINE__, __CTA_TEXT__, __CTA_HREF__, sections.
   • Pour le contenu en hébreu : définissez <html lang="he" dir="rtl"> et remplacez les polices par Rubik/Assistant (voir references/design-notes.md).
6. Optimiser les images — le script de build réduit déjà à 1920px de largeur max. Si le poids total de la page > 12 Mo, réduisez la qualité à 75 ou diminuez le nombre d'images.
7. Aperçu — python -m http.server dans le répertoire de sortie et ouvrez http://localhost:8000. Le défilement est fluide sur une machine correcte.
8. Déployer — déposez le dossier sur Vercel/Netlify/Cloudflare Pages. Aucune étape de build nécessaire.

Le mécanisme de défilement

• Scroller externe .scroll-stage avec hauteur en unités de viewport (par défaut 600vh = défilement de 5 écrans pour parcourir toutes les images).
• Héros fixe position: sticky; top: 0; height: 100vh contenant toutes les images en position absolue et cachées sauf l'image active.
• Écouteur de défilement calcule progress = scrolledIntoStage / scrollableHeight limité entre 0 et 1.
• idx = floor(progress * (N - 1)) — échange la classe .active vers cette image.
• Enveloppez l'écouteur dans requestAnimationFrame pour maintenir 60fps.

Règles de design

• Si le projet est marqué YUV.AI (Yuval personnellement, son portfolio, sa marque) : appelez yuv-design-system et verrouillez-le à un mode selon le support —
  • Mode Neon (DEFAULT pour le web YUV.AI) : rose vif (#FF1464) + cyan néon (#00E5FF) + blanc ou noir riche. Anton + Inter (anglais) / Rubik + Assistant (hébreu). Rayons de 0px ou 999px.
  • Mode Editorial Chaud : uniquement pour Hope, Marcus, bigcats.ai, practical.yuv.ai — rose + jaune + os, blanc cassé jamais #fff pur.
  • N'utilisez jamais le mode Decks (violet/jaune Fly High) pour une page d'atterrissage — cette palette est réservée aux présentations uniquement.
• Si le projet n'est pas marqué YUV.AI : n'appliquez pas yuv-design-system. Choisissez une palette adaptée à l'ambiance de la vidéo source. Anton + Inter restent des valeurs par défaut raisonnables mais pas obligatoires.
• Les superpositions du héros doivent être subtiles — une vignette et un seul grand titre ; ne noyez pas l'image.
• Sections sous le héros : fond clair (blanc en mode Neon, blanc cassé en mode Editorial Chaud, os si générique-chaud), grand titre en Anton, corps de texte en Inter à 18–22px, CTA en pilule tranchante (border-radius: 999px) — remplissage rose en mode Neon, couleur appropriée à la marque sinon.
• Pour l'hébreu : respectez le RTL, utilisez Rubik 900 pour les titres, Assistant 400/500 pour le corps.

Références de fichiers

Fichier	Objectif
references/extract-frames.py	Extracteur d'images basé sur ffmpeg ; construit optionnellement le HTML complet en une fois
references/landing-template.html	Squelette de page d'atterrissage autonome avec le mécanisme de défilement
references/design-notes.md	Typographie, palette et valeurs par défaut de mouvement