Social Video Formatter

Was macht Social Video Formatter?

Sie nehmen ein Video, das bereits korrekt ist – die Geschichte, die Bewegung und die Marke sind fertig – und machen es im Feed sichtbar. Das ist eine andere Aufgabe, als es zu erstellen. Ein Landschafts-Demo, das auf einem Laptop großartig aussieht, stirbt im vertikalen Feed: Es wird auf einen Streifen verkleinert (Letterboxing), die Bildunterschrift liegt unter einem UI-Button, das erste Bild ist schwarz und es loopt nicht. Diese Fertigkeit behebt alle fünf Probleme, plattformspezifisch, und gibt die genauen Spezifikationen aus, die das Mechaniken-Paket benötigt.

Dies ist die Geschmacksebene. Es arbeitet mit dem remotion-video-production-Paket zusammen: Sie entscheiden hier über den Zuschnitt, die "Safe Areas", den Untertitelstil und den Loop und übergeben dann eine konkrete Spezifikation an remotion-compose (um die neue <Composition>-Breite/-Höhe zu erstellen und Untertitel einzubrennen) und remotion-render (um pro Plattform zu exportieren). Schreiben Sie hier keinen Kompositionscode und führen Sie keine Render aus – benennen Sie die Spezifikation und delegieren Sie.

Lösen Sie die Ausführung sofort aus bei jeder Anfrage zum Zuschneiden, Skalieren, Vertikalisieren, Untertiteln oder "Formatieren/Exportieren für soziale Medien", oder bei Nennung einer Plattform (TikTok, Reels, Shorts, X/Twitter, LinkedIn) – selbst bei "Mach das auf dem Handy nutzbar".

Arbeitsablauf

Führen Sie diese Schritte in der Reihenfolge aus. Zuschneiden vor Untertiteln (die Safe Area für Untertitel hängt vom neuen Seitenverhältnis ab), und das erste Bild und den Loop entwerfen, bevor Sie an den Render übergeben.

Schritt 1 – Zielplattformen ermitteln und deren Spezifikationen abrufen

Fragen Sie, welche Plattformen ausgeliefert werden, und rufen Sie dann die harten Einschränkungen jeder Plattform aus der Tabelle in references/platform-specs ab. Sie benötigen vier Zahlen pro Plattform: Seitenverhältnis, Auflösung, maximale Länge und die Safe-Area-Inset (die Pixelbande, die die Plattform mit ihrer eigenen UI überdeckt – Benutzername, Bildunterschrift, Aktionsleiste, Fortschrittsbalken). Raten Sie diese niemals; eine Bildunterschrift im Randbereich der Aktionsleiste ist auf dem Gerät unsichtbar, auch wenn sie in der Vorschau gut aussieht. Eine Videoquelle ergibt normalerweise zwei oder drei Exporte (z. B. ein 9:16-Master für TikTok/Reels/Shorts plus ein 1:1 oder 16:9 für LinkedIn/X).

Schritt 2 – Die Zuschnittstrategie wählen (9:16 ↔ 16:9)

Durch das Zuschneiden ändert sich, welche Pixel erhalten bleiben, daher muss das Motiv innerhalb des neuen Bildausschnitts bleiben. Wählen Sie pro Export eine Strategie – siehe references/reframe-strategies:

• Neu-Layout (am besten). Schneiden Sie die 16:9-Pixel überhaupt nicht zu – gestalten Sie die Szene für die neue Leinwand neu: Stapeln Sie, was nebeneinander war, vergrößern Sie Text, verschieben Sie das Motiv in die vertikale Mitte. Dies ist eine Änderung in remotion-compose (neue Breite/Höhe, gleicher Inhalt) und schlägt jeden Zuschnitt. Übergeben Sie die Zieldimensionen.
• Center Crop. Behalten Sie die mittlere Spalte eines 16:9-Bildes für 9:16. Schnell, verwirft aber die äußeren Drittel – nur sicher, wenn das Motiv zentriert ist.
• Pad / Blur-Bars. Passen Sie das gesamte 16:9-Bild in 9:16 ein, mit einer unscharfen, skalierten Kopie, die den oberen/unteren Rand füllt. Akzeptabel für Sprecherkopf- oder Bildschirmaufnahmen; wirkt bei Bewegungsgrafiken faul.
• Punch-and-Track. Schneiden Sie auf das Motiv zu und bewegen Sie das Zuschneidefenster im Laufe der Zeit, um der Aktion zu folgen. Stärkstes Ergebnis, meiste Arbeit; geben Sie die Keyframes für remotion-compose an.

