Claude Motion Skills auf dieser Website lässt sich als kleines Webprojekt verstehen, das zum Video wird. Ihr Programmieragent hilft beim Schreiben und Überarbeiten der Quellen; HyperFrames liefert die Rendergrundlage. Das sind getrennte Aufgaben. Wer die Übergabe versteht, erkennt leichter, ob ein Problem bei der Aussage, der Animation oder der exportierten Datei liegt.
1. Aus der Anfrage eine Abfolge machen
Stellen Sie sich eine 12-sekündige Ankündigung für eine neue Suchfunktion vor. Geben Sie dem Agenten freigegebenen Text, einen echten Screenshot, die Zielgruppe und das Bildformat. Planen Sie drei Szenen: das Problem von 0–3 Sekunden, die nützliche Änderung von 3–9 und die nächste Handlung von 9–12. Das ist ein redaktionelles Beispiel, keine Pflichtvorlage. Klären Sie die Reihenfolge vor den Übergängen. Ein animierter Absatz ohne klare Aussage wird auch durch höhere Auflösung nicht verständlicher.
2. Inhalt und Layout bearbeitbar halten
Das herunterladbare Quellpaket enthält die Animation und die Dateien für die lokale Weiterarbeit. In HyperFrames beschreibt HTML die Komposition, CSS das Aussehen und JavaScript kann Bewegung beschreiben. Bewahren Sie Screenshot, Schriften und Ton im Projekt auf, damit es nicht von verschwindenden externen Medien abhängt. Benennen Sie Szenen sinnvoll, etwa problem, search-demo und next-step. Ändert sich die Überschrift, lassen Sie diese Szene samt Zeilenumbrüchen anpassen, statt alle Szenen neu schreiben zu lassen.
3. Jeden Zeitpunkt direkt erreichbar machen
Ein Renderer muss einen bestimmten Zeitpunkt direkt anfordern können. HyperFrames nutzt zeitlich ansteuerbare Kompositionen; Browser-APIs bieten ebenfalls Zeitsteuerung wie Animation.currentTime. Bei 30 Bildern pro Sekunde benötigt das Beispiel 360 Bilder, ab Zeitpunkt null in Schritten von 1/30 Sekunde. Eine nur von der laufenden Uhr abhängige Animation kann beim Abspielen stimmen und beim Zeitsprung scheitern. Fordern Sie denselben Zeitpunkt zweimal an und vergleichen Sie, besonders bei Partikeln, Zufall oder asynchronen Medien.
4. Vor dem aufwendigen Schlussrender prüfen
Die Browser-Vorschau hilft, Geschichte und Tempo zu prüfen. Halten Sie am Anfang und Ende jeder Szene an und untersuchen Sie die Übergänge um Sekunde drei und neun. Ist der wichtige Screenshot-Ausschnitt groß genug? Ist die Überschrift vollständig eingeblendet, bevor sie gelesen werden muss? Verdecken andere Elemente die Untertitel? HyperFrames dokumentiert lint und check zur technischen Prüfung. Verwenden Sie die Befehle Ihres Pakets und der installierten Version. Ein erfolgreicher Check entscheidet nicht, ob die Aussage verständlich ist.
5. Rendern, ansehen und Quellen behalten
Der MP4-Ablauf dieser Website läuft lokal aus dem heruntergeladenen Paket mit HyperFrames, Chrome und FFmpeg. Er erfasst die geplanten Bilder und codiert das Ergebnis; er zeichnet nicht die zufällige Flüssigkeit der Vorschau auf. Öffnen Sie die tatsächliche MP4-Datei und prüfen Sie erstes und letztes Bild, vollständigen Sprechertext, Abmessungen und Dauer. Behalten Sie den Quellordner neben dem gelieferten Video. Ändert ein Kunde später ein Wort, aktualisieren Sie das Projekt und rendern erneut, statt die gesamte Komposition aus Pixeln zu rekonstruieren.
Dein nächster Schritt
Beurteilen Sie die Geschichte in der Vorschau, steuern Sie Bewegung über zeitlich definierte Quellen und prüfen Sie die Lieferung in der MP4-Datei. Halten Sie diese drei Ebenen verbunden.
Den Arbeitsbereich entdeckenQuellen und weiterführende Informationen
Die Verweise führen zur Originaldokumentation und zu den Urhebern. Die Verfügbarkeit kann sich ändern. Prüfe die Quelle vor einem Abo oder einer Installation.
- Claude Motion SkillsClaude Motion Skills
- How a HyperFrames project worksHeyGen
- Animation: currentTime propertyMDN Web Docs
- Finish and share a videoHeyGen