Apple-Style-Scroll-Website mit KI bauen: Der komplette Guide (2026)

Wie baut man eine Apple-Style-Scroll-Website mit KI?

Kurze Antwort: Du beschreibst den Film, den die Seite abspielen soll — "ein gepinnter Hero, in dem ein Produktvideo Frame für Frame scrubbt, während ich scrolle, Captions blenden über fünf Beats ein, dunkel, langsam, premium" — und ein KI-Codegenerator schreibt ihn als echtes React-Projekt: GSAP-ScrollTrigger-Timelines, eine Lenis-Smooth-Scroll-Grundlage und eine Scroll-Scrub-Engine, die die Scroll-Position auf die Medienwiedergabe mappt. Auf VULK (unser Produkt — Offenlegung unten) läuft diese Schleife Prompt → generierter Code → Live-Vorschau in einer Firecracker-microVM → One-Click-Deploy, und das Ergebnis ist Quellcode, den du exportierst und besitzt.

Die Nachfrage hinter diesem Stil ist keine ästhetische Eitelkeit. Nutzer, die mit immersiver Absicht zu VULK kommen — Scrollytelling, cinematisch, 3D — konvertieren zu 20,4 % in zahlende Kunden, sechsmal der Plattformdurchschnitt, und 2.438 Projekte enthalten explizite 3D/WebGL-Anfragen (VULK-Plattformdaten, Juli 2026). Apples Produktseiten haben ein Jahrzehnt von Besuchern trainiert, scrollgesteuertes Storytelling als "dieses Unternehmen meint es ernst" zu lesen. Dieser Guide deckt das ganze Handwerk ab: was den Stil funktionieren lässt, die fünf Techniken hinter jeder Apple-Style-Seite, den Prompt-zu-Site-Workflow, sechs vollständige Copy-Paste-Prompts (inklusive eines Canvas-Bildsequenz-Scrubs und eines gepinnten cinematischen Heroes), einen ehrlichen Vergleich mit Handarbeit, Webflow und Framer, Performance-Disziplin und Deployment. Offenlegung: VULK ist unser Produkt — wo ein anderer Weg die bessere Wahl ist, sagen wir es. Aktualisiert am 18. Juli 2026.

Vergleichstabelle: vier Wege zu einer scrollgesteuerten Website

Die strukturelle Trennung: visuelle Builder animieren Elemente; der Apple-Stil inszeniert einen Film. Eine Sektion über 3.000 Pixel Scroll zu pinnen, während ein Video scrubbt, Captions die Plätze tauschen und das Licht über Erzähl-Beats wechselt, ist Timeline-Choreografie — die natürliche Sprache von GSAP-Code, mühsam in einer GUI zusammenzuklicken. Deshalb ist die oberste Liga dieses Genres entweder von Studios handcodiert oder, seit es KI-Generierung gibt, von einem Modell geschrieben und per Prompt verfeinert.

Warum funktioniert der Apple-Scroll-Stil so gut?

Drei Mechanismen, alle vom Film geliehen:

Der Betrachter steuert den Projektor. In einer scrollgescrubbten Sequenz IST das Scrollen die Timeline. Nichts spielt automatisch auf den Besucher ein; er zieht die Geschichte in seinem eigenen Tempo voran, was passives Zuschauen in Interaktion verwandelt. Hör auf zu scrollen und der Film hält den Frame — allein dieses Verhalten lässt eine Seite konstruiert statt dekoriert wirken.

Pinnen erzeugt Szenen. Wenn sich eine Sektion an den Viewport pinnt, während der Scroll fortschreitet, hört die Seite auf, ein Stapel von Blöcken zu sein, und wird zu einer Abfolge von Szenen. Jede gepinnte Szene bekommt Raum, einen Punkt zu machen — einen Produktwinkel, ein Feature, eine Statistik — bevor sie zur nächsten freigibt. Apples Produktseiten sind im Kern sechs gepinnte Szenen in Folge.

Beats ersetzen Sektionen. Die besten Scroll-Sites lesen sich als nummerierte Erzähl-Beats — jeder Beat verschiebt das Akzentlicht, die Typografie-Skala und den emotionalen Ton. VULKs Generator kodiert das als explizite Disziplin, destilliert aus produzierten immersiven Showcases (Sports Legacy, Luxus-Reise, Parfum, Automotive, Real Estate): langsame, bewusste Bewegung, ein durchgehender Film, niemals getrennte Website-Blöcke.

