🇺🇸🇫🇷
Plugin Claude CodeMIT, open sourcev1.0.3

motion-launch-videos: Un plugin Claude Code pour des vidéos de lancement en typographie cinétique

motion-launch-videos est un plugin Claude Code gratuit et open source qui transforme un brief court, ou la simple URL d'un produit, en vidéo de lancement en boucle, entièrement en typographie cinétique. Le film tient dans un seul fichier HTML autonome, rendu sur votre machine en MP4, avec un vrai flou de mouvement et une boucle sans raccord.

La démo : une boucle de 12 secondes en 1080 × 1080, réalisée avec le plugin pour Crux, mon propre produit. Chaque mot à l'écran vient de cruxpost.com.
Le texte du film (en anglais)
  • STOP GUESSING. / WHAT WORKS ON YOUR X ACCOUNT
  • READS YOUR OWN POSTS. / ARCHIVE OR READ-ONLY IMPORT
  • HOOKS. FORMATS. TOPICS. TIMES.
  • PATTERNS THAT HOLD UP. / AT LEAST 5 POSTS / 500 RANDOM DRAWS
  • CRUX / CRUXPOST.COM / REQUEST EARLY ACCESS
À installer dans Claude Code
/plugin marketplace add Kimeur/motion-launch-videos
/plugin install motion-launch-videos@motion-launch-videos

Ensuite, demandez un film avec vos mots, depuis votre projet : « Make a 12 second launch bumper for https://example.com »

Le code sur GitHubDémo réalisée pour Crux

Par Marouane Gazouzi

Que produit motion-launch-videos ?

Un film court, percutant et en boucle, fait uniquement de texte, pour un lancement ou une signature de marque : une accroche, ce que fait le produit, une preuve, puis l'appel à l'action. Il dure de 6 à 20 secondes, avec au plus quatre mots en gros caractères par temps et un seul appel à l'action.

Livrables
Un MP4 H.264 balisé BT.709, sans piste audio, un GIF d'aperçu, une affiche PNG, et le fichier HTML unique qui contient le film. Ce fichier se prévisualise dans Chrome : Espace met en pause, les flèches avancent ou reculent d'une image.
Formats
Carré 1080 × 1080 par défaut, vertical 1080 × 1920 (9:16) ou horizontal 1920 × 1080 (16:9).
Par défaut
12 secondes, 60 images/s, une grille rythmique à 120 BPM, sans son, et les couleurs de marque lues sur le site du produit.
Texte
3 à 5 temps, avec les mots du produit lui-même. Chaque fait est consigné dans BRIEF.md avec l'URL d'où il vient.
Pas fait pour
Les enregistrements d'écran, les vidéos explicatives commentées, les interviews face caméra ou les longues démos produit.

Comment un brief devient-il une vidéo ?

Claude suit six étapes, et rien n'est rendu en entier tant que les images de contrôle ne passent pas.

  1. Brief

    Il lit le site en ligne du produit, pose au plus une série de questions (message, format, durée, palette) ou prend les valeurs par défaut, puis écrit BRIEF.md avec chaque fait et sa source.

  2. Texte

    Accroche, ce que fait le produit, preuve, appel à l'action : quatre mots au plus par temps, repris des mots du produit. Aucun prix ni chiffre que le site n'affiche pas.

  3. Spécification

    DESIGN.md cale chaque temps sur une grille de lignes de base de 8 px et sur une grille rythmique, avec les rôles de couleur, les contrastes, les rôles typographiques, les ressorts et les transitions.

  4. Construction

    Il copie le modèle du moteur, remplit sa configuration FILM, récupère les polices, construit un seul fichier HTML autonome et ajuste les lignes de base d'après les hauteurs de capitales mesurées.

  5. Critique

    Des contrôles automatiques, des images de contrôle et une planche contact. Il corrige ce qui échoue et regarde à nouveau.

  6. Rendu et vérification

    Un contrôle de boucle au pixel près, puis le MP4, le GIF et l'affiche, puis les données ffprobe, les balises couleur et des images décodées comparées au canvas.

Les techniques du moteur

  • Un fichier, une horloge

    Le film est une page canvas dont seek(t) dessine n'importe quel instant à partir de t seul : pas de minuteurs, pas de Date, pas de Math.random, aucun état d'une image à l'autre. Les polices sont intégrées, la page ne charge rien sur le réseau.

  • Des ressorts en forme close

    Chaque mouvement est une somme de ressorts amortis calculés en forme close, un par changement de cible, et ramenés exactement à 1 une fois stabilisés. Chaque image peut se dessiner seule.

  • Typographie cinétique, glyphe par glyphe

    Le crénage est retrouvé à partir des largeurs de paires de measureText, chaque ligne est ajustée pour que son encre couvre exactement la justification, et chaque glyphe entre sur ses propres ressorts, décalés sur la grille rythmique.

  • Des accents dessinés

    Un défaut de repérage (deux passes de couleur décalées), seulement sur les images d'impact, un volet qui révèle la scène suivante à travers les lettres de la ligne sortante, et des zooms et panoramiques éclair de caméra sur le temps.

  • Un vrai flou de mouvement

    Chaque image fait la moyenne de 1 à 64 sous-images sur un obturateur à 270°, environ une tous les 5 px de mouvement, et ne floute jamais à travers une coupe franche.

  • Une boucle exacte au pixel

    L'image 0 est le bloc final au repos, et le film se termine en le reconstruisant. loopcheck compare les pixels du canvas au raccord et exige une différence nulle partout.

  • Critique avant le rendu

    Couverture des glyphes, mots par temps, zone utile, collisions, espaces entre lettres, contraste, palette, fin de boucle et images vides, plus des images que Claude regarde avant le rendu complet.

  • Une sortie vérifiée

    H.264 avec les balises BT.709 dans le flux, faststart, le nombre exact d'images, et des images décodées comparées aux pixels du canvas.