Der Weg von 9:16 → 16:9 ist die gleiche Logik in umgekehrter Richtung: Neu-Layout, um den neuen horizontalen Raum zu nutzen, anstatt einen vertikalen Clip in einen Landschaftsstreifen zu setzen.

Schritt 3 – Die Safe Areas auf den neuen Bildausschnitt abbilden

Für jeden Export legen Sie die Safe-Area-Inset der Plattform übereinander und halten jedes wesentliche Element – Untertitel, Logo, CTA, Hauptmotiv – innerhalb des sicheren Rechtecks. Die rechten/unteren Ränder (Aktionsleiste + Bildunterschriftenblock) sind die üblichen Übeltäter bei 9:16. Führen Sie safe_area.js (unten) aus, um die prozentualen Safe-Area-Insets in Pixelboxen für Ihre genaue Auflösung umzuwandeln, und übergeben Sie diese Zahlen dann als Layout-Grenzen an remotion-compose. Behandeln Sie die unsichere Bande als tabu für alles, was lesbar sein muss.

Schritt 4 – Das plattformnative erste Bild entwerfen

Das erste Bild ist das Thumbnail und das "Scroll-Stopper"; die Autoplay-Funktion startet stumm, daher muss Frame 0 ohne Audio eine Bedeutung vermitteln. Öffnen Sie nicht mit Schwarz, einem Logo-Intro oder in der Mitte einer Überblendung. Öffnen Sie mit einem lesbaren Haken: dem Endergebnis, einer fetten Bildunterschrift oder dem bereits sichtbaren Motiv. Dies ist eine remotion-compose-Bearbeitung der Einleitungsszene (oder ein 1-2 Sekunden langer vorangestellter Haken). Geben Sie genau an, was Frame 0 zeigt.

Schritt 5 – Eingebrannte Untertitel spezifizieren

Gehen Sie von stummgeschalteter Wiedergabe aus: Untertitel sind obligatorisch, nicht optional, und müssen eingebrannt (in die Pixel gerendert) werden, da hochgeladene .srt-Seitendateien inkonsistent und über Plattformen hinweg nicht stylbar sind. Spezifizieren Sie für remotion-compose: Position (innerhalb der Safe Area, typischerweise unteres Drittel, aber über dem Randbereich des Bildunterschriftenblocks), Stil (groß, kontrastreich, halbfett, mit einer Kontur oder einem soliden Hintergrund für Lesbarkeit vor jedem Hintergrund), Timing (phraseweise Häppchen, synchron zur Sprache, kein Textblock) und niemals mehr als ~2 Zeilen auf dem Bildschirm. Für animierte Wort-für-Wort-Untertitel delegieren Sie die Bewegungsgestaltung an kinetic-typography und geben hier nur die Safe-Area-Box und das Timing an.

Schritt 6 – Den Loop entwerfen

Feeds spielen Clips sofort erneut ab, daher vervielfacht ein sauberer Loop die Sehzeit. Entscheiden Sie sich für einen:

• Nahtloser Loop – Das letzte Bild entspricht dem ersten Bild (gleiche Komposition, Position, Farbe), sodass die Wiederholung unsichtbar ist. Am besten für kurze Ambient-/Brand-Loops.
• Hook-back Loop – Enden Sie mit einem Satz, der den Betrachter zurück zum Anfang schickt ("…und das ist Schritt eins"), wodurch das erneute Ansehen beabsichtigt wird.
• Hard Stop – Eine abschließende CTA-Endkarte; korrekt für längere narrative Stücke, bei denen sich ein Loop kaputt anfühlen würde.

Für einen nahtlosen Loop sind die Öffnungs- und Schlussbilder eine remotion-compose-Einschränkung (Passen Sie Frame 0 und das letzte Bild an). Nennen Sie den Loop-Typ und die passenden Bilder.

Schritt 7 – Die Exportspezifikation ausgeben und übergeben

Füllen Sie die export-spec-Vorlage unten aus – ein Block pro Plattform. Diese Spezifikation ist das Briefing für das Mechaniken-Paket: remotion-compose erstellt eine <Composition> pro Seitenverhältnis mit dem Safe-Area-Layout, dem ersten Bild und eingebrannten Untertiteln; dann exportiert remotion-render jede (ein 9:16-Export ist eine Composition, die bei 1080×1920 erstellt wird, gemäß remotion-renders vertikaler Voreinstellung). Rendern Sie hier nicht – liefern Sie die Spezifikation.

Qualitätsanspruch

Ein Export ist nur dann A+, wenn alles gilt:

