Explicateur haute énergie

Un morceau de hype de 12 à 20 secondes qui frappe comme un showreel. Toutes les demi-secondes, quelque chose atterrit sur le temps, mais cela ne donne jamais l'impression de coupures aléatoires, car une forme guide l'œil à travers chaque transition : une étincelle devient une ligne, la ligne inonde l'écran pour former le fond suivant, un point se détache et devient la balle autour de laquelle la scène suivante est construite.

Vous l'écrivez comme une seule page HTML qui rend chaque image à partir d'une valeur temporelle, puis vous la rendez en MP4 avec flou de mouvement et une bande sonore synthétisée.

Étape 1 : Obtenir le brief (un seul message, puis exécuter)

Demandez tout en un seul message, puis travaillez par vous-même. Seul le produit est requis ; pour tout ce qui est laissé vide, décidez vous-même et dites ce que vous avez choisi.

Produit : nom, et description en quelques phrases. Une URL de site web est encore mieux.
La chose que le spectateur doit retenir (ex. "tapez une idée, obtenez une application live").
Marque : couleurs, polices, fichier logo, ou "utilisez le site web". Si rien, utilisez la palette par défaut ci-dessous.
Format : 16:9 (1920×1080) ou 9:16 (1080×1920). Par défaut 16:9.
Durée : la durée par défaut est donnée ci-dessous pour ce style.
Musique : leur propre piste (un chemin de fichier), ou laissez-vous synthétiser. Par défaut : synthétiser.
Direction (optionnelle) : scènes souhaitées, un slogan, un appel à l'action, tout ce qui peut éviter des erreurs.

S'ils ont donné une URL, lisez-la (récupération web) pour obtenir le vrai wording, les fonctionnalités, les couleurs et les noms de polices du produit avant d'écrire quoi que ce soit. Utilisez leurs vrais mots pour les étiquettes d'interface et les slogans.

N'inventez jamais de faits. Pas de chiffres clients, revenus, notations, témoignages ou citations inventés. Des chiffres uniquement si l'utilisateur ou le site web les mentionne ; sinon, utilisez des barres relatives, des progressions et des lignes squelettes de placeholder. Le contenu d'exemple à l'intérieur de l'interface (une invite, un nom de fichier, un nom de projet, des prix sur un reçu) est acceptable et doit être crédible ; les affirmations sur le produit lui-même (statistiques, nombres d'utilisateurs, notations, offres comme "gratuit") ne le sont pas. Les appels à l'action n'utilisent qu'une URL ou une offre donnée par l'utilisateur ou le site web ; sans cela, terminez sur le nom et le slogan.

Logos. Utilisez un logo uniquement si l'utilisateur fournit le fichier ou s'il s'agit de son propre produit et qu'il l'a demandé. Sinon, écrivez le nom en texte dans la police de la marque. Les logos tiers (intégrations) uniquement s'ils sont fournis ; sinon, utilisez des tuiles arrondies neutres avec le nom.

Durée par défaut pour ce style : 15 secondes (128 BPM, 8 mesures). Plage 12–20.

Étape 2 : Planifier les scènes, puis construire

La structure (6–8 scènes de 1,5–3 s, sur une grille de 120–140 BPM)

Choisissez parmi ces types de scènes et mappez le produit dessus. Écrivez d'abord la feuille de rythme (scène, heure de début sur la grille de rythme, ce qui entre, ce qui sort, son).

