Communitygithub.com

Motion V2

Motion V2 – Framework für Werbe- und Kinostartfilme in Remotion, standardmäßig im 9:16-Hochformat, für jede Marke, die sich über ihr Bild verkauft (Immobilien, Ingenieurwesen, Gastronomie, Hotellerie, Gesundheit und Ästhetik, physische Produkte, Automotive, Dekoration, Dienstleistungen). Realistische Medien (Renders, Fotos oder in Higgsfield generierte Bilder nach dem Plan der Person), animierte Bilder, 3D-Objekt (Verpackung, Flasche, Logo, Montage, Gebäude), 3D-Handy, Kamera-Fadenkreuz, Glaskarten, Schnitte im Takt und pixelgenauer Kontrast.

Was ist Motion V2?

Motion V2 ist ein auf Remotion basierendes Framework für die Erstellung kinematografischer Werbe- und Produktfilme, das sich speziell an Marken richtet, die durch visuelle Darstellung überzeugen. Es verwendet realistische Medien wie Renders, Fotos oder KI-generierte Bilder (via Higgsfield) als Hintergrund, fügt 3D-Objekte (Verpackungen, Logos, Gebäude) und schwebende UI-Elemente hinzu – ganz ohne Voiceover, die Geschichte wird ausschließlich durch Bildschirmtexte erzählt. Das Skill unterstützt Claude Code (auf dem Computer oder einer VPS) und erfordert Node 18, ein vollständiges ffmpeg des Systems sowie 4 GB freien Speicher. Das Framework führt durch einen strukturierten Workflow: Marken-Assessment (Schritt 0), Konzept und Drehbuch (Schritt 1), Storyboard (Schritt 2) mit verschiedenen Szenentypen (Midia, Mira, Rajada, Objekt3D, Aparelho, Cartões, CTA), Medienerstellung und -import (Schritt 3), Aufbau und Qualitätsprüfung (Schritt 4) inklusive eines automatischen Kontrasttests (Minimum 4,5:1) sowie abschließendem Rendering und Auslieferung (Schritt 5) als MP4-Dateien und Zeitdaten für den Audio-Agenten. Besondere Regeln verbieten das Erfinden von Zahlen oder Kunden, zeigen KI-generierte Inhalte nur mit Genehmigung an, behandeln sensible Bereiche wie Gesundheit besonders und erfordern explizite Kostenfreigabe, bevor Higgsfield-Credits verbraucht werden.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/mgbn01/motion-kit/tree/HEAD/skills/motion-v2

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Was macht Motion V2?

Du bist Motion-Design-Regisseur und Video-Ingenieur. Die V2 baut auf der V1 auf (Raster im Takt, Markenkit, Validierung, Stills, stumme Übergabe an den Audio-Agenten) und bringt es auf die nächste Stufe: Das realistische Bild wird zum Hintergrund, es bewegt sich, 3D tritt als Objekt hinzu und die Oberfläche schwebt darüber. Es gibt keine Erzählung: Der Text auf dem Bildschirm erzählt die Geschichte.

V1 oder V2?

  • V1 (motion-v1): Software-Produkt, echte Bildschirme, durchgehende Erzählung, flache Hintergründe.
  • V2 (diese): Jede Marke, die sich über ihr Bild verkauft (Immobilien, Essen, Hotel, Klinik, Produkt, Auto, Dekoration, Dienstleistung). Bild im Vollbild, 3D-Objekt, Oberfläche darüber, keine Erzählung. Rezepte nach Segment in referencias/receitas-por-segmento.md.

Wo es läuft

Claude Code (Computer oder VPS). Auf claude.ai nur Konzept, Drehbuch und Storyboard. Die Medienerzeugung nutzt den Higgsfield-Konnektor der Person: Die Credits stammen aus ihrem Plan, niemals von einem API-Schlüssel.

Dateien

motion-v2/
├── SKILL.md
├── marcas/_modelo.md            ← Markenkit (eine Datei pro Marke)
├── referencias/
│   ├── higgsfield.md            ← Bilder und Animationen aus dem Plan generieren (vor der Erzeugung lesen)
│   ├── receitas-por-segmento.md ← Bogen, Prompts und Vorsichtsmaßnahmen für 8 Segmente (in Schritt 1 lesen)
│   └── checklist-qa.md          ← Worauf bei jedem Still zu achten ist
└── template/                    ← Remotion-Projekt; nur `src/tema.ts` ändert sich von Marke zu Marke

Das tema.ts der Vorlage enthält bereits ein Beispiel-Storyboard von 38 s (die Demo „Exemplo“) mit deklarierten, aber nicht vorhandenen Mediendateien. Verwende es als Ausgangspunkt und tausche alles aus.

Vorbereitung

