nathanaelhub/make-reel

Was macht make-reel?

Du bist der Editor, Animator und Sprecher. Der Benutzer tippt eine Zeile („Erstelle ein Reel darüber, warum Flugzeugessen so fad schmeckt“); du lieferst ein MP4 aus, das du selbst überprüft hast.

Alles wird über npm-Skripte aus dem Repository-Stammverzeichnis ausgeführt. Alle Pfade unten beziehen sich auf das Repository-Stammverzeichnis.

0 · Einrichtung (beim ersten Mal in einer Sitzung)

Führe npm run doctor aus. Wenn etwas als ✗ angezeigt wird, führe npm run doctor -- --fix aus und führe doctor erneut aus.

• Falls kein Sprachprovider verfügbar ist, teile dem Benutzer einmal mit: Die Reels werden stumme Entwürfe sein, bis sie ELEVENLABS_API_KEY (beste, genaues Wort-Timing) oder OPENAI_API_KEY zur .env hinzufügen oder Piper installieren. Auf macOS funktioniert die eingebaute say-Stimme kostenlos. Fahre dann fort; ein stummer Entwurf ist dennoch nützlich.
• Gib niemals den Inhalt von .env aus oder committe ihn.

1 · Geschmack zuerst (wenn vorhanden)

Ein Reel ohne Referenz wirkt generisch. Wenn der Benutzer Referenzlinks oder -dateien angibt, eine Marke nennt oder sagt „wie dieses“:

1. npm run ref -- <geschmack> <links oder dateien> (ein Name oder ein absoluter Pfad für einen privaten Markenordner). Es lädt herunter, misst und schreibt Kontaktbögen.
2. Öffne jede refs/*.sheet.jpg mit dem Lesewerkzeug und schaue sie dir an. Fülle dann den Notizen-Abschnitt von taste/<geschmack>/taste.md aus: Tempo, Untertitel und Typ, Farbe, Bewegung, Sound, Tun, Lassen. Sei spezifisch („weiße, kondensierte Großbuchstaben, zwei Wörter auf einmal, unteres Drittel“), nicht generisch („modern, sauber“).
3. Setze "taste": "<geschmack>" in script.json.

Wenn für diese Marke bereits ein Geschmack existiert, lies seine taste.md und schaue dir seine Bögen an, bevor du etwas schreibst. Wenn der Benutzer einen ausgefeilten Look wünscht und es keinen Geschmack gibt, frage einmal nach 3 bis 5 Reels, die ihm gefallen, bevor du baust.

Inspiriert von, niemals kopiert: Verwende niemals das Filmmaterial, die Musik, die Wortwahl, Logos oder exakten Layouts einer Referenz erneut.

2 · Plane das Reel

Wähle einen kurzen Kebab-Case-Slug, dann npm run new -- <slug> "<Titel>". Dies erstellt reels/<slug>/ mit script.json, reel.html, assets/.

Lies .claude/skills/make-reel/guides/script.md und schreibe reels/<slug>/script.json:

• 6–10 Szenen, insgesamt 30–55 Sekunden. Eine Idee pro Szene, 8–20 gesprochene Wörter pro Szene.
• Szene 1 ist der Hook und kommt in unter 2 Sekunden auf den Punkt.
• Jede Szene hat id, say (exakte Erzählung) und visual (was der Betrachter sieht, mit dem Wort, auf das jeder visuelle Schlag fällt).
• Wenn das Thema faktisch ist, recherchiere korrekte Fakten. Überprüfe alles, bei dem du dir nicht sicher bist (suche, wenn möglich) und füge die Quelle in einen Kicker oder Hinweis auf dem Bildschirm ein. Bevorzuge abgesicherte Zahlen („bis zu 30%“) gegenüber erfundener Genauigkeit.

3 · Vertone es

npm run voice -- <slug>

Dies erstellt voice.mp3 und timeline.json (Szenenanfang/-ende + Zeitstempel jedes Wortes). Lies die gedruckte Tabelle: Es ist das Timing, gegen das du animierst. Clips werden pro Szene zwischengespeichert, sodass spätere Bearbeitungen nur geänderte Szenen neu vertonen.

4 · Animiere es

Lies .claude/skills/make-reel/guides/scenes.md (die vollständige Kit-Referenz) und .claude/skills/make-reel/guides/style.md (den Look). Schreibe dann reels/<slug>/reel.html: ein <section class="scene" data-scene="<id>"> pro Skriptszene, gleiche IDs, gleiche Reihenfolge.

Die wichtigsten Regeln:

• Bewegung mit Worten synchronisieren. Verwende data-at="@wort", damit Dinge genau dann erscheinen, wenn sie gesagt werden. Jede Szene sollte einen Schlag auf ihrem Schlüsselwort haben, nicht nur einen Eintritt bei 0.
• Es bewegt sich ständig etwas. Keine längere Pause von ~2s ohne Änderung. Verwende wortsynchrone Schläge, data-loop, Zähler, zeichnende SVG-Linien.
• Layout: Text innerhalb x 72–1008. Überschriften ab y≈230. Hauptvisual zwischen y≈450 und 1180. Untertitel sitzen bei y≈1240–1440; halte Inhalte aus diesem Bereich heraus oder setze data-captions="top" / "off" auf der Szene. Nichts Wichtiges unterhalb y 1700 (App-UI überdeckt es).
• Positionen sind absolut (class="abs" + inline left/top). Verwende niemals CSS-Animationen oder -Übergänge; alle Bewegungen erfolgen über Datenattribute oder Reel.on()-Hooks, und alle laufen auf Federn (spring, spring-snappy, spring-bouncy, spring:k,c,m). Die Prüfung schlägt sonst fehl.
• Kein zentrierter Großbuchstaben-Text auf einem Farbverlauf (die Prüfung schlägt darauf fehl).
• Visuelles: Emoji, Inline-SVG, CSS-Formen, die Karten/Telefon/Fenster/Stempel/Chips des Kits sowie Bilder in reels/<slug>/assets/. Lade keine Bilder von echten Personen herunter oder verwende Logos/Charaktere, die dir nicht gehören.

5 · Überprüfe deine eigene Arbeit (immer, vor dem Rendern)

npm run check -- <slug>

1. Behebe jeden ✗-Fehler. Behebe ⚠-Warnungen, es sei denn, du hast einen Grund, es nicht zu tun.
2. Öffne jedes aufgelistete Kontaktbogen-PNG mit dem Lesewerkzeug und schaue es dir tatsächlich an. Linting kann keinen Geschmack beurteilen. Achte auf: überlappende oder gequetschte Elemente, schwer lesbaren Text, leere oder langweilige Szenen, visuelle Elemente, die nicht zur Erzählung passen, Untertitel, die Inhalt verdecken, inkonsistenten Stil zwischen den Szenen.
3. Wenn das Reel einen Geschmack hat, gibt die Prüfung die Referenzbögen aus. Betrachte sie neben den Bögen des Reels und nenne die drei größten Unterschiede (Tempo, Typ, Farbe, Bewegung). Behebe die, die wichtig sind, oder erkläre, warum nicht.
4. Bearbeite, führe die Prüfung erneut aus, schaue nochmal nach. Wiederhole, bis sauber. Normalerweise 1–3 Durchgänge.

6 · Rendere

npm run render -- <slug>. Ausgabe: out/<slug>.mp4. Verwende --draft für eine schnelle Halbformat-Vorschau, --from 10 --to 18, um nur einen Abschnitt zu rendern.

Extrahiere nach dem Rendern 3–4 Frames aus dem MP4 (ffmpeg -ss <t> -i out/<slug>.mp4 -frames:v 1 f.jpg) an Übergängen und wortsynchronen Treffern und schaue sie dir an, damit du sicherstellst, dass das MP4 dem entspricht, was die Prüfung gezeigt hat.

Übergabe: den MP4-Pfad, seine Länge, die verwendete Stimme und einen Satz zu Dingen, die du noch verbessern würdest. Wenn der Benutzer auf seinem eigenen Rechner arbeitet, erwähne npm run preview -- <slug>, um das Video mit Audio im Browser anzusehen.

7 · Feedback-Schleife

Lies .claude/skills/make-reel/guides/feedback.md. Der Benutzer wird Dinge sagen wie „fühlt sich falsch an“, „Hook ist schwach“, „Szene 4 zieht sich“, „mach den Stempel größer“. Ordne jede Anmerkung der kleinstmöglichen Änderung zu:

• Wortlaut, Tempo, eine Szene zu lang/kurz → bearbeite script.json, dann npm run voice (nur geänderte Szenen werden neu vertont). Wortzeitstempel verschieben sich, aber @wort-Referenzen folgen automatisch.
• Look, Layout, Bewegung, Timing eines Schlags → bearbeite nur reel.html. Keine Neuvertonung.
• Dann prüfen → Kontaktbögen ansehen → rendern. Sage in ein oder zwei Sätzen, was du geändert hast.