solutionsnovaai-bit/scroll-video-website

Scroll Video Website

Wann verwenden

Diese Fähigkeit verwenden, wenn der Benutzer:

• eine Apple-ähnliche Scroll-Animation aus einem Video erstellen möchte;
• eine scrollgesteuerte Video-Website bauen möchte;
• ein Produktvideo in eine filmische Landingpage verwandeln möchte;
• eine Scrollytelling-Erfahrung mit einem Video umsetzen möchte;
• ein Video in eine optimierte Bildsequenz für Scroll-Animationen konvertieren möchte;
• eine Canvas-basierte Produktenthüllung durch Scrollen realisieren möchte;
• eine vorhandene generierte Scroll-Video-Framesequenz optimieren möchte.

Nicht für gewöhnliche Autoplay-Videohintergründe oder nicht verwandte Scrolleffekte verwenden.

Erstellen Sie eine minimalistische, vollständige Seitenerfahrung wie einen Produktanimations-Viewer: die Seite selbst liefert die Scroll-Distanz, während eine fixierte Canvas den Viewport ausfüllt und eine aus dem Benutzervideo abgeleitete Framesequenz durchspult. Die Animation ist die Benutzeroberfläche, nicht der Hintergrund einer konventionellen Landingpage.

Aufruf

Diese Fähigkeit hat zwei Modi: Erstellen einer Scroll-Video-Website aus einem Video oder Optimieren einer vorhandenen Framesequenz. Wenn das erste Argument optimize ist, folgen Sie references/optimize.md und führen Sie nicht den untenstehenden Build-Workflow aus.

Behandeln Sie diese kompakte Form als vollständige Build-Anfrage:

$scroll-video-website <path/to/video.mp4>

Der Videopfad muss das erste Argument nach dem Skill-Namen sein. Alles nach dem Pfad ist optional und dient als Benutzeranweisung für Stil, Layout, Text oder Verhalten:

$scroll-video-website ./media/product-reveal.mp4
$scroll-video-website ./media/product-reveal.mp4 mit schwarzem Hintergrund und kompakter Typografie

Das erste Beispiel bedeutet: Leiten Sie die Framesequenz ab und erstellen Sie die vollständige standardmäßige Scroll-Animations-Website wie unten beschrieben. Im zweiten Beispiel behalten Sie dieselbe videogetriebene Animationsarchitektur bei, während Sie den hinzugefügten visuellen Anweisungen folgen. Lassen Sie den Agenten, der diese Fähigkeit verwendet, den Rest der Eingabeaufforderung interpretieren und umsetzen; diese Fähigkeit definiert keine separate Befehlgrammatik für Stiloptionen.

Interpretieren Sie den Videopfad als relativ zum aktuellen Arbeitsverzeichnis, es sei denn, er ist absolut. Wenn er Leerzeichen enthält, sollte der Benutzer ihn in Anführungszeichen setzen. Überprüfen Sie zuerst den genauen Pfad. Wenn eine einfache Dateiname nicht vorhanden ist, durchsuchen Sie das aktuelle Projekt nach einer genauen Übereinstimmung des Dateinamens, wobei Abhängigkeits-, Build-, Cache- und VCS-Verzeichnisse ausgeschlossen werden. Fahren Sie automatisch fort, wenn genau eine Übereinstimmung vorhanden ist. Wenn es keine oder mehrere Übereinstimmungen gibt, fragen Sie den Benutzer nach dem genauen Pfad. Geschweifte Klammern in <path/to/video.mp4> oder {video_path} zeigen einen Platzhalter an und sind nicht Teil des tatsächlichen Pfads. Erfordern oder interpretieren Sie kein use-Schlüsselwort.

Optimieren Sie eine vorhandene Sequenz mit genau:

$scroll-video-website optimize

Der Optimierungsbefehl nimmt keinen Pfad oder andere Argumente entgegen. Untersuchen Sie das aktuelle Projekt auf generierte Framesequenzen. Fahren Sie fort, wenn genau eine Sequenz identifizierbar ist. Wenn mehrere identifizierbar sind, zeigen Sie sie an und fragen Sie, welche optimiert werden soll. Wenn keine Sequenz gefunden oder sicher erkannt werden kann, teilen Sie dem Benutzer mit, dass der Frames-Ordner nicht gefunden wurde, und brechen Sie ab.

Projekt und Quellvideo einrichten

Vor dem Bearbeiten:

1. Untersuchen Sie die Projektstruktur, Skripte, das Framework, das Styling, das Routing, die Asset-Konventionen und die lokalen Anweisungen.
2. Lokalisieren Sie das vom Benutzer bereitgestellte Video mithilfe der obigen Aufrufregeln. Wenn kein Video oder Pfad angegeben wurde oder keines sicher identifiziert werden kann, fragen Sie danach, bevor Sie mit der Implementierung beginnen.
3. Verwenden Sie den vorhandenen funktionierenden Stack wieder. Gerüsten Sie kein Ersatzprojekt, wenn bereits eines funktioniert.
4. Untersuchen Sie die Abmessungen, die Dauer, die Bildrate, die Bildanzahl und die Dateigröße des Videos mit ffprobe, wenn verfügbar.
5. Bewahren Sie nicht verwandtes Verhalten und nehmen Sie die kleinstmögliche kohärente Menge an Änderungen vor.

Erstellen Sie keine Ersatzkunstwerke oder ersetzen Sie das bereitgestellte Filmmaterial. Vermeiden Sie es, das Quellvideo zu duplizieren, es sei denn, der Build erfordert es.

Video in eine Framesequenz konvertieren

Der Standard-Rendering-Pfad ist eine nummerierte WebP-Framesequenz, nicht video.currentTime. Extrahieren Sie Frames in den öffentlichen/statischen Asset-Bereich des Projekts mit nullaufgefüllten Namen wie frames/frame_0001.webp.

• Bewahren Sie die Quellkadenz bis zu 30 fps. Bei einem langen Clip sampeln Sie ihn auf etwa 240–300 Gesamtframes, damit die Nutzlast praktisch bleibt.
• Bewahren Sie das Quellseitenverhältnis. Verwenden Sie eine sinnvolle WebP-Qualität um 78–82 und überprüfen Sie das Ergebnis, anstatt anzunehmen, dass die Einstellung ausreichend ist.
• Zeichnen Sie die tatsächliche extrahierte Frame-Anzahl in der Implementierung auf; hinterlassen Sie keine geschätzte Konstante.
• Bevorzugen Sie ffmpeg für die Extraktion. Ein repräsentativer Befehl ist ffmpeg -i input.mp4 -vf fps=30 -c:v libwebp -quality 80 frames/frame_%04d.webp; passen Sie Eingabe, fps, Ausgabepfad und vorhandene Projektwerkzeuge an.
• Löschen oder überschreiben Sie keine nicht verwandten Assets. Wenn das Ziel bereits eine Sequenz enthält, überprüfen Sie, ob sie zu dieser Animation gehört, bevor Sie sie ersetzen.

Verwenden Sie direktes Pausieren-Video-Seeking nur, wenn die Frameextraktion nicht verfügbar ist oder die resultierende Frame-Nutzlast offensichtlich ungeeignet ist. Wenn Sie auf Fallback zurückgreifen, erklären Sie den Kompromiss und behalten Sie dasselbe feste, bidirektionale, geglättete Scrollverhalten bei.

Referenzerfahrung spiegeln

Wenn der Benutzer keine zusätzliche Layout- oder Textanweisung gibt, erstellen Sie eine reine Canvas-Seite:

• eine weiße Seite und eine fixierte, überlauflose Bühne, die 100vw mal 100vh abdeckt;
• genug unsichtbare Dokumenthöhe für ein bewusstes Scrubbing, ungefähr 400vh für eine 8-Sekunden-Quelle oder etwa 240 Frames;
• keine Navigationsleiste, Karten, Überschriften, Handlungsaufforderungen, Farbverläufe oder erfundene Marketingtexte;
• eine Canvas, die die Bühne ausfüllt und jeden Frame mit cover-Geometrie zeichnet, auf beiden Achsen zentriert;
• eine kurze Deckkraft-Enthüllung erst nachdem der erste Frame bereit ist, um einen leeren Frame-Blitz zu verhindern;
• zurückhaltende Bildbehandlung nur, wenn sie zum Filmmaterial passt, wie z. B. ein weißer Hintergrund, eine leichte Kontrastanpassung oder mix-blend-mode: multiply für ein Produkt-Render vor weißem Hintergrund.

Wenn der Benutzer nach Inhalten fragt, halten Sie sie sparsam und platzieren Sie sie über oder zwischen beabsichtigten Momenten in der Animation, ohne die visuelle Dominanz der Canvas zu verringern. Führen Sie keine Animationsabhängigkeit ein, wenn native Canvas- und Browser-APIs ausreichen.

Canvas-Scrubbing implementieren

Verwenden Sie eine fixierte oder sticky Bühne, die ein aria-hidden Canvas enthält. Größen Sie den Backing Buffer für das Geräte-Pixel-Verhältnis, gedeckelt auf etwa 2, während Sie Zeichnungsmessungen in CSS-Pixeln halten. Setzen Sie die Canvas-Transformation zurück, bevor Sie eine neue DPR-Skalierung bei Größenänderung anwenden, damit sich die Skalierung nicht akkumuliert.

