Eine Landingpage, durch die man fliegt statt scrollt: sechs KI-generierte Dioramen, zu einer durchgehenden Kamerafahrt ohne einen einzigen Schnitt verkettet. Du brauchst dafür ein Skill von GitHub und den Higgsfield-Connector in Claude.
Echte Aufnahme meines Referenz-Builds, ein Scroll von der ersten bis zur letzten Szene, ohne Schnitt.
Vier Mechaniken, die eine geflogene Seite von einer animierten unterscheiden.
Die Seite animiert nichts, sie spult. Deine Scroll-Position wird direkt auf die Zeit im Video gerechnet, schneller scrollen heißt schneller fliegen, hochscrollen heißt rückwärts fliegen. Genau die Technik, mit der Apple seine Produktseiten baut.
Jeder Abschnitt startet exakt auf dem Bild, mit dem der vorherige aufgehört hat, nicht auf einer ähnlichen Neuberechnung, sondern auf demselben Frame. Deshalb merkt niemand, dass er gerade sechs Videos hintereinander sieht.
Die meisten Scroll-Effekte schieben flache Ebenen unterschiedlich schnell übereinander. Hier bewegt sich die Kamera tatsächlich durch den Raum: Häuser drehen sich weg, Wege laufen unter dir durch, Tiefe entsteht, weil das Video von Anfang an eine Fahrt war.
Im Browser läuft nur Video plus eine einzelne, abhängigkeitsfreie JavaScript-Datei. Keine 3D-Engine, keine Modelle, kein Ladebildschirm, und damit auch kein Grafikkarten-Roulette auf älteren Rechnern.
Der Style-Satz wird wortgleich wiederholt.
Zuerst entsteht pro Station ein Standbild. Jeder dieser Bild-Prompts beginnt mit exakt demselben Stil-Satz: gleicher Winkel, gleiche Palette, gleiches Licht. Diese Wiederholung ist der ganze Trick hinter der Kohärenz: die sechs Szenen wirken wie eine Welt, weil sie aus derselben Anweisung stammen.
Jeder Abschnitt erbt das letzte Bild.
Aus jedem fertigen Videoabschnitt wird der allerletzte Frame als Bilddatei herausgezogen und als Startbild für den nächsten Abschnitt eingesetzt. Die Kamera zieht dabei nie zurück, nur diese Vorwärts-Regel verhindert, dass eine Naht wie ein Zurückspulen wirkt. Es gibt bewusst keine Überblendclips: die Abschnitte sind die Reise.
Warum das Scrubbing überall funktioniert.
Viele Hoster liefern keine Teilbereiche einer Videodatei aus, dann klemmt jedes Spulen bei Sekunde null fest und das Bild friert ein. Die Engine umgeht das, indem sie jeden Clip komplett in den Arbeitsspeicher lädt und von dort abspielt. Aus dem Speicher ist jede Stelle sofort erreichbar, egal wie der Server konfiguriert ist.
Wo der Text sitzt, wird die Kamera langsam.
Zwei Stellschrauben steuern das Erlebnis: wie viel Scrollweg eine Szene bekommt, und ob die Kamera in ihrer Mitte kurz zur Ruhe kommt. Genau dort steht die Überschrift. Deine Hero- und Schlussszene bekommen mehr Weg und mehr Ruhe, die Durchgangsszenen bleiben zügig, die Nähte selbst bleiben davon unberührt.
Das sind zwei echte Frames aus meinem Build, der letzte des ersten und der erste des zweiten Abschnitts. Sie sind deckungsgleich, und genau deshalb sieht man beim Scrollen keinen Übergang. Der messbare Restunterschied kommt vom Videokompressor, nicht vom Bildinhalt.
01 · Handwerk
Werkstatt, Maschine, Detailarbeit, Lager, Versand, Produkt in der Hand. Sechs Stationen, die du sonst nur mit einem Drehtag und einem Kamerateam zeigen könntest, und die erklären, warum dein Preis dein Preis ist.
02 · Immobilien
Grundstück, Rohbau, Grundriss, fertige Wohnung, Innenhof, Nachbarschaft. Bei einer Projektentwicklung existiert noch nichts, was man fotografieren könnte, hier fliegt der Interessent trotzdem hindurch, statt einen Grundriss zu deuten.
03 · Produktion
Wareneingang, Fertigungslinie, Qualitätskontrolle, Kommissionierung, Rampe, Auslieferung. Genau die Kette, die im Vertriebsgespräch immer erklärt werden muss, und die als Flug in dreißig Sekunden verstanden ist.
04 · Agentur
Erstgespräch, Recherche, Konzept, Umsetzung, Launch, Betreuung. Wer Dienstleistung verkauft, hat nichts zum Fotografieren, eine geflogene Prozesswelt ist das Portfolio-Stück und der Prozess-Erklärer in einem.
Das ist der komplette Auftrag, den du nach der Installation in Claude einfügst. Die eckigen Klammern füllst du aus, den Rest lässt du stehen, besonders die letzten beiden Absätze: Sie sorgen dafür, dass du die Kosten vor dem ersten Render siehst und dass eine misslungene Fahrt neu gewürfelt wird, bevor sie sich in die ganze Kette fortpflanzt.
/scroll-world Bau mir eine Scroll-Website für: [BRANCHE + FIRMA IN EINEM SATZ] Markenname: [NAME] KAMERA Eine durchgehende Vorwärtsfahrt. Die Kamera zieht nie zurück, jeder Abschnitt startet auf dem tatsächlich gerenderten letzten Frame seines Vorgängers. Keine Überblendclips. ART DIRECTION Weiches Matte-Low-Poly-Clay-Diorama, isometrisch, Tilt-Shift-Miniatur, warmes Licht. Dieser Satz kommt wortgleich in jeden einzelnen Szenen-Prompt. Palette: [4–6 HEX-WERTE] Tonalität: [z. B. handwerklich, ruhig, präzise] DIE REISE: 6 Stationen entlang meiner Wertschöpfungskette: 01 [Was steht im Diorama?]: Eyebrow / Headline / ein Satz / max. 2 Schlagworte 02 [ … ] 03 [ … ] 04 [ … ] 05 [ … ] 06 [Hero-Produkt + Handlungsaufforderung] RENDER Videokette in 720p, Standbilder über das Bildmodell. Nutze den Higgsfield-Connector, ich habe keine CLI installiert. Nur Desktop, keine zweite Hochformat-Kette. BEVOR DU RENDERST Rechne mir die Credits für Standbilder + Videokette + Re-Roll-Reserve vor und warte auf mein ausdrückliches OK. WÄHREND DU RENDERST Zeig mir vor jedem neuen Abschnitt den letzten Frame des vorherigen. Sieht er nicht nach einer ruhigen Vorwärtsfahrt aus, würfle ihn neu, statt darauf weiterzuketten, ein schiefer Frame vererbt sich sonst bis zum Ende.
Skill installieren
In Claude Code zwei Zeilen: erst /plugin marketplace add oso95/scroll-world, dann /plugin install scroll-world@scroll-world. Der Skill ist quelloffen und kostenlos, bezahlt wird nur, was du an Bildern und Videos generierst.
Higgsfield verbinden
Den Higgsfield-Connector in Claude aktivieren, wie das geht, steht auf meiner Connector-Seite. Danach generiert Claude Bilder und Videos direkt im Chat. Eine lokale Higgsfield-CLI brauchst du damit nicht.
ffmpeg bereitstellen
Auf dem Mac reicht brew install ffmpeg. Damit werden die Nahtframes aus den Videos gezogen und die fertigen Clips fürs Web komprimiert, der einzige Teil, der wirklich lokal läuft.
Briefing geben, Nähte prüfen
Den Prompt von oben einfügen, die Kostenschätzung abnicken, danach läuft die Kette. Plan drei bis acht Minuten pro Videoabschnitt ein und schau dir jeden Endframe an, bevor der nächste gerendert wird.
Ordner hochladen
Am Ende liegen eine HTML-Datei, eine JavaScript-Datei und der Asset-Ordner vor dir. Das ist die ganze Seite, sie läuft auf jedem normalen Webspace, ohne Datenbank, ohne Build-Schritt, ohne Framework.
Kein Drehtag, kein 3D-Studio, kein Framework: sechs Sätze über dein Geschäft, ein Skill, ein Connector. Der Rest ist Wartezeit auf Renderings, und am Ende ein Ordner, den du einfach hochlädst.
python3 -m http.server, produktiv jeder normale Webspace.