Motion Reel — Vidéo animée HTML pour réseaux sociaux (V2)

Quand utiliser ce skill

Ce skill produit des vidéos animées sous forme de page HTML autonome. L'utilisateur ouvre le fichier dans Chrome, clique "play", et screen-record le résultat pour obtenir sa vidéo Instagram/TikTok/Story.

Cette approche est pertinente quand :

• L'utilisateur n'a pas de budget pour des outils motion (After Effects, etc.)
• Il veut un résultat professionnel et moderne rapidement
• Le contenu est principalement typographique + éléments graphiques (pas de footage vidéo)
• Le format cible est vertical 9:16

Fichiers de référence

Ce skill s'appuie sur 2 bases de données consultables à chaque étape :

• references/storyboards-templates.md — 6 templates de storyboard pré-construits par type de vidéo (Présentation services, Avant/Après, Éducatif/Tips, Citation, Lancement, Témoignage). Chaque template a sa structure, son timing et ses animations recommandées. Consulte ce fichier à l'Étape 2 pour structurer la timeline rapidement.
• references/palettes-effets.md — 6 palettes de couleurs par mood (Dark Premium, Warm Confidence, Neon Punch, Sage Minimal, Royal Gold, Ocean Calm) + combinaisons d'effets par intensité + typographies Google Fonts recommandées + contre-indications par effet. Consulte ce fichier à l'Étape 1 pour calibrer le style visuel.

Architecture technique

Canvas fixe + scaling JS

Le canvas de travail est en pixels fixes (1080x1920px pour du 9:16 Full HD) pour garantir des proportions parfaites et un rendu net à l'export. Un script JS le scale automatiquement au viewport du navigateur.

L'approche de scaling qui fonctionne (après plusieurs itérations et bugs corrigés) :

#reelWrapper {
    width: 1080px;
    height: 1920px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center;
}

function scaleToFit() {
    var w = document.getElementById('reelWrapper');
    if (!w) return;
    var s = Math.min(window.innerWidth / 1080, window.innerHeight / 1920) * 0.95;
    w.style.transform = 'translate(-50%, -50%) scale(' + s + ')';
}
scaleToFit();
if (document.fonts) document.fonts.ready.then(scaleToFit);
window.addEventListener('resize', scaleToFit);

Ce qui NE fonctionne PAS (erreurs commises et corrigées) :

• display: flex + justify-content: center + align-items: center sur le body avec un élément de 1080x1920px : le flex ne sait pas gérer un enfant plus grand que le parent, le contenu est poussé hors viewport
• overflow: hidden sur le body combiné avec flex centering : clippe le contenu de manière imprévisible
• transform: scale() SEUL sans translate(-50%, -50%) : le scale ne modifie pas la taille de layout de l'élément, il reste à 1080x1920 dans le flux et déborde

La clé : position: absolute + top: 50%; left: 50% + translate(-50%, -50%) scale(X) — c'est la seule combinaison fiable.

Structure HTML

body (100vw x 100vh, overflow hidden, bg noir)
└── #reelWrapper (1080x1920, absolute, JS-scaled)
    └── .reel (1080x1920, relative, overflow hidden)
        ├── SVG grain overlay (z:60, pointer-events:none)
        ├── Canvas particules (z:1, pointer-events:none)
        ├── Background layers (grid, orbes, z:0)
        ├── Progress bar (z:55)
        ├── Logo watermark (z:20)
        ├── Sections #s1 à #sN (z:10, absolute inset:0)
        │   └── Contenu animé de chaque section
        └── Start overlay (z:100, click-to-play)

Timeline CSS avec animation-delay

Chaque section a une durée définie. Les animations se déclenchent via animation-delay sur les enfants, et la section entière apparaît/disparaît avec deux animations chaînées :

.reel.running #s2 {
    animation: fadeIn 0.3s ease forwards 3.5s, fadeOut 0.5s ease forwards 8.5s;
}

Les éléments internes ont des delays séquencés à l'intérieur de la fenêtre de leur section :

.reel.running #s2 .service-card {
    animation: cardReveal 0.8s cubic-bezier(0.16,1,0.3,1) forwards 3.6s;
}
.reel.running #s2 .service-icon {
    animation: iconPop 0.7s cubic-bezier(0.16,1,0.3,1) forwards 4s;
}
.reel.running #s2 .service-title {
    animation: blurRevealSmall 0.6s ease forwards 4.5s;
}

Toute l'animation est contrôlée par la classe .running ajoutée au click sur l'overlay de démarrage. Pas de JavaScript pour l'animation elle-même (sauf les particules), tout est en CSS.

Calcul du timing

Consulte references/storyboards-templates.md pour les timings recommandés par type de vidéo.

Règles générales :

• Le hook (première section) est plus court (2-4s) car c'est du texte d'accroche
• Les sections de contenu sont plus longues (4-6s) pour laisser le temps de lire
• Le CTA final reste visible jusqu'à la fin (pas de fadeOut)
• Prévoir 0.5s de chevauchement entre le fadeOut d'une section et le fadeIn de la suivante
• Minimum 2 secondes de visibilité par phrase de texte

Effets visuels modernes (tendances 2025-2026)

1. Dark Glassmorphism

.service-card {
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 32px;
}

2. Animated gradient border (conic-gradient + @property)