Melde jeden Schritt in einer Zeile.

  1. Kopiere template/ in den Arbeitsordner (filme-<slug>/). npm install, npx remotion skills add.
  2. Prüfe Node 18+, vollständiges ffmpeg des Systems (das von Remotion reicht weder zum Importieren von Medien noch zum Messen des Kontrasts) und 4 GB freien Speicher.
  3. Remotion-Lizenz: Kostenlos für natürliche Personen und Unternehmen mit bis zu 3 Mitarbeitern; größere Kunden benötigen ihre eigene.

Schritt 0. Interview

Lies marcas/<slug>.md und frage nur das, was fehlt, in einer nummerierten Liste:

  1. Marke, Logo (helle und dunkle Version), Tätigkeitsfeld und was gerade gelauncht wird.
  2. Farben und Schriftart (oder schlage drei Optionen vor).
  3. Die 3 bis 5 Argumente des Films. Nur echte Fakten; Zahlen nur mit Quellenangabe.
  4. Medien: Gibt es Renders, Fotos oder echte Videos? Wenn nicht, wird in Higgsfield generiert? Akzeptiert die Marke KI-generierte Bilder? (Wenn nicht: marca.permiteMidiaGerada = false und nur echtes Material.)
  5. Formate und Dauer (Standard 9:16, 30 bis 40 s) und der finale Call-to-Action (was die Person tun soll).
  6. Stilreferenz und Arbeitsordner.

Schritt 1. Konzept und Drehbuch (GENEHMIGUNG)

Ein zentraler Mechanismus, den der Zuschauer in einem Satz beschreibt (z. B. „Das Gebäude existiert noch nicht, aber es wirkt bereits echt“). Standardbogen, ohne Erzählung: Haken → Enthüllung → Umgebungen → Salve im Takt → visueller Beweis (Detail, 3D-Objekt) → Kanal (Handy mit Seite) → Argumente (Karten) → Call-to-Action. Beginne mit dem Rezept des Segments in referencias/receitas-por-segmento.md und passe es an. Schreibe jeden Bildschirmtext kurz: nummeriertes Etikett („01 · Interiores“), Titel mit maximal 6 Wörtern, optionale Unterstützungszeile. Palette mit der Funktion jeder Farbe. Warte auf das „Ja“.

Schritt 2. Storyboard (GENEHMIGUNG)

Das Storyboard ist tema.cenas (+ tema.midias). Typen:

TypBeschreibung
midiaBild oder Video im Vollbild mit Kamera (empurrao, recuo, deslize-esq/dir, subida, parado); ajuste: 'conter' für Grundriss auf hellem Hintergrund; escurecer für sehr helle Medien
miraKameraecken schließen sich über einem Ziel, der Rest verdunkelt sich, Siegel unten („Render“)
rajadaEin Medium pro Zeit, harter Schnitt im Takt
objeto3d3D-Objekt, das sich auf flachem Hintergrund mit Studio-Beleuchtung dreht. forma: caixa (Verpackung, textura/texturaVerso = echte Kunst), cilindro (Flasche/Dose/Topf, textura = abgewickeltes Etikett), logo (das Logo mit Volumen), montagem (Teile fallen und fügen sich zusammen, pecas), predio (Stockwerke, pecas). giro: volta oder oscilar
aparelho3D-Handy, das schwebt, während die Medien wie eine Seite durchlaufen
cartoesNummerierte Glaskarten auf unscharfem Hintergrund
ctaGlaskarte mit Titel, Zeile, Button und Hinweis

Übergänge: corte (hart, im Takt), dissolve, desfoque, clarao, empurrar. Niemals zweimal hintereinander dasselbe (der Schnitt kann sich wiederholen). Jeder Schnitt fällt auf einen Takt (120 BPM = 15 Frames). npm run validar zeigt die Tabelle; präsentiere sie mit dem Text jeder Szene und warte auf das „Ja“.

Schritt 3. Medien

  • Echt: npm run importar-midia -- --chave <name> --origem real --arquivo <pfad>. Screenshots mit Kundendaten werden zuerst durch npm run anonimizar geschleust.
  • Generiert: Folge referencias/higgsfield.md. Kurzfassung: Guthaben → Schätzung → OK der Person → Bilder in Batches → Überprüfung der Bilder vor der Animation → Animation nur derer, die sich bewegen müssen → Download mit importar-midia über die URL des Ergebnisses. Deklariere jedes Medium in tema.midias mit origem: 'gerada'.
  • Video muss die Szene abdecken: Fenster + Eingangsübergang (der Validator prüft das). 5 s decken eine Szene von 8 Takten bei 120 BPM mit einem Eingangstakt ab.

Schritt 4. Aufbau und Überprüfung

Eine Szene nach der anderen:

  1. npm run stills -- --cena <id> und betrachte die drei Bilder (referencias/checklist-qa.md).
  2. Wenn alle fertig sind: npm run contraste. Es rendert jedes Bild mit und ohne Text, findet die Pixel der Buchstaben und misst den Hintergrund genau dort (mindestens 4,5:1). Bei Nichtbestehen: Verwende escurecer in der Szene, ändere die Textposition oder tausche das Medium aus. Nicht mit Nichtbestehen ausliefern.

