Explainer par défaut

Une démonstration produit calme et haut de gamme, comme celle qu'une startup bien financée met sur sa page d'accueil. Son truc est la retenue : un canevas clair et aéré, une ligne de texte courte à la fois, et l'interface réelle du produit, reconstruite proprement et filmée en gros plan pendant son utilisation. La caméra raconte l'histoire : elle s'approche d'une ligne de texte, suit la frappe, recule pour révéler le résultat, et glisse vers la fonctionnalité suivante.

Vous l'écrivez comme une seule page HTML qui rend n'importe quelle image à partir d'une valeur de temps, puis la rendez en MP4 avec flou de mouvement et bande sonore.

Étape 1 : Obtenir le brief (un message, puis aller)

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

Produit : nom, et ce qu'il fait en quelques phrases. Une URL de site web est encore mieux.
La chose unique dont le spectateur doit se souvenir (par exemple « tapez une idée, obtenez une application en direct »).
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 vous laissez la synthétiser. Par défaut : synthétiser.
Direction (optionnel) : scènes qu'ils veulent, un slogan, un appel à l'action, tout ce qu'il faut éviter.

S'ils ont donné une URL, lisez-la (récupération web) pour connaître 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 nombres de clients, revenus, notes, témoignages ou citations fabriqués. Les nombres uniquement si l'utilisateur ou le site web les indique ; sinon utilisez des barres relatives, des barres de progression et des lignes de placeholder squelettes. Le contenu exemple à l'intérieur de l'interface utilisateur (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, notes, offres comme « gratuit ») ne le sont pas. Les appels à l'action utilisent uniquement 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. Logos tiers (intégrations) uniquement si fournis ; sinon, des tuiles rondes neutres avec le nom.

Demandez aussi (optionnel) : les 3–5 fonctionnalités ou étapes de flux de travail à montrer, et tout ce à quoi le produit se connecte (intégrations). S'ils ont donné une URL, prenez-les depuis le site.

Durée par défaut pour ce style : 60 secondes. Plage 45–90. Budget par durée (supprimez d'abord les sections optionnelles) :

Durée	Fonctionnalités	Sections optionnelles
45 s	2–3, environ 9 s chacune	preuve ou intégrations, pas les deux
60 s	3–4, environ 10 s chacune	une des preuves / intégrations
90 s	4–5, environ 12 s chacune	les deux

Étape 2 : Écrire le script, puis construire

La structure

Écrivez d'abord le script et la feuille de rythme : chaque ligne de texte à l'écran, quel moment d'interface la suit, et son heure ; additionnez les temps par rapport au budget ci-dessus. Le texte à l'écran est la seule « voix », donc il doit raconter l'histoire tout seul.

Comment les scènes et la caméra s'articulent : chaque scène (une ligne de titre, un moment d'interface) est sa propre couche avec sa propre caméra. À l'intérieur d'une scène, la caméra pousse, suit et recule ; entre les scènes, la couche sortante se dissout avec un court flou (0,3–0,4 s) dans la suivante, qui est déjà en mouvement.

