Seedance 2.5 Website mit Claude Code: Scroll-Effekte per Prompt

Scroll-Effekte, bei denen ein Video Bild für Bild mitläuft, während du nach unten scrollst, kanntest du bisher vor allem von Apple und großen Konzernen. Mit Seedance 2.5 und Claude Code baust du so eine Seite heute selbst, aus einem neuen, leeren Ordner. Im Video zeige ich dir den kompletten Weg am Beispiel einer Website für ein Bauunternehmen. Hier bekommst du die Grundlagen, die Schritte und meine ehrliche Einschätzung zum Ergebnis.

Was ist eine Cinematic-Scroll-Website mit Seedance 2.5?

Eine normale Website mit Video bindet einen Clip ein, der einfach abläuft. Das kennt jeder, das ist nichts Neues. Bei einer Cinematic-Scroll-Website holt Claude Code jedes einzelne Frame aus dem Video heraus und baut die Seite so, dass diese Frames beim Scrollen eingeblendet werden. Der Besucher steuert die Bewegung also selbst mit dem Mausrad oder dem Finger.

Das wirkt auf einem ganz anderen Niveau als ein eingebettetes Video. Auf den Websites normaler Unternehmen siehst du so etwas fast nie. Genau da liegt die Chance: Wenn du für einen Handwerksbetrieb, eine Agentur oder deine eigene Firma so eine Seite baust, fällt sie auf.

Seedance 2.5 ist dabei das Videomodell. Die Modelle sind inzwischen so gut, dass du keine dutzenden Versuche mehr brauchst, vor allem wenn die Bildwelt vorher sauber steht. Claude Code übernimmt den Rest: Referenz analysieren, Bilder und Videos erzeugen lassen, die Seite programmieren und sich selbst prüfen.

Die drei Bausteine: Bildwelt, Videos, Choreografie

Bevor du loslegst, lohnt sich ein kurzer Blick auf die Theorie. Jede dieser Seiten entsteht aus drei Bausteinen, und jeder hat seine eigene Logik.

Die Bildwelt. Mit einem Bildmodell wie GPT-Image 2 oder einem anderen Generator erzeugst du die Standbilder, aus denen später die Videos entstehen. Hier triffst du die echten Entscheidungen. Bilder kosten sehr wenig. Passt etwas nicht, lässt du sie neu erstellen, immer wieder, bis sie zusammen harmonieren und die Geschichte richtig erzählen.

Die Videos. Aus der Bildwelt generierst du mit Seedance 2.5 die Clips. Das ist die Story, die der Besucher auf der Seite sieht. Ein kleiner Fehler im Video sieht auf der fertigen Website schnell hässlich aus. Deshalb gilt: Prüf jedes Video genau und sei nicht geizig. Sehr wahrscheinlich generierst du das eine oder andere Video neu, aber das lohnt sich, wenn die Seite am Ende stimmt.

Die Choreografie. Claude Code baut die Videos in den Code ein. Dabei gibt es zwei grundsätzliche Wege:

Was du vorher brauchst

Für die Bilder und Videos nutze ich KIE AI. Du brauchst also ein KIE-Konto und den API-Schlüssel dazu. Der Vorteil gegenüber Higgsfield, OpenArt und ähnlichen Anbietern: Dort zahlst du ein monatliches Abo. Bei KIE AI zahlst du nur das, was du wirklich generierst.

Damit das bequem funktioniert, habe ich mir einen eigenen Media Skill für Claude Code gebaut. Er holt die wichtigsten Funktionen, die ich bei Higgsfield und OpenArt genutzt habe, lokal auf meinen Rechner. Dazu gehört eine Generations Gallery: Dort siehst du jedes erzeugte Bild und Video, den Preis, das verwendete Modell, den Prompt und den Pfad, unter dem die Datei auf deinem Rechner liegt. Wie der Skill dein Higgsfield-Abo ersetzt, erkläre ich in einem eigenen Video.

Dazu kommt mein Cinematic Scroll Skill. Er enthält schon die Effekte und das Konzept, um Storytelling über Scroll-Effekte sauber aufzubauen, und sorgt auch dafür, dass Claude Code sich selbst mit Screenshots kontrolliert.

