explainer-default

Explainer par défaut

Une démo produit calme et premium, du genre que les startups bien financées mettent sur leur page d'accueil. Tout son secret repose sur la retenue : un canevas lumineux et aéré, une courte ligne de texte à la fois, et l'interface du produit elle-même, reconstruite proprement et filmée en gros plan pendant qu'on l'utilise. 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 frame à partir d'une valeur temporelle, puis vous la rendez en MP4 avec flou de mouvement et bande sonore.

Étape 1 : Obtenir le brief (un seul message, puis c'est parti)

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

1. Produit : nom, et ce qu'il fait en quelques phrases. Une URL de site web est encore mieux.
2. La chose que le spectateur doit retenir (ex. "tapez une idée, obtenez une app live").
3. Marque : couleurs, polices, fichier logo, ou "utiliser le site web". Si rien n'est fourni, utilisez la palette par défaut ci-dessous.
4. Format : 16:9 (1920×1080) ou 9:16 (1080×1920). Par défaut 16:9.
5. Durée : la durée par défaut est donnée ci-dessous pour ce style.
6. Musique : leur propre piste (un chemin de fichier), ou laissez-nous en synthétiser une. Par défaut : synthétiser.
7. Direction (optionnel) : scènes souhaitées, un slogan, un appel à l'action, tout ce qu'il faut éviter.

S'ils ont fourni 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 inventés sur les clients, le chiffre d'affaires, les notes, les témoignages ou les citations. Des chiffres seulement si l'utilisateur ou le site web les indique ; sinon, utilisez des barres relatives, des progressions et des lignes squelettes de substitution. 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, nombre d'utilisateurs, notes, offres comme "gratuit") ne le sont pas. Les appels à l'action utilisent uniquement une URL ou une offre fournie 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 sous forme de texte dans la police de la marque. Logos tiers (intégrations) uniquement s'ils sont fournis ; sinon, des tuiles rondes neutres avec le nom.

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

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

Durée	Fonctionnalités	Sections facultatives
45 s	2–3, environ 9 s chacune	preuve ou intégrations, pas les deux
60 s	3–4, environ 10 s chacune	une de preuve / 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'assemblent : chaque scène (une ligne de titre, un moment d'interface) est son propre calque avec sa propre caméra. À l'intérieur d'une scène, la caméra s'approche, suit et recule ; entre les scènes, le calque sortant se dissout avec un court flou (0,3–0,4 s) dans le suivant, qui est déjà en mouvement.