De quoi avez-vous besoin pour le lancer ?

  • Node 20 ou plus récent. Les scripts n'ont besoin que d'un paquet, playwright-core, installé à côté d'eux ou dans votre projet. Rien n'est installé globalement.
  • ffmpeg et ffprobe avec libx264 (brew install ffmpeg ou apt install ffmpeg).
  • Un Chromium : CHROME_PATH, un Chromium déjà présent dans le cache Playwright, un Google Chrome installé, ou celui qu'installe playwright-core. Firefox et WebKit ne sont pas pris en charge.
  • Un accès réseau une fois par film, pour récupérer les polices sur le registre npm.

render.mjs doctor vérifie tout cela et affiche la commande exacte pour ce qui manque.

Testé uniquement sur macOS (Apple silicon), pour l'instant

Les scripts cherchent aussi Chromium là où Linux et Windows le rangent, mais ces systèmes n'ont pas encore été testés. Si vous l'y lancez, un retour sur GitHub aide.

Que lance-t-il, que télécharge-t-il, qu'envoie-t-il ?

Tout tourne sur votre machine, dans le projet sur lequel vous travaillez.

  • Il lit les pages publiques du produit que vous lui indiquez, pour reprendre les mots du produit.
  • Il récupère trois polices open source (Archivo Black, Syne et IBM Plex Mono, sous licence SIL Open Font License) sur le registre npm et les intègre au fichier HTML.
  • Il installe un seul paquet npm, playwright-core, à côté de ses scripts, pour piloter un Chromium local sans interface. S'il ne trouve aucun Chromium, il peut télécharger celui de Playwright, et render.mjs doctor affiche d'abord la commande.
  • Il lance vos ffmpeg et ffprobe locaux pour encoder et vérifier le MP4.
  • Il ne lit dans l'environnement que des chemins locaux (CHROME_PATH, PLAYWRIGHT_BROWSERS_PATH, FFMPEG_PATH, FFPROBE_PATH, PATH). Aucun identifiant, aucune clé d'API.
  • Il n'envoie rien ailleurs : pas d'analytics, pas de compte. Il vous demande votre accord avant tout commit, push ou envoi.

Questions fréquentes

motion-launch-videos est-il gratuit ?

Oui. Le plugin est open source sous licence MIT, et les polices qu'il récupère sont sous SIL Open Font License. Il tourne dans Claude Code : il vous faut donc Claude Code.

Faut-il une clé d'API ?

Non. Il ne lit aucun identifiant, ne demande aucune clé d'API et aucun compte. En dehors de la lecture du site du produit, il ne télécharge qu'un paquet npm, les polices et, si vous n'en avez pas, un Chromium.

Quels formats produit-il ?

Un MP4 H.264 sans son, un GIF d'aperçu et une affiche PNG, tous tirés d'un seul fichier HTML que vous pouvez ouvrir dans Chrome. Le carré 1080 × 1080 est le format par défaut ; 1080 × 1920 et 1920 × 1080 fonctionnent aussi. Des découpages sont prêts pour 8, 10, 12 et 15 secondes, et toute autre durée entre 6 et 20 secondes convient si c'est un multiple d'une demi-seconde (un nombre entier de temps à 120 BPM).

Combien de temps prend un rendu ?

Sur un Mac Apple silicon, le rendu de la démo de 8 secondes du modèle (480 images) prend environ 60 secondes, et celui de ses images de contrôle environ 5 secondes. Les mouvements rapides sont les plus coûteux, jusqu'à 64 sous-images par image, et un film en 1920 × 1080 prend environ 1,8 fois plus de temps par image qu'un film carré.

Puis-je utiliser mes couleurs et mes polices de marque ?

Oui. Par défaut, il lit vos couleurs de marque dans les propriétés CSS personnalisées et les balises theme-color de votre site, ou vous lui donnez une palette. La critique refuse ensuite toute couleur hors palette et tout gros texte sous un contraste de 3:1 (4,5:1 pour les petites lignes). N'importe quelle police Fontsource peut remplacer l'une des trois polices par défaut ; vérifiez sa licence.

Et si mon produit n'a pas de site ?

Votre brief devient alors la seule source, et le film ne dit rien que votre brief ne dise pas. Il ne va pas chercher un domaine sous prétexte qu'il porte le nom de votre produit, et un produit fictif est signalé comme tel à l'écran.