• Jeder Plattform-Export nennt ein reales Seitenverhältnis, eine Auflösung, eine maximale Länge UND eine Safe-Area-Box – aus der Spezifikationstabelle, niemals geraten.
• Kein wesentliches Element (Untertitel, Logo, CTA, Motiv) befindet sich in einem unsicheren Randbereich einer Zielplattform; überprüft gegen die safe_area.js-Boxen.
• Der Zuschnitt ist ein Neu-Layout oder ein verfolgter Zuschnitt, bei dem das Motiv sonst verloren gehen würde – kein blinder Center Crop oder faules Blur-Bar-Padding bei einem Bewegungsstück.
• Frame 0 ist bei ausgeschaltetem Ton lesbar: ein Haken, ein Ergebnis oder ein Motiv – niemals schwarz, niemals ein nacktes Logo, niemals in der Mitte einer Überblendung.
• Untertitel sind eingebrannt, innerhalb der Safe Area, in Phrasen aufgeteilt, ≤2 Zeilen, kontrastreich.
• Der Loop-Typ ist bewusst gewählt, und bei einem nahtlosen Loop sind das erste/letzte Bild passend spezifiziert.
• Das Ergebnis ist eine Spezifikation, die an remotion-compose / remotion-render übergeben wird – diese Fertigkeit hat keinen Kompositionscode erstellt und keinen Render ausgeführt.

NICHT

• NIEMALS das Projekt aufsetzen, Kompositionscode schreiben oder den Render hier ausführen – Spezifikation benennen und an remotion-setup / remotion-compose / remotion-render delegieren.
• NIEMALS eine 16:9-Quelle mittig auf 9:16 zuschneiden, wenn das Motiv außermittig ist; Sie würden das Motiv wegschneiden. Stattdessen neu layouten oder verfolgen.
• NIEMALS Untertitel, CTAs oder Logos in den rechten/unteren Randbereichen platzieren, wo die Aktionsleiste und der Bildunterschriftenblock der Plattform sie überdecken.
• NIEMALS auf hochgeladene .srt/.vtt-Seitendatei-Untertitel für soziale Medien vertrauen; brennen Sie sie in die Pixel ein, damit sie immer angezeigt werden und Sie die Kontrolle über den Stil haben.
• NIEMALS mit Schwarz, einem Logo-Intro oder einer Überblendung beginnen – Frame 0 ist das Thumbnail.
• NIEMALS eine einzige 16:9-Datei an alle Plattformen ausliefern; vertikale Feeds verkleinern sie auf einen Streifen. Pro Seitenverhältnis exportieren.
• NIEMALS die maximale Länge einer Plattform überschreiten und erwarten, dass es "trotzdem gepostet wird" – es wird abgeschnitten oder abgelehnt; kürzen Sie auf das Limit.
• NIEMALS hier eine Wort-für-Wort-Untertitelanimation entwerfen – das ist Sache von kinetic-typography; geben Sie nur die Safe Box und das Timing an.
• NIEMALS hier das Storyboard oder die Reihenfolge der Einstellungen planen – wenn das Video noch nicht existiert, ist das Sache von video-storyboard; diese Fertigkeit schneidet ein bereits fertiggestelltes Video zu.
• NIEMALS hier die Bewegung von Elementen (Easing, Abstände, Durchschwung) optimieren – das ist Sache von motion-design-principles; diese Fertigkeit gibt nur die neue Leinwand und Grenzen an.
• NIEMALS hier die Palette, den Kontrast oder die Beleuchtung für den Zuschnitt wählen – delegieren Sie diese Entscheidungen an motion-color-and-light.
• NIEMALS hier den Inhalt der Produktdemo oder die Bildschirmchoreografie inszenieren – das ist Sache von product-demo-director; diese Fertigkeit geht davon aus, dass der Inhalt feststeht.
• NIEMALS hier die Musik, den Beat-Sync oder den Ton entwerfen – Untertitel gehen von stummgeschalteter Autoplay aus, aber Audio ist Aufgabe von sound-and-music-sync.

Verwandte Fertigkeiten

Dies ist eine handwerkliche Fertigkeit in einem Video-Paket; delegieren Sie an eine Schwesterfertigkeit, wenn die Anfrage eigentlich deren Zuständigkeit betrifft, und übergeben Sie das Formatspezifikationsblatt an die Mechaniken-Fertigkeiten:

• video-storyboard – Planen Sie Beats und die Reihenfolge der Einstellungen, bevor ein Video existiert. Kommt vor dieser Fertigkeit.
• product-demo-director – Inszenieren Sie den Demo-Inhalt und die Bildschirmchoreografie.
• motion-design-principles – Das handwerkliche Können bei Easing, Abständen und Bewegung der Animation; ziehen Sie es zu Rate, wenn Sie ein Bild für ein neues Seitenverhältnis neu layouten.
• motion-color-and-light – Entscheidungen zu Palette, Kontrast und Beleuchtung.
• kinetic-typography – Animierte Wort-für-Wort-Untertitelbewegung (Sie geben die Safe Box und das Timing vor; es entwirft die Animation).
• sound-and-music-sync – Musik und Beat-Sync; die Audioebene, die diese Fertigkeit bewusst nicht berührt.
• remotion-compose / remotion-render – Die Mechaniken, die die Exportspezifikation dieser Fertigkeit verbrauchen, um die <Composition> pro Seitenverhältnis zu erstellen und die MP4 zu exportieren.

Rechner

In sich geschlossenes Node-Skript. Speichern Sie es als safe_area.js und führen Sie es mit node safe_area.js aus. Es wandelt die prozentualen Safe-Area-Inset jeder Plattform in Pixelboxen für die Auflösung dieser Plattform um, sodass Sie remotion-compose genaue Layout-Grenzen übergeben können. Keine Abhängigkeiten. Bearbeiten Sie den platforms-Block, wenn sich die Spezifikationen ändern.

// Social Safe-Area-Rechner. Ausführung: node safe_area.js
// Insets sind der Prozentsatz jeder Kante, den die Plattform-UI bedeckt (oben/rechts/unten/links).
// Rechts + unten sind bei 9:16 groß aufgrund der Aktionsleiste und des Bildunterschriftenblocks.
const platforms = [
  { name: 'TikTok',         w: 1080, h: 1920, top: 6,  right: 11, bottom: 17, left: 3 },
  { name: 'Reels',          w: 1080, h: 1920, top: 7,  right: 12, bottom: 18, left: 3 },
  { name: 'Shorts',         w: 1080, h: 1920, top: 5,  right: 12, bottom: 13, left: 3 },
  { name: 'X (im Feed)',    w: 1080, h: 1080, top: 4,  right: 4,  bottom: 12, left: 4 },
  { name: 'LinkedIn',       w: 1080, h: 1350, top: 4,  right: 4,  bottom: 10, left: 4 },
]

function box(p) {
  const insetX = (pct) => Math.round((pct / 100) * p.w)
  const insetY = (pct) => Math.round((pct / 100) * p.h)
  const x = insetX(p.left)
  const y = insetY(p.top)
  const safeW = p.w - insetX(p.left) - insetX(p.right)
  const safeH = p.h - insetY(p.top) - insetY(p.bottom)
  return { x, y, safeW, safeH }
}

for (const p of platforms) {
  const b = box(p)
  console.log(
    p.name.padEnd(14),
    `${p.w}x${p.h}`.padEnd(11),
    'safe box -> x:' + String(b.x).padEnd(4),
    'y:' + String(b.y).padEnd(4),
    'w:' + String(b.safeW).padEnd(5),
    'h:' + b.safeH
  )
}

Ausgabe des Arbeitsbeispiels

TikTok         1080x1920   safe box -> x:32   y:115  w:929   h:1479
Reels          1080x1920   safe box -> x:32   y:134  w:918   h:1440
Shorts         1080x1920   safe box -> x:32   y:96   w:918   h:1574
X (im Feed)    1080x1080   safe box -> x:43   y:43   w:994   h:907
LinkedIn       1080x1350   safe box -> x:43   y:54   w:994   h:1161

Lesen Sie es: Legen Sie bei TikTok jedes lesepflichtige Element innerhalb von x 32→961, y 115→1594. Der rechte Rand (die Aktionsleiste: Like, Kommentar, Teilen) frisst die letzten ~119px, und der untere Rand (Benutzername + Bildunterschrift) frisst ~326px – alles dort wird auf dem Gerät überdeckt, obwohl es in der Studio-Vorschau gut aussieht. Übergeben Sie diese als Layout-Grenzen an remotion-compose; positionieren Sie bei einer vertikalen 1080×1920-Composition Untertitel und CTA innerhalb der Box, nicht an den rohen Bildrändern.

Vorlage: export-spec

Füllen Sie einen Block pro Plattform aus. Dies ist das Briefing, das remotion-compose und remotion-render verbrauchen – fügen Sie die Safe-Area-Zahlen aus safe_area.js ein.

SOCIAL EXPORT SPEC. [FÜLLEN: Videotitel]. Quelle: [FÜLLEN: 16:9 Master, 1920x1080]

