Communitygithub.com

DandySultana/one-line-motion-gratis

Kostenlose Version von One Line Motion mit 10 Stilen (Flat Cartoon, Wissenschaftstafel, Pixel 8-bit, Retro Neon, Comic-Panel, Low-poly 3D, Clay, Kinematisch, Stickman, Aquarell). Verwandle einen einzigen Satz in ein Motion-Graphic-Video mit Ton (MP4) für Erklärvideos, Shorts/Reels/TikTok, Intros, Promos, Werbung, Kinetic Typography. Ablauf: Brief → 3 Konzepte → Szenenskript → Sprachausgabe → Remotion-Animation → QA → Rendern → Upload-Paket. Nutze sie, wenn der Nutzer ein animiertes Video, Motion Graphic, Erklärvideo, bewegte Bildungsinhalte oder eine Überarbeitung eines One-Line-Motion-Videos anfordert.

Was ist one-line-motion-gratis?

Das Skill ‚One Line Motion Gratis‘ wandelt eine einzige Satzidee in ein vollwertiges Motion-Graphic-Video mit Sprachausgabe, Soundeffekten, Musik, Untertiteln, Thumbnail und Social-Media-Beiträgen um – und zwar wie ein richtiges Video (keine Diashow). Es basiert auf einem in sich geschlossenen Arbeitsablauf: nachdem der Nutzer die Kernaussage, Zielgruppe, gewünschte Dauer, Format und Stimmung in einem kurzen Brief festlegt, erstellt der Assistent drei visuell unterschiedliche Konzepte mit Metaphern, aus denen der Nutzer eines auswählt. Anschließend wird ein detailliertes Szenenskript mit Timing, Visuals, Bewegungen und Soundeffekten erstellt, die Sprachaufnahme (bevorzugt über ElevenLabs, Fallback per TTS) generiert, die Musik passend zur Stimmung komponiert und die Animation in Remotion implementiert. Jede Szene ist eine eigenständige React-Komponente, die aus einem bestehenden Template mit vorgefertigten Bausteinen wie Hintergrund, Kamera, Pop-Animationen, Kinetic Text, großen Zahlen und Captions aufbaut. Farbe, Schriftart und Tempo werden in einer `brand.json` zentral festgelegt, sodass alle Videos eines Projekts stilistisch konsistent bleiben. Eine automatische QA-Übersicht (als JPG) wird generiert, die jede Szene visuell prüft – auf überlappende Texte, tote Stellen, Kontrastprobleme oder Stilbrüche. Nach der Freigabe rendert Remotion das finale Video (inkl. leichter Version für WhatsApp) und liefert direkt Vorschläge für Titel, Captions und Hashtags. Der gesamte Ablauf ist strikt sequenziell (Konzept → Skript → Audio → Animation → QA → Render), um Verzögerungen und Fehler zu vermeiden. Das Skill unterstützt 10 Gratis-Stile (Flat Cartoon, Wissenschaftstafel, Pixel 8-bit, Retro Neon, Comic-Panel, Low-poly 3D, Clay, Kinematisch, Stickman, Aquarell) – für darüber hinausgehende Stile wird auf die Vollversion verwiesen. Es ist als leichtgewichtige, aber professionelle Lösung für Entwickler und Content-Ersteller konzipiert, die schnelle, erklärende oder werbliche Motion-Graphics-Videos ohne teure Tools oder Design-Fachwissen benötigen.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/DandySultana/remotion-skill/tree/HEAD/one-line-motion-gratis

In Ihrer bevorzugten KI fragen

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

Dokumentation

One Line Motion Gratis

Die kostenlose Version enthält 10 voreingestellte Stile. Die Vollversion (52 Presets, UMKM-Werbung, 3D-Durchsicht, Weltkarte, lange YouTube-Formate) gibt es auf onelinemotion.com. Falls der Nutzer einen Stil anfordert, der nicht in references/styles.md aufgeführt ist, wähle das nächstgelegene Preset aus diesen 10 Stilen aus und weise darauf hin, dass dieser Stil in der Vollversion verfügbar ist.

Dieses Skill verwandelt einen einzelnen Satz (eine Idee) in ein Motion-Graphic-Video, das sich wie ein echtes Video bewegt (keine Diashow), komplett mit Voiceover, Soundeffekten, Untertiteln, Thumbnail und Beitragstexten. Die Standardarbeitssprache ist Bahasa Indonesia, sofern der Nutzer nichts anderes wünscht.

