Vidéo → Page d'atterrissage pilotée par le défilement
Construisez une page d'atterrissage cinématographique dont le héros est une vidéo qui se joue au défilement et non dans le temps — comme les pages produits Apple ou la page d'atterrissage 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 la page ; sous le héros sticky, des sections normales contiennent le texte et l'appel à l'action.
Quand l'utiliser
- L'utilisateur dépose une vidéo et demande une page d'atterrissage, un site à défilement, un héros avec images au défilement ou un site web à partir d'une vidéo
- Mentions de "défilement à la Apple", "page d'atterrissage GitHub Copilot", "défilement avec image", "image au défilement"
- Équivalents hébreux : "דף נחיתה מסרטון", "אתר עם גלילה", "סרטון בגלילה"
Emplacement de sauvegarde
Par défaut : ~/Documents/yuv-projects/landings/<slug>/ — enregistrez toujours les pages d'atterrissage ici pour pouvoir les retrouver facilement. Créez le répertoire 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>/. Indiquez à l'utilisateur où se trouve la page à la fin de chaque construction.
Procédure (8 étapes)
- Sonder la source —
ffprobepour la durée, les fps, les dimensions, l'audio. - Choisir le nombre d'images — par défaut
80. Minimum40(saccadé en dessous), maximum160(page lourde). Choisissez selon la durée : ≤10s → 50, 10–30s → 80, 30–60s → 120, >60s → 160. - 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. Ne le modifiez que sur demande explicite. - Extraire les images — exécutez
references/extract-frames.py <source-video> <output-dir> [count]. Produitoutput-dir/frames/f_0001.jpg… avec une qualité JPG constante de 82 et une largeur maximale de 1920 (réduite si la source est plus grande). - Copier et personnaliser
references/landing-template.htmldansoutput-dir/index.html:- Remplacez le marqueur
__FRAMES__par des balises<img>pour chaque image (le script de construction le fait automatiquement si vous passez--build-html). - Remplissez
__HEADLINE__,__TAGLINE__,__CTA_TEXT__,__CTA_HREF__, les sections. - Pour du contenu en hébreu : définissez
<html lang="he" dir="rtl">et remplacez les polices par Rubik/Assistant (voirreferences/design-notes.md).
- Remplacez le marqueur
- Optimiser les images — le script de construction réduit déjà à 1920px de largeur maximale. Si le poids total de la page dépasse 12 Mo, réduisez la qualité à 75 ou diminuez le nombre d'images.
- Prévisualiser —
python -m http.serverdans le répertoire de sortie et ouvrezhttp://localhost:8000. Le défilement est fluide sur une machine correcte. - Déployer — déposez le dossier sur Vercel/Netlify/Cloudflare Pages. Aucune étape de build nécessaire.
Le mécanisme de défilement
- Le conteneur de défilement externe
.scroll-stagea une hauteur définie en unités de viewport (par défaut600vh= défiler 5 écrans pour parcourir toutes les images). - Héros sticky
position: sticky; top: 0; height: 100vhcontenant toutes les images positionnées en absolu et cachées sauf l'image active. - Un écouteur de défilement calcule
progress = scrolledIntoStage / scrollableHeightlimité entre 0 et 1. idx = floor(progress * (N - 1))— permutez la classe.activevers cette image.- Enveloppez l'écouteur dans
requestAnimationFramepour maintenir 60fps.
Règles de design
- Utilisez le système de design du projet s'il est spécifié, sinon par défaut celui de la compétence yuv-design-system : Anton + Inter (anglais) / Rubik + Assistant (hébreu), palette Fly High violet (
#5E17EB) + jaune (#FFEC00) + gris (#F1F2F2), blanc cassé (jamais#fffpur), rayons 0px ou 999px (pas de coins de 8–12px). L'éditorial chaud (rose+jaune+os) est réservé à la famille de marques Hope/bigcats uniquement. - 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 os, grand titre Anton, texte de corps en Inter de 18 à 22px, CTA sous forme de rectangle rose vif avec texte Anton.
- Pour l'hébreu : respectez le RTL, utilisez Rubik 900 pour les titres, Assistant 400/500 pour le corps.
Références des fichiers
| Fichier | Objectif |
|---|---|
references/extract-frames.py | Extracteur d'images basé sur ffmpeg ; construit éventuellement le HTML complet en une seule passe |
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 du mouvement |