ccvideo — Vidéos promotionnelles de produits de type Claude

ccvideo — Vidéos promotionnelles produit de type Claude

Vous produisez une courte vidéo promotionnelle (20–45 s, 1920×1080 @ 30 ips) dans le langage visuel des vidéos de lancement d'Anthropic Claude : une toile de fond chaude couleur terre cuite, une fenêtre de terminal macOS exécutant une session Claude Code, du texte qui se tape et défile, de brefs mouvements de caméra entre des cadrages verrouillés, des cartes titres en police serif.

Prérequis

1. Un projet Remotion doit exister. Si ce n'est pas le cas, en créer un : npx create-video@latest --yes --blank --no-tailwind . puis npm i.
2. Paquets (installer avec npx remotion add <pkg> pour que les versions concordent) : @remotion/google-fonts, @remotion/transitions, zod (déclarez zod explicitement — la bibliothèque l'importe directement ; ne comptez pas sur le fait qu'il soit une dépendance transitive).
3. La bibliothèque de composants doit exister à src/ccvideo/. Si ce n'est pas le cas, copiez tous les fichiers du répertoire templates/ de cette compétence vers src/ccvideo/. Ne réécrivez pas ces composants à partir de zéro.
4. Les outils de capture/vérification doivent exister dans scripts/ à la racine du projet. Si ce n'est pas le cas, copiez le répertoire scripts/ de cette compétence (incluant scripts/lib/) à cet endroit. Tous les scripts résolvent captures/ par rapport au répertoire depuis lequel vous les exécutez, exécutez-les donc toujours depuis la racine du projet.

Vérité terrain (règles de contenu non-négociables)

Le contenu vidéo n'est jamais écrit à la main dans les composants de scène. Chaque fait montré — nombres, chemins, points d'accès, sorties de commandes, compteurs de lignes — doit provenir d'une capture de quelque chose qui a réellement été exécuté :

