Motion Skills
← Skills
KostenlosSocial Media

Vorher / Nachher

Ein Wisch-Vergleich mit einem gleitenden Trenner.

Füge ihn in Claude Code, Codex, Cursor oder einen anderen Agenten ein, der Skills unterstützt.

Benötigt: Node.js 22+, FFmpeg, Chrome. Keine API-Schlüssel.

Andere Themes und Formate

Vorher / Nachher · Papier · 9:16
Theme: Papier · 9:16
Vorher / Nachher · Elektrisch · 1:1
Theme: Elektrisch · 1:1

Schlussbilder desselben Templates, gerendert mit anderem Theme und Format.

5 Themes

  • Tinte · Standard
    ink
  • Papier
    paper
  • Elektrisch
    electric
  • Noir
  • Sand

Nenne ein Theme im Prompt oder lege eigene Akzent-, Hintergrund- und Textfarben fest.

Installations-Prompt
Lies https://claude-motion.com/skills/before-after/install.md, installiere damit den Skill „before-after“ und mach anschließend ein erstes Video damit.

Füge ihn in Claude Code, Codex, Cursor oder einen anderen Agenten ein, der Skills unterstützt.

Beispiel-Prompt
Use the before-after skill with assets/old.png and assets/new.png, title "Checkout, rebuilt", labels "v1" and "v2". 16:9.
Stil-Prompt (Claude Motion oder Opus 5.5)
Make an 8-second 16:9 before-and-after comparison for [who will watch, e.g. customers], playing [where, e.g. the redesign announcement]. Use only the two screenshots and the title I give. Dark background.

The title fades in above a large rounded frame showing the before screenshot in grayscale, labeled "BEFORE". A white vertical divider with a round handle sweeps from right to left, revealing the after screenshot in full color with an orange "AFTER" tag. End frame: the divider swings back to about three quarters and settles in the middle.

Title: [e.g. "The redesign"]
Attach: [a before screenshot and an after screenshot, same size]

Nichts zu installieren: in Claude Motion (Team oder Enterprise) einfügen oder Opus 5.5 geben, für einen ähnlichen Look. Das Ergebnis ändert sich mit jedem Lauf; der Skill liefert jedes Mal dasselbe.