Amartileyton/autovideo

Artikel-Hervorhebungen

Verwenden mit remotion-best-practices, motion-graphics und cinematic-camera für Nachrichten, Releases, Trends und Belege, bei denen ein Terminal unpassend wäre.

Obligatorische Eingabe

Vor dem Programmieren nach fehlenden Entscheidungen fragen:

Welches Format möchtest du: 4:3 halbbildschirm Instagram-Insert oder 9:16 Vollbildschirm Instagram? Und welchen Hintergrund: warmes Licht, sauberes Dunkel, helles Raster oder dunkles Raster?

• 4:3 Insert: 1440×1080, ausgelegt, um auf etwa der Hälfte eines 9:16-Bildschirms lesbar zu bleiben.
• 9:16 Vollbild: 1080×1920, unter Berücksichtigung der Beschriftungs-/Oberflächenzonen.
• 16:9 nur bei ausdrücklicher Aufforderung verwenden.
• Wenn der Nutzer den Hintergrund delegiert, warmes Licht verwenden.

Das Artikel-Papier kann auf einem sauber-dunklen oder dunkel-Raster-Hintergrund hell bleiben. Ändere die gesamte Komposition nicht stillschweigend auf dunkel.

Absolutes Bildverbot

Null Neon, Glühen, Leuchten, leuchtende Kanten, farbige Schatten, Cyan-Verläufe, Verlaufs-Obs, radiale Farbverläufe, Glas-Effekte, Cyberpunk-Beleuchtung oder vibe-codierte KI-Dekoration. Die Hervorhebungen müssen wie physische Marker-/Papierbehandlung aussehen – nicht wie ausgestrahltes Licht.

Lehne jede verbotene Behandlung vor der Auslieferung ab.

Genehmigte Referenz

Überprüfe assets/examples/article-highlight.mp4 und kontaktiere/verweise auf Rahmen vor dem Programmieren. Setze die redaktionelle Hierarchie, großzügige Papierabstände, zurückhaltende Markerbehandlung, langsame Kamera und Lesbarkeit fort. Verwende die kanonische Repository-Galerie, wenn lokale Assets nicht verfügbar sind: https://github.com/Liamrjohnston/remotion-motion-graphics-skill.

Wann verwenden

Verwenden für:

• Informations-/Nachrichten-/Release-/Trend-Beats.
• „Etwas hat sich geändert oder wurde gestartet“-Belege.
• Echte Artikelauszüge mit sinnvollen hervorgehobenen Phrasen.
• Nicht-Terminal-Belege, bei denen redaktionelles Material den Punkt verdeutlicht.

Verwende terminal-inserts für CLI-/Setup-/Agent-Run-Geschichten. Verwende authentisches Produkt-Material/UI, wenn der Beat eine Produktdemo ist.

Kernarchitektur

Den Artikel nicht flach bauen, wenn Marker-Striche hinter Text liegen müssen. Baue eine geschichtete Remotion-DOM/SVG:

1. Ausgewählte Szenenoberfläche.
2. Redaktionelles Papier/Karte mit großzügigem sicherem Rand.
3. Rough.js/SVG-Marker-Ebene über dem Papier.
4. DOM/SVG-Text über dem Marker.

Der Marker muss sichtbar hinter den Wörtern und über dem Papier liegen.

Material und Layout

• Papier: warmes Weiß/Off-White mit neutralem Rand und weichem neutralem Schatten; niemals farbiges Glühen.
• Typografie: redaktionelle/Nachrichten-Hierarchie – kleine Abschnittsbezeichnung, große Serif-/redaktionelle Überschrift, dezenter Autor/Datum, und höchstens 2–3 kurze Textzeilen.
• Hervorhebungen: zurückhaltende halbtransparente physische Marker-Farbe wie gedämpftes Gelb; niemals fluoreszierend.
• Echte Artikel-/Quellen-Identität und gelieferte Kopie verwenden. Keine Publikationen, Daten, Behauptungen oder Zitate erfinden.
• Absichtlich harte Zeilenumbrüche setzen und Text innerhalb der transformierten sicheren Ränder halten.
• Nicht wie eine Titelfolie zentrieren; es sollte sich wie ein authentischer Artikelauszug anfühlen.
• Nicht wesentliche Pills/Buttons/Quellen-Unordnung entfernen, wenn sie in der Zielgröße unlesbar sind.

Animation

• Mit einer kurzen zurückhaltenden Unschärfe-zu-Fokus beginnen, nur wenn es die genehmigte Referenz unterstützt; Unschärfe ist optischer Fokus, kein Glühen.
• Kein Marker während der frühen Fokusphase sichtbar.
• Langsame subtile Kamerafahrt und zurückhaltende Perspektivdrehung verwenden.
• Marker-Striche erst beginnen, nachdem sich der Fokus gesetzt hat.
• Jede Hervorhebung von links nach rechts mit einer Maske/Überblendung zeichnen.
• Hervorhebungen sequenzieren; niemals alle auf einmal anzeigen.
• Mit allen Schlüsselphrasen lesbar und einem stabilen Halten enden.
• Animation mit useCurrentFrame(), spring() und interpolate() steuern; keine CSS-Animation.

Marker-Regeln

• Rough.js oder eine unregelmäßige SVG-Marker-Form verwenden.
• Marker bleibt hinter dem Text.
• Leichte Unvollkommenheit ist gut; ein perfektes Verlaufsrechteck nicht.
• Nur sinnvolle bestätigte Phrasen hervorheben, nicht ganze Absätze.
• Deckkraft des Markers muss den Textkontrast erhalten.
• Kein fluoreszierendes Gelb, Lichtemission, Unschärfe-Halo oder leuchtende Kante.

Keine redundante Erzählung

Artikel-/Quellentext darf erscheinen, wenn er der tatsächliche Beweis ist. Keine separate Überschrift hinzufügen, die lediglich die gesprochene VO wiederholt. Nur den authentischen Auszug und minimale strukturelle Metadaten verwenden.

Prüfung für erste Ablehnung

Nicht ausliefern, bis jede Antwort „nein“ ist:

1. Wurde Format oder Hintergrund nicht bestätigt?
2. Gibt es Neon, Glühen, leuchtende Marker-Behandlung, Farbschatten, Verlaufswäsche oder Glas-Effekte?
3. Ist die Quellen-/Artikel-Identität oder Behauptung erfunden?
4. Ist die Karte eine generische zentrierte Titelfolie anstatt einer redaktionellen Oberfläche?
5. Ist ein Schlüsseltext an der gewählten Instagram-Platzierung unlesbar?
6. Sitzt der Marker über/verdeckt Text oder erscheint zu früh?
7. Schneidet die Kamera das Papier ab oder erzeugt leere Bewegung?
8. Fehlt dem Ergebnis die Zurückhaltung und Politur der genehmigten Referenz?

Privat überarbeiten, bis die Prüfung bestanden ist.

QA und Auslieferung

1. Typecheck durchführen oder die kleinste sinnvolle Validierung ausführen.
2. Ein frühes Standbild ohne Hervorhebung, ein Standbild während des Strichs, ein Standbild mit End-Hervorhebung und den End-Halt rendern.
3. Bestätigen, dass der Marker früh unsichtbar, hinter dem Text und am Ende vollständig ist.
4. Auf Clipping, unlesbare Kopie, erfundene Quellendetails, Neon/Glühen und schwache Bildausschnitte prüfen.
5. MP4 mit Abmessungen, Dauer, genauem Render-Befehl und Editor-Platzierungs-Hinweis ausliefern.