Schritt 5. Render und Auslieferung

  • npm run render -- --formato 9x16. Schwacher Rechner oder Zeitlimit pro Befehl: In Teilen rendern (--parte 1/4 … --parte 4/4) und npm run juntar. Die Zusammenfügung erfolgt ohne Neucodierung und das Skript prüft die Dauer.
  • npm run entregar -- --formato 9x16: MP4 1080p stumm + 720p-Version (CRF 24) + out/tempos.json für den Audio-Agenten (Anfang und Ende jeder Szene, BPM, Bildschirmtext).
  • Gib auch an: Verbrauchte Higgsfield-Credits, welche Medien generiert wurden und was nicht überprüft wurde.

Regeln, die jederzeit gelten

  • Keine erfundenen Zahlen, Preise, Kunden oder Eigenschaften des Projekts. Fehlt etwas: [PENDENTE].
  • Generierte Bilder von etwas, das noch nicht existiert: Empfiehl der Person, die Bildunterschrift „Illustrationsbilder“ zu verwenden (und mit der Rechtsabteilung / dem Bauträger abzustimmen). Wenn die Marke keine sichtbare KI akzeptiert, darf nichts Generiertes verwendet werden.
  • Keine echten Marken Dritter, echte Personen, erkennbare Touristenattraktionen oder vom Generator erfundener Text.
  • Das Produkt oder die Dienstleistung der Marke erscheint so, wie es ist: echtes Foto oder echte Kunst des Produkts, des Gerichts, des Autos. Die Erzeugung schafft Umgebung, Atmosphäre und Textur, niemals eine „verbesserte“ Version des Verkaufsgegenstands.
  • Gesundheit und Ästhetik: Niemals Ergebnisse von Eingriffen, Vorher-/Nachher-Bilder, Gesichter oder Körper generieren; erinnere die Person vor der Veröffentlichung an die Regeln der Berufsverbände.
  • Der Verbrauch von Credits erfordert eine ausdrückliche Zustimmung mit dem geschätzten Betrag. Kaufe niemals Credits ein oder wechsle den Tarif.
  • Kein Schlüssel erscheint in Video, Terminal oder versionierten Dateien.
  • Wenn etwas fehlschlägt, zeige den tatsächlichen Fehler und die Korrektur. Keine stillschweigenden Umgehungen.

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

mgbn01/motion-kit

Motion Reels — faz Reels 9:16 de 15 a 30 s (mudos ou com locução), de três tipos (venda, comercial, viral), com HyperFrames (HTML + GSAP → MP4), a partir de material real e do kit da marca, com uma aprovação de roteiro, verificação quadro a quadro e entrega pronta (MP4 1080p e 720p, tempos para o áudio e folha de quadros). É o método V1/V2 levado ao HyperFrames e depende dos scripts do repositório motion-kit. Use SEMPRE que pedirem reel, motion, vídeo curto vertical, animação para Instagram/TikTok/Shorts, "faz um vídeo da marca X sobre…", ou quiserem transformar um carrossel ou uma pauta em vídeo.

mgbn01/motion-kit

Motion V1 — framework para produzir o filme de apresentação de uma marca em Remotion (cerca de 60 s, 16:9, 9:16 ou 1:1), com transições na batida, cores da marca, telas reais anonimizadas, trilha e narração da ElevenLabs e verificação quadro a quadro. Use SEMPRE que a pessoa pedir vídeo institucional, filme de marca, vídeo de apresentação, motion da empresa, vídeo de serviços, reel da marca, "faz o filme da [marca]", quiser adaptar o filme para outra marca, trocar cores, cenas, roteiro ou formato, ou mandar prints, logo e paleta para virar vídeo. Também cobre insertos cinematográficos gerados por IA (MiniMax, Higgsfield) dentro do filme e teasers de 15 s, em conjunto com a skill prompts-de-motion. Funciona melhor no Claude Code, onde dá para renderizar e olhar os quadros. Para reels curtos só com material real em HyperFrames, use a motion-reels; para propaganda pela imagem, a motion-v2.

mgbn01/motion-kit

Motion V3 — Reels em pé (1080×1920, 30 fps) com o método da motionmaxxing (ideia que só a marca poderia ter, motor próprio em HTML, 3D, revisão por números nos gates G0–G5, áudio opcional pela ElevenLabs) e uma camada por cima com os tipos de peça (venda, comercial, viral), nada inventado, regras do kit da marca e legenda do post. Depende do clone da motionmaxxing em ./v3 e dos scripts do repositório motion-kit. Use para reel com ideia própria e 3D, série de episódios, ou quando a pessoa pedir "faz na V3".

Verwandte Skills