Ouverture étincelle (sombre). Toile presque noire avec une grille faible. Une petite marque d'accentuation apparaît, pulse, s'étire en une fine ligne horizontale à travers le cadre avec une petite étiquette mono (produit / lancement — 2026), vacille une fois, puis la ligne s'étend verticalement en une inondation plein écran de la couleur d'accentuation. Cette inondation est le fond suivant.
Slam de marque. Le nom du produit en grotesque lourd, tout en majuscules, énorme, lettres révélées par des masques sur des temps de 1/16 consécutifs, un petit sous-titre mono au-dessus (INTRODUCING — 2026) et une ligne italique serif en dessous (ce que c'est, 2–4 mots). Le poids peut passer de fin à noir. Le point ou le point d'une lettre se détache et grandit en la forme qui commence la scène suivante.
Triplet cinétique. La proposition de valeur en trois mots ou phrases courts, deux temps chacun (trois pour un mot manuscrit, pour qu'il puisse être lu), chacun avec son propre traitement et son propre fond, échangés durement sur le temps (à l'intérieur de cette scène, les échanges sont le rythme, donc ils ne comptent pas comme des coupes) : sombre sur crème ; accent sur noir avec le mot répété comme un motif de contour remplissant le cadre ; blanc sur bleu électrique à l'intérieur de parenthèses de viseur avec une petite étiquette 1920 × 1080 ; un dernier mot en écriture manuscrite qui se dessine lui-même. Chaque mot entre avec un flou/glissement rapide et atterrit avec un léger dépassement.
Visuel signature. Un moment "comment ont-ils fait ça" qui symbolise le produit : un champ 3D de cubes ondulant depuis le centre (dessiné sur un canvas avec votre propre projection de perspective, coloré par hauteur avec la palette), un flux de particules génératif qui se condense en un anneau et éclate vers l'extérieur, ou une goutte liquide qui se transforme entre les formes. Choisissez celui qui correspond à l'idée du produit (blocs de construction → cubes, données/IA → particules, flexibilité → liquide). La caméra s'incline ou orbite lentement pendant qu'il joue.
Micro-moment produit. Une interaction réelle du produit sous forme de carte d'interface flottante, légèrement inclinée en 3D avec deux cartes fantômes empilées derrière : le curseur actionne un interrupteur, appuie sur le bouton principal, une barre de progression se remplit dans la couleur d'accentuation avec un pourcentage, le bouton devient Terminé ✓, un toast glisse en haut à droite. Utilisez les vraies étiquettes du produit.
Preuve (uniquement si des chiffres réels existent). Un grand compteur (+312% style, chiffres flous pendant qu'ils tournent), un anneau de donut, des barres décalées montant avec une barre d'accentuation, une ligne se dessinant par-dessus avec une infobulle. Pas de chiffres réels → sautez cette scène ou montrez les vraies capacités du produit sous forme de liste qui claque.
Pont liquide/morph. La forme de la scène précédente se réduit à un point, le point devient une impulsion d'anneau sur fond sombre, qui devient le point dans le logo.
Carte de fin (maintenir 2 s). Logo ou nom avec le point d'accentuation, un slogan en italique serif, une ligne mono trackée tapant lettre par lettre (la vraie URL ou l'appel à l'action si donné, ex. PRODUIT.COM ; sinon une courte ligne du brief), une règle fine.

Tous les produits n'ont pas besoin de chaque scène ; 6 fortes valent mieux que 8 faibles. Restez à une idée par scène.

Règles qui le rendent cher

Les transitions sont des objets, pas des coupes. Chaque scène passe à la suivante à travers une forme (inondation, balayage par une barre qui grandit, un point qui grandit pour devenir le fond suivant, un mot qui zoome à travers la caméra). Une coupe dure entre les scènes n'est autorisée que sur un temps fort, au maximum deux fois.
Tout atterrit sur la grille. Les grands changements sur les temps, la typographie sur des notes de 1/8 ou 1/16. Dépassez légèrement (z ≈ 0,6–0,7) pour les impacts, puis stabilisez.
Cadre HUD sur chaque scène : parenthèses de coin fines, SCÈNE 02 / 07 en haut à droite, une étiquette de catégorie en bas à gauche en petit mono (TYPE CINÉTIQUE, PRODUIT, DONNÉES), et un timecode courant en bas à droite avec un point rouge. Petit (12–14 px à 1080p) et environ 50% d'opacité ; cela doit ressembler à un viseur de caméra.
Texture : une douce vignette radiale sur chaque fond plat, un très subtil grain de film (prégénérez quelques tuiles de grain avec une graine au chargement et cyclez-les), et un vrai flou de mouvement.
Typographie : un grotesque lourd pour les slams (ex. Inter Tight 900 ou Archivo Black), un italique serif pour la ligne humaine (Instrument Serif italique), un mono pour le HUD et les légendes (JetBrains Mono ou Geist Mono). Si la marque a des polices, utilisez les leurs pour le nom et gardez le mono pour le HUD.
Palette par défaut : encre #0B0B10, accent #FF4F1A, crème #EDEBE4, bleu électrique #2F47FF, blanc. La couleur principale de la marque remplace l'accent et sa deuxième couleur remplace le bleu ; une marque à une seule couleur utilise une nuance profonde de sa couleur comme deuxième.
Interdit : looks de modèles stock, lueurs sur tout, emoji, plus de 3 couleurs dans une scène (sans compter le noir et blanc), texte plus petit que lisible en un coup d'œil, toute scène sans mouvement.

Son

128 BPM (ou la piste de l'utilisateur). Perçant : kick sur chaque temps, clap sur 2 et 4, une basse sub suivant les racines de la scène, un riser filtré dans le slam de marque et la carte de fin, un impact (boom grave + burst de bruit) sur chaque inondation, de courts blips tonals sur chaque mot tapé, un whoosh (balayage de bruit passe-bande) sur chaque transition portée, un doux ring-out sur la carte de fin. Mélangez la musique sous les hits.

Comment la page doit être construite

Un seul fichier HTML autonome (CSS et JS embarqués ; images uniquement si l'utilisateur les a fournies). Dessinez avec DOM + transformations CSS, SVG, ou un canvas plein écran, selon ce qui convient.

Le contrat de la page

window.VIDEO = {w, h, duration} et window.seek(t), une fonction pure du temps : elle définit chaque élément pour le temps t (secondes). Pas de transitions ou animations CSS, pas de setTimeout, pas d'état hérité de l'image précédente. Chaque image doit être rendue correctement par elle-même, dans n'importe quel ordre. Mesurer la disposition à l'intérieur de seek (ex. offsetLeft, measureText) est acceptable ; c'est déterministe.
L'aléatoire (grain, particules, bruit audio) provient d'un générateur avec graine, jamais de Math.random.
Tout ce qui a besoin d'un historique (une caméra qui suit un objet en mouvement, une simulation) est cuit une fois au chargement : parcourez-le de 0 à duration à 1/240 s, stockez les valeurs, et faites en sorte que seek les lise avec interpolation. Pour les boucles, commencez la simulation à partir de l'état où la boucle commence (voir la règle de jointure du style).
Boucles : seek(t) utilise t % duration ; les effets qui chevauchent la jointure (un écrasement d'atterrissage, une queue sonore) sont dessinés ou mixés aux deux extrémités.
Avec ?render dans l'URL : pas de contrôles, pas de mise à l'échelle de l'aperçu ; la scène est exactement w × h en haut à gauche. Sans cela : la scène est mise à l'échelle avec CSS pour s'adapter à la fenêtre et les contrôles d'aperçu sont affichés.
Polices : intégrez-les. Téléchargez les fichiers woff2 (Google Fonts ou ceux de la marque) et intégrez-les en base64 @font-face, pour que le rendu ne revienne jamais en silence. Pour un morphing de poids, utilisez une police variable avec une plage ([email protected]).
Couches : donnez aux couches de scène des arrière-plans transparents et laissez un seul arrière-plan de scène derrière elles fournir la couleur de base, pour qu'une couche ultérieure ne cache jamais une précédente par accident. Les textes positionnés de manière absolue reçoivent white-space: nowrap.
Vitesse : les grands filter: blur() CSS et les grands dégradés flous sont très lents à capturer. Dessinez les dégradés et les lueurs sur un canvas une fois au chargement (ou en tant qu'image) et déplacez-les.

Helpers : collez-les et construisez tout dessus

// réponse d'un pas de ressort amorti 0 -> 1. w = vitesse (8 lent, 14 normal, 22 vif), z = amortissement (1 = pas de dépassement)
function spring(t, w = 14, z = 0.82) {
  if (t <= 0) return 0;
  if (z >= 1) return 1 - Math.exp(-w * t) * (1 + w * t);
  const wd = w * Math.sqrt(1 - z * z);
  return 1 - Math.exp(-z * w * t) * (Math.cos(wd * t) + (z * w / wd) * Math.sin(wd * t));
}
// une valeur qui change de cible plusieurs fois, faisant un ressort vers chacune : track(start, [[time, value, w?, z?], ...]) -> f(t)
const track = (v0, keys) => t => { let v = v0, p = v0; for (const [tk, val, w, z] of keys) { v += (val - p) * spring(t - tk, w, z); p = val; } return v; };
// keyframes précis avec easing (meilleurs pour les mouvements de caméra) : kf([[t0, v0], [t1, v1, easeFn?], ...]) -> f(t)
const kf = keys => t => { if (t <= keys[0][0]) return keys[0][1]; for (let i = 1; i < keys.length; i++) { const [a, va] = keys[i - 1], [b, vb, e = ease] = keys[i]; if (t <= b) return lerp(va, vb, e((t - a) / (b - a))); } return keys[keys.length - 1][1]; };
const clamp = (x, a = 0, b = 1) => Math.min(b, Math.max(a, x));
const ease = x => (x = clamp(x), x < .5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2);   // easeInOutCubic
const lerp = (a, b, k) => a + (b - a) * k;
const seg = (t, a, b) => clamp((t - a) / (b - a));      // progression 0..1 de t dans [a, b]
const rng = s => () => (s = (s + 0x6D2B79F5) | 0, s = Math.imul(s ^ (s >>> 15), 1 | s), s ^= s + Math.imul(s ^ (s >>> 7), 61 | s), ((s ^ (s >>> 14)) >>> 0) / 4294967296);

Saisie : la chaîne visible est full.slice(0, n(t)) avec un curseur clignotant à partir de t. Compteurs : formatez lerp(a, b, ease(seg(t, …))).
Une caméra est un élément wrapper avec transform: translate() scale() rotate() piloté par kf ou track.

Son

window.buildAudio(ctx) planifie toute la bande sonore (musique + effets) à partir du temps 0 sur le AudioContext ou OfflineAudioContext donné, en utilisant les mêmes numéros de timeline que les visuels. Synthétisez avec des oscillateurs, du bruit filtré (à partir d'un buffer avec graine) et des enveloppes. Si l'utilisateur a donné un fichier musical, chargez-le avec fetch + decodeAudioData, définissez la grille de rythme sur son tempo (mesurez-le), et ajoutez uniquement les effets par-dessus.
Lecture d'aperçu : lors de la première lecture, rendez la bande sonore une fois dans un buffer, puis lisez à partir de n'importe quelle position défilée. L'horloge pilote seek :

let buf, ac, src, startAt = 0, offset = 0, playing = false;
async function play() {
  ac ??= new AudioContext();
  if (!buf) { const off = new OfflineAudioContext(2, Math.ceil(48000 * VIDEO.duration), 48000); await buildAudio(off); buf = await off.startRendering(); }
  src = ac.createBufferSource(); src.buffer = buf; src.connect(ac.destination);
  src.start(0, offset % VIDEO.duration); startAt = ac.currentTime; playing = true;
}
function pause() { if (!playing) return; offset += ac.currentTime - startAt; src.stop(); playing = false; }
function now() { return playing ? (offset + ac.currentTime - startAt) % VIDEO.duration : offset; }
(function loop() { seek(now()); requestAnimationFrame(loop); })();   // le défileur définit offset (pause, set, play)

Mettez la feuille de rythme en commentaire en haut du script : une ligne par moment avec son heure, ce qui se passe, et quel son.

Étape 3 : Vérifier, rendre, livrer

Configurez une fois dans le dossier de travail : npm i playwright, puis npx playwright install chromium si Chromium n'est pas encore installé ; ffmpeg doit être sur le PATH. Sauvegardez le script en bas de ce fichier en tant que render.mjs.

Images fixes. node render.mjs demo.html check.png --stills 0.5,1.2,… avec une heure par ligne de la feuille de rythme (la feuille est à taille lisible, 3 par ligne). Regardez-la. Corrigez tout ce qui est coupé, superposé, illisible, hors marque, mal cadré ou vide. Vérifiez à nouveau.
Brouillon. node render.mjs demo.html draft.mp4 30 1 4 (rapide : 30 fps, pas de flou de mouvement, 4 workers parallèles ; définissez le dernier nombre sur le nombre de cœurs de la machine). C'est la copie de révision : envoyez-la à l'utilisateur avec le HTML et demandez des modifications avant la finale.
Finale. node render.mjs demo.html demo.mp4 60 8 8. Le flou de mouvement multiplie le temps de rendu par le nombre de sous-images ; un rendu final de 60 s peut prendre 20 à 60 minutes sur un ordinateur portable, alors dites-le avant de commencer. Le rendu final utilise 60 fps, 8 sous-images de flou de mouvement, et 8 workers parallèles pour la vitesse.

ClaudinNarsis/claude-video-skills

Qu'est-ce que claude-video-skills ?

Demander à votre IA préférée

Documentation