Zman2087/faceless-studio

Animiertes Video

Alles hier rendert in remotion/ ohne Credits. Zwei Ebenen – immer zuerst Ebene 1 versuchen:

1. Vorgefertigte Szenen kombinieren zu einem Spec (Minuten, kein Code).
2. Neuen Szenentyp hinzufügen, wenn eine Idee es wirklich erfordert (Code, getestet, dann für jeden Agenten wiederverwendbar).

Vor dem lokalen Rendern: Wenn remotion/node_modules fehlt, cd remotion && npm ci ausführen (Das erste Rendern lädt auch Remotions Headless Chrome herunter, ~170 MB, einmalig).

Ebene 1 – Der Szenenbaukasten

Szene (shots[].type)	Am besten geeignet für	Wichtige Felder
kinetic	Den Hook, eine Pointe	text, highlight, per_word (0.18) – Wörter erscheinen nacheinander
title	Eine einzelne fette Zeile	text ≤ 6 Wörter, highlight
number	Eine auffällige Zahl	value, prefix, suffix, decimals, caption, color – zählt hoch
bars	Größenvergleiche	title, unit, items[{label,value,color}]
compare	Sie vs. du, Mythos vs. Fakt, vorher/nachher	title, left{label,items,color}, right{…}
list	"3 Dinge", tun/lassen	items, style tick/cross/number
timeline	Der zeitliche Ablauf	items[{year,text}]
chat	Eine in Textnachrichten erzählte Geschichte	title (Kontakt), messages[{from: me/them, text, at}]
quote	Ein belegter Satz	text, by
media	B-Roll, ein Foto, den KI-Clip	src, kenburns, headline, fit

Jede Szene akzeptiert label (Kicker), stamp (Stempelnummer), bg (gedimmtes Foto/Video dahinter, mit credit) und transition (fade Standard, cut, slide, zoom, wipe). Overlays (headline, textover, lowerthird, stamp) liegen über jeder Szene. Vollständige Referenz: remotion/SPEC.md. Ein durchgearbeitetes Beispiel für jeden neuen Szene: remotion/examples/animated.json.

Rezepte

• Faceless-Erklärvideo (20–40 s): kinetic Hook → number → bars/compare → list → title Auflösung, die den Hook aufgreift. Voice-Over als audio, Untertitel aus words, ein dezenter music-Track bei 0.08–0.12.
• Textnachrichten-Geschichte: kinetic Hook ("Sie antwortete um 3 Uhr morgens") → ein chat Shot pro Austausch (at im Abstand von 0.8–1.4 s, auf die Erzählung abgestimmt) → title Twist. Halte jede Blase ≤ 10 Wörter.
• Animierte Einblendung in einem Sprechvideo: CLIP_1 … number oder compare für 2–3 s zum passenden Takt (transition: "zoom") … zurück zu CLIP_1 mit start auf die Stelle gesetzt, wo der Clip fortgesetzt werden soll.
• Mythos vs. Fakt: compare mit left.color: "danger", right.color: "good", dann ein stamp "FALSCH" auf dem nächsten title.

Plane die Beats mit video-script (tools/beats.mjs passt die Szenen an die Stimme an), dann:

cd remotion
node render.mjs job/spec.json --validate
node render.mjs job/spec.json job/final.mp4 --preview job/check.jpg --at 0.1,<Mitte jeder Szene>,<Ende-1>

Sieh dir immer den Vorschaustreifen an bevor du auslieferst: Hook vollständig bei 0.1 s gezeichnet, nichts an den Rändern abgeschnitten, keine überlappenden Texte, die Akzentfarbe lesbar, der KI-generierte Tag und Wasserzeichen vorhanden.

Stilregeln

• Marke aus settings.brand (Spec theme): eine Akzentfarbe, verwendet für das eine Element, das in jeder Szene zählt.
• ≤ 7 Wörter pro Überschrift, ≤ 12 pro Textover, ≤ 4 Einträge pro Listen-/Vergleichsspalte (der Telefonbildschirm ist klein).
• Eine Szene bleibt mindestens 1,5 s pro Textzeile stehen.
• Zahlen müssen mit citations übereinstimmen; animiere niemals eine Zahl, die du nicht recherchiert hast.
• Keine Markenlogos, keine Fotos echter Personen, keine Screenshots echter Chats.

Ebene 2 – Ein neuer Szenentyp

Nur wenn keine Kombination oben die Idee zeigen kann (z. B. eine Kartenroute, ein Fortschrittsring, eine Split-Screen-Reaktion).

1. src/types.ts: XShot = ShotBase & { type: "x"; … } hinzufügen und zum Shot-Union-Typ hinzufügen.
2. src/shots/Shots.tsx: Die Komponente neben den anderen schreiben – mit spring/interpolate von useCurrentFrame() animieren (niemals CSS-Animationen oder Math.random: Rendering muss deterministisch sein), t.font, t.accent, tone(t, color) verwenden, Größe für 1080×1920, dann eine if (s.type === "x") body = …- Zeile in ShotView einfügen. Wenn die Szene bei 0 s (base === 0) erscheint, zeichne sie vollständig ohne Eingangsanimation.
3. render.mjs: "x" zu types hinzufügen und Validierung für seine Pflichtfelder (der Prüfagent verlässt sich auf diese Meldungen).
4. SPEC.md + Tabelle oben: Dokumentieren. Zu examples/animated.json hinzufügen.
5. Testen: npx tsc --noEmit -p ., node render.mjs examples/animated.json out/animated.mp4 --preview out/animated.jpg --at … und das Ergebnis betrachten.