Remotion-Produktbewegung
Verwandle eine Produktinteraktion in eine klare visuelle Geschichte: Kontext herstellen, eine Aktion zeigen, ihr Ergebnis lesbar machen und dann die Aufmerksamkeit auf die nächste Aktion lenken. Passe die Bewegung an das Briefing an. Statische Aufnahmen, stumme Filme, zurückhaltende Übergänge und kontinuierliche Kamerafahrten sind alles valide Optionen.
Den Film anlegen
Identifiziere die Zielgruppe, das Produktergebnis, die Dauer, die Abmessungen, die erforderlichen Bildschirme und die bereitgestellten Assets. Übernimm explizite Entscheidungen zu Ton, Kamerabewegung, nativen UI-Verhalten und Untertiteln. Kläre fehlende Essentials; wähle vernünftige Standardwerte für beiläufige Stylings.
Prüfe die tatsächliche Oberfläche und die verfügbaren Inhalte, bevor du Behauptungen planst. Bewahre erkennbare Typografie, Proportionen, Farben, Labels und Interaktionsverhalten. Verwende authentische autorisierte Assets; kennzeichne synthetische Demonstrationsdaten. Zeichne Quelle und Snapshot-Datum beworbener Zählungen auf, die gezählte Einheit, Filter und die Deduplizierungsmethode. Ein repräsentativer Teilbereich belegt keinen vollständigen Kataloganspruch.
Schreibe einen kompakten Shot-Plan mit dem Frame-Intervall jedes Shots, dem Fokusziel, der Aktion/dem Ergebnis, dem lesbaren Intervall, dem Übergang und optionalem Sound-Cue. Nimm das Ende auf. Plane Landschafts- und Hochformat-Framing separat, wenn beides angefordert wird; alleiniges Zuschneiden kann ein Steuerelement oder Label verlieren.
Die relevante Anleitung wählen
- Lese Choreografie, wenn du Kamerafahrten, Easing, überlappende Übergänge oder das Anpassen von Layouts und Cursor-Zielen planst.
- Lese Deterministisches UI, wenn du Animation, natives CSS-Verhalten, Bewegungsunschärfe oder harte Schnitte zwischen diskreten Bildschirmen implementierst.
- Lese Ton und Rendering, wenn du Audio platzierst, Exporte optimierst oder den gelieferten Film validierst. Der Abschnitt zur visuellen Verifikation gilt auch für stumme Arbeiten.
Verwende scripts/motion.mjs für wiederverwendbare Mathematik, falls nützlich. Es ist abhängigkeitsfrei; kopiere oder importiere es mit einem geeigneten relativen Pfad in das Zielprojekt. Prüfe seine Exporte und Argumentverträge vor der Integration. progress, expoIn, expoOut und track behandeln Timing; cameraAt und project helfen bei der Auswertung komponierter Framings; selectState wählt Schnitte aus; cueStartFrame und duckGain helfen bei der Audio-Platzierung. Die Hilfsdatei ist optional und erstellt kein Remotion-Projekt. Dieses Skill arbeitet unabhängig von jedem Repository-Demo.
Bauen und prüfen
Mache Animation zu einer reinen Funktion von Frame und festen Eingaben. Bewahre die diskrete Bildschirmauswahl außerhalb der temporalen Abtastung, kontinuierliche Animations-Hooks innerhalb davon und Audio außerhalb davon. Siehe die deterministische Referenz für diese Unterscheidung und ihre Crossfade-Ausnahme.
Implementiere zuerst eine repräsentative Aktion und Übergabe. Prüfe gerenderte Frames am Leseintervall, Geschwindigkeitspeak, Schnittgrenze und Ziel, bevor du das Muster wiederholst. Ändere Timing, Bühnenbild oder Hierarchie, wenn die Aktion unklar ist; Dekoration kann fehlende Kausalität nicht ersetzen.
Kamerabewegung sollte Kontext enthüllen oder die Aufmerksamkeit lenken. Wenn kontinuierliche Fahrt dem Briefing entspricht, überlappe unabhängig getimte Schwenk- und Dolly-Spuren und prüfe ihr projiziertes Ergebnis. Ein sich bewegendes Elternelement beweist nicht, dass sein Fokusobjekt auf dem Bildschirm wandert. Wähle ruhige oder vollständig statische Halte, wenn sie dem Briefing dienen. Körnung, Wackeln, Erschütterung und ewige Bewegung sind optionale ästhetische Entscheidungen.
Überprüfe nach jeder Layout-Änderung den nachgelagerten Fluss, Kameraziele, Cursor-Trefferpunkte, Scroll-Grenzen und Framing. Ein erfolgreiches Rendering allein verifiziert sie nicht.
Nachweise liefern
Rendere die angeforderten Formate mit der fixierten Toolchain des Projekts. Prüfe aufeinanderfolgende Frames um riskante Übergänge und das codierte Ergebnis bei normaler Geschwindigkeit, wenn Wiedergabe verfügbar ist. Verifiziere Text, echten Inhalt, Cursor-Ausrichtung, Zuschnitte, Asset-Bereitschaft, Dauer und Ende. Bei Ton unterscheide gemessene Signalprüfungen von tatsächlichem Hören.
Melde die Ausgabepfade, tatsächlich ausgeführten Befehle/Prüfungen, Materialeinschränkungen und ungelöste Defekte. Gib explizit an, wenn Echtzeit-Wiedergabe oder Audio-Audition nicht verfügbar war. Ein Kontaktbogen unterstützt die visuelle Überprüfung; er stellt weder Pacing noch Audioqualität fest. Veröffentliche oder sende Arbeiten extern nur mit der Autorisierung des Benutzers.