Hey, ich bin Philipp 👋
Du kennst diese Produktseiten, bei denen sich beim Scrollen etwas aufbaut — Apple macht das seit Jahren. Ich habe das nachgebaut, einmal mit ChatGPT und einmal mit Claude: ein leeres Zimmer, das sich beim Scrollen aus einem IKEA-Karton einrichtet, und eine iPhone-Kamera, die sich öffnet. Das Verfahren war beide Male exakt dasselbe und besteht aus drei Schritten: zwei Bilder, ein KI-Video dazwischen, dann eine Webseite drumherum. Programmieren musst du nichts. Hier sind alle Prompts, die ich dafür benutzt habe.
Was du brauchst
- ChatGPT oder Claude — beide Wege führen zum selben Ergebnis.
- Einen Zugang zu Higgsfield für das Video zwischen den beiden Bildern.
- Ungefähr 20 Minuten, davon läuft die meiste Zeit die KI.
1Zwei Bilder: der Anfang und das Ende
Der ganze Trick steckt in diesem Schritt. Das Videomodell später baut keine Animation aus dem Nichts — es rechnet den Weg zwischen zwei Bildern aus. Du brauchst also ein Startbild und ein Zielbild, die dasselbe Motiv in zwei Zuständen zeigen: einmal zu, einmal offen. Einmal leer, einmal fertig.
Für das Zimmer habe ich beide Bilder von der KI erstellen lassen — ein Prompt reicht für beide:
Erstelle 2 Bilder. Das erste zeige einen leeren Raum und in dem Raum steht ein geschlossener Ikea Karton. Auf dem zweiten Bild ist der selbe Ikea Karton geöffnet und das Zimmer komplett eingerichtet.
Für das iPhone bin ich anders vorgegangen: Ich war auf der Apple-Webseite und habe zwei Screenshots gemacht — einmal das weiße iPhone von außen, einmal die Innenansicht der Kamera. Diese beiden Screenshots lädst du hoch und lässt die KI daraus das Zielbild bauen:
Integriere die Kameratechnik aus Bild 2 sichtbar in den oberen Bereich des weißen Smartphones aus Bild 1. Füge darunter vier elegante Glaskacheln mit „18 MP“, „48 MP“, „4K 60 fps“ und „4 Objektive“ hinzu.
2Aus den zwei Bildern ein Video machen
Jetzt geht es zu Higgsfield. Dort wählst du unter „Create Video“ das Modell Kling 3.0 aus, lädst beide Bilder hoch — das erste ist der Startframe, das zweite der Endframe — und gibst den Prompt ein. Das Modell rechnet dann die Bewegung dazwischen aus.
Use Frame 1 as the exact opening frame and Frame 2 as the exact final frame. Keep the camera completely static. The box opens by itself, and every piece of furniture, plant, light, textile, and decorative object emerges directly from inside the box, flying smoothly through the room to its correct final position. The room assembles in a stylish, magical, yet physically believable transformation. End precisely on Frame 2, with no people, cuts, or camera movement.
Start on the exact first frame and hold briefly. Slowly zoom in as the camera interior is revealed, while the four glass tiles appear one after another with smooth, dynamic motion and subtle depth. Keep the phone perfectly centered and stable. Finish seamlessly on the exact final frame and hold.
3Aus dem Video die Webseite bauen
Das fertige Video legst du in einem Ordner auf deinem Rechner ab und gibst der KI Zugriff darauf. Dann kommt der wichtigste Prompt des ganzen Guides — er beschreibt genau, wie das Video an das Scrollen gekoppelt wird:
Implementiere eine responsive Scroll-Animation mit meinem Video. Das Video soll stummgeschaltet, ohne Bedienelemente und während der Animation sticky im Viewport sein. Verknüpfe seine Abspielposition präzise mit dem Scrollfortschritt: Beim Herunterscrollen läuft es vorwärts, beim Hochscrollen rückwärts. Verwende performantes JavaScript mit requestAnimationFrame, berücksichtige Mobile und prefers-reduced-motion und liefere den vollständigen HTML-, CSS- und JavaScript-Code.
Zwei Wege, dasselbe Ergebnis
- Mit ChatGPT: Öffne die ChatGPT Desktop App und geh oben auf Codex. Leg das Video in einem Ordner ab, gib Codex Zugriff darauf und schick den Prompt.
- Mit Claude: Öffne Claude Code, gib das Video als Referenz mit und schick denselben Prompt.
Ein paar Minuten später liegt die fertige Seite vor dir — HTML, CSS und JavaScript in einem Rutsch. Wenn du scrollst, läuft das Video exakt mit; scrollst du zurück, läuft es rückwärts.
Optional: Higgsfield direkt in Claude nutzen
Wenn du mit Claude arbeitest, musst du für das Video nicht in den Browser wechseln. Geh in der Claude Desktop App auf Anpassen, dann Konnektoren, Hinzufügen, Durchsuchen — dort suchst du nach Higgsfield und installierst es. Danach erstellst du Bilder und Video direkt im Chat.
Wichtig zu wissen
- Die Videogenerierung kostet Credits — bei Higgsfield brauchst du einen Zugang, die übrigen Schritte laufen in deinem normalen ChatGPT- oder Claude-Abo.
- Rechne mit mehreren Anläufen: Wenn Start- und Zielbild zu unterschiedlich sind, wird die Animation unruhig. Bilder anpassen ist billiger, als am Video-Prompt zu feilen.
- Der Webseiten-Prompt fordert bewusst Mobile-Unterstützung und Rücksicht auf reduzierte Bewegung — damit die Seite auch auf dem Handy funktioniert und niemanden überfordert, der Animationen abgestellt hat.
- Technisch ist der Effekt kein Video, das einfach abspielt: Die Abspielposition hängt direkt am Scrollbalken. Deshalb läuft die Animation rückwärts, wenn du hochscrollst.
- Das Ergebnis ist eine einzelne Seite aus HTML, CSS und JavaScript. Du kannst sie überall hochladen — sie braucht keinen Server und keine Datenbank.