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

Cinematic Scrub Landing Page — Le Golden Template

Construisez une page d'accueil premium et adaptée à la marque où la vidéo héroïque répond à la souris et le reste de la page guide le visiteur à travers un arc narratif en 5 temps. L'utilisateur fournit une vidéo, éventuellement un logo + une photo du produit + un contexte de marque — cette compétence gère l'extraction de la palette, la sélection de la typographie, le sens RTL/LTR, l'échafaudage, le ré-encodage vidéo avec toutes les images-clés, l'effet de défilement par la souris, la bibliothèque de sections et la vérification.

Pourquoi cette compétence existe

L'implémentation de référence se trouve dans https://github.com/hoodini/bamba — un site israélien RTL pour le snack "במבה" où une vidéo de bébé suit le curseur sur toute la page tandis que 4 sections distinctes en dessous (recette jaune vif, album nostalgie crème, tarification sombre contemplative, finale d'action rouge) guident le visiteur à travers désir → joie → nostalgie → contemplation → action.

Chaque règle de cette compétence a été extraite de cette construction. Les points de la section des règles strictes sont TOUS durement gagnés — ils remplacent les valeurs par défaut "bon code" génériques.

---

Galerie des sections (ce que vous construisez)

La section héroïque reste en haut. En dessous, choisissez 4 sections dans la bibliothèque, ordonnées pour suivre l'arc narratif. Chacune est totalement opaque (aucune transparence de la vidéo) et possède sa propre identité de marque :

Temps	Type	Référence
1 — Désir	Héroïque (vidéo à défilement par la souris)
2 — Joie	Soleil — dégradé d'accent primaire vif, SVG de motif flottant, typographie fantôme géante, cartes de statistiques
3 — Nostalgie	Album — papier crème, micro-motif pointillé, bento polaroid avec une vraie photo du produit
4 — Contemplation	Rôti — sombre avec lueurs d'accent radial, trois cartes de prix avec un traitement VISUEL DIFFÉRENT pour chacune
5 — Action	Signal — accent fort à pleine largeur (rouge/orange/vert), titre massif + CTA, panneau contenu dans du verre

Pour les marques techniques/SaaS, échangez les types de sections selon les besoins (voir la bibliothèque de sections ci-dessous) — mais terminez toujours par une section Signal.

---

Comment utiliser cette compétence

1. Déposez les fichiers dans un répertoire de travail propre :

   • Vidéo héroïque (tout conteneur — .mp4, .mov, .webm)
   • Logo (SVG fortement préféré ; PNG avec transparence acceptable)
   • 1 à 3 images du produit/sujet (JPG/PNG, idéalement transparent)

2. Confirmez avec l'utilisateur (brièvement — proposez des valeurs par défaut, passez à autre chose) :

   • Nom du produit + méta-accroche
   • Code de langue (détermine RTL/LTR + choix de police)
   • Contexte de marque — époque, public cible, cœur émotionnel, ambiance de palette
   • Optionnel : hexadécimaux de palette explicites, temps de l'arc narratif

3. Exécutez le workflow ci-dessous dans l'ordre. Toutes les phases sont obligatoires. Ne sautez pas le ré-encodage ffmpeg — c'est la magie qui rend le défilement fluide.

4. Vérifiez avant de signaler comme terminé. La phase 9 comporte 12 vérifications. Exécutez-les toutes.

---

ENTRÉES — collectez-les auprès de l'utilisateur