Ouverture (0–5 s). Canevas clair. Un petit mot apparaît au centre : Introduction. Il se dissout dans le moment de marque : le dégradé de marque doux apparaît (bandes de lumière diagonales soyeuses dérivant lentement) avec le logo ou le nom centré, petit.
Le problème ou la demande (≈5 s). Une courte ligne que le spectateur reconnaît (Encore en train de construire des listes de prospects à la main ?), ou allez directement à l'entrée du produit : une grande zone de saisie arrondie, vide avec un texte d'espace réservé, des chips de suggestion en dessous.
Chapitres de fonctionnalités (3–5, environ 8–15 s chacun). Chacun est :
- Une ligne de titre : une courte phrase, petite (environ 28 px en 1080p), centrée sur le canevas clair. Elle tape ou apparaît mot par mot. Ensuite, la caméra s'approche de la ligne jusqu'à ce qu'elle occupe environ 75% de la largeur de l'image, et un mot clé ou une courte phrase est mis en évidence : une boîte de couleur de marque douce balayant de gauche à droite derrière (Appelez le décideur. Directement.).
- Le moment d'interface : l'interface réelle du produit, reconstruite en interface vectorielle propre (pas de captures d'écran), recadrée uniquement sur la partie importante et affichée en grand. La caméra est suffisamment proche pour que l'élément remplisse la majeure partie de l'image, et elle suit l'action : texte tapé dans l'entrée (la caméra suit le curseur ; mesurez le texte avec measureText pour savoir où il se trouve), les étapes de l'agent qui se cochent une par une (spinner → coche, 247 correspondances trouvées), les cartes de résultats qui s'empilent avec les plus éloignées floues (profondeur de champ), un tableau qui se remplit ligne par ligne, le curseur qui clique sur un bouton de cellule et la valeur qui se révèle, une nouvelle colonne ajoutée et chaque cellule « réfléchit » avec un scintillement avant que sa valeur n'apparaisse, un popover qui s'ouvre avec le raisonnement et les sources.
- Le recul : après l'action, la caméra s'éloigne doucement pour montrer tout l'écran un instant, afin que le spectateur comprenne où il se trouve, puis glisse vers la suite.
Preuve (optionnel, uniquement des nombres réels). Une phrase avec un nombre qui compte, le nombre mis en évidence (Alimenté par une base de données de plus de 300M de profils), sur un globe ou une grille subtile en pointillés.
Intégrations (optionnel). Construit pour votre flux de travail existant. au centre tandis que 8–12 tuiles d'applications (carrés arrondis, logos réels uniquement si fournis ; répétez les intégrations si elles sont peu nombreuses) flottent depuis les bords à différentes profondeurs : les plus proches plus grandes et légèrement floues, les plus éloignées petites et nettes, toutes dérivant avec un effet de parallaxe. Ici, le texte s'agrandit tout seul au lieu d'une poussée de caméra, de sorte que les tuiles restent dans l'image.
Fermeture. Sur le dégradé de marque : une phrase avec un mot mis en évidence qui tourne en boucle sur les cas d'utilisation (Faites tout votre [prospection / recherche / sensibilisation] dans Produit.), puis, uniquement si le produit en a vraiment un, une autre façon de l'utiliser (par exemple Ou demandez simplement à Claude pour un produit avec un connecteur Claude), puis le slogan avec sa phrase clé mise en évidence.
Carte de fin (3 s). Logo ou nom sur le dégradé de marque, URL ou appel à l'action petit en dessous.

Règles qui le rendent premium

Une chose à la fois. Jamais plus d'une ligne de texte plus un élément d'interface à l'écran. Texte et interface ne partagent presque jamais l'image : scène de texte, puis scène d'interface.
La caméra est le monteur. Pas de coupes franches. Chaque changement de scène est un mouvement de caméra (zoom avant, zoom arrière, glissement) ou une dissolution-floue douce sur le canevas clair. Les mouvements de caméra sont des easing doux (ease sur 0,6–1,2 s) ou des ressorts fortement amortis (z ≥ 0,95) ; rien ne rebondit.
Interface utilisateur réelle, rendue propre. Reconstruisez l'interface du produit à partir de ce que vous en savez (ou de son site web) : sa vraie disposition, ses étiquettes, ses couleurs, ses polices et ses rayons de coins, simplifiés pour ce dont la scène a besoin. Le contenu à l'intérieur est un exemple de données crédibles qui correspondent au produit. Ombres douces, bordures de 1 px, espaces blancs généreux.
Curseur : une flèche macOS normale, se déplaçant sur des courbes douces, arrivant un temps avant de cliquer, avec une petite pression et une ondulation douce sur le contrôle cliqué. Les états de survol changent.
Typographie : la police de la marque si connue ; sinon Inter ou Geist. Petite, poids normal pour les lignes de titre (elles deviennent grandes grâce à la caméra, pas à la taille de la police). Espacement serré pour les grands textes.
Palette par défaut : canevas #F7F7F8, texte #111114, secondaire #8A8A94, surfaces d'interface blanches avec bordures #E7E7EC, accent de marque #2E6BFF, boîte de mise en évidence = accent à 15-20% d'opacité. Dégradé de marque : blanc → accent pâle → accent, comme des bandes de soie diagonales lentes (dessinez-les sur un canevas, pas avec un flou CSS). Les couleurs de marque remplacent l'accent.
Rythme : chaque ligne de titre reste environ 2 s après son apparition ; les moments d'interface se déroulent à vitesse réelle (frappe à environ 25 caractères par seconde), avec des pauses de 0,5 s après chaque résultat pour que le spectateur puisse le lire.
Interdit : arrière-plans chargés derrière l'interface, plus d'une couleur d'accent, easing rebondissant, emoji, grandes ombres portées, glassmorphism partout, mesures ou témoignages inventés.

Son

Un lit doux et entraînant à 100–110 BPM (piano doux ou accords pincés, percussion légère entrant après l'ouverture, une montée dans la fermeture), calme et chaleureux. Effets sonores petits : clics de touches pendant la frappe, clics doux, un léger « tic » par étape terminée, un « whoosh » doux sur les grands mouvements de caméra, un carillon doux sur la carte de fin. La musique doit rester en arrière-plan comme dans une vidéo produit bien faite, pas la conduire.

Comment la page doit être construite

Un seul fichier HTML autonome (CSS et JS en ligne ; images uniquement si l'utilisateur les a fournies). Dessinez avec DOM + transformations CSS, SVG, ou un canevas 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 d'animations CSS, pas de setTimeout, pas d'état conservé de l'image précédente. Chaque image doit se rendre correctement seule, dans n'importe quel ordre. Mesurer la disposition à l'intérieur de seek (par exemple offsetLeft, measureText) est correct ; c'est déterministe.
Le caractère aléatoire (grain, particules, bruit audio) provient d'un générateur à graine, jamais Math.random.
Tout ce qui nécessite 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, démarrez la simulation à partir de l'état dans lequel 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 à l'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 : incorporez-les. Téléchargez les fichiers woff2 (Google Fonts ou ceux de la marque) et intégrez-les en base64 @font-face, afin que le rendu ne retombe jamais silencieusement sur une police de secours. Pour une variation 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 arrière-plan de scène unique derrière elles fournir la couleur de base, afin qu'une couche ultérieure ne cache jamais accidentellement une couche antérieure. Le texte positionné en absolu obtient 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 canevas une fois au chargement (ou sous forme d'image) et déplacez-le.

Aides : 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, bondissant 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 avec easing précis (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 n'importe quel AudioContext ou OfflineAudioContext qui lui est donné, en utilisant les mêmes numéros de chronologie que les visuels. Synthétisez avec des oscillateurs, du bruit filtré (à partir d'un tampon à graine) et des enveloppes. Si l'utilisateur a donné un fichier musical, chargez-le avec fetch + decodeAudioData, définissez la grille de beats sur son tempo (mesurez-le), et ajoutez uniquement les effets par-dessus.
Lecture de l'aperçu : à la première lecture, rendez la bande sonore une fois dans un tampon, puis jouez à 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 curseur définit offset (pause, set, play)

Mettez la feuille de rythme sous forme de 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

Configuration unique dans le dossier de travail

...

[truncated for translation]

ClaudinNarsis/claude-video-skills

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

Demander à votre IA préférée

Documentation