1. Ouverture (0–5 s). Canevas clair et uni. Un petit mot apparaît en fondu au centre : Introducing. Il se dissout dans le moment de marque : le dégradé doux de la marque entre en scène (bandes de lumière diagonales soyeuses dérivant lentement) avec le logo ou le nom centré, petit.
2. Le problème ou la demande (≈5 s). Une courte ligne que le spectateur reconnaît (Vous construisez encore 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'exemple, des puces de suggestion en dessous.
3. 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 couvre environ 75 % de la largeur du cadre, et un mot clé ou une courte phrase est mis en surbrillance : une boîte douce de la couleur de la marque balayant de gauche à droite derrière (Appelez le décideur. Directement.).
   • Le moment d'interface : la véritable interface du produit, reconstruite sous forme d'interface vectorielle propre (pas de captures d'écran), recadrée pour ne montrer que la partie importante et affichée en grand. La caméra est suffisamment proche pour que l'élément remplisse la majeure partie du cadre, et elle suit l'action : la saisie de texte dans le champ (la caméra suit le curseur ; mesurez le texte avec measureText pour savoir où il se trouve), les étapes d'un agent qui se cochent une par une (spinner → check, Trouvé 247 correspondances), les cartes de résultats qui s'empilent avec les plus éloignées floues (profondeur de champ), un tableau se remplissant ligne par ligne, le curseur cliquant sur un bouton de cellule et la valeur se révélant, une nouvelle colonne ajoutée et chaque cellule "réfléchissant" avec un scintillement avant que sa valeur n'apparaisse, une pop-up s'ouvrant 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.
4. Preuve (facultatif, uniquement des chiffres réels). Une phrase avec un nombre qui décompte, le nombre en surbrillance (Alimenté par une base de données de 300M+ profils), sur un globe ou une grille en pointillés subtile.
5. Intégrations (facultatif). Conçu pour votre workflow existant. au centre tandis que 8 à 12 tuiles d'applications (carrés arrondis, vrais logos uniquement s'ils sont fournis ; répétez les intégrations s'il y en a peu) flottent depuis les bords à différentes profondeurs : les plus proches sont plus grandes et légèrement floues, les plus éloignées sont petites et nettes, toutes dérivant avec un effet de parallaxe. Ici, le texte augmente de taille tout seul au lieu d'un zoom de caméra, afin que les tuiles restent dans le cadre.
6. Fermeture. Sur le dégradé de la marque : une phrase avec un mot clé en rotation qui parcourt les cas d'utilisation (Faites tout votre [prospection / recherche / outreach] dans Produit.), puis, uniquement si le produit en a vraiment un, une autre façon de l'utiliser (ex. Ou demandez simplement à Claude pour un produit avec un connecteur Claude), puis le slogan avec sa phrase clé en surbrillance.
7. Carte de fin (3 s). Logo ou nom sur le dégradé de la marque, URL ou appel à l'action petit en dessous.

Règles qui rendent le rendu 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 le cadre : scène de texte, puis scène d'interface.
• La caméra est le monteur. Pas de coupures franches. Chaque changement de scène est un mouvement de caméra (zoom avant, arrière, glissement) ou un flou-dissout doux 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 réelle, rendue propre. Reconstruisez l'interface du produit à partir de ce que vous en savez (ou de son site web) : sa disposition réelle, 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 constitué de données d'exemple 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 instant avant de cliquer, avec une légère impulsion d'enfoncement 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. Petit, poids régulier pour les lignes de titre (elles deviennent grandes grâce à la caméra, pas à la taille de police). Espacement serré des lettres sur 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 surbrillance = accent à 15–20 % d'opacité. Dégradé de marque : blanc → accent pâle → accent, sous forme de bandes de soie diagonales lentes (dessinez-les sur un canevas, pas avec un flou CSS). Les couleurs de la marque remplacent l'accent.
• Rythme : chaque ligne de titre tient environ 2 s après son arrivée ; 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, vitromorphisme partout, métriques ou témoignages inventés.

Son

Un fond sonore doux et upliftant à 100–110 BPM (piano doux ou accords de pizzicato, percussions légères entrant après l'ouverture, un uplift vers la fermeture), calme et chaleureux. Effets sonores discrets : ticks de frappe, clics doux, un léger "tick" par étape accomplie, un souffle doux sur les grands mouvements de caméra, un carillon léger sur la carte de fin. La musique doit rester en arrière-plan comme dans une bonne vidéo produit, sans la dominer.

Comment la page doit être construite

Un 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 animations CSS, pas de setTimeout, pas d'état conservé de l'image précédente. N'importe quelle image doit s'afficher correctement seule, 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 dans l'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 avec un retard, 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 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 atterrissage avec compression, 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 fait 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 sous forme de @font-face en base64, afin que le rendu ne tombe jamais silencieusement sur un fallback. Pour une morphose de poids, utilisez une police variable avec une plage ([email protected]).
• Calques : donnez aux calques de scène des arrière-plans transparents et laissez un arrière-plan de scène unique derrière eux fournir la couleur de base, afin qu'un calque ultérieur ne cache jamais accidentellement un précédent. Le texte positionné de manière absolue reçoit 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-les.

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, en ressortant 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 à travers [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);

• Frappe : la chaîne visible est full.slice(0, n(t)) avec un curseur clignotant à partir de t. Décomptes : 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 tout AudioContext ou OfflineAudioContext qui lui est 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 à graine) et des enveloppes. Si l'utilisateur a donné un fichier musical, chargez-le avec fetch + decodeAudioData, définissez la grille rythmique sur son tempo (mesurez-le), et ajoutez uniquement les effets par-dessus.
• Lecture d'aperçu : à la première lecture, rendez la bande sonore une fois dans un buffer, puis jouez à partir de n'importe quelle position. 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 une fois dans le dossier de travail

…

[formatage tronqué pour la traduction]