PRODUCT_NAME: "<ex. במבה / Bamba / Hope the Cheetah / Acme CRM>"
TAGLINE: "<le méta-message — ex. 'ce n'est pas un snack, ce sont des souvenirs pour la vie'>"
LANGUAGE: "<he | en | ar | es | fr | ja | ...>"
IS_RTL: "<true | false>"                                   # he/ar/fa = true ; tout le reste = false
HERO_VIDEO_FILE: "<nom exact du fichier dans le répertoire courant — ex. baby2.mp4>"
LOGO_FILE: "<nom exact du fichier — laissez vide si aucun>"
PRODUCT_IMAGE_FILE: "<nom exact du fichier — laissez vide si aucun>"
BRAND_CONTEXT: |
  <2-4 phrases : l'époque évoquée, le public cible, le cœur émotionnel,
  l'identité visuelle (chaud/froid/amusant/sérieux). Détermine la palette + les motifs.>
PALETTE: "<optionnel — hexadécimaux séparés par des virgules si remplacement>"
NARRATIVE_ARC: "<optionnel — 5 temps émotionnels ; l'IA propose si vide>"

Le modèle de texte complet (avec le même bloc YAML et le corps de l'invite) se trouve dans references/GOLDEN_PROMPT.md — collez-le dans Claude avec le YAML rempli lorsque vous n'avez pas d'accès direct au runtime de la compétence.

---

Phase 0 — Planifiez le design (sortez un brief de ≤200 mots avant de coder)

Avant d'écrire du code, sortez :

1. Palette extraite de 5 couleurs : background (encre la plus foncée), cream (texte blanc cassé chaud — JAMAIS #FFFFFF), accent (couleur principale de la marque), accent2 (couleur secondaire de la marque), support (teinte tertiaire). Extrayez du logo + de l'image du produit si aucun PALETTE n'est fourni. La palette doit être cohérente en interne — tout chaud OU tout froid, jamais mélangé. Marques chaudes (alimentation, nature, nostalgie, animaux) → pas de bleus, teals, mints, cyans. Marques froides (tech, finance, médical, science-fiction) → pas de tons chauds sauf un minuscule accent.

2. Trinité typographique (affichage / corps / accent manuscrit) pour la langue :

   • he : Rubik (affichage) + Assistant (corps) + Suez One (accent)
   • en : Anton (affichage) + Inter (corps) + Caveat (accent)
   • ar : Cairo (affichage) + Tajawal (corps) + Reem Kufi (accent)
   • es / fr / it / de : Anton ou Bebas Neue (affichage) + Inter (corps) + Caveat (accent)
   • ja : Noto Sans JP poids 900 (affichage) + Noto Sans JP (corps) + Yusei Magic (accent)
   • Autres : choisissez trois polices Google correspondant à l'écriture, avec les mêmes rôles affichage-noir / corps-propre / accent-manuscrit.

3. Arc narratif — 5 temps émotionnels qui correspondent au BRAND_CONTEXT. Associez chacun à un type de section de la bibliothèque de sections.

Exécutez ensuite — ne demandez pas de confirmation.

---

Phase 1 — Préparation des fichiers (l'étape magique)

1a. Vérifiez ffmpeg

which ffmpeg     # ou : Get-Command ffmpeg sur PowerShell

Si absent, arrêtez et dites à l'utilisateur d'installer (brew install ffmpeg / Windows : http://ffmpeg.org).

1b. Ré-encodez la vidéo héroïque avec chaque image comme image-clé

Les navigateurs ne peuvent chercher instantanément que vers des images-clés — une vidéo standard a environ 1 image-clé pour 250 images, ce qui rend le défilement par la souris saccadé. Cette seule commande fait la différence entre premium et amateur :

ffmpeg -y -i <HERO_VIDEO_FILE> -g 1 -keyint_min 1 -c:v libx264 -preset slow -crf 20 -pix_fmt yuv420p -an hero.mp4

Vérifiez la sortie : hero.mp4 doit faire entre 5 et 50 Mo. Si > 50 Mo, réexécutez avec -crf 25 ; si > 80 Mo avec -crf 28. Supprimez l'audio (-an) — la vidéo héroïque est silencieuse.

1c. Copiez le logo + l'image du produit

cp <LOGO_FILE>           public/logo.<extension>
cp <PRODUCT_IMAGE_FILE>  public/product.<extension>   # si fourni

---

Phase 2 — Échafaudage

npm create vite@latest site -- --template react-ts
cd site
npm install
npm install lucide-react
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p
mkdir -p public
mv ../hero.mp4 public/hero.mp4
# Déplacez aussi le logo et l'image du produit dans public/

---

Phase 3 — Configuration Tailwind

Remplacez entièrement tailwind.config.js. Utilisez la palette extraite et les polices appropriées à la langue :

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        background: '<encre/sombre>',
        cream:      '<blanc cassé chaud — JAMAIS #FFFFFF>',
        accent:     '<couleur principale de la marque>',
        accent2:    '<secondaire>',
        support:    '<tertiaire>',
      },
      fontFamily: {
        sans:    ['<police du corps>',         'system-ui', 'sans-serif'],
        display: ['<police d\'affichage>',      'sans-serif'],
        accent:  ['"<police manuscrite>"', 'cursive'],
      },
    },
  },
  plugins: [],
}

