Scroll Worldvon oso95

Scroll World Skill.

Eine vorab gerenderte Kamerafahrt, die per Scrollen gesteuert wird – keine Live-3D-Welt.

Scroll-Animation
Video
Landingpages

OpenDesign herunterladen Nutzungsanleitung ansehen

Quellenprüfung · Scroll WorldSKILL.md

Aufgabe Scroll-Animation Ergebnis • Eine scrollgesteuerte Landingpage mit Abschnittstexten und abschließendem Call-to-Action • Generierte Szenenbilder, Kameraclips und gegebenenfalls erforderliche Verbindungsclips • Optimierte Videodateien, Fallback-Poster und eine Prüfung der Übergänge zwischen den Clips Vor dem Start Die dokumentierte Pipeline nutzt Higgsfield und einen Monid-Videoweg sowie ffmpeg/ffprobe und eine Browserumgebung. Anbieterkonten, Guthaben, Modellfähigkeiten und jede optionale Bildroute müssen neu überprüft werden.

Redaktionelle Zusammenfassung · Quelle geprüft am 2026-10-07 · kein generiertes Beispiel

01 Funktionen

Scroll World

Ein Workflow für Landingpages mit generiertem Video, aufgebaut auf Kameraarchitektur, Kontinuität anhand tatsächlicher Frames, Scroll-Scrubbing sowie ausdrücklichen Entscheidungen zu Mobilgeräten und Rendering-Budget.

Quellenbasierter WorkflowKein Ausführungs-Benchmark

Der Arbeitsansatz

Scroll World erstellt eine Landingpage, bei der die Scrollposition einen vorab gerenderten Kameraflug steuert. Szenenbilder werden zu Videoclips, anschließend ordnet eine JavaScript-Engine dem Scrollen die Wiedergabezeit zu. Die scheinbar dreidimensionale Welt ist generiertes Filmmaterial, keine navigierbare WebGL-Szene mit editierbarer Geometrie. Die Portabilität ergibt sich aus einer eigenständigen Engine, die sich in verschiedene Frontend-Stacks einbetten lässt.

Die Quelle unterscheidet zwischen einem durchgehenden Vorwärts-Walkthrough und einem Flug durch eine Miniaturwelt mit separaten Verbindungsclips. In beiden Fällen sind gerenderte Grenzframes wichtiger als die Wiederverwendung eines ähnlich aussehenden Originalbilds. Der nächste Clip muss auf tatsächlichem Nachbarmaterial basieren, und die Übergänge müssen weiterhin geprüft werden. Außerdem behandelt der Workflow eine mobile Hochformat-Kette als eigene Produktionsentscheidung mit zusätzlichen Renderkosten, nicht als stillschweigenden Zuschnitt des Desktop-Films.

Erwartete Ergebnisse

Eine scrollgesteuerte Landingpage mit Abschnittstexten und abschließendem Call-to-Action
Generierte Szenenbilder, Kameraclips und gegebenenfalls erforderliche Verbindungsclips
Optimierte Videodateien, Fallback-Poster und eine Prüfung der Übergänge zwischen den Clips

Beispiel-Brief ansehen

Vom Brief zur Prüfung

01
Reise festlegen
Legen Sie Thema, geordnete Szenen, Brand-Kit, Art Direction und Kamerastil fest. Bestätigen Sie, ob nur für Desktop oder nativ im Hochformat produziert wird, und lassen Sie eine aktuelle Renderkosten-Schätzung freigeben.
02
Visuelle Welt etablieren
Erzeugen Sie stimmige Standbilder mit einem gemeinsamen visuellen Briefing. Prüfen Sie die Konsistenz der Szenen, bevor Sie eine Kette kostenpflichtiger Videogenerierungen starten.
03
Tatsächliche Frames verketten
Bei einer Vorwärtsfahrt übergeben Sie das Ende des vorherigen Clips an den nächsten. Für Luftaufnahmen als Verbindung verwenden Sie tatsächlich gerenderte Frames beider benachbarter Clips statt der ursprünglichen Szenenbilder.
04
Kodieren und Scrollen testen
Bereiten Sie durchsuchbare Dateien vor, binden Sie die portable Engine ein und prüfen Sie das Verhalten an den Übergängen, rückwärts Scrollen, Fallback-Poster und reduzierte Bewegung. Testen Sie die Hochformat-Kette separat, falls sie beauftragt wurde.

02 Einsatzbereiche

Wann sich der Einsatz lohnt

Die dokumentierte Pipeline nutzt Higgsfield und einen Monid-Videoweg sowie ffmpeg/ffprobe und eine Browserumgebung. Anbieterkonten, Guthaben, Modellfähigkeiten und jede optionale Bildroute müssen neu überprüft werden.

Gut geeignet

Eine narrative MarkenreiseNützlich, wenn sich ein Produkt oder Unternehmen als Folge von Orten oder Prozessschritten erklären lässt, die von einer durchgehenden Kamerabeziehung profitieren.
Frameworkunabhängige EinbettungDie dokumentierte Engine ist reines JavaScript, daher ist der Footage-Workflow nicht an ein bestimmtes Anwendungsframework gebunden.

Zu prüfende Grenzen

Generiertes Material, kein realer BelegDie Welt ist eine illustrative Konstruktion. Sie sollte nicht als dokumentarisches Material von Anlagen, Produkten oder Ereignissen dargestellt werden, die sie tatsächlich nicht zeigt.
Kostenpflichtige und sich ändernde BackendsDas Rendering erfordert Anbieterzugang und Budget. Die Quelle enthält datierte Beobachtungen zu Anbietern; Modellschemata, Verfügbarkeit, Abrechnung und Übergangsverhalten müssen vor einem neuen Projekt geprüft werden.