Die fünf Techniken hinter jeder Apple-Style-Seite

Jede Seite dieses Genres — Apples eigene, die Awwwards-Gewinner, die Luxus-Brand-Filme — ist aus fünf Techniken gebaut. Alle fünf sind promptbar.

1. Die Smooth-Scroll-Grundlage (Lenis + GSAP, ein Loop). Natives Scrollen feuert uneinheitlich über Browser und Eingabegeräte; gescrubbte Animation legt jede Unregelmäßigkeit offen. Das bewährte Setup ist Lenis Smooth Scrolling mit GSAPs Ticker als Antrieb — ein einziger requestAnimationFrame-Loop für die ganze Seite, mit ScrollTrigger synchron zu Lenis. Die häufigste Ursache ruckelnder Scroll-Sites sind zwei konkurrierende Animations-Loops; die Lösung ist architektonisch, kein Tweak. VULK generiert diese Verklebung standardmäßig:

const lenis = new Lenis({ autoRaf: false });
lenis.on('scroll', ScrollTrigger.update);
const raf = (time: number) => lenis.raf(time * 1000);
gsap.ticker.add(raf);        // GSAP's ticker is the ONLY loop
gsap.ticker.lagSmoothing(0);

2. Gepinnte Sektionen. ScrollTrigger mit pin: true hält eine Sektion fixiert, während der Scroll-Fortschritt eine Timeline antreibt — die Kamera steht still, die Szene wechselt. Alles Weitere in dieser Liste passiert innerhalb eines Pins.

3. Scrollgescrubbte Medien. Das Herzstück. Zwei Implementierungen, beide echter Code:

• Video-Scrub — ein <video>-Element, dessen currentTime jeden Frame auf ein geglättetes, vom Scroll-Fortschritt abgeleitetes Ziel gesetzt wird. Richtig gemacht braucht es einen Short-GOP-Encode (Keyframes alle paar Frames), damit Seeking sofort greift, Blob-Loading, damit die Datei voll seekbar ist, und Seek-Koaleszierung, damit Safaris Seek-Queue nie überläuft. VULK liefert diese Engine als bewährtes Muster und kann auf dem Pro-Plan das cinematische Video selbst mit KI-Videomodellen generieren, speziell fürs Scrubbing enkodiert.
• Canvas-Bildsequenz — die klassische Apple-Technik: 60–150 exportierte Frames, als Bilder vorgeladen, auf ein <canvas> gezeichnet, wobei der Scroll-Fortschritt den Frame-Index wählt. Schwerer zu hosten, aber framegenau in jedem Browser und die richtige Wahl, wenn du eine gerenderte Sequenz hast (ein 3D-Turntable, ein explodiertes Produkt) statt einer Videodatei.

4. Text-Choreografie. Headlines, die sich Wort für Wort oder Zeile für Zeile zusammensetzen, wenn ihr Beat kommt — GSAP SplitText, gestaffelte Reveals, maskierte Zeilen. Die Zurückhaltung zählt mehr als der Effekt: ein choreografierter Reveal pro Beat liest sich premium; sechs lesen sich wie ein Slideshow-Übergangspaket.

5. Beat-Regie. Die Ebene, die die meisten auslassen: Jeder Scroll-Beat verschiebt Akzentlicht, Kontrast und Tempo, sodass die Seite wie ein Film gegradet wirkt. Das ist Art Direction als Code — Hintergrundgradienten an den Timeline-Fortschritt gekoppelt, Captions, die an definierten Scroll-Bruchteilen einblenden, ein Schluss-Beat, der auf dem CTA landet.

Wie sieht der Prompt-zu-Scroll-Site-Workflow aus?

1. Briefe den Film, nicht das Layout. Schreib den Prompt wie ein Regie-Treatment: das Sujet, die Stimmungs-Anker ("Netflix-Doku × Luxusmuseum"), die Anzahl der Beats, was jeder Beat zeigt und wo der CTA landet. Spezifische Beats rein, kohärenter Film raus.