Für die Inspiration nutze ich gerne Awwwards, die Seite mit den drei W. Unter Explore und Sites of the Month findest du dort einige der schönsten Websites überhaupt, zum Beispiel die Igloo-Website, die einen Award of the Year bekommen hat. Auch die Referenz für dieses Video stammt von dort: orizo.ai, gebaut von einer Designagentur, eine Site of the Month.

Anleitung: Deine Seedance-Website in drei Prompts

Im Video siehst du jeden Schritt live in einer frischen Claude-Code-Session. Die Prompts sind so aufgebaut, dass jeder Baustein seinen eigenen bekommt.

1Schritt 1: Bildwelt mit Referenz erzeugen

Der erste Prompt sagt Claude Code drei Dinge: Nutze den Cinematic Scroll Skill, nimm orizo.ai als Referenz und erzähl auf der Seite drei Stationen. Die erste Station im Beispiel heißt Rohbau: Der Bagger hebt die Grube aus, Morgenlicht, Staub. Die Aussage dazu: Wir fangen bei Null an, auf deinem Grundstück.

Was dann passiert, ist richtig stark. Claude Code öffnet selbstständig Playwright, ruft die Referenzseite auf und scrollt sie im Detail durch, um sie zu verstehen. Ich fasse dabei nichts an. Aus dieser Analyse leitet er die Bildwelt ab und legt alle Bilder in der Generations Gallery ab.

2Schritt 2: Bilder prüfen und freigeben

Geh jedes Bild einzeln durch. In der Demo hatte ein Bild einen klaren Fehler: Da war eine Hand zu sehen, die dort nicht hingehört, oder anders gesagt, der Mensch dazu fehlte. Solche Fehler fängst du hier ab, wo ein Neuversuch fast nichts kostet.

Du kannst an dieser Stelle auch deine eigene Kreativität einbringen: Bilder neu anordnen, einzelne neu generieren lassen, die Story nach deinem Geschmack schärfen. Für die Demo habe ich die Bildwelt so akzeptiert, weil die Geschichte grundsätzlich stimmte: vom Rohbau über den Bauprozess bis zum fertigen Haus.

3Schritt 3: Videos mit Seedance 2.5 generieren

Im zweiten Prompt gibst du die Bilder frei und startest den zweiten Baustein. Dazu bekommt Claude Code einige Vorgaben, damit die Videos richtig für die Website vorbereitet sind. Die Generierung dauert eine Weile, danach erscheinen die Videos ebenfalls in der Gallery.

Die Ergebnisse sind beeindruckend. Ein einzelnes Video ohne Website drumherum sieht schon phänomenal aus. Das Video, in dem das Haus gebaut wird, ist etwas unrealistisch, so baut niemand ein Haus. Für die Website ist das aber egal: Es soll dem Besucher zeigen, dass hier sein Haus gebaut wird, nicht eine Baustellendokumentation sein.

Prüf die Videos trotzdem kritisch. In der Demo fiel mir auf, dass es mit drei Stationen eigentlich kein richtiges Ende gab. Ich hätte gern ein viertes Video gehabt, oder ein besseres drittes, das das fertige Haus zeigt, so wie auf dem Foto, das wir dafür gewählt hatten. Auch das Framing war noch nicht ganz sauber.

Hier hast du zwei Wege: Entweder überarbeitest du das Storyboard deutlich, passt das Framing an und sagst Claude Code, dass alles aus demselben Bild kommen muss. Oder du lässt ihn mit dem vorhandenen Material die Website bauen und verbesserst danach. Claude Code hat übrigens selbst vorgeschlagen, das Ende zu fixen. Für die Demo habe ich es gelassen, um zu zeigen, was ein einziger Durchlauf liefert.

4Schritt 4: Choreografie bauen lassen

Der dritte Prompt lässt Claude Code die eigentliche Website bauen. Er öffnet den Browser, scrollt mit Playwright selbst durch das Ergebnis, legt die Textebene darüber, damit der Besucher versteht, wohin die Seite ihn führen will, und prüft sich anschließend mit Screenshots. Dabei meldete er selbst, dass die Screenshots echte Fehler zeigen, die er vorher nicht sehen konnte, und korrigierte sie. Das musste ich nicht extra anfordern, es steckt im Cinematic Scroll Skill.