@property --border-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.service-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 34px;
    padding: 2px;
    background: conic-gradient(
        from var(--border-angle, 0deg),
        transparent 40%,
        rgba(60,79,224,0.6) 50%,
        rgba(130,70,220,0.4) 55%,
        transparent 65%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

Note : @property est supporté par Chrome/Edge/Safari mais pas Firefox. Pour un screen-record dans Chrome, c'est parfait.

3. Blur reveal

@keyframes blurReveal {
    from { opacity: 0; filter: blur(12px); transform: translateY(40px); }
    to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

4. Système de particules Canvas

Canvas HTML5 avec particules flottantes connectées (style neural network) :

• Particules avec taille, vitesse et opacité aléatoires
• Pulsation via Math.sin()
• Halo lumineux (glow) autour de chaque particule
• Lignes de connexion entre particules proches (distance < 150px)
• 60 particules = bon équilibre densité/performance
• Démarre au click, tourne en requestAnimationFrame

5. SVG Grain Overlay

<svg class="grain-overlay" viewBox="0 0 1080 1920" preserveAspectRatio="none">
    <filter id="grain">
        <feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/>
    </filter>
    <rect width="100%" height="100%" filter="url(#grain)"/>
</svg>

Subtil (3-4% opacité), mix-blend-mode: overlay, toujours pointer-events: none et z-index haut.

6. Ambient orbs (aurora effect)

3 orbes minimum avec des durées d'animation différentes (10s, 12s, 15s). filter: blur(80px).

7. Shine sweep

Pseudo-élément balayant comme un reflet sur du verre. transform: skewX(-20deg).

8. Icon pop avec rotation

Rebond (overshoot à 1.08) + rotation pour un effet élastique vivant.

9. Glow ring sur les icônes

background: inherit + filter: blur(20px) + opacity: 0.4 pour un halo cohérent.

10. Progress bar glow

Barre d'avancement avec gradient animé + box-shadow glow.

Consulte references/palettes-effets.md §2 pour les combinaisons d'effets recommandées par intensité et les contre-indications par effet.

Workflow de production

Étape 1 : Brief

Consulte references/palettes-effets.md pour proposer une palette adaptée au secteur/mood.

Collecter auprès de l'utilisateur :

• Sujet : quel message/service/produit présenter
• Type de vidéo : présentation services, avant/après, tips, citation, lancement, témoignage (→ oriente le template de storyboard)
• Durée totale : 15s, 30s, 60s
• Palette : proposer une palette de references/palettes-effets.md adaptée au secteur. L'utilisateur peut personnaliser.
• Typo : Google Fonts (cf. combos recommandés dans la référence). Défaut : Space Grotesk + Inter.
• CTA : appel à l'action final + coordonnées
• Ton : instructif, punchy, humoristique, corporate...
• Plateforme cible : Instagram Reel, TikTok, Story, YouTube Shorts

Étape 2 : Storyboard

Consulte references/storyboards-templates.md pour sélectionner le template adapté au type de vidéo.

Définir le contenu de chaque section :

1. Hook — phrase d'accroche qui capte en < 3 secondes
2. Sections contenu — une idée par section, avec titre + description courte
3. CTA — message clé + action + coordonnées

Calculer le timing selon la durée totale et le template choisi. Présenter le storyboard à l'utilisateur avant de coder.

Étape 3 : Production HTML

Produire le fichier HTML unique avec :

• Structure wrapper + reel + sections
• Background layers (grid, orbs, particules, grain) — selon l'intensité choisie
• Contenu de chaque section avec classes appropriées
• Toutes les animations CSS avec les bons delays
• Script de scaling + système de particules (si applicable)
• Overlay de démarrage
• Palette de couleurs cohérente (remplacer les 3 valeurs partout)

Étape 4 : Auto-vérification

Avant de livrer, passe cette grille :

Étape 5 : Livraison

Livrer UN fichier HTML. Indiquer à l'utilisateur :

• Ouvrir dans Chrome (meilleur support CSS modernes)
• Plein écran (F11 ou Cmd+Shift+F)
• Lancer un screen-recorder (OBS, ScreenPal, ou natif OS)
• Cliquer play
• Couper + ajouter musique dans CapCut ou autre

Bonnes pratiques de performance

• Animer uniquement transform et opacity pour rester sur le GPU (sauf filter: blur inévitable)
• requestAnimationFrame et non setInterval pour les particules
• Canvas à la résolution du reel (1080x1920), pas du viewport
• Connexions particules en O(n²) — rester sous 80 particules
• backdrop-filter coûteux : max 2-3 niveaux de blur empilés

Adaptation des couleurs

Pour adapter à une autre marque, remplacer les 3 valeurs partout :

• Primaire : accents, bordures, glow
• Secondaire : gradients
• Fond : fond du reel

Consulter references/palettes-effets.md §4 pour les couleurs Le Requin Design.

Formats supportés

Règles transversales

• Un seul fichier HTML : tout est inline (CSS, JS, SVG). Seule exception : Google Fonts CDN.
• Chrome-first : optimiser pour Chrome (screen-record). @property, backdrop-filter, mix-blend-mode sont tous supportés.
• Références traçables : citer le template de storyboard utilisé (ex: "template §1 Présentation services") et la palette (ex: "palette §1 Dark Premium").
• Enrichissement : si une production génère un effet ou un pattern d'animation particulièrement réussi, proposer de l'ajouter à la documentation.
• Pas de over-engineering : si le contenu est simple (citation, 3 slides), utiliser l'intensité minimale. Les effets servent le message, pas l'inverse.