Kinetischer Titelclip

Kinetic-Schriftzug-Animation

Ein Sechs-Sekunden-1920×1080 reiner Typografie-Film in drei Schlägen:

1. Ein riesiges erstes Wort öffnet das Bild mit einem haarfeinen Schrägstrich und setzt sich dann oben links.
2. Ein zweites Wort fällt als Umriss ein und füllt sich mit der Akzentfarbe.
3. Eine Schlusszeile rauscht von rechts mit einem Bewegungsunschärfeeffekt herein, und ein Akzentbalken wischt darunter. Ein Chip und eine Fußzeile blenden ein, alles hält kurz an und verschwindet dann sauber.

Die Vorlage ist eine HyperFrames-Komposition. Sie füllen ein Briefing aus, ein Skript schreibt es in die Vorlage, und HyperFrames prüft und rendert das MP4 lokal. Text wird in der tatsächlichen Schriftart gemessen und auf die Bildgröße skaliert, sodass kurze und lange Wörter denselben Platz einnehmen.

Was Sie brauchen

• Node.js 22 oder neuer und FFmpeg im PATH.
• HyperFrames läuft über npx, festgelegt auf die Version, mit der diese Vorlage getestet wurde: npx --yes [email protected].
• Der erste Render lädt einen Headless-Chrome herunter. Wenn render sagt, dass Chrome fehlt, führen Sie einmal npx --yes [email protected] browser ensure aus.
• Netzwerkzugriff auf cdn.jsdelivr.net, das GSAP für die Vorlage bereitstellt. Siehe Fehlerbehebung, wenn es blockiert ist.

Der Ordner dieser Fähigkeit ist <skill> unten: der Ordner, in dem sich diese SKILL.md befindet.

Schritte

1. Text besorgen

Fragen Sie nach allem, was Sie nicht ableiten können. Jedes Feld hat ein Limit; das Skript lehnt Werte ab, die darüber liegen.

Feld	Was es ist	Limit	Gutes Beispiel
line1	Erstes Wort. Öffnet riesig, sitzt dann oben links.	10	Ship
line2	Zweites Wort. Fällt als Umriss ein, füllt sich mit Akzent.	6	it
line3	Die Schlusszeile. Größte Zeile, mit dem Balken darunter.	12	today.
chip	Kleine Pille, oben rechts. Version, Datum oder Status.	24	v2.0 · Jetzt verfügbar
metaLeft	Fußzeile, links. Was es ist, in wenigen Worten.	60	Release Notes · 14 Fixes
metaRight	Fußzeile, rechts. Meist eine URL oder ein Handle.	40	relay.example/changelog

Schreibtipps:

• Zeilen 1 und 2 teilen sich die obere Reihe, zusammen sollten sie wie der Beginn einer Phrase klingen („Ship / it", „Notes / that", „Meet / the"). Zeile 3 beendet sie.
• Alles wird in Großbuchstaben gesetzt. Einzelne Wörter lesen sich am besten; Zeile 3 kann aus zwei kurzen Wörtern bestehen.
• Halten Sie line1 + line2 unter etwa 12 Zeichen, sonst wird die obere Reihe neben der Schlusszeile klein.
• Die Fußzeile bleibt etwa 2 Sekunden sichtbar, also halten Sie sie gut lesbar.

2. Farben auswählen

Drei Hex-Farben: ground (Hintergrund), ink (Text) und accent (Umriss, Füllung, Balken, Chip). Verwenden Sie die Markenfarben, falls vorhanden. Andernfalls starten Sie mit einer Voreinstellung:

Voreinstellung	ground	ink	accent
Ember	#0f1013	#f5f4ef	#ff5b2e
Fieldnote	#f1ede4	#18201c	#2f6b4f
Cobalt	#0b1020	#eef1ff	#5b7cff
Paper	#fbfaf7	#111111	#e8462b
Lime	#101410	#f2f5ee	#b6f23a

ink benötigt starken Kontrast zu ground; accent benötigt mindestens 3:1 zu ground, da Zeile 2 darin gezeichnet wird. check misst beide und teilt Ihnen mit, ob eines durchfällt.

3. Projekt erstellen und Briefing anwenden

cp -r <skill>/template ./titel-drop
cd titel-drop

Schreiben Sie brief.json im Projekt mit den Feldern aus Schritt 1 und 2:

{
  "line1": "Ship",
  "line2": "it",
  "line3": "today.",
  "chip": "v2.0 · Out now",
  "metaLeft": "Release notes · 14 fixes · 3 new features",
  "metaRight": "relay.example/changelog",
  "ground": "#0f1013",
  "ink": "#f5f4ef",
  "accent": "#ff5b2e"
}

Schreiben Sie es dann in die Vorlage:

node <skill>/scripts/apply-brief.mjs . brief.json

Es prüft jeden Wert gegen die deklarierten Variablen der Vorlage (Typ, Länge, Farbformat) und listet alle Probleme auf einmal auf, wenn etwas nicht stimmt. Korrigieren Sie das Briefing und führen Sie es erneut aus. Sie können Felder weglassen, um den aktuellen Wert zu behalten.

Zwei fertige Briefings finden Sie in <skill>/examples/.

4. Prüfen

npx --yes [email protected] check --json

check lintet die Datei, spielt sie in einem Browser ab, misst das Layout über die Zeit und testet den Kontrast. "ok": true ohne Funde bedeutet, dass es bereit ist. Beheben Sie jeden Fund vor dem Rendern. Diejenigen, die der Text verursachen kann:

• contrast_aa_failure: Ein Farbpaar ist zu nah beieinander. Verwenden Sie die vorgeschlagene Farbe suggestedColor oder wählen Sie einen dunkleren oder helleren Farbton.
• text_box_overflow, clipped_text oder content_overlap: Ein Wert ist länger als von der Vorlage erwartet, normalerweise eine Fußzeile oder ein Chip, das mit seinem Nachbarn kollidiert. Kürzen Sie ihn.

Ändern Sie nicht die Struktur der Vorlage, um einen Fund zu unterdrücken. Korrigieren Sie stattdessen das Briefing.

5. Vorschau vor dem Rendern

npx --yes [email protected] snapshot --at 0.3,1.6,3.6,5.2 -o snapshots

Dies schreibt PNG-Bilder in snapshots/. Öffnen Sie sie und überprüfen Sie das Eröffnungsbild, das zweite Wort beim Einfallen und das gehaltene Endbild. Achten Sie auf Wörter, die mit dem Chip kollidieren, eine Fußzeile, die in den Balken läuft, oder einen Akzent, der auf dem Hintergrund verschwindet.

6. Rendern

npx --yes [email protected] render --quality delivery -o renders/titel-drop.mp4

Die package.json des Projekts enthält dieselben Befehle wie npm run check und npm run render. Verwenden Sie --quality draft für einen schnellen Test und --fps 60 für ein flüssigeres Ergebnis auf sozialen Plattformen.

7. Übergeben

Geben Sie der Person den Pfad zu renders/titel-drop.mp4 und ein Standbild aus Schritt 5. Sagen Sie ihnen, welche Felder sie für eine andere Version ändern müssen: Sie müssen nur brief.json bearbeiten und die Schritte 3 bis 6 erneut ausführen.

Zeitplan

Zeit (s)	Was passiert
0.00	line1 ist bereits auf dem Bildschirm, groß und zentriert, als Miniaturbild
0.00–0.42	Akzent-Haarstrich schneidet hindurch und blendet dann aus
0.80–1.35	line1 bewegt sich nach oben links
1.35–1.77	line2 fällt als Umriss ein
1.90–2.06	line2 füllt sich mit dem Akzent
2.05–2.55	line3 rauscht von rechts herein
2.60–3.05	Akzentbalken wischt unter line3 ein
3.10–3.50	Chip, Fußzeile und Eckenmarkierungen blenden ein
3.50–5.45	Halten
5.45–5.80	Alles verlässt nach oben mit einer kurzen Unschärfe

Mehrere Versionen gleichzeitig

Um viele Varianten zu rendern (eine pro Sprache, Produkt oder Datum), schreiben Sie ein JSON-Array von Briefings und rendern Sie sie auf einmal. Jedes Objekt ist ein vollständiges oder teilweises Briefing, das über die bereits angewendeten Werte gemischt wird:

npx --yes [email protected] render --batch variants.json --quality delivery -o "renders/{index}.mp4"

--batch setzt Variablen pro Render, sodass Sie apply-brief nicht für jedes einzelne benötigen. Der Ausgabepfad benötigt einen Platzhalter wie {index} oder ein Feld wie {line3}, sonst überschreiben sich die Dateien gegenseitig. Führen Sie check zuerst auf einem repräsentativen Briefing aus und betrachten Sie den längsten Text in einem Schnappschuss.

Fehlerbehebung

• Render hängt, zeigt dann ein statisches Bild oder meldet sub_timeline_script_failure. GSAP wurde nicht geladen. Wenn Ihr Netzwerk cdn.jsdelivr.net blockiert, führen Sie npm i [email protected] im Projekt aus, kopieren Sie node_modules/gsap/dist/gsap.min.js nach assets/vendor/ und setzen Sie den <script src> in index.html auf assets/vendor/gsap.min.js.
• Wörter sehen aus wie die falsche Schriftart. Die Vorlage verwendet League Gothic und JetBrains Mono, die HyperFrames bündelt. Wenn Sie Schriftarten austauschen, verwenden Sie eine andere gebündelte Familie (npx hyperframes docs compositions listet sie auf) oder fügen Sie einen @font-face hinzu, sonst schlägt check fehl.
• Farben haben sich nicht geändert. Führen Sie apply-brief aus Schritt 3 erneut aus und überprüfen Sie, ob es Applied N values ausgegeben hat. Das Bearbeiten der CSS :root-Farben hat keine Wirkung; die Variablen gewinnen.
• Möchten Sie eine andere Länge? Behalten Sie 6 s bei. Die Schläge sind zeitlich so abgestimmt, dass sie in dieses Fenster passen; das Dehnen der Basis-Laufzeit verlängert nur die Haltephase.

Dateien

• template/: das HyperFrames-Projekt (index.html, hyperframes.json, package.json).
• scripts/apply-brief.mjs: valiiert ein Briefing und schreibt es in die Vorlage. Keine Abhängigkeiten.
• examples/relay-v2/ und examples/fieldnote-beta/: fertige Briefings. Die Vorschauen auf Lookbk werden aus diesen gerendert.
• NOTICE.md: Drittanbieter-Software, die diese Fähigkeit verwendet.