Während der Umsetzung waren bereits knapp zehn Minuten vergangen. Die gesamte Dauer des letzten Schritts wird im Video nicht genannt.

Das Ergebnis: ehrlich bewertet

Die fertige Seite nach dem ersten Versuch: Links stehen Text und zusätzliche Infos, rechts scrollst du durch die Videos, und am Ende kommt ein Call to Action. Mit dem Scroll-Effekt und dem starken Bild- und Videomaterial macht das definitiv etwas her.

Trotzdem bin ich ehrlich: Als Ganzes gefällt mir die Seite zum Präsentieren absolut nicht. So würde ich sie keinem Kunden zeigen und auch nicht live stellen. Für mich ist das, was hier entstanden ist, eigentlich der Hero, also der obere Teil einer Website. Ein richtig guter Ansatz, den man mit ein paar Iterationen zu einem perfekten Hero macht.

Was ich als Nächstes verbessern würde:

• Tempo: Die Abfolge könnte etwas schneller sein.
• Übergänge: Am Anfang ein Zoom ganz nah heran, und beim nächsten Video kein Sprung von einem Bild zum anderen, sondern ein Zoom-out. Dann wirken die Videos wirklich wie eine zusammenhängende Szene.
• Ende: Ein zusätzlicher Endframe, der das fertige Haus zeigt, mit sauberen Wänden statt sichtbarer Backsteine an den Ecken.
• Der Rest der Seite: Unter dem Hero eine komplette Website, die verkauft, erklärt und den Kunden die Geschichte auch schriftlich mit Inhalt entlangführt.

Im Video kündige ich an, den Cinematic Scroll Skill vor der Veröffentlichung zu überarbeiten, damit er auch den restlichen Seitenaufbau als Basis enthält. Hast du den Skill schon installiert, aktualisierst du ihn über GitHub.

Was kostet so eine Website?

Die Bilder sind der günstige Teil. Bei den Videos wird es spürbar teurer. In der Demo kostete ein einzelnes Video mit 12 Sekunden Material rund 6 €. Für alle Videos zusammen kamen rund 19 € zusammen, mehr als für alle anderen Elemente.

Weitere Iterationen würden zusätzliche Generierungskosten verursachen. Wie viel ein fertig ausgearbeiteter Hero kostet, wurde in der Demo nicht ermittelt.

Wichtig für deine Kalkulation: Über KIE AI bezahlst du nur die Generierungen, die du wirklich auslöst. Ein monatliches Abo, das auch in Monaten ohne Projekt läuft, entfällt.

Typische Fehler

Bei der Bildwelt sparen. Wer die Bilder schnell durchwinkt, bezahlt später bei den Videos. Fehler wie eine falsche Hand fallen in einem Standbild sofort auf, im Video oft erst auf der fertigen Seite.

Kein Bildmodell vorgeben. Ohne Vorgabe wählt Claude Code selbst. Willst du GPT-Image 2, schreib es in den Prompt.

Die Story ohne Ende planen. Drei Stationen klingen gut, aber wenn das Finale fehlt, hört die Seite einfach auf. Plan den Schlussframe von Anfang an mit.

Videos ohne Zusammenhang. Jedes Video kann für sich genial aussehen und trotzdem wirkt die Seite zerrissen, wenn die Übergänge springen. Achte darauf, dass die Clips aus demselben Bild oder derselben Perspektive kommen.

Den ersten Durchlauf als fertige Website verkaufen. Ein Prompt liefert eine starke Basis, keine kundenreife Seite.

Fazit

Mit Seedance 2.5, KIE AI und Claude Code baust du Scroll-Effekte, die bisher großen Marken vorbehalten waren. Der Weg ist klar: Bildwelt günstig und gründlich erzeugen, Videos sorgfältig prüfen, dann die Choreografie von Claude Code bauen lassen. Ein einziger Durchlauf liefert dir einen starken Hero-Bereich für rund 19 € an Videokosten, aber noch keine fertige Verkaufsseite. Plan das Ende der Story mit, sorg für saubere Übergänge und bau darunter eine Seite, die erklärt und verkauft. Im Video oben siehst du jeden Schritt live mit.