Erstellen eines Page Reels

Was macht Erstellen eines Page Reels?

Übersicht

Die Seite enthält bereits das beste Filmmaterial, das Sie bekommen werden: ihre eigene Bewegung, die in Echtzeit läuft. Die Arbeit besteht darin, sie originalgetreu einzufangen, den Pfad durch sie zu wählen und das Ergebnis zu überprüfen.

Kernprinzip: Nehmen Sie die echte Animation auf, erstellen Sie sie nie neu, und schneiden Sie nach Messung, nicht nach Gefühl.

Eine Aufnahme einer Seite ist ein Rundgang. Sagen Sie das. Ein Markenfilm ist eine andere Aufgabe: ein gestalteter, animierter Film mit einem Storyboard. Diese Fähigkeit ist für „So sieht die Seite aus und bewegt sich, die wir gebaut haben“.

Entscheidungen vor der Aufnahme

• Was das Reel beweist. Ein Satz. „Die neue Seite baut sich selbst auf und scrollt wie entworfen.“
• Welche Version. Nehmen Sie die Version auf, die echt ist und in einer Review-Umgebung veröffentlicht wurde. Niemals eine Version, die noch nicht veröffentlicht ist (eine nicht angekündigte Produktseite, ein Entwurf), und niemals einen Prototypen, der sich noch in der Bearbeitung befindet. Nehmen Sie Staging auf, nicht einen lokalen Build.
• Format. 16:9 bei 1920x1080 ist die native Desktop-Erfassung und die sicherste. Erfinden Sie kein Hochformat, das das Team nicht QA-geprüft hat.
• Länge. Kurz. 15 bis 20 Sekunden zeigen die Fähigkeiten einer ganzen Seite. Fünf Sekunden zeigen eine Bewegung. Entscheiden Sie, was das Reel braucht.
• Was nicht erscheinen darf. Kundenlogos, Zitate mit Namen, Marken Dritter, Platzhaltertext, defekte Bilder, nicht veröffentlichte Behauptungen. Schreiben Sie die Liste jetzt.
• Auflösung. Überprüfen Sie bei 1080p. Rendern Sie kein 4K-Master, bis der Schnitt genehmigt ist.

Schritt 1: Nehmen Sie die echte Animation auf

Verwenden Sie Chrome mit einem CDP-Screencast, nicht einen Screenshot pro Frame. Scroll-Scrubbte GSAP, glattes Scrollen, Canvas-Spuren und getimte Intros laufen alle in Echtzeit. Sie Schritt für Schritt zu durchlaufen, verändert die Bewegung.

Page.startScreencast  format jpeg, quality 100, maxWidth = viewport width, everyNthFrame 1

Auf einem Apple-Silicon-Laptop liefert dies etwa 60 Bilder pro Sekunde (mittlerer Abstand 16,7 ms).

• Ladezeit-Intros: Starten Sie den Screencast, laden Sie dann die Seite neu, damit das Intro in der Aufnahme ist. Trimmen Sie die Frames vor dem Neuladen ab.
• Scrollen: Treiben Sie das Scrollen mit Keyframes [Sekunden, Position]. Leiten Sie die Positionen durch einen monotonen kubischen Spline (kein Überschwingen, Haltebereiche bleiben flach) und wenden Sie jeden Wert mit der scrollTo(y, { immediate: true, force: true }) der Glatt-Scroll-Bibliothek an, damit das eigene Scrubben und Glätten der Seite genau so laufen wie für einen Leser. Animieren Sie niemals von Hand die Elemente der Seite.
• Verstecken, nicht entfernen: visibility: hidden bei Logos und Zitaten hält die gepinnten Layouts intakt. display: none verschiebt sie.
• Uhr: Nehmen Sie die Startzeit innerhalb der Seite (performance.timeOrigin + performance.now()), sodass Scroll-Keyframes und Screencast-Zeitstempel eine gemeinsame Uhr haben.
• Resample auf eine konstante Bildrate: Ausgabeframe k zeigt den neuesten Screencast-Frame bei oder vor k / fps.

video/capture.mjs in diesem Repository erledigt alles aus einem kleinen JSON-Plan.

Schritt 2: Wählen Sie den Pfad durch Messung

Ein Scrollpfad, der nach Gefühl gewählt wurde, hinterlässt tote Zonen, Dehnungen, wo sich das Rad bewegt und sich nichts auf dem Bildschirm ändert. Finden Sie sie:

1. Nehmen Sie einen langsamen, gleichmäßigen Durchlauf des gesamten Bereichs auf.
2. Führen Sie video/analyze.py darauf aus. Es meldet eingefrorene Läufe (identische Frames) und die größten Frame-zu-Frame-Änderungen.
3. Ordnen Sie eingefrorene Läufe den Scrollpositionen zu. Das sind tote Zonen: überqueren Sie sie schnell.
4. Geben Sie den gescrubbten Momenten (ein wachsender Kreis, eine aufbauende Karte, ein zählender Zähler) die langsamen, lesbaren Strecken. Gescrubbte Szenen folgen dem Scrollen, daher wartet das Warten nicht auf ihren Abschluss.
5. Zeitbasierte Animationen beginnen, wenn eine Schwelle überschritten wird, und benötigen Echtzeit, um zu enden. Beenden Sie den Clip nicht, bis der letzte beendet ist.