2. Generierung. Die KI plant die Erzählstruktur und schreibt dann das Projekt: Lenis-+-GSAP-Grundlage, gepinnte Szenen, die Scrub-Engine, SplitText-Reveals und den Beat-für-Beat-Caption-Fahrplan — als eine React-+-Vite-+-TypeScript-Codebasis.

3. Live-Vorschau. Das Projekt bootet in einer Firecracker-microVM mit Hot Reload. Du scrollst die echte Seite innerhalb von ein, zwei Minuten — über 11.355 generierte Apps hinweg veröffentlicht der mediane Builder sein erstes funktionierendes Projekt 47 Sekunden nach der Anmeldung (VULK-Plattformdaten, Juli 2026).

4. Iteriere per Prompt. "Verlangsame Beat 3 um die Hälfte." "Die Captions sollen auf geraden Beats linksbündig sein." "Mehr Kontrast in der Schlussszene." Jeder Folge-Prompt editiert die betroffene Timeline, nicht die ganze Site.

5. Steig in den Code ein, wann immer du willst. Alles ist Standard-Quellcode — justiere eine Easing-Kurve von Hand, tausche die Videodatei oder übergib das Projekt einem Entwickler. Keine proprietäre Runtime, kein Embed.

6. Deploy. Ein Klick auf Cloudflares Edge, oder exportiere das ZIP / pushe zu GitHub und hoste überall, wo ein statischer Build läuft.

6 vollständige Copy-Paste-Prompts für Apple-Style-Scroll-Websites

Vollständige Prompts, keine Fragmente — füge jeden davon in VULK ein (oder adaptiere ihn anderswo). Jeder spezifiziert die Beats, die Medien, die Bewegungsdisziplin und die Performance-Regeln, denn diese Spezifikation ist der Unterschied zwischen einem inszenierten Film und einer zufälligen Slideshow.

1. Gepinnter cinematischer Hero (Produkt-Launch):

Baue eine One-Page-Launch-Site für einen Premium-Over-Ear-Kopfhörer namens Aurea One. Der Hero ist eine gepinnte cinematische Szene, die etwa 4000px Scroll hält: dunkler Studio-Hintergrund, die Headline "Stille, konstruiert." setzt sich Zeile für Zeile mit einem maskierten Reveal zusammen, dann blenden drei Caption-Beats über der gepinnten Szene ein und aus — "40h Akku", "Adaptives ANC", "Titan-Treiber" — jeder Beat verschiebt den Hintergrundgradienten subtil von Fast-Schwarz zu tiefem Bronze. Nur langsame, bewusste Bewegung; nichts federt. Nachdem der Hero freigibt: eine Spezifikationen-Sektion im Zweispalten-Grid, eine Galerie-Reihe und ein finaler Full-Viewport-CTA-Beat mit einem einzigen Button. Nutze Lenis Smooth Scrolling verklebt mit GSAP ScrollTrigger auf einem einzigen requestAnimationFrame-Loop, animiere nur transform und opacity und respektiere prefers-reduced-motion mit einem statischen Fallback.

2. Canvas-Bildsequenz-Scroll-Scrub (die klassische Apple-Technik):

Baue eine Produktstory-Seite für eine Espressomaschine mit einem Canvas-Bildsequenz-Scrub als Herzstück. Erzeuge eine gepinnte Full-Viewport-Canvas-Sektion über 5000px Scroll: Lade eine Sequenz von 90 Frames vor (frame-0001.webp bis frame-0090.webp aus /sequence/, mit einer Ladefortschritts-Anzeige, bis mindestens die ersten 30 Frames bereit sind), zeichne den aktuellen Frame mit Cover-Fit-Skalierung und devicePixelRatio-bewusster Auflösung auf das Canvas und mappe den Scroll-Fortschritt mit einem kleinen Lerp auf den Frame-Index, damit sich das Scrubbing gedämpft statt stufig anfühlt. Überlagere vier Caption-Beats bei 10 %, 35 %, 60 % und 85 % Fortschritt — kurzer Kicker plus Ein-Zeilen-Claim, ein- und ausblendend. Lade die Frames mit Promise.all im Idle vor, dekodiere dem aktuellen Frame voraus und zeichne nie einen Frame, der nicht fertig dekodiert ist. Unter der Sequenz: eine Material-Sektion und ein Kauf-CTA. Statisches Poster-Bild als Fallback für reduced-motion und langsame Verbindungen.