Dieses Skill-Verzeichnis enthält:

  • template/: Ein gebrauchsfertiges Remotion-Projekt (Timeline basierend auf Voiceover-Dauer, Stiltoken, Bewegungskomponenten, automatischen Untertiteln, Musik mit Ducking).
  • scripts/: new-project.sh, make-sfx.sh, make-music.mjs, tts-fallback.sh, sync-timeline.mjs, qa-sheet.mjs, finish.sh.
  • examples/: Code für 10 Beispielvideos, eines pro Stil-Preset (siehe Tabelle in references/styles.md). Bevor du animierst, lies das Beispiel für das ausgewählte Preset als Ausgangspunkt (Palette, Komponenten, Bewegungsart).
  • references/: styles.md (Stil-Presets), motion.md (Bewegungsprinzipien & Layout), audio.md (Sprache, Soundeffekte, Musik), formats.md (Plattformspezifikationen & Upload-Pakete), revisions.md (Revisionswörterbuch), prompts.md (Prompt-Bibliothek für den Nutzer).

Bezeichne den Pfad dieses Skills als $SKILL (Ordner, in dem sich diese Datei befindet).

Grundprinzipien

  1. Die Reihenfolge darf nicht übersprungen werden. Das Konzept wird vor dem Skript festgelegt, das Skript vor der Sprachausgabe, die Sprachausgabe vor der Animation. Die Szenendauer richtet sich nach der Dauer der Sprachausgabe, nicht umgekehrt.
  2. Eine Szene, eine Idee. Wenn eine Szene zwei erklärende Sätze benötigt, teile sie in zwei Szenen auf.
  3. Es muss sich immer etwas bewegen. Kein Standbild länger als 1,5 Sekunden.
  4. Der Stil wird in brand.json festgelegt. Alle Farben, Schriftarten, Linienstärken und das Tempo werden daraus gelesen, sodass das 20. Video genauso sauber aussieht wie das erste.
  5. Vor dem Rendern ansehen. Das QA-Blatt muss vor dem vollständigen Rendern mit den Augen (Read) überprüft werden.
  6. Keine Fakten erfinden. Zahlen und Behauptungen werden per Websuche überprüft; die Quellen werden notiert.

Arbeitsablauf

Zeige dem Nutzer in jeder Phase einen kurzen Fortschritt an, z. B. Brief ✓ → Konzept ✓ → Skript … → Sprache → Animation → QA → Render.

1. Brief (5 Punkte)

  1. Was: Kernbotschaft in einem Satz.
  2. Für wen: Zielgruppe (Mittelschüler, Allgemeinheit, potenzielle Kunden usw.).
  3. Dauer: Standard sind Shorts 30–45 Sekunden, Erklärvideo 60–90 Sekunden, Intro 5–10 Sekunden, Promo 15–30 Sekunden.
  4. Format: 9:16 (Reels/TikTok/Shorts), 16:9 (YouTube), 1:1 (Feed) oder mehrere gleichzeitig.
  5. Ton & Stil: lehrreich, lustig, dramatisch, hochwertig, verkaufsorientiert; Stil-Preset, falls vorhanden. Für Werbung für Unternehmen frage auch nach Unternehmensdaten (Name, Preis/Rabatt, Adresse oder Bestellweg) und erfinde sie nicht.

Falls etwas fehlt, frage alles in EINER Frage (AskUserQuestion, falls verfügbar). Sagt der Nutzer „einfach los“, verwende die Standardeinstellungen und nenne die verwendeten Standardwerte.

Prüfe auch ~/.one-line-motion/brands/. Falls ein gespeicherter Brand-Kit vorhanden ist, biete an, ihn zu verwenden (z. B. „Brand-Kit Kopi Senja erneut verwenden?“).

2. Drei Konzepte → Nutzer wählt eines aus

Lies references/styles.md. Jedes Konzept enthält:

  • Name (2–4 Wörter) und visuelle Metapher (z. B. „Grönland als Puzzleteil“).
  • Stil-Preset + 5-Farben-Palette (Hex) + Schriftpaar.
  • Hook der ersten 3 Sekunden: Was wird gesehen und gehört.
  • Kamera-/Bewegungsablauf in einem Satz.