Nehmen Sie dann die echte Aufnahme mit dem geformten Pfad auf und führen Sie analyze.py erneut aus. Ein kurzer eingefrorener Lauf innerhalb einer gepinnten Szene ist ein Haltepunkt und in Ordnung. Ein 0,4 s langer Stillstand mitten in einem Flick ist es nicht.

Überprüfen Sie die eigene Gesundheit der Aufnahme: Der maximale Abstand zwischen Screencast-Frames innerhalb des Teils, den Sie verwenden werden, sollte unter etwa 40 ms liegen. Ein größerer Abstand ist ein Ruckler, also nehmen Sie erneut auf.

Schritt 3: Wählen Sie Filmmaterial, das fertig ist

Schauen Sie sich alle 0,5 bis 1 s ein Kontaktblatt an, bevor Sie sich festlegen. Lehnen Sie ab:

• leere Karten, defekte Bilder, Alt-Text, der zeigt, wo ein Bild sein sollte
• Platzhaltertext in einer CMS-Liste
• eine erste Sekunde, die leer ist, während die Seite malt; trimmen Sie auf den Punkt, an dem die Überschrift zu steigen beginnt
• alles auf der Liste „Darf nicht erscheinen“

Wenn ein Abschnitt unfertig ist, lassen Sie ihn weg und informieren Sie den Eigentümer. Ein Reel, das eine defekte Karte zeigt, ist ein öffentlicher Fehlerbericht.

Schritt 4: Codieren Sie mit Farb-Tagging

./encode.sh <framesDir> out.mp4 <firstFrame> <frameCount> 60

Die Screencast-Frames sind JPEG im Vollbereich BT.601. Die Codierung konvertiert sie in BT.709 im begrenzten Bereich und taggt den Stream, sodass Player nicht raten:

scale=in_range=full:in_color_matrix=bt601:out_range=tv:out_color_matrix=bt709,format=yuv420p
libx264 -crf 14 -preset slow -x264-params colorprim=bt709:transfer=bt709:colormatrix=bt709:fullrange=off
-movflags +faststart

yuv420p und +faststart sorgen dafür, dass es überall abgespielt wird und sofort startet. Überprüfen Sie das Ergebnis, indem Sie einige Frames zurückdecodieren und sie Pixel für Pixel mit den Quellen vergleichen. Vergleichen Sie nicht Kanalmittelwerte: Die Mittelung einiger Millionen Float32-Werte sammelt genug Fehler, um einen Farbstich zu erfinden, der nicht da ist. Innerhalb von etwa 3 Stufen pro Kanal ist originalgetreu.

Schritt 5: QA des Videos

• Dauer, Bildrate, Größe und Farbe-Tags, die aus der Datei gelesen werden
• Ein Frame pro Sekunde, angesehen, plus die Übergänge in normaler Geschwindigkeit
• Keine Logos, Namen, Platzhalter, Banner oder defekte Bilder in irgendeinem Frame, nicht nur in den ausgewählten
• Kein Cookie-Banner oder Consent-Widget im Frame, und keines angeklickt: Verstecken Sie es im eigenen CSS der Seite oder nehmen Sie eine Umgebung auf, die es nicht zeigt
• Der erste Frame ist der Haken. Wenn die Seite leer malt, trimmen Sie ihn weg
• Wählen Sie einen Poster-Frame, auf dem die Seite vollständig und still ist, nicht während des Scrollens

Führen Sie dann die Kaltprüfer-Überprüfung aus reviewing-page-design durch.

Schritt 6: Sagen Sie, was Sie nicht überprüfen konnten

Ton, falls vorhanden („Ich kann ihn nicht hören“). Die eigene Rekomprimierung der Plattform. Alles, was auf einem Gerät gezeigt wird, das Sie nicht getestet haben.

Wenn ein gestaltetes Reel gewünscht ist

Komponieren Sie das Seitenmaterial in einem Layout, in dem jedes Bild eine Funktion der Zeit ist (geschlossene Federn, eine Überlagerungsidee pro Beat, Bildunterschriften von zwei bis fünf Wörtern, Markenfarbe nur auf dem Namen und der Endkarte). Die gleichen Regeln gelten: Das Seitenfenster wird nie abgedeckt, Text liest sich bei 360 px Breite, Höhepunkte halten mindestens 1,2 s an.

Rote Flaggen

• Eine Screenshot-pro-Frame-Aufnahme einer scroll-getriebenen Seite
• Aufnahme eines Prototyps, der sich in der Bearbeitung befindet, oder einer Seite, die nicht veröffentlicht ist
• Ein Reel, das einen halbfertigen Abschnitt enthält
• Kundenlogos oder benannte Zitate im Frame
• Ein Scrollpfad, der nach Gefühl gewählt wurde, ohne vorherigen Durchlauf
• Farbe verglichen durch Kanalmittelwerte
• Rendern von 4K vor Genehmigung des Schnitts