• Chaque vidéo a un répertoire captures/<name>/ contenant les artefacts bruts (réponses API, événements de session extraits) ainsi qu'un props.json construit à partir d'eux de manière déterministe. props.json est la source de vérité unique que la composition rend.
• Capture d'abord. Avant de réaliser la vidéo, exécutez la chose réelle :
  • node scripts/capture-xapi-cli.mjs — données X en direct via la CLI xapi (npx xapi-to, clé dans ~/.xapi/config.json ; la compétence xapi dans .agents/skills/xapi/ documente toutes ses capacités).
  • node scripts/capture-x-user.mjs — variante X API officielle (nécessite X_BEARER_TOKEN ; --sample écrit des données factices avec raw-meta.json marqué sample: true — ne publiez jamais une capture d'exemple).
  • node scripts/transcript-to-props.mjs <session.jsonl> --prompt-match <str> --out captures/<name> — rejoue un tour réel d'une session Claude Code (les transcriptions se trouvent dans ~/.claude/projects/<project-slug>/*.jsonl).
  • Nouvelle source de données ? Écrivez un nouveau script de capture suivant le même schéma : récupérer la réalité → sauvegarder le brut → construire les props via un constructeur déterministe partagé dans scripts/lib/.
• Vérifiez avant de publier : node scripts/verify-props.mjs captures/<name> reconstruit les props à partir des artefacts bruts et échoue en cas d'édition manuelle. Corrigez en recapturant, jamais en éditant props.json.
• Limite de relecture honnête : le rythme est une performance (vitesse de frappe, temps de spinner), mais la capacité doit être réelle — la vidéo ne peut montrer que ce que l'exécution capturée a réellement fait. Cela s'étend au chrome : les faits d'en-tête de session (version de Claude Code, répertoire de travail) proviennent de la capture (claude --version, vrai cwd) ou l'en-tête est omis ; le compteur de jetons du spinner n'est rendu que lorsque la capture fournit une valeur réelle de thinkingTokens (sinon, uniquement les secondes). Les captures d'exemple échouent directement à verify-props (--allow-sample existe uniquement pour les tests de pipeline).
• Les captures visent à pouvoir être commitées en toute sécurité, avec une défense en profondeur — pas une garantie : transcript-to-props ne persiste que les entrées que la vidéo utilise réellement (les lignes affichées des événements sélectionnés + leurs compteurs, une sortie de commande tronquée, les lignes de puces du résumé), nettoie les chaînes ressemblant à des secrets (clés API, Bearer tokens, identifiants d'URL, champs de mot de passe env/JSON, clés privées), et réécrit les chemins d'accueil normaux et aplatis en slug en ~ — le tout avant que les props soient construites, de sorte que les props, la vidéo et les archives brutes voient un contenu expurgé identique. Les listes de motifs ne peuvent jamais être complètes : examinez toujours une capture avant de la commiter, et considérez tout avertissement de rédaction comme un signal d'arrêt.

Flux de travail

1. Capture d'abord (voir Vérité terrain) : produisez captures/<name>/props.json à partir d'une exécution réelle.
2. Feuille de rythme à partir de la capture. Le texte de présentation (titres de cartes, mot de réflexion) se trouve dans les constantes/drapeaux du script de capture — choisissez l'unique prompt, le temps de code, la sortie d'exécution, les puces du résumé. Visez l'arc classique : code → créé → exécuté+sortie → résumé.
3. Composez : enregistrez une <Composition> dans src/Root.tsx en utilisant GroundedVideo de src/ccvideo avec schema={groundedVideoSchema}, defaultProps importé du props.json de la capture, et calculateMetadata dérivant la durée via groundedVideoDuration — les durées suivent le contenu automatiquement. Un travail de scène personnalisé au-delà de l'arc standard : construisez avec les primitives de la bibliothèque, mêmes règles.
4. Vérifiez avec des images fixes avant de déclarer terminé. Rendez une image fixe par temps : npx remotion still <CompId> --frame=<n> --scale=0.5 out.png et regardez-les. Vérifiez : rien de coupé par la fenêtre du terminal (un avertissement de débordement [ccvideo] dans la sortie du rendu signifie qu'il faut tailler les temps), le timing semble sans hâte, les couleurs correspondent à la palette.
5. Exécutez node scripts/verify-props.mjs captures/<name>, puis prévisualisez avec npx remotion studio --no-open ; rendu final avec npx remotion render <CompId> out/<CompId>.mp4 (ajoutez --props=captures/<name>/props.json pour rendre une capture différente sans toucher au code ; ajoutez --scale=2 pour un master 4K comme les démos officielles — les compositions restent en 1920×1080 @ 30 ips dans le code).

Deux thèmes

Choisissez selon le produit, les deux partagent la marque terre cuite #D97656/#D97757 :

• Terracotta (par défaut) — toile chaude, session REPL Claude Code. Pour des histoires d'agent/flux IA. Composants : GroundedVideo/DataSession.
• Dark (la grammaire de démo CLI ant) — toile quasi noire #0B0B0B, terminal noir chaud #181716 séparé seulement par une bordure subtile, invite de shell ▶ ~/dir > (flèche #8B92C9, chevron #5FA97B), serif crème #D6D4CF. La structure est chapitrée : carte de marque pixel-logo → [carte interstitielle (tape mono + fine séparatrice + revendication serif) → temps de shell frais (taper une vraie commande, sortie réelle apparaît, invite idle revient)] par chapitre → outro de marque. Pour les produits CLI/outils développeur. Composants : DarkVideo/ShellBeat/InterstitialCard/WordmarkCard, palette dark dans theme.ts, schéma darkVideoSchema (construit à partir de captures comme le thème clair — par exemple props-dark.json écrit par capture-xapi-cli.mjs, vérifié par verify-props.mjs).

Le look (règles de style non-négociables)

• Toile #CC7D5D, terminal #2B2C36, barre de titre #3A3634. Texte du corps #E3E4EB, atténué #9899A1, commentaires #6C6E6A, numéros de ligne #83848C. Accents : pervenche #B8B9F2 (chemins, code en ligne, chaînes), sarcelle #85BEC5 (mots-clés), or #F2C43D (flèches de statut). Tous définis dans src/ccvideo/theme.ts — importez, jamais de codage en dur.
• Polices : JetBrains Mono pour tout ce qui est terminal, Source Serif 4 pour les cartes titres. Chargées dans theme.ts via @remotion/google-fonts, avec Noto Sans SC déjà ajouté comme fallback CJK pour les deux piles — les prompts en chinois sont rendus directement.
• Fenêtre de terminal 1560×950 centrée (985 lorsqu'un en-tête header de session est affiché ; thème dark 1860×1010), rayon de 14 px, ombre douce et profonde, trois feux de circulation, texte de barre de titre monochrome qui reflète la tâche, par exemple dev — · Implémente X — claude — 106×31.
• La session Claude Code doit avoir l'air réelle : ligne d'entrée > au-dessus d'une barre de statut dorée ⏵⏵ mode auto activé (shift+tab pour cycler) · esc pour interrompre (les deux toujours visibles, épinglés en bas) ; un spinner ✻ Cogitation… dans un emplacement de hauteur fixe juste au-dessus de la ligne d'entrée ; des puces de résultat d'outil ● ; un bloc de code numéroté se terminant par … +N lignes (ctrl+o pour développer) ; un résumé gras Ce qu'il fait avec des puces -.
• Caméra : pas de zoom ou de panoramique soutenu sur les scènes de terminal, jamais — une mise à l'échelle fractionnée lente fait dériver et nager visiblement les petits textes mono. Le seul mouvement de caméra autorisé est <CutZoom> : des déplacements brefs et fortement atténués (~0,6 s) entre des cadrages autrement verrouillés — poussez dans le contenu dense, maintenez, reculez pour la révélation. Le texte ne peut être à mi-échelle que pendant un déplacement rapide délibéré, jamais pendant des secondes. Gardez la même origin sur le recul que sur la poussée pour que cela ne ressemble pas à un glissement latéral. DataSession applique cela automatiquement autour du temps run. <SlowZoom> reste réservé aux cartes titres.
• Chrome d'authenticité de session (tous pilotés par schéma, tous optionnels) : header (logo pixel + Claude Code vX + ligne modèle/cwd, toujours visible), windowTitleIdle → bascule windowTitle à la soumission du prompt, écho du prompt comme bloc surligné, spinner avec compteurs en direct (Ns · ↓ N tokens) et une ligne ⎿ Astuce : optionnelle, barre de statut qui ajoute esc pour interrompre seulement en fonctionnement. Types de temps supplémentaires : answer (bloc de prose riche), alert (ligne surlignée en rouge), les temps tool peuvent porter des lignes enfants ⎿.
• Pas de dérive de transcription. Le texte du terminal ne peut apparaître qu'en fondu sur place : pas d'animations d'entrée positionnelles à l'intérieur de la fenêtre, et ne montez/démontez jamais un élément qui refond les lignes en dessous — les lignes transitoires (spinners, progression) vivent dans des emplacements de hauteur fixe afin que leur disparition ne déplace rien.
• Cartes titres : titre serif dans un quasi noir #1F1508 sur terre cuite, sous-titre mono à 68 % d'opacité, entrée en fondu. Titre ≥ 132 px, sous-titre ≥ 52 px à 1920 de large.

API des composants (src/ccvideo)

Couche pilotée par les données (préférée pour les vidéos entières) :

• <GroundedVideo {...props}> — carte d'intro → session → carte d'outro, entièrement à partir d'une valeur groundedVideoSchema (un props.json de capture).
• <DataSession {...props.session}> — rend n'importe quelle valeur sessionSchema : en-tête optionnel, frappe du prompt, spinner, puis beats (union discriminée : code, tool, run, summary, answer, alert). Applique le cut-zoom du temps run automatiquement ; avertit au moment du rendu si le contenu va déborder.
• sessionTiming(props, fps) / groundedVideoDuration(props, fps) — dérivation de timing pure ; utilisez dans calculateMetadata.
• <Rich segments> — rend les segments JSON {t: 'plain'|'kw'|'code'| 'comment'|'dim'|'bold', s} ; le pont de props.json au texte stylé.

Primitives de présentation :

• <TerminalWindow title width? height? variant?> — fenêtre sur la toile (variant="dark" pour le thème dark). Les enfants sont une colonne flex ; donnez à la transcription flex: 1 pour que <InputBox> + <StatusBar> s'épingle en bas.
• <TypeText text from cps? cursor?> / <Cursor> — machine à écrire, 35–45 cps.
• <InputBox typedText? from? cps?> — ligne > ; pas de typedText = curseur clignotant.
• <StatusBar mode? hint?>.
• <Thinking from? until? word? stats? tokens? tip?> — spinner ; stats affiche en direct (Ns) — plus ↓ N tokens seulement lorsque tokens porte un vrai compte capturé ; tip ajoute une ligne ⎿ Astuce :. Placez-le dans un emplacement de hauteur fixe entre la transcription et l'entrée ; until le fond en place.
• <Line from?> — une ligne de sortie, fondu d'entrée sur 8 images (opacité uniquement).
• <ToolLine from> — ligne de puce ●.
• <CodeBlock from lines stagger? startLineNo? expandNote?> — lignes numérotées.
• Étendues de tokens : <K> mot-clé, <C> code/chemin, <Cm> commentaire, <Dim>, <B>.
• <SessionHeader version modelLine>, <PromptEcho>, <AlertLine from?>, <ToolChild from?> — chrome de session (voir règles de style).
• <CutZoom cuts={[{from, scale?, origin?, ease?}]}> — brefs déplacements atténués entre des cadrages verrouillés ; le seul mouvement de caméra autorisé sur les scènes de terminal.
• <SlowZoom from? to?> — cartes titres uniquement, jamais autour d'un terminal.
• <TitleCard title subtitle? titleSize?>.

Toute l'animation est pilotée par les images (useCurrentFrame + interpolate, clampée, en ligne dans style). N'utilisez jamais CSS transition/animation.