3. Scrollgescrubbter Video-Hero mit Caption-Beats:

Baue eine cinematische Landing Page für eine Schweizer Uhrenmarke, deren Hero ein gepinntes, scrollgescrubbtes Video ist: Die currentTime des Videos wird über 9000px von der Scroll-Position getrieben, Scrollen seekt den Film also Frame für Frame — er darf niemals autoplayen. Lade das Video als Blob, damit es voll seekbar ist, setze die Zielzeit innerhalb eines einzigen requestAnimationFrame-Loops mit Glättung und koalesziere Seeks, damit langsame Browser nie eine Queue aufbauen. Fünf Caption-Beats blenden in definierten Fortschrittsbereichen über den Film — Eröffnungszeile zentriert, dann abwechselnd linke und rechte Beats mit Eyebrow-Nummer (01–04), Titel und Ein-Zeilen-Sub, abschließend ein zentrierter CTA "Jetzt reservieren". Serifen-Display-Typografie, großzügiges Letter-Spacing, tiefschwarzer Hintergrund. Unter dem Hero: ein dreispaltiges Kollektions-Grid und ein ruhiger Footer.

4. Scrollytelling-Produktstory mit explodierten Beats:

Baue eine scrollgesteuerte Story-Seite für einen modularen Rucksack. Sechs nummerierte Erzähl-Beats, jeder eine gepinnte Szene: 1) HERO — Full-Viewport-Produktfoto, Headline setzt sich Wort für Wort zusammen; 2) MANIFEST — kurzes Statement mit geschichtetem Parallax-Text; 3) DAS SYSTEM — der Rucksack trennt sich visuell in drei Modul-Karten, die auseinandergleiten, während der Scroll fortschreitet, jede mit Callout-Label; 4) MATERIALIEN — Nahaufnahme-Textur-Hintergrund, drei Spezifikations-Captions blenden nacheinander ein; 5) IM EINSATZ — horizontal scrollende Galerie, gepinnt, während der Scroll die x-Translation treibt; 6) SCHLUSS — Kamera-Rückzug-Gefühl via Scale, wieder zusammengesetztes Produkt, CTA. Jeder Beat verschiebt die Akzentfarbe leicht entlang eines warmen Gradienten. GSAP ScrollTrigger mit scrub: true durchgehend — die Scroll-Position des Nutzers treibt alle Animation direkt, kein Scroll-Jacking, kein zeitgesteuertes Autoplay.

5. Immersiver Brand-Film (Parfum-Genre, 3D-Akzent):

Baue eine immersive Brand-Site für ein Nischen-Parfum namens Noir Méridien. Ästhetische Anker: Parfum-Kampagnenfilm × Luxusmuseums-Ausstellung. Dunkel als Standard mit bernsteinfarbenem Akzentlicht. Strukturiere sie als einen durchgehenden Scroll-Film in fünf Beats: HERO mit dem Flakon als interaktivem 3D-Objekt (React Three Fiber — Glasmaterial, weiches Studiolicht, langsame Idle-Rotation, die sich ein paar Grad zum Cursor neigt); NOTEN — drei gepinnte Caption-Beats, in denen jede Note (Bergamotte, Iris, Vetiver) das Akzentlicht der Szene verschiebt; HANDWERK — scrollgescrubbte Makro-Sequenz mit zwei Captions; MAISON — Serifen-Manifest mit maskiertem Zeile-für-Zeile-Reveal; FINALE — der 3D-Flakon kehrt zentriert zurück, Bloom-Postprocessing subtil, ein einziger CTA "Entdecken". Alle Bewegung langsam und bewusst — ein durchgehender Film, keine getrennten Website-Blöcke. Lazy-loade das 3D-Bundle, pausiere Rendering off-screen, cappe die Pixel Ratio bei 2, Reduced-Motion-Fallback überall.

6. Portfolio mit gepinnter horizontaler Arbeitsgalerie:

Baue ein Portfolio für einen Motion Designer. Hero: Name in übergroßer Typografie, enthüllt mit einer gestaffelten SplitText-Animation, Rollenzeile darunter, dunkler Hintergrund mit schwachem animiertem Korn. Dann eine gepinnte horizontale Galerie: Die Sektion pinnt sich, während vertikaler Scroll die horizontale Bewegung durch 6 Projektkarten treibt, jede Karte skaliert leicht zur Mitte hin, mit Titel und Jahr. Klick auf eine Karte öffnet eine Case-Study-Seite mit einem scrollgescrubbten Hero-Video-Platzhalter und einem Text-plus-Media-Layout. About- und Kontakt-Sektionen schließen die Seite mit einem choreografierten Zeile-für-Zeile-Text-Reveal. Lenis-+-GSAP-Single-Loop-Setup, Animation nur über transform/opacity, 60-fps-Ziel auf Mittelklasse-Laptops.

Zwei Iterationsregeln, die für alle sechs gelten: ändere einen Beat pro Folge-Prompt ("verlangsame Beat 3, lass den Rest") und führe Regie mit Stimmungs-Ankern, nicht Adjektiven — "gegradet wie eine Netflix-Doku" steuert Licht und Tempo besser als "mach es cooler".

Wie schneidet das gegen Handarbeit, Webflow und Framer ab — ehrlich?

Handcoden mit GSAP ist die Decke. Studios, die in ScrollTrigger, WebGL und Shader-Land leben, werden jeden Generator im obersten 1 % der Ambition über-craften — das sind die, die Awwwards Site of the Day gewinnen. Die Kosten sind die Kosten: Ein Creative Developer auf diesem Niveau berechnet grob 5.000–15.000 € für einen vergleichbaren One-Pager, und Iterationsrunden sind Tage, nicht Sätze. Wenn du Budget und Zeitplan hast, bleibt es ein großartiger Weg. Der Generierungsweg bringt dich in Minuten zu 90 % des Genres und — entscheidend — produziert dieselbe Art Quellcode, die ein Creative Developer dann weitertreiben kann.

Webflow (ab $14/Monat Hosting, jährlich) hat echte Scroll-Interactions und einen reifen visuellen Editor. Für Effekte auf Elementebene — Fade-ins, Parallax, Sticky-Sektionen — ist es wirklich gut. Bei den Kerntechniken des Genres wird es eng: scrollgescrubbtes Video und Canvas-Bildsequenzen brauchen Custom-Code-Embeds, und lange gepinnte Timeline-Choreografie kämpft gegen das Interactions-Panel. Webflows Code-Export existiert, ist aber nicht zum Hand-Erweitern gedacht. Wähle Webflow, wenn dein Team bereits darin lebt und das Design sektionsbasiert statt filmbasiert ist.

Framer (ab $10/Monat, jährlich) ist der schnellste Weg für Designer, eine saubere Marketing-Seite mit geschmackvollen Scroll-Transforms und Appear-Effekten zu shippen. Für gescrubbte Narrative ist es nicht gebaut: keine native scrollgescrubbte Video-Timeline, keine Canvas-Sequenz, und die Site lebt auf Framers Hosting — es gibt kein praktisches Code-Eigentum. Wähle Framer für Tempo auf Standardseiten; wähle generierten Code, wenn die Seite DER Film ist.

VULK ($3.99 3-Tage-Intro → ab $19.99/Monat, nur bezahlt) generiert das komplette Genre als eigenen Code: Lenis-+-ScrollTrigger-Grundlage und Scroll-Choreografie in jedem Plan, mit der immersiven Premium-Ebene — KI-generiertes cinematisches Video und Echtzeit-3D — auf Pro ($39.99/Monat, 3-Tage-Intro 9,99 € in der EU). Kein Free-Tier, ganz bewusst: Das ist die Premium-Spur des Webdesigns, und die Plattformdaten zeigen, dass Builder mit immersiver Absicht sie auch so behandeln — sie konvertieren zu 20,4 % in zahlende Kunden, sechsmal die Basisrate (VULK-Plattformdaten, Juli 2026). Der ehrliche Trade: kein visuelles Canvas zum Herumziehen; Regie passiert über Sprache und Code.

Wie hält man einen Scroll-Film schnell — und nicht nervig?

