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

Parallax Landing Page

Transformez une courte vidéo en une page d’atterrissage cinématographique sur un seul écran, où le geste de défilement de l’utilisateur effectue un scrub image par image dans la vidéo, tandis que cinq scènes de texte dramatiques s’affichent en fondu enchaîné. Le document ne défile jamais réellement — les événements de molette, tactile et clavier sont interceptés en JavaScript et convertis en progression virtuelle.

Cette compétence reproduit les motifs éprouvés dans la référence incluse dans ../../examples/parasites/ (les pages github / lion / hope — trois pages fonctionnelles construites avec cette même compétence). Considérez ce dossier comme la vérité de base si quelque chose ici est ambigu.

Où se situe cette compétence dans la pyramide YUV.AI

parallax-landing-page se trouve dans le niveau intermédiaire de la pyramide des compétences YUV.AI, aux côtés de yuv-design-system, yuv-decks, yuv-viral-video et video-to-landing-page. L’orchestrateur de haut niveau yuv-pilot achemine ici chaque fois qu’un clip vidéo de 5 à 15 secondes doit devenir une page d’atterrissage à défilement virtuel sur un seul écran.

Cette compétence apporte son propre langage visuel (Anton + Caveat + Inter, palette or/ambre/accent/crème) — elle n’appelle PAS yuv-design-system. Les deux systèmes coexistent : YUV design system possède la palette de marque sur les surfaces web/app/deck, parallax-landing-page possède l’esthétique cinématographique du scroll‑scrub. Pour les pages parallax de YUV.AI, vous pouvez OPTIONNELLEMENT ajouter un filigrane phénix + l’URL Linktree canonique dans le pied de page comme fil conducteur de la marque — voir yuv-design-system/assets/ pour le fichier de filigrane. Ne remplacez PAS la pile de polices Anton/Caveat par la palette Neon du design system — cela ferait perdre le look signature.

Ce que vous construisez

Chaque page d’atterrissage est un viewport verrouillé unique avec :

• Un canvas remplissant l’écran, dessinant une image à la fois (cover-fit, DPR ≤ 2)
• 5 scènes de texte positionnées en absolu (kicker + titre Anton en majuscules + ligne manuscrite Caveat), chacune avec sa propre fenêtre de progression de défilement
• Une navigation fixe avec PARALLAX // showcase et des liens vers les pages sœurs
• Un chargeur qui précharge chaque image avant de permettre l’interaction
• Un overlay de vignette et de grain de film
• Un indice de défilement en bas qui disparaît dès que l’utilisateur commence à défiler
• Un compteur d’images en bas à droite (ex. 073 / 145)
• Une dernière scène qui est la section CTA — pas de section .end séparée en dessous

Poids total à q:v 2 : environ 120–220 Ko par image × nombre d’images. Un clip de 6 secondes à 24 ips = 145 images ≈ 25 Mo. Un clip de 10 secondes = 241 images ≈ 53 Mo.

Emplacement de sauvegarde

Par défaut : ~/Documents/yuv-projects/landings/<slug>/ — sauvegardez toujours les pages autonomes ici pour pouvoir les retrouver. Ne remplacez que si l’utilisateur choisit explicitement un autre emplacement OU si le mode B (intégration dans le showcase examples/parasites/) est sélectionné.

mkdir -p ~/Documents/yuv-projects/landings
cd ~/Documents/yuv-projects/landings
# La compétence crée <slug>/ ici pendant l’extraction des images et la construction du HTML.

Chemin final (Mode A — autonome) : ~/Documents/yuv-projects/landings/<slug>/. Chemin final (Mode B — intégration) : le répertoire du showcase existant choisi par l’utilisateur.

Indiquez le chemin final à l’utilisateur à la fin de chaque construction.

---

Workflow

Il y a quatre phases. Ne sautez pas de phases — chacune alimente la suivante.

Phase 1 — Découverte

Confirmez avec l’utilisateur :

1. Chemin de la vidéo — où se trouve le fichier MP4 source.
2. Slug — nom court de dossier/fichier (ex. hope, marcus, desk). Un seul mot, en minuscules, sans espaces. Il devient à la fois le nom du dossier d’images (<slug>/) et le nom du fichier HTML (<slug>.html).
3. Thème / sujet — de quoi parle cette page d’atterrissage ? Un lancement de produit ? Un moment personnel ? Une rencontre animalière ? Vous en avez besoin pour écrire le texte.
4. Mode du projet — autonome (nouveau dossier) ou intégration dans le showcase parasites existant à examples/parasites/ (racine de ce dépôt). Si l’utilisateur dit « ajoute‑le au showcase », cela signifie Mode B ci‑dessous.
5. Couleur d’accent — pour le surlignage du script/CTA : gold (#f5b042), amber (#ff8a3d), accent (rose #ff4d6d), cream (#f5e9d4), ou une nouvelle couleur (ajoutez‑la dans :root de style.css et créez une règle .script.<nom>).

Si l’utilisateur n’a pas spécifié certains éléments, proposez des valeurs par défaut et passez à la suite — ne vous attardez pas sur des questions qu’il pourra répondre en voyant le résultat.

Phase 2 — Extraction des images

Exécutez le script d’extraction fourni. Il sonde la vidéo avec ffprobe et extrait chaque image en résolution native avec -q:v 2 (JPEG quasi sans perte), en les nommant frame-001.jpg à frame-NNN.jpg (3 chiffres avec zéros de remplissage).

python <skill>/scripts/extract_frames.py <video_path> <output_folder>

Exemple :

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

Le script affiche un bloc de métadonnées JSON sur stdout. Capturez‑le — vous avez besoin de frame_count et suggested_scroll_budget pour le HTML.

Pourquoi -q:v 2 : ezgif et outils similaires recompressent agressivement (~55 Ko/image). FFmpeg natif à q:v 2 donne ~120–220 Ko/image aux mêmes dimensions — nettement plus net. Ne réduisez pas la résolution ; n’augmentez jamais (cela gonfle les fichiers sans ajouter de détails).

Pourquoi la formule du budget de défilement (≈26 px par image) : maintient la sensation tactile de « pixels de défilement par image avancée » constante quelle que soit la longueur du clip. 145 images → ~4200, 241 images → ~6300, 90 images → ~2500 (plancher). Le script le calcule pour vous et le limite à [2500, 8000].

Phase 3 — Rédaction de la page

Lisez le modèle dans <skill>/assets/landing-page-template.html. C’est un fichier fonctionnel complet avec des marqueurs {{PLACEHOLDER}} et des commentaires <!-- TODO: --> à côté des parties créatives. Écrivez un nouveau fichier dans <target>/<slug>.html avec tout substitué.

Liste de substitution (chaque placeholder doit être remplacé) :

Placeholder	Ce qu’il faut mettre	Exemple
{{PAGE_TITLE}}	Balise HTML <title>	Hope — The Fastest Heart in the Negev
{{PAGE_DESCRIPTION}}	Description meta, une phrase	A moment with Hope, the cheetah of Midbarium.
{{SLUG}}	Nom du dossier (pas de chemin, pas de slash)	hope
{{FRAME_COUNT}}	Nombre entier d’images	241
{{FRAME_COUNTER_TEXT}}	001 / NNN avec largeur adaptée	001 / 241
{{SCROLL_BUDGET}}	Entier du JSON de l’extracteur	6300
{{PREVIEW_FRAME_MID}}	Image médiane avec zéros	121
{{PREVIEW_FRAME_END}}	Dernière image avec zéros	241
{{LOADER_TITLE}}	Un mot, en majuscules	HOPE
{{LOADER_SCRIPT}}	Ligne manuscrite se terminant par …	summoning the runner…
{{NAV_LINKS_HTML}}	Bloc complet de balises <a> pour la nav	voir ci‑dessous
{{SCENE_N_*}}	Kicker, titre, ligne manuscrite pour chacune des 5 scènes	voir guide de copie
{{SCROLL_HINT_TEXT}}	Invite de 2 à 4 mots en majuscules	SCROLL TO RUN
{{CTA_BUTTONS_HTML}}	2 à 4 balises `<a class=