Communitygithub.com

kguevaram94/remotion-playground

Bonnes pratiques pour l'usine à Shorts Remotion présente dans ce dépôt. À utiliser lors de l'édition de ShortVideo, des phases du pipeline, des animations, du post-traitement FFmpeg ou de l'ajout de bibliothèques d'animation.

Qu'est-ce que remotion-playground ?

Ce skill définit les bonnes pratiques et l'architecture du dépôt Remotion Playground, conçu pour produire des vidéos courtes au format "logic-lateral" avec Remotion. Il précise le format officiel (hook → rules → countdown → explanation → reveal → outro), les visuels associés (logic-room, switch-sequence, bulb-state-reveal) et la structure des composants React. Le skill indique où intervenir selon le type de changement (nouvelle scène visuelle, pipeline, FFmpeg, rendu) et fournit des commandes CLI pour générer un nouveau short à partir d'un template JSON. Il impose des règles strictes : toute animation doit utiliser `useCurrentFrame()` / `interpolate` / `spring`, les données doivent être déclaratives en JSON, et les bibliothèques externes (GSAP, Anime.js, Motion Canvas) nécessitent une justification d'intégration synchrone avec les frames. Il décrit aussi les post-traitements FFmpeg/Satori en dehors de la composition et liste les références officielles Remotion pour les bibliothèques tierces, FFmpeg, Three et Rive. Ce skill est utile pour tout développeur souhaitant contribuer efficacement à ce dépôt ou comprendre son fonctionnement.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/kguevaram94/remotion-playground/tree/HEAD/.cursor/skills/remotion-shorts

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Remotion Shorts — skill du dépôt

Format officiel : logic-lateral

Référence : output/s4-19-interruptores/ · modèle : data/templates/script-logic-lateral.json.

Beat : hook → rules → countdown → explanation → reveal → outro (CTA commenter).

Visuels : logic-room, switch-sequence, bulb-state-reveal (+ countdown, text).

cp data/templates/script-logic-lateral.json data/topics/mon-releve.json
npm run generer-short -- --input data/topics/mon-releve.json

Constructeur automatique (titre avec interrupteur/ampoule) : src/shorts/templates/three-switches.ts.

Règles d'or

  1. Toute animation dépend de useCurrentFrame() / interpolate / spring.
  2. Données déclaratives en JSON ; composants dans src/shorts/remotion/components/.
  3. Ne pas ajouter GSAP, Anime.js ou Motion Canvas sans intégration officielle frame-sync et justification.
  4. FFmpeg/Satori vont en post-traitement, pas dans la composition.
  5. Ne pas casser HelloRemotion ni ScriptVideo.
  6. Outro logic-lateral demande toujours de commenter.

Où intervenir

ChangementFichier
Nouvelle scène visuellecomponents/ + branche dans ShortVideo.tsx + schéma
Modèle / détectionsrc/shorts/templates/ + select.ts
Pipelinesrc/shorts/pipeline/
Vignettesrc/shorts/media/thumbnail.ts
FFmpegsrc/shorts/media/ffmpeg.ts
Options de rendurender-video.ts (gl: angle, bundle cache)

Référence externe

Skills associés