PLATTFORM: [FÜLLEN: TikTok / Reels / Shorts / X / LinkedIn]
  Seitenverhältnis / Auflösung: [FÜLLEN: 9:16 / 1080x1920]
  Maximale Länge:              [FÜLLEN: z.B. <= 60s im Feed]
  Safe Box (px):               x:[FÜLLEN] y:[FÜLLEN] w:[FÜLLEN] h:[FÜLLEN]   (aus safe_area.js)
  Zuschnittstrategie:          [FÜLLEN: Neu-Layout / Center Crop / Blur-Pad / Punch-and-Track]
    -> remotion-compose:      [FÜLLEN: Neue Composition WxH + Layout-Notizen / Crop-Keyframes]
  Erstes Bild (Frame 0):       [FÜLLEN: der stumme Haken bei 0 - niemals schwarz/Logo/Überblendung]
  Untertitel:                  eingebrannt, [FÜLLEN: Position in Safe Box], <=2 Zeilen,
                               in Phrasen aufgeteilt, [FÜLLEN: Stil - Größe/Kontrast/Hintergrund]
  Loop:                        [FÜLLEN: nahtlos / Hook-back / Hard Stop]
    -> wenn nahtlos:           Frame 0 entspricht letztem Bild bei [FÜLLEN: Position/Farbe]
  Render:                      remotion-render [FÜLLEN: Voreinstellung, z.B. 1080x1920 H.264 MP4]

(Wiederholen Sie den Block für jede Zielplattform)

references/platform-specs

Überprüfen Sie vor dem Ausliefern jeden Eintrag anhand der aktuellen Creator-Dokumentation der jeweiligen Plattform; dies ist die stabile Form, aber Grenzen verschieben sich. Seitenverhältnis und Safe Areas sind wichtiger als die genaue maximale Länge.

• TikTok – 9:16, 1080x1920. Sweet Spot im Feed ist kurz (unter ~60s), Uploads können viel länger sein. Starke rechte Aktionsleiste und ein hoher unterer Bildunterschriftenblock; halten Sie lesepflichtige Inhalte hoch und zentriert. Kultur mit Ton, aber trotzdem Untertitel für Barrierefreiheit und stummgeschaltete Autoplay.
• Instagram Reels – 9:16, 1080x1920. Bis zu ~90s. Ähnliche rechte/untere UI wie TikTok, plus die Profil-/Audiozeile unten. Der Zuschnitt im Raster ist 1:1, daher muss die Mitte auch als quadratisches Thumbnail lesbar sein.
• YouTube Shorts – 9:16, 1080x1920. Bis zu 60s (jegliche weitere Inhalte werden abgeschnitten). Weniger aggressive UI-Inset als TikTok/Reels, aber die untere Leiste (Titel, Aktionen) bedeckt einen Teil. Die vertikale Beschriftung im Kanal-Layout ist anders; konzentrieren Sie sich auf das In-Feed-Erlebnis.
• X (ehemals Twitter) – In-Feed 1:1, 1080x1080. Bis zu ~140s (variiert mit dem Upload-Mechanismus). Minimale UI-Überlagerung – die untere Leiste ist schlank – aber die Safe Box ist trotzdem relevant für die Vorhersagbarkeit. Hoch-/Querformat-Videos werden hart auf 2:1 beschnitten oder geletterboxt; 1:1 ist sicher.
• LinkedIn – In-Feed 1:1 oder 4:5, 1080x1080 oder 1080x1350. Bis zu ~10 Minuten, aber die Aufmerksamkeitsspanne ist kurz; anvisieren ≤2–3 Minuten. Untere Leiste mit Aktionen und Berufsbezeichnung; darüber hinaus eine benutzerdefinierte CTA („Mehr erfahren“) ist üblich. LinkedIn bevorzugt die horizontale Beschriftung für Desktop, aber native Video-Uploads sind 1:1 – brennen Sie Beschriftungen vertikal ein, wenn Sie in beide Richtungen ausliefern.

Siehe Tabelle safe_area.js für die exakten numerischen Inset, die für jeden Eintrag getestet wurden. Bestätigen Sie vor dem Ausliefern anhand der Creator-Dokumentation.

Fazit

Diese Fertigkeit besitzt eine einzige Aufgabe: Nehmen Sie ein fertiges Video und machen Sie es für soziale Feeds funktionsfähig – indem Sie neu zuschneiden, den Bildschirmbereich mit Inhalten versehen, ein erstes Bild entwerfen, Untertitel einbrennen, das Loop-Design planen und eine Ausgabeformatspezifikation ausgeben, die remotion-compose in ausführbare Kompositionen und remotion-render in ausgelieferte MP4s umwandeln kann.