Scrollgesteuerte Sites sterben zwei Tode: Jank und Hijack. Die vollständige Disziplin, alles promptbar:

• Ein Animations-Loop. Lenis vom GSAP-Ticker getrieben, ScrollTrigger synchron zu Lenis, autoRaf: false. Zwei kämpfende Loops sind die Jank-Quelle Nr. 1 — mit Asset-Optimierung nicht zu beheben.
• Scrubben, nie jacken. Die Scroll-Position des Nutzers treibt den Animationsfortschritt direkt (scrub: true). Übernimm nie das Steuer, animiere nie die Scroll-Position selbst, sperre den Nutzer nie in eine Sektion, die für ihn scrollt. Scrubbing respektiert den Besucher; Scroll-Jacking verliert ihn.
• Nur transform und opacity. Layout-Eigenschaften (width, top, margin) zu animieren erzwingt Reflow in jedem Frame. Transforms und Opacity bleiben auf dem Compositor.
• Enkodiere Video fürs Seeking. Ein Standard-MP4 hat Keyframes im Sekundenabstand — es zu scrubben stottert. Nutze einen Short-GOP-Encode (ein Keyframe alle paar Frames), lade es als Blob für volle Seekbarkeit und koalesziere Seeks für Safari.
• Budgetiere die Bildsequenz. 90 Frames × 200 KB sind 18 MB — auf Mobile inakzeptabel. Exportiere WebP in Anzeigeauflösung, cappe Sequenzen nahe 100 Frames, lade progressiv vor und erwäge, auf kleinen Screens die halbe Framezahl auszuliefern.
• Pausiere alles off-screen. IntersectionObserver stoppt die Scrub-Engine, das Canvas-Zeichnen und jeden 3D-Render-Loop, wenn ihre Sektion nicht sichtbar ist.
• Respektiere prefers-reduced-motion. Liefere eine statische, voll lesbare Seite mit Poster-Bildern. Das ist eine Accessibility-Anforderung und zugleich dein Fallback für schwache Geräte.
• Lass den Text im DOM. Captions und Headlines bleiben echtes HTML über den Medien — crawlbar, selektierbar, übersetzbar. Backe Copy niemals in Video-Frames.
• Miss auf einem Mittelklasse-Handy. Chrome-DevTools-GPU-Profiling auf einem 200-€-Android sagt die Wahrheit über deine 5000px-Pin-Szene; ein M-Series-Laptop nicht.

Schadet eine Apple-Style-Scroll-Site SEO und Core Web Vitals?

Nicht, wenn sie mit der obigen Disziplin gebaut ist. Das Content-Risiko ist null, wenn Headlines und Captions DOM-Text bleiben — die Seite liest sich für Crawler wie ein normales Dokument mit Medien. Die Performance-Risiken sind spezifisch: LCP verzögert durch ein schweres Hero-Video (Fix: Poster-Bild zuerst, Medien laden dahinter), Main-Thread-Blocking beim Sequenz-Preload (Fix: progressives Idle-Preloading) und CLS durch Pin-Container (Fix: ScrollTriggers Pinning reserviert Platz standardmäßig korrekt). Ein so gebauter Scroll-Film scort wie jede gut gebaute Site mit einem großen deferred Asset. Was Rankings wirklich schadet, ist das, was du ohnehin nicht bauen solltest: Scroll-Jacking, das die Absprungrate genau auf den Seiten aufbläht, die du teuer beeindruckend gemacht hast.

Wie deployt man das?

Eine generierte Scroll-Site ist ein Standard-Vite-Build — statische Assets plus Medien. Auf VULK ist es ein Klick auf Cloudflares Edge mit Live-URL und Custom-Domain-Support in den bezahlten Plänen, oder exportiere das ZIP / pushe zu GitHub und hoste auf jeder statischen Plattform. Zwei genre-spezifische Hinweise: Liefere Video und Frame-Sequenzen mit langen immutable Cache-Headern aus (sie sind deine größten Assets und ändern sich nicht pro Deploy), und halte das Scrub-Video unter ~15 MB, während das Poster-Bild den First Paint macht — der Film soll in dem Moment starten, in dem der Besucher ihn erreicht, nicht nach einem Spinner.