Vidéo explicative engageante

Une histoire visuelle en plan-séquence. Un élément héros unique (dans le style de référence, une balle blanche qui commence comme le bouton d'un interrupteur) traverse une chaîne de petites « stations » d'interface, et chaque station réagit à son passage : elle roule le long d'un curseur et le pousse à 100, tombe du bord et rebondit sur une pile de notifications qui apparaissent à son passage, atterrit sur un clavier et rebondit de touche en touche pour taper un mot, appuie sur Entrée et est relancée dans les airs. La caméra ne coupe jamais : elle garde le héros près du centre et effectue un zoom avant pour chaque interaction, et au point culminant, elle s'éloigne pour que le spectateur voie l'ensemble du parcours d'un coup, avant de replonger là où tout a commencé.

Pour un produit, les stations sont les étapes de son flux de travail, disposées spatialement sur un seul canvas, et le héros est la chose qui se déplace à travers ce flux de travail. Le zoom arrière est le moment « maintenant tu comprends comment ça marche ».

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

Étape 1 : Obtenir le brief (un seul message, puis allez-y)

Demandez tout dans un seul message, puis travaillez seul. 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 ce qu'il fait en quelques phrases. Une URL de site web est encore mieux.
La chose unique que le spectateur doit retenir (par ex. « tapez une idée, obtenez une application en direct »).
Marque : couleurs, polices, fichier logo, ou « utiliser 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 valeur par défaut est donnée ci-dessous pour ce style.
Musique : leur propre piste (un chemin de fichier), ou laissez-en synthétiser une. Par défaut : synthétiser.
Direction (optionnel) : scènes souhaitées, un slogan, un appel à l'action, tout ce qui peut être utile.

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

N'inventez jamais de faits. Pas de nombres de clients, de revenus, d'évaluations, de témoignages ou de citations inventés. Les chiffres uniquement si l'utilisateur ou le site web les indique ; sinon, utilisez des barres relatives, des progressions et des lignes de placeholder squelettiques. 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, évaluations, 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 par 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, des carreaux arrondis neutres avec le nom.

Demandez aussi (optionnel) : le flux de travail en 3-6 étapes (ce que l'utilisateur fait → ce que le produit fait → le résultat). S'ils ont donné une URL, déduisez-le du site.

Durée par défaut pour ce style : 12 secondes, boucle sans couture. Plage 10-30 (plus long = plus de stations, pas des stations plus lentes).

Étape 2 : Concevoir le parcours, puis construire

1. Choisir le héros

Le héros est un objet simple et lisible qui raconte l'histoire du produit, et il ne disparaît jamais ni n'est remplacé (il peut changer de forme un instant, puis revenir) : une balle/bouton (par défaut, fonctionne pour tout), un curseur de texte ou un curseur, un fichier ou une vignette de document, une bulle de message, une pièce ou une commande, un point de données. Il doit s'intégrer naturellement dans l'interface d'une station (un bouton, un pouce, une touche de clavier, une épingle).

2. Cartographier le flux de travail sur les stations

Chaque étape devient une station : un élément d'interface compact et réel avec lequel le héros interagit physiquement, et qui change visiblement à cause de cela. Inspirez-vous de ces mécaniques :

Mécanique	Le héros...	La station réagit
Interrupteur / bouton	est le bouton, ou le presse	s'allume, la couleur se remplit
Curseur / progression	roule le long de lui comme le pouce	la valeur monte dans une infobulle, la piste se remplit
Pile de notifications	tombe et rebondit sur chaque carte	chaque carte apparaît lorsqu'elle est touchée, avec un message qui raconte l'histoire
Clavier / saisie	rebondit de touche en touche	chaque touche s'enfonce, des lettres apparaissent dans le champ de saisie au-dessus
Liste / tableau	glisse le long des lignes	chaque ligne se met en surbrillance, se coche ou se trie
Graphique	devient le point de tête de la ligne	la ligne se dessine derrière lui, les barres montent à son passage
Chat	arrive en bulle	la réponse s'écrit
Bouton de déploiement / d'envoi	est propulsé par lui	une notification ou une URL apparaît

Les étiquettes et les messages des stations racontent l'histoire en quelques mots chacun, avec un peu d'esprit (la référence utilise Curseur · Atteint 100, Gravité · Quelque chose tombe, Messages · Et maintenant ?, puis tape recommencer). Pour un produit, écrivez-les à partir de son flux de travail réel (par ex. un outil de codage : invite tapée → Agent · Écrit 12 fichiers → progression → Aperçu · Prêt → Déployer appuyé → En direct sur monapp.app).

3. Disposer le monde

Placez les stations sur un seul grand canvas (environ 3× le cadre), dans l'ordre où le héros les visite, de sorte que le chemin zigzague (à droite le long du haut, vers le bas au milieu, à travers le bas). La gravité doit avoir du sens : les chutes vont vers le bas, les lancements vers le haut. Laissez l'emplacement de chaque station fixe pour toute la vidéo. Le monde est un canvas sombre avec une grille de points faible qui se déplace avec la caméra (c'est la grille qui rend les mouvements de la caméra lisibles).

4. Scripter le chemin du héros

La position du héros est une fonction pure du temps, construite à partir de segments entre points de contact (chaque contact est sur un temps fort) :

Roulement/glissement le long d'une station : position par ease ou un ressort le long de la piste ; la valeur de la station est dérivée de la position du héros.
Sauts et chutes entre les contacts : une parabole (x linéaire dans le temps, y = y0 + v·t + ½·g·t², résoudre v pour qu'il atterrisse sur le contact suivant au temps fort). Constante de gravité pour toute la vidéo.
Impacts : écrasement au contact (échelle 1.25 × 0.8 pendant environ 60 ms, retour par ressort), étirement le long de la vélocité en vol (jusqu'à 1.15 × 0.9), plus une petite poussée vers le bas de ce qui a été touché.
Le lancement : la dernière station propulse le héros vers le haut et en arrière vers le départ en un long arc, tandis que chaque station se réinitialise en sens inverse derrière lui (les valeurs diminuent, les notifications se ferment, la saisie s'efface) pour que la boucle se ferme. Exécutez l'arc de lancement en ralenti : choisissez d'abord la hauteur de l'apex que vous souhaitez (le sommet du parcours), ce qui fixe le temps de vol réel sous votre gravité, puis déformez le temps pour que ce vol remplisse la fenêtre de révélation, le plus lent à l'apex (souvent 5-10× là ; par ex. vitesse 1 − 0.9·sin(πu)^0.6 sur l'arc). Planifiez les réinitialisations des stations pendant la tenue de la révélation, après que le spectateur a vu l'ensemble du parcours, pas au moment du lancement.
Couture : placez le point de boucle à l'atterrissage du héros sur la première station. seek(durée) doit ressembler exactement à seek(0) ; l'écrasement de l'atterrissage et l'appui sur la touche apparaissent également au temps 0. Pour le son, rendez la bande-son à l'intérieur de buildAudio dans votre propre OfflineAudioContext légèrement plus long, repliez la fin au-delà de durée sur le début, et jouez ce buffer dans le contexte donné.
La gravité est de côté. Disposez les stations de sorte que les chutes aient un sens de côté : les cartes de notification forment un escalier (chaque carte décalée latéralement de plus que sa largeur, de sorte que le héros ne passe jamais à travers une), et le clavier est vu de face avec le héros sautant entre les touches en petits arcs.
L'emplacement vide : lorsque le héros faisait partie d'une station (un bouton, un pouce) et part, la station conserve un contour faible de l'emplacement qu'il a laissé, qui se remplit lorsque le héros revient.

5. La caméra

La caméra est la partie difficile ; faites-la correctement avant de peaufiner quoi que ce soit d'autre.

Suivi : cible de la caméra = un mélange de la position du héros (plus une avance d'environ 0.15 s de sa vélocité) et d'une ancre fixe pour la station actuelle, lissée par un ressort à amortissement critique (w ≈ 6) pour qu'elle ne tressaille jamais sur les impacts. Poids vers l'ancre d'environ 0.7 pendant une interaction (la station reste cadrée), 0.15 pendant les chutes et les sauts (le héros mène), 0.85 sur la tenue de la récompense. Le lissage a besoin d'historique, donc cuisez-le au chargement (voir le contrat de la page), en commençant au temps 0 à partir du cadrage fixe de la première station et en se mélangeant au suivi pendant les 0.8 premières secondes. Le héros ne quitte jamais la moitié centrale du cadre.
Zoom : serré pendant chaque interaction : la station remplit environ la moitié de la largeur du cadre et le héros fait 50-70 px à l'écran (en 1080p). Légèrement plus large pendant les chutes et les sauts pour que la station suivante soit déjà visible. Cadrez la station, pas le canvas vide.
La tenue de la récompense : avant le lancement, tenez le résultat final (la notification, l'URL en direct) pendant 0.4-0.6 s, complètement dans le cadre.
La révélation : au lancement, la caméra arrête de suivre et s'adapte à un cadrage fixe qui contient tout le parcours (environ 0.3×), avec une légère inclinaison 3D (perspective + rotateX de 15-25°) pour la profondeur. Tenez environ 1 s pendant que le héros traverse l'arc ; agrandissez le héros et donnez-lui un halo doux pour qu'il reste la chose la plus lumineuse et la plus visible (au moins 24 px à l'écran). Ensuite, plongez vers un cadrage fixe de la première station, chronométré pour que le héros y atterrisse au moment où la caméra arrive, et mélangez-vous de nouveau dans le suivi.
Flou de mouvement réel : le héros et le monde deviennent flous sur les mouvements rapides ; cela fait partie de l'apparence.

Apparence

Palette par défaut (sombre, style iOS) : canvas #0C0C0E, grille de points #1E1E22, surfaces #1C1C1F / #2C2C2E, texte #F2F2F7, secondaire #8E8E93, accent #0A84FF, héros blanc #FFFFFF. Les couleurs de la marque remplacent l'accent ; le héros reste la chose la plus lumineuse à l'écran. Une variante claire (canvas #F2F2F4, héros = accent) est acceptable si la marque est claire.
Interface système réaliste : interrupteurs, curseurs avec repères, cartes de notification avec un carré d'icône d'application, un titre, une ligne de corps et maintenant ; un clavier avec des touches et une touche Entrée. Police : style SF (Inter ou Geist).
Un curseur peut démarrer la chaîne (clique sur la première station) puis se retirer.
Interdit : coupes, fondus au noir, superpositions de texte qui expliquent ce qui se passe (les propres étiquettes des stations sont le seul texte), plus d'un héros, stations qui ne réagissent pas, physique qui semble flottante.

Son

Un groove minimal et serré à 110-120 BPM (kick doux, hats cliquetants, une basse pizzicato sourde), et les contacts du héros sont l'instrument principal : chaque impact joue une note courte et aiguë (marimba) (la hauteur monte au fur et à mesure que l'histoire avance), les pressions sur les touches cliquent, le mouvement du curseur joue des ticks fins qui s'accélèrent avec la valeur, les notifications émettent un pop doux, le lancement émet un whoosh vers le haut et la plongée un whoosh vers le bas. Chaque son tombe exactement sur son contact visuel.

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 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 (en secondes). Pas de transitions ou d'animations CSS, pas de setTimeout, pas d'état hérité de l'image précédente. Chaque image doit être rendue correctement seule, dans n'importe quel ordre. Mesurer la disposition à l'intérieur de seek (par ex. offsetLeft, measureText) est acceptable ; c'est déterministe.
L'aléatoire (grain, particules, bruit audio) provient d'un générateur ensemencé, 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 couture du style).
Boucles : seek(t) utilise t % duration ; les effets qui chevauchent la couture (un écrasement d'atterrissage, une queue de son) 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 d'aperçu ; la scène est exactement w × h en haut à gauche. Sans : 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 celles de la marque) et intégrez-les en tant que @font-face en base64, afin que le rendu ne retombe jamais silencieusement. Pour une transition de poids, utilisez une police variable avec une plage ([email protected]).
Couches : donnez aux couches de scène des fonds transparents et laissez un fond 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. 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 canvas une fois au chargement (ou en tant qu'image) et déplacez-les.

Aides : collez-les et construisez tout dessus

// réponse 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, en ressautant 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 à travers [a, b]
const rng = s => () => (s = (s +

…

[tronqué pour la traduction]

ClaudinNarsis/claude-video-skills

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

Demander à votre IA préférée

Documentation