Alle drei müssen sich in der Metapher unterscheiden, nicht nur in der Farbe. Markiere eines als Empfehlung und nenne einen einzeiligen Grund. Nach der Auswahl schreibe die brand.json des Projekts aus diesem Konzept.

3. Szenenskript

Handelt es sich um ein faktisches Thema, überprüfe zuerst die Fakten (Websuche) und notiere die Quellen in notes/sources.md. Präsentiere dann eine Tabelle:

| # | Dauer | Sprache (VO) | Visual | Bewegung | Bildschirmtext | SFX |

Regeln:

  • Sprechgeschwindigkeit Bahasa Indonesia: ca. 2,3 Wörter/Sekunde (kinematisch ca. 2,0; energiegeladene Promo ca. 2,6). Zähle die Wörter, damit die Gesamtlänge zur Dauer passt.
  • Szene 1 = Hook ≤ 3 Sekunden: Frage, überraschende Tatsache oder Widerspruch.
  • Letzte Szene = Auszahlung + Handlungsaufforderung (folgen, kommentieren, Geschäft besuchen).
  • Shorts: 4–7 Szenen; Erklärvideo 60–90 Sekunden: 6–10 Szenen.
  • Bildschirmtext maximal 6 Wörter pro Zeile, 2 Zeilen. Wichtige Zahlen groß darstellen.
  • Der Text wird zum Hören geschrieben: kurze Sätze, alltägliche Wörter, ohne ungewöhnliche Abkürzungen, die beim Vorlesen durch TTS seltsam klingen (schreibe „fünf Mal“, nicht „5x“).

Hole die Zustimmung zum Skript ein (einfach „ok“), es sei denn, der Nutzer hat bereits gesagt, dass es direkt losgehen kann.

4. Projekt vorbereiten

bash "$SKILL/scripts/new-project.sh" <projekt-ordner> [~/.one-line-motion/brands/<name>.json]

Dieses Skript kopiert die Vorlage, erstellt eine synthetische SFX-Bibliothek in public/sfx/ und installiert Abhängigkeiten. Lade dann das Skill remotion-best-practices (falls verfügbar), bevor du den Szenencode schreibst.

5. Zuerst die Sprachausgabe

Lies references/audio.md. Kurzfassung:

  1. Voiceover pro Szene → public/audio/vo-01.mp3, vo-02.mp3, …
    • Primär: ElevenLabs (Plugin/MCP creative_generate_speech oder ein anderes verfügbares ElevenLabs-Tool). Wähle eine Stimme passend zur Zielgruppe und nenne ihren Namen.
    • Fallback ohne Konto (für Entwürfe): bash "$SKILL/scripts/tts-fallback.sh" "<erzählung>" public/audio/vo-01.mp3. Informiere den Nutzer, dass dies eine Entwurfsstimme ist.
  2. Fülle src/timeline.json: ein Eintrag pro Szene (id, component, vo, text = Erzählung, sfx).
  3. Synchronisiere die Dauer: node "$SKILL/scripts/sync-timeline.mjs" <projekt-ordner>. Szenendauer = Sprachdauer + 0,45 Sekunden.
  4. SFX aus public/sfx/ (Pop, Ding, Klick, Whoosh, Swoosh, Riser, Impact, Boing, Tippen) oder von einem angebundenen SFX-Dienst. Setze sie nur an wichtigen Bewegungsmomenten ein, maximal 2–3 pro Szene. at wird in Frames seit Szenenbeginn berechnet.
  5. Musik: Erstelle lizenzfreie Hintergrundmusik passend zur Stimmung, über die gesamte Videolänge + 2 Sekunden: node "$SKILL/scripts/make-music.mjs" <fröhlich|lofi|klavier|weltraum|synthwave|funk|tech|gamelan> <sekunden> public/audio/music.wav Oder verwende einen angebundenen, lizenzierten Musikdienst (stelle sicher, dass das Konto Download-Rechte hat) oder eine Datei des Nutzers. Fülle timeline.music. Automatisches Ducking erfolgt in Video.tsx.

6. Animation