Ordnen Sie den begrenzten gesamten Seitenfortschritt der vollständigen Sequenz zu:

const range = document.documentElement.scrollHeight - innerHeight
const progress = range > 0 ? Math.min(1, Math.max(0, scrollY / range)) : 0
targetFrame = progress * (frameCount - 1)

Vorwärtsscrollen muss die Animation vorantreiben und Rückwärtsscrollen muss sie rückwärts laufen lassen. Scroll- und Größenänderungs-Handler sollten nur günstige Messungen oder das Ziel aktualisieren. Führen Sie eine einzige requestAnimationFrame-Schleife aus und glätten Sie einen Gleitkomma-Abspielkopf mit frame-ratenunabhängiger exponentieller Interpolation:

const dt = Math.min((now - lastTime) / 1000, 0.1)
const alpha = 1 - Math.exp(-dt * 9)
currentFrame += (targetFrame - currentFrame) * alpha

Zeichnen Sie den ganzzahligen Frame auf jeder Seite des Abspielkopfs und überblenden Sie den nächsten Frame durch den gebrochenen Rest. Löschen oder bemalen Sie zuerst den Canvas-Hintergrund, setzen Sie globalAlpha nach dem Zeichnen zurück und zeichnen Sie bei Größenänderung neu.

Frames progressiv laden

Blockieren Sie nicht den ersten Paint auf der gesamten Sequenz:

1. Laden Sie zuerst Frame 1, zeichnen Sie ihn und zeigen Sie die Canvas an.
2. Stellen Sie gleichmäßig verteilte Frames über die Zeitleiste in die Warteschlange, z. B. jeden achten Frame, damit das Suchen frühzeitig einen nahegelegenen Fallback hat.
3. Stellen Sie alle verbleibenden Frames in die Warteschlange.

Verfolgen Sie angeforderte Frames getrennt von geladenen Frames, sodass die Prioritäts- und Restdurchgänge niemals dasselbe Bild zweimal anfordern. Während ein angeforderter Frame noch lädt, zeichnen Sie den nächstgelegenen geladenen Frame. Behandeln Sie fehlgeschlagene Bildladungen, ohne den Rest der Sequenz zu blockieren.

Verwenden Sie eine Asset-URL-Strategie, die mit dem Basispfad und dem Bereitstellungsziel des Projekts funktioniert. Bereinigen Sie Scroll-, Größenänderungs-, Media-Query-Listener, Observer und Animationsframes, wenn die besitzende Komponente ausgehängt wird.

Responsives Verhalten und Barrierefreiheit

Behalten Sie die cover-Darstellung auf schmalen Bildschirmen bei und akzeptieren Sie bewussten Bildausschnitt; verzerren Sie das Bild nicht. Überprüfen Sie die Platzierung wichtiger Motive in Desktop- und Mobilgrößen. Berücksichtigen Sie mobile Viewport-Änderungen und Safe Areas, wenn sichtbarer Inhalt hinzugefügt wird.

Für prefers-reduced-motion: reduce stoppen Sie das Scrubbing und halten Sie den ersten geeigneten Frame. Halten Sie jeglichen Seiteninhalt zugänglich und entführen Sie das Scrollen nicht. Die dekorative Canvas sollte keine redundanten Screenreader-Inhalte erzeugen.

Ergebnis überprüfen

Führen Sie die Prüfungen des Projekts aus und überprüfen Sie das Ergebnis in einem Browser, wenn verfügbar. Bestätigen Sie:

• dass die erste und letzte Scroll-Position die ersten und letzten extrahierten Frames erreichen;
• dass Vorwärts- und Rückwärtsscrollen sich kontinuierlich anfühlen, ohne abrupte Sprünge, Wiedergabe, Flackern oder sichtbare leere Canvas;
• dass Frame-Anforderungen nicht dupliziert werden und fehlende oder langsame Frames einen nahegelegenen geladenen Fallback verwenden;
• dass Cover-Zuschnitt, DPR-Größenänderung und Canvas-Skalierung in Desktop- und Mobilgrößen funktionieren;
• dass reduzierte Bewegung einen statischen Frame hält und die Komponentenbereinigung vollständig ist;
• dass die generierte Sequenz die erwartete Anzahl, Abmessungen, Reihenfolge und akzeptable Gesamtgröße aufweist;
• dass nicht verwandtes Projektverhalten weiterhin funktioniert.

Schließen Sie ab, indem Sie die Erfahrung, die extrahierte Frame-Anzahl und Nutzlast, durchgeführte Prüfungen und etwaige verbleibende Einschränkungen des Quellmaterials zusammenfassen.