rendydev404/motion-reel

Que fait motion-reel ?

Génère un MP4 en 1920×1080, 30 ips, dans le style éditorial motion-reel. Un moteur prêt à l'emploi se trouve dans template/. Copiez-le, écrivez un fichier de configuration (src/reel.config.ts), effectuez le rendu, vérifiez les images, puis envoyez la vidéo.

Arguments : $ARGUMENTS

1. Lire la demande

À partir des arguments et de la conversation, déterminez :

• Sujet : quel produit ou fonctionnalité. Si vous êtes dans son code source, lisez le contenu réel (fichiers i18n, composants de page, README) pour que la vidéo montre ce que le produit fait vraiment.
• Couleurs :
  • Un nom de préréglage : lime (l'aspect de référence), coral, ocean, sunset, violet, night (sombre).
  • Ou des valeurs hexadécimales, mappées à accent (surligneur, la couleur qui ressort), puis secondary (deuxième couleur de marque), puis éventuellement paper (fond) et ink (texte).
  • Une seule couleur signifie qu'elle est l'accent.
  • Si le projet possède des jetons de marque (par exemple globals.css), proposez-les comme secondary.
  • Rien n'est donné : utilisez lime, et dites-le dans le message final.
• Langue du texte : correspondre à celle de l'utilisateur (indonésien par défaut s'il écrit en indonésien).
• Dossier de sortie : le bloc-notes de session, sauf si l'utilisateur nomme un dossier. Ne le mettez jamais dans le dépôt du produit sauf s'il le demande.

Ne demandez que lorsque le sujet lui-même n'est pas clair. Les couleurs et la durée ont des valeurs par défaut.

2. Structure

cp -r "<ce dossier de compétence>/template" "<sortie>/reel"
cd "<sortie>/reel" && npm install && npm run sfx

• npm install prend environ 2 minutes. Exécutez-le en arrière-plan s'il y a d'autres tâches.
• Si le produit a un logo, copiez-le dans public/ et définissez brand.logo sur son nom de fichier. Sinon, définissez brand.initials.

3. Écrire src/reel.config.ts

• Définissez theme: makeTheme(presets.coral) ou makeTheme({ accent, secondary, paper, ink }). Tous les autres jetons sont dérivés automatiquement.
• Choisissez les scènes. La liste des champs, les durées par défaut et les limites de longueur de texte se trouvent dans references/config.md ; lisez-le avant d'écrire le texte.
• Arc recommandé (environ 45 s) : spark → word → tagline → bento → checklist → steps → formula → showcase → stats → kinetic → logo. Supprimez les scènes qui ne conviennent pas au produit. Un arc court (environ 20 s) est spark → word → tagline → kinetic → logo.
• Faits : ne montrez que les affirmations que le produit fait réellement. N'inventez jamais de métriques telles que « 10 000 utilisateurs » ou « 99 % de disponibilité ». Le contenu d'exemple (noms de comptes, exemples de publications) doit être inventé et clairement générique, jamais des données réelles de clients.
• Titres : title.sans est l'affirmation et title.serif est la touche italique. mark est un mot de la partie serif qui reçoit le surligneur.

4. Vérifier et effectuer le rendu

npx tsc --noEmit
npm run render        # → out/reel.mp4, utilise --port=3917
npm run frames        # → out/frames/sheet*.jpg, une image toutes les 1,5 s

Lisez chaque planche contact. Recherchez :

• du texte qui dépasse d'une carte ou du cadre
• des éléments qui se chevauchent
• une scène qui semble vide
• un surligneur sur le mauvais mot
• un faible contraste avec des couleurs personnalisées (par exemple un accent clair sur un papier clair)

Corrigez la configuration, ou le moteur si nécessaire, puis effectuez le rendu une fois de plus. Ne bouclez pas les rendus.

5. Livrer

• Envoyez out/reel.mp4 avec SendUserFile (display: "render").
• Rapportez la durée, la taille, un résumé d'une ligne par scène, les couleurs utilisées et le chemin de configuration pour les modifications ultérieures.
• Dites clairement que l'audio n'a pas été écouté. Seuls le timing et les niveaux ont été vérifiés.

Règles de style (lors de l'extension du moteur)

• Rôles de la palette : paper pour le fond, ink pour le texte et les pilules sombres, accent uniquement pour les surlignages et les états actifs (jamais de grand texte sur du papier), secondary pour les blocs de couleur et le mot d'accentuation du logo.
• Typographie :
  • Inter Tight 800 pour les affirmations.
  • Instrument Serif italique pour la touche.
  • Archivo Black uniquement pour les mots cinétiques.
  • JetBrains Mono 13–20px avec espacement des lettres pour les étiquettes et le HUD.
• Mouvement :
  • Expo-out bezier(0.16,1,0.3,1) pour les entrées, in-out bezier(0.65,0,0.35,1) pour les déplacements.
  • Les sorties accélèrent avec un flou directionnel (Smear).
  • Le texte monte depuis un masque (overflow: hidden + translateY).
  • Les chiffres déroulent avec un flou vertical (Roll).
• Transitions : smear out/in, plongeon vers l'encre après une tagline, zoom-blur traversant, une carte d'accent s'agrandissant pour remplir le cadre avant le bloc cinétique, et des coupures franches entre les mots cinétiques. Pas de secousses, pas de flashs blancs.
• HUD : étiquette en haut à gauche, code temporel en haut à droite, étiquette de section plus filet de progression en bas à gauche, résolution en bas à droite, crochets de coin. Il passe en texte clair sur les blocs de couleur sombre.
• Chaque scène doit contenir du texte lisible pendant au moins 1,5 s.

Pièges de Remotion (appris à la dure)

• Tout mouvement vient de useCurrentFrame(). Les transitions et animations CSS ne s'affichent pas.
• Le port 3000 est souvent pris par un serveur de développement. Passez toujours --port.
• Le ffmpeg intégré de Remotion ne dispose pas des filtres fps et tile. Récupérez les images avec -ss une par une (scripts/frames.mjs le fait).
• React.useId() contient des deux-points. Nettoyez-le avant de l'utiliser dans url(#id).
• Flou directionnel : SVG feGaussianBlur stdDeviation="x y". CSS blur() est seulement uniforme.
• Audio : un <Sequence from> + <Html5Audio> par signal, avec durationInFrames défini sur la durée du clip.
• color-mix() et clip-path: circle() fonctionnent dans Chrome de Remotion.