Communitygithub.com

ronnnnerr/norstack

Vidéo React programmatique. Utilisez-la pour les superpositions Remotion, les graphiques animés ou une composition React rendue en mp4. Mouvement généré uniquement, les séquences restent avec la vidéo et le portrait.

Qu'est-ce que norstack ?

Cette compétence permet de générer des animations vidéo programmatiques en utilisant React et Remotion. Elle est conçue pour créer des superpositions, des graphiques animés ou des compositions React complètes rendues en fichiers MP4. Le mouvement est entièrement généré, tandis que les séquences vidéo réelles restent séparées. La compétence établit des règles strictes pour garantir des rendus fiables : utilisation de `durationInFrames` comme référence temporelle unique, emploi d'`interpolate` ou `spring` pour les animations (pas de CSS linéaire ni de mise en page animée), et structure des compositions avec `Sequence` + `AbsoluteFill`. Elle gère le préchargement des polices et de l'audio pour éviter les re-rendus, et détermine automatiquement le format de sorti (ProRes 4444 pour les superpositions transparentes, sinon mp4 standard). Les projets sont organisés dans des dossiers spécifiques (`<videos_dir>/edit/animations/slot_<id>/`) et chaque projet possède sa propre palette de couleurs héritée du profil et des goûts de l'utilisateur. Après le rendu, une commande `ffprobe` permet de vérifier le fichier. Cette approche conviendra aux développeurs utilisant Claude Code, Cursor ou Codex qui souhaitent créer rapidement des animations vidéo de qualité professionnelle avec Remotion.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ronnnerr/norstack/tree/HEAD/skills/remotion
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

remotion

Séquence → video / portrait. Ceci est destiné au mouvement généré en React.

Emplacement

Jamais à la racine du dépôt. Toujours :

<videos_dir>/edit/animations/slot_<id>/

Échafaudez là. Rendez dans render.mp4. Pointez la superposition EDL vers ce fichier.

Lois

  • durationInFrames est la vérité. Ne devinez pas les secondes en CSS.
  • interpolate / spring. Pas de linéaire. Pas d'animation de mise en page (top/left/width).
  • Sequence + AbsoluteFill. Une idée par composition.
  • Préchargez les polices et l'audio. Une police manquante est un re-rendu.
  • fps correspond au parent (24 film, 30 social) sauf indication contraire.
  • Superposition transparente → ProRes 4444 ou WebM avec alpha. Confirmez avant de choisir.

Après le rendu

ffprobe render.mp4
# puis jetez un œil / voyez les images de sortie

Les règles vidéo strictes s'appliquent toujours : décalage PTS de la superposition, sous-titres en dernier, fondus audio de 30 ms sur la coupe parente.

Venture

Palette issue du profile et du taste. Chaque projet a sa propre palette. Pas de kit orange de lancement vidéo restant.

Ne posez pas de questions à l'intérieur d'un agent slot. Choisissez l'évidence et rendez.

Skills associés

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community