Diese Eingaben mitbringen

UnternehmensgeschichteBeschreiben Sie Thema und geordnete Szenen, mit Überschrift und knappem erklärendem Text für jede Phase.
Kamera und Art DirectionWählen Sie einen bodennahen Walkthrough, einen Luftflug durch eine Miniaturwelt oder eine Variante mit festem Winkel, dazu freigegebene Farben und Markenmerkmale.
ProduktionsbudgetGeben Sie Anbieterzugang, Ausgabenlimits und die Notwendigkeit einer separaten Hochformat-Kette an. Planen Sie Zeit ein, um misslungene Clips zu prüfen und zu ersetzen.

03 Wichtige Entscheidungen

Entscheidungen, auf die es ankommt

Übergänge sind ein Produktionsgut
Extrahierte Grenzframes machen Kontinuität zu einem prüfbaren Teil der Pipeline. Eine Überblendung allein kann eine große Änderung der Szenenkomposition nicht verbergen.
Mobil ist ein ausdrückliches Lieferergebnis
Eine Hochformat-Kamerakette kann Motiv und Bildaufbau auf Smartphones erhalten. Die getrennte Behandlung macht Budget und visuelle Abwägung sichtbar, statt ein Zuschnittsproblem zu verstecken.

04 Beispielbriefing

Einen fokussierten Brief ausprobieren

Der folgende Beispiel-Brief wurde nicht getestet. Prüfen Sie die Einrichtung des Skills, bevor Sie ihn verwenden.

Einrichtung prüfen

Nutzen Sie die Engine- und Pipeline-Referenzen des Repositorys. Prüfen Sie aktuelle Anbieterfunktionen und Preise und holen Sie eine Freigabe ein, bevor Sie kostenpflichtig generieren.

Upstream-Quelldatei

https://github.com/oso95/scroll-world/blob/71cc36d3bb150248ae36a2c552f9cbf88802a79c/skills/scroll-world/SKILL.md

Mit einem Ergebnis beginnen

Passen Sie Umfang, Quellmaterial und Vorgaben in diesem Brief an, bevor Sie den Skill ausführen.

Beispiel-Brief

Nutze Scroll World, um eine illustrative Reise von einer Teefarm bis zum fertigen Getränk in fünf Miniaturszenen zu planen. Verwende unsere bereitgestellten Markenfarben und einen Kamerastil im Stil eines Luftbild-Dioramas. Prüfe vor jeder Generierung das aktuelle Rendering-Backend und schätze eine reine Desktop-Produktion samt Puffer für Neugenerierungen. Zeige zuerst den Szenenplan und die Richtung der Standbilder. Erstelle ohne Freigabe keine mobile Kette und verursache keine Renderkosten.

Ergebnis prüfen

Prüfen Sie das tatsächliche Ergebnis anhand dieser beobachtbaren Kriterien.

Benachbarte Clips wurden unmittelbar vor und nach jedem Übergang in beiden Scrollrichtungen geprüft.
Der Modus für reduzierte Bewegung zeigt nutzbare Standbilder und lesbare Abschnittstexte.
Jede behauptete mobile Version liefert tatsächlich Hochformat-Dateien statt eines nicht offengelegten Querformat-Zuschnitts.

OpenDesign bietet einen lokalen Design-Arbeitsbereich für Coding-Agenten. Diese Auflistung bedeutet nicht, dass der Skill gebündelt ist oder dass seine externen Tools, Zugangsdaten und Softwareabhängigkeiten enthalten sind.

OpenDesign herunterladen Schnellstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte festgelegte Quellrevision. Verhalten und Anforderungen im Upstream können sich ändern.

Quelleninhaber: oso95
Repository: oso95/scroll-world
Skill-Datei: skills/scroll-world/SKILL.md
Lizenz: MIT
Geprüfter Stand: 2026-10-07 · 71cc36d3bb15

Redaktionelle Quellenzusammenfassung

Ein Workflow für Landingpages mit generiertem Video, aufgebaut auf Kameraarchitektur, Kontinuität anhand tatsächlicher Frames, Scroll-Scrubbing sowie ausdrücklichen Entscheidungen zu Mobilgeräten und Rendering-Budget.

Originalzusammenfassung von OpenDesign auf Grundlage der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, keine Skill-Nutzung und keine Qualitätsbewertung.

06 Fragen vor dem Start

Fragen vor dem Start

Erzeugt es eine Echtzeit-3D-Szene?

Nein. Die Seite scrubbt vorab gerendertes Video. Das erzeugt Kamerabewegung, ohne Besuchern freie Navigation durch ein Live-3D-Modell zu geben.

Warum nicht einfach die ursprünglichen Standbilder verbinden?

Generierte Clips können von ihren Startreferenzen abweichen. Tatsächlich gerenderte Grenzframes ermöglichen einen näheren visuellen Übergang als eine neue Interpretation desselben Standbilds.

Ist automatisch ein mobiler Film enthalten?

Nein. Die Quelle verlangt eine gesonderte Entscheidung für eine native Hochformat-Kette. Die telefonspezifischen Wiedergabeanpassungen der Engine sind davon getrennt und erzeugen dieses zusätzliche Material nicht.

OpenDesign

Schaffen Sie Raum für die nächste Design-Iteration.

Halten Sie Brief, Quellmaterial und Designarbeit in einem lokalen Arbeitsbereich zusammen. Prüfen Sie die Einrichtung des Skills selbst, bevor Sie ihn in Ihren Workflow aufnehmen.

OpenDesign herunterladen Design-Skills durchsuchen