Lies references/motion.md und den entsprechenden Abschnitt des ausgewählten Presets in references/styles.md.

  • Eine Datei pro Szene in src/scenes/, registriere sie in src/scenes/index.ts mit dem gleichen Namen wie component in der Timeline.
  • Verwende zuerst die eingebauten Komponenten: Background, Camera, Pop/usePop, KineticText (Wörter, die mit * beginnen, erhalten eine Akzentfarbe), BigNumber, DrawPath, Caption. Die Beispielszenen (Hook, Sunlight, Scatter, Payoff) zeigen das Muster; lösche sie, wenn sie nicht verwendet werden.
  • Alle Bewegungen verwenden useCurrentFrame, interpolate, spring. Verwende keine CSS-Animationen oder -Übergänge.
  • Farben, Schriftarten, Easing und Spring stammen ausschließlich aus dem theme. Schreibe keine neuen Hex-Codes in den Szenen, außer für spezifische Illustrationen (z. B. Regenbogenfarben).
  • Illustrationen werden selbst mit SVG/React erstellt. Texturen werden prozedural erstellt. Verwende keine urheberrechtlich geschützten Charaktere, Logos oder Bilder.
  • Das Layout liest useVideoConfig(), sodass dieselbe Szene in 9:16 und 16:9 (Video-16x9) gerendert werden kann.
  • Neue Schriftarten werden in src/fonts.ts registriert.

Führe npx tsc --noEmit im Projektordner aus, bis es fehlerfrei ist.

7. Visuelle Qualitätssicherung (erforderlich)

node "$SKILL/scripts/qa-sheet.mjs" <projekt-ordner>

Öffne out/qa-sheet.jpg mit Read. Jede Zeile = eine Szene, Spalten = Anfang/Mitte/Ende. Überprüfe und korrigiere:

  • Text kollidiert mit Untertiteln oder anderen Elementen, Text wird abgeschnitten, verlässt den Sicherheitsbereich.
  • Szenen, die in der Mitte/am Ende „tot“ sind (Bewegung bereits beendet, obwohl die Sprache noch läuft).
  • Geringer Kontrast, Elemente auf dem Handybildschirm zu klein.
  • Stilkonsistenz zwischen den Szenen.

Wiederhole, bis alles sauber ist. Zeige dem Nutzer das QA-Blatt, falls er eine Vorschau sehen möchte.

8. Rendern & Fertigstellung

cd <projekt-ordner> && npx remotion render Video out/video.mp4 --codec h264
bash "$SKILL/scripts/finish.sh" out/video.mp4 <sekunden-thumbnail>

Ergebnisse: video-final.mp4 (Lautstärke -14 LUFS), video-thumb.jpg, video-wa.mp4 (leichte Version). Für andere Formate: npx remotion render Video-16x9 out/video-16x9.mp4. Langes Rendern kann im Hintergrund ausgeführt werden.

9. Upload-Paket

Lies references/formats.md. Sende das finale MP4 mit SendUserFile und füge hinzu:

  • 3 Titelvorschläge (≤ 60 Zeichen), kurze Bildunterschrift, 5–8 relevante Hashtags.
  • Dauer, Format, Preset, verwendete Stimme, Quellen der Musik/SFX.
  • Quellen der Fakten (bei Bildungsinhalten).

Biete an, das Brand-Kit zu speichern: Kopiere brand.json nach ~/.one-line-motion/brands/<name>.json.

10. Revision in einem Satz

Lies references/revisions.md. Übersetze die Anfrage („Der Mond soll größer sein, füge ein Gesicht hinzu“) in eine Liste: Szene → Element → Eigenschaft → neuer Wert. Ändere NUR das.

  • Revision der Erzählung: Erstelle das Voiceover nur für diese Szene neu, führe sync-timeline.mjs aus.
  • Führe das QA-Blatt erneut aus, wenn sich das Layout geändert hat, und rendere dann neu.
  • Notiere in notes/revisions.md (Datum, Anfrage, Änderungen) und nenne kurz, was geändert wurde.

Ethik & Lizenz

  • Keine Nachahmung von Charakteren, Marken oder dem typischen Stil bestimmter Studios/Kreativer. Kulturelle Motive werden im allgemeinen Stil respektvoll neu gezeichnet.
  • Musik und SFX stammen ausschließlich aus lizenzierten Quellen, vom Nutzer selbst erstellt oder aus der Synthese von make-sfx.sh.
  • Erinnere den Nutzer daran, die Lizenz des Sprach-/Musikdienstes zu überprüfen, falls das Video für Kunden oder kostenpflichtige Werbung verwendet wird.
  • Wissenschaftliche Vereinfachung ist erlaubt, falsche Konzepte nicht.

Verwandte Skills