# Motion Reel > Produit des vidéos animées HTML/CSS/JS au format vertical (9:16) pour Instagram Reels, TikTok ou Stories. Génère un fichier HTML autonome avec animations CSS séquencées, effets visuels modernes (dark glassmorphism, particules canvas, blur reveal, gradient animés, grain SVG) et scaling automatique au viewport. L'utilisateur screen-record le résultat dans Chrome pour obtenir sa vidéo finale. Utilise ce skill dès que l'utilisateur demande de créer un Reel, une Story, une vidéo verticale animée, du motion design pour les réseaux sociaux, une animation promotionnelle, ou une vidéo courte en HTML. Même si l'utilisateur ne mentionne pas explicitement "HTML" ou "motion-reel", utilise ce skill quand la demande implique une vidéo animée verticale pour les réseaux sociaux. - Skill: `lucasleduc/motion-reel` (Agent Skill, multi-file: 3 files) - Install (CLI): `npx skillmds@latest add lucasleduc/motion-reel` - Raw SKILL.md: https://api.skillmd.com/api/skills/lucasleduc/motion-reel/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: LucasLeduc (https://skillmd.com/u/lucasleduc) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/lucasleduc/motion-reel --- # 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; } ``` ```js 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 : ```css .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 : ```css .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 ```css .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) ```css @property --border-angle { syntax: ''; 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 ```css @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 ```html ``` 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 : | Critère | Check | |---------|-------| | **Scaling fonctionne** | Le wrapper utilise `position: absolute` + `translate(-50%, -50%) scale(X)` ? | | **Timing cohérent** | Les fadeIn/fadeOut ne se chevauchent pas de manière non intentionnelle ? | | **Texte lisible** | Chaque phrase a ≥ 2 secondes de visibilité ? | | **Effets adaptés au secteur** | Pas de particules pour un thérapeute ? Pas de glitch pour du luxe ? (cf. contre-indications) | | **Palette cohérente** | Les 3 couleurs (primaire, secondaire, fond) sont utilisées partout (orbes, glow, border, text) ? | | **CTA reste visible** | La dernière section n'a pas de fadeOut ? | | **Progress bar** | La durée de la barre = durée totale de la vidéo ? | | **Google Fonts** | Maximum 2 fonts chargées ? | | **Performance** | ≤ 80 particules ? ≤ 3 niveaux de backdrop-filter ? | | **Un seul fichier** | Tout est dans le HTML (CSS inline, JS inline, pas de fichier externe sauf Google Fonts CDN) ? | ### É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 | Plateforme | Ratio | Canvas | Durée recommandée | |-----------|-------|--------|-------------------| | Instagram Reel | 9:16 | 1080x1920 | 15-90s | | TikTok | 9:16 | 1080x1920 | 15-60s | | Instagram Story | 9:16 | 1080x1920 | 15s max par story | | YouTube Shorts | 9:16 | 1080x1920 | ≤60s | | Format carré | 1:1 | 1080x1080 | Variable | | Format paysage | 16:9 | 1920x1080 | Variable | --- ## 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.