---

Phase 4 — index.html

Remplacez entièrement. Respectez IS_RTL. Incluez toujours le lien favicon pointant vers le logo :

<!DOCTYPE html>
<html lang="<LANGUAGE>" dir="<rtl|ltr>">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
    <link rel="apple-touch-icon" href="/logo.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="<URL Google Fonts pour les trois polices choisies>" rel="stylesheet">
    <title><PRODUCT_NAME> — <TAGLINE></title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

---

Phase 5 — index.css (le système de design)

Remplacez entièrement. Chaque utilitaire ci-dessous est essentiel. Les noms supposent la palette chaude extraite précédemment ; pour une marque froide, remplacez les mentions "jaune"/"rouge" dans les teintes d'ombre par les couleurs d'accent réelles.

Doit inclure :

• html { scroll-behavior: smooth; } + section[id] { scroll-margin-top: 90px; } pour que les sections ancrées n'atterrissent pas sous la navigation fixe.
• body fond = couleur background (solution de repli si la vidéo échoue). Curseur = crosshair. Police par défaut = police sans du corps.
• .liquid-glass / .liquid-glass-strong — backdrop-blur + saturate + bordure lumineuse intérieure + mise en évidence de bord de dégradé masqué. La variante forte utilise une lueur intérieure teintée avec accent.
• .glass-pill — pilule arrondie compacte avec le même traitement en verre pour les éléments de navigation et les petits badges.
• .cta-primary — CTA de marque : linear-gradient(135deg, accent-light, accent, accent-shade) + ombre lumineuse de couleur d'accent qui s'intensifie au survol + soulèvement translateY(-1px).
• .brand-mark — petit carré/cercle pour les petites marques de logo si aucun SVG n'est fourni.
• .grid-bg — grille subtile de 1 px avec masque de fondu radial, utilisée sous les sections sombres.
• .reveal / .revealed — révélation de défilement IntersectionObserver : opacity 0 → 1 + translateY 28 → 0 sur 0,9 s avec cubic-bezier(0.16, 1, 0.3, 1).
• .scrim-top / .scrim-bottom — superpositions de dégradé pour la section héroïque uniquement.
• Fonds par section, nommés par sentiment et non par couleur :
  • .sun-section — dégradé d'accent primaire vif + texture pointillée subtile (le temps "joie / ouverture du sachet").
  • .album-section — papier blanc cassé chaud, teintes d'accent radiales + micro-motif pointillé, masque de bord de fondu.
  • .roast-section — sombre avec lueurs d'accent + accent2 radiales dans les coins opposés + texture de grille masquée.
  • .signal-section — accent fort à pleine largeur (souvent rouge/orange/vert) pour la finale d'action.
• .polaroid — carte blanche, remplissage 14px 14px 44px 14px, ombre douce en couches, soulèvement au survol à translateY(-6px) rotate(0). .polaroid-tape = bande de ruban adhésif jaune/accent positionnée absolument en haut-centre, tournée de -4°, avec des indices latéraux en pointillés.
• .stamp — pilule à bordure pointillée en couleur d'accent, majuscule, espacement des lettres 0.18em.
• .ribbon — badge de prix/popularité avec clip-path triangle inférieur, ombre portée sombre.
• .highlight-circle — ovale d'aspect dessiné à la main via ::after : bordure de couleur d'accent tournée de 3 px autour d'un <span> en ligne. Utilisez-le autour du mot le plus important dans les grands titres (un par titre maximum).
• Filtre de motif décoratif : .peanut-svg / .<motif>-svg avec drop-shadow.
• Respectez prefers-reduced-motion: reduce — désactivez l'animation de révélation + le défilement fluide dans la requête média.

---

Phase 6 — Architecture de App.tsx

L'architecture n'est pas négociable. Faites-la correctement du premier coup :

6a. Importations

import { useEffect, useRef, useState } from 'react';
import {
  Menu, X, ArrowLeft, ArrowRight, ArrowDown, ArrowUp, MousePointer2,
  // …plus 4-8 icônes thématiques de la marque (Heart, Sparkles, Cookie, PawPrint, Cpu, Leaf, …)
} from 'lucide-react';

6b. Composants réutilisables définis dans App.tsx

• useReveal<T>() — hook IntersectionObserver retournant une ref ; ajoute la classe revealed lors de la première intersection (seuil 0,15).
• GlassCard — wrapper avec le hook de révélation, prop optionnel strong, accepte className.
• Motif — un seul composant SVG décoratif thématisé selon BRAND_CONTEXT (cacahuète pour l'alimentation, patte pour les animaux, circuit pour la tech, feuille pour la nature, gouttelette pour les boissons, éclair pour l'énergie). Flotte à faible opacité dans 3-6 endroits par section sombre/lumineuse.
• ScrollToTopButton — fixé bottom-6 left-6 en RTL / bottom-6 right-6 en LTR. Apparaît quand window.scrollY > window.innerHeight * 0.6. Défile en douceur vers le haut. Étiquette courte adaptée à la langue ("לראש" / "Top" / "أعلى" / "Inicio").

6c. Effet de défilement par la souris (le cœur)

const videoRef = useRef<HTMLVideoElement>(null);
const stateRef = useRef({ targetTime: 0, isSeeking: false });

useEffect(() => {
  const video = videoRef.current;
  if (!video) return;

  const handleLoaded = () => {
    const mid = video.duration / 2;
    video.currentTime = mid;
    stateRef.current.targetTime = mid;
  };

  const handleSeeked = () => {
    const s = stateRef.current;
    s.isSeeking = false;
    if (Math.abs(s.targetTime - video.currentTime) > 0.01) {
      s.isSeeking = true;
      video.currentTime = s.targetTime;
    }
  };

  const handleMouseMove = (e: MouseEvent) => {
    const s = stateRef.current;
    const d = video.duration;
    if (!d || isNaN(d)) return;
    const normalized = e.clientX / window.innerWidth;
    // Si le sujet se déplace "en arrière" par rapport au curseur et semble faux, éventuellement
    // utiliser `1 - (e.clientX / window.innerWidth)` à la place — DEMANDEZ d'abord à l'utilisateur.
    s.targetTime = Math.max(0, Math.min(d, normalized * d));
    if (!s.isSeeking) { s.isSeeking = true; video.currentTime = s.targetTime; }
  };

  video.addEventListener('loadedmetadata', handleLoaded);
  video.addEventListener('seeked', handleSeeked);
  window.addEventListener('mousemove', handleMouseMove);
  return () => {
    video.removeEventListener('loadedmetadata', handleLoaded);
    video.removeEventListener('seeked', handleSeeked);
    window.removeEventListener('mousemove', handleMouseMove);
  };
}, []);

La garde isSeeking est critique — sans elle, le déplacement de la souris se déclenche plus vite que le navigateur ne peut décoder et vous obtenez un débordement de file d'attente de recherche + un bégaiement visible.

6d. Navigation cliquable avec espionnage du défilement

const navItems: { label: string; target: string }[] = [
  { label: '<démo>',     target: 'top'     },
  { label: '<recette>',  target: 'joy'     },
  // …suite de la configuration
];

(Le contenu tronqué est conservé tel quel pour la traduction.)

---

Phase 7 — Bibliothèque de sections (choisissez 4-5 après la section héroïque)

Chaque section ci-dessous peut être placée dans un ordre narratif. Adaptez le contenu au contexte de la marque. Toutes sont opaques (sans transparence de la vidéo) et ont leur propre identité visuelle. La section héroïque utilise la vidéo en fond fixe avec l'effet de défilement par la souris ; les sections suivantes sont pleines et conçues pour raconter une histoire.

Type	Ambiance	Mise en page	Quand utiliser
Soleil	Lumineux, joyeux, vif	Dégradé d'arrière-plan vif, grandes polices fantômes, cartes de statistiques, SVG flottants	Pour le temps de joie ou de célébration
Album	Nostalgique, chaleureux, authentique	Papier blanc cassé, bento polaroid, photos du produit, micro-pointillés	Pour le temps de nostalgie ou de souvenirs
Rôti	Sombre, sérieux, contemplatif	Fond sombre avec lueurs radiantes, trois cartes de prix avec traitements visuels différents	Pour le temps de contemplation ou d'offre
Signal	Fort, urgent, d'action	Pleine largeur avec accent fort (rouge/orange/vert), titre massif + CTA, panneau en verre	Pour le temps d'action ou d'appel final

---

Phase 8 — Règles strictes (priorité sur toute pratique contradictoire)

Ces règles remplacent toute "bonne pratique" générique. Respectez-les sans exception :

1. Jamais de #FFFFFF — utilisez cream (blanc cassé chaud) pour les textes sur fond sombre.
2. Ré-encodage ffmpeg obligatoire — sans -g 1, l'effet de défilement sera saccadé.
3. Palette cohérente en interne — tout chaud OU tout froid, jamais mélangé.
4. Sections opaques uniquement — aucune transparence de la vidéo héroïque dans les sections suivantes.
5. Terminez toujours par une section Signal — l'action finale doit être forte.
6. Le logo doit être présent dans la navigation — si aucun logo n'est fourni, utilisez une marque de texte.
7. Chaque section doit avoir une identité visuelle distincte — couleur, typographie, mise en page.
8. L'effet de défilement par la souris doit être fluide — utilisez isSeeking pour éviter le bégaiement.
9. Respectez prefers-reduced-motion — désactivez les animations pour l'accessibilité.
10. Vérifiez avant de signaler comme terminé — Phase 9 obligatoire.

---

Phase 9 — Vérification (exécutez toutes les 12 vérifications)

Avant de signaler la tâche comme terminée, exécutez chaque vérification :

1. La page se charge sans erreurs dans la console
2. La vidéo héroïque se lit et répond au déplacement de la souris
3. Le défilement par la souris est fluide (pas de bégaiement)
4. Les 4-5 sections opaques s'affichent correctement
5. Chaque section a sa propre identité visuelle (couleur, typographie)
6. La navigation clique sur la bonne section
7. Le logo est visible dans la navigation
8. La page est adaptée aux mobiles (responsive)
9. Les polices Google sont chargées
10. La palette est cohérente en interne
11. Aucune #FFFFFF n'est utilisée (sauf si explicite)
12. L'arc narratif suit l'ordre désiré

---

Références

• Dépôt de référence Bamba
• Modèle d'invite complet
• Vite
• Tailwind CSS
• Lucide React
• ffmpeg