Scroll-Animationen wie Apple. Ohne Agentur.

Premium product hero shot of a sleek wireless gaming controller with matte black body and frosted translucent top shell, floating centered in mid-air, deep navy blue studio gradient background, dramatic soft studio lighting with subtle rim light, photorealistic high-end 3D render, Apple keynote aesthetic, ultra sharp detail, no text, no logos

Transform this exact gaming controller into a dramatic vertical exploded assembly view, keeping the identical camera angle, identical deep navy background and identical lighting: the frosted translucent top shell lifts high above, thumbsticks, buttons and d-pad float separately between, the green circuit board hovers in the middle, the matte black bottom shell drops below, and a dozen tiny silver screws hover individually around the parts with clean even spacing. Photorealistic 3D render, every component crisply separated in mid-air, nothing touching.

Premium product hero shot of a cylindrical portable bluetooth speaker wrapped in vibrant red woven fabric mesh, floating slightly tilted in mid-air, deep blue studio gradient background, dramatic soft studio lighting, photorealistic high-end 3D render, ultra sharp detail, no text, no logos

Transform this exact red speaker into a dramatic exploded teardown view, keeping the identical camera angle, identical deep blue background and identical lighting: the red woven mesh grille splits into two curved shells floating apart sideways, two black speaker driver cones face outward in the exposed center column, a green circuit board and a silver battery cylinder hover beside the inner frame, both end caps float above and below, tiny screws hover individually. Photorealistic 3D render, every part crisply separated in mid-air.

Extreme macro product shot of one single fully assembled mechanical keyboard key floating alone in the center: a vibrant red sculpted keycap mounted on its switch with a translucent housing top and a black bottom housing with thin metal pins, dark graphite grey gradient studio background, dramatic soft studio light, photorealistic high-end 3D render, ultra sharp detail

Transform this exact key into a fully exploded mechanical key switch floating alone in the center against the same graphite grey gradient background: the vibrant red keycap on top, below it the translucent switch housing top, a red cross-shaped stem, a golden coil spring, and the black switch bottom housing with thin metal pins, all parts vertically separated in mid-air with clean even gaps. Same camera, same lighting, photorealistic high-end 3D render.

High-end product disassembly animation: the assembled controller floats and slowly rotates a few degrees as its parts begin to detach with precision, the frosted translucent top shell lifts away upward, buttons, d-pad and thumbsticks float out one by one, the green circuit board separates in the middle, tiny screws drift outward, ending in a clean exploded view with every part floating perfectly separated. Smooth premium Apple-keynote style motion, camera locked static, background stays identical, no morphing, crisp and satisfying.

High-end product disassembly animation: the red speaker floats and slowly rotates slightly as it takes itself apart with precision, the red mesh grille peels apart into two curved shells drifting sideways, the two black driver cones emerge from the center, the circuit board and silver battery slide out, both end caps lift away, tiny screws drift outward, ending in a clean exploded view. Smooth premium motion, camera locked static, background stays identical, no morphing.

Macro product animation: the single finished red mechanical key floats in the center and slowly rotates as it elegantly disassembles itself vertically: the vibrant red keycap lifts straight up, the translucent housing top separates below it, the red cross-shaped stem and the golden coil spring emerge and float apart, the black bottom housing with metal pins sinks slightly, ending with all parts floating vertically separated with clean even gaps. Smooth satisfying premium motion, camera locked static, same graphite grey background, no morphing, crisp.

Ich habe ein Produktvideo unter [PFAD/ZUM/VIDEO.mp4] und will es für eine Scroll-Animation auf einer Website nutzen (Canvas-Frame-Sequenz, wie auf Apple-Produktseiten).

Zerlege das Video bitte in einzelne Bilder:

1. Extrahiere die Frames mit ffmpeg: 30 Bilder pro Sekunde, auf 1080 Pixel Breite skaliert, als WebP mit Qualität 80, damit die Sequenz klein genug fürs Web bleibt.
2. Speichere sie in einen Ordner "frames" mit durchnummerierten Dateinamen im Format frame_0001.webp, frame_0002.webp und so weiter.
3. Verifiziere danach selbst: Zähle die Dateien, prüfe dass erste und letzte Datei existieren, dass die Nummerierung lückenlos ist und dass die Gesamtgröße unter etwa 20 MB liegt. Falls sie größer ist, reduziere die Qualität oder die Framerate leicht und wiederhole.
4. Sag mir am Ende die exakte Anzahl der Frames (die brauchen wir gleich als FRAME_COUNT für die Website) und zeig mir 3 Beispiel-Frames aus Anfang, Mitte und Ende, damit ich die Qualität sehen kann.

Wichtig: Nichts am Video selbst verändern, kein Hintergrund entfernen, die Frames 1:1 aus dem Video übernehmen.

Du bist mein Design-Engineer. Baue mir eine hochwertige Produkt-Website mit einer scroll-gesteuerten Video-Animation als Herzstück, so wie auf den Apple-Produktseiten: Beim Scrollen läuft eine Frame-Sequenz ab, als würde man das Video mit dem Scrollrad steuern.

VORHANDEN:
- Ein Ordner "frames" mit [ANZAHL] durchnummerierten Bildern (frame_0001.webp bis frame_[LETZTE].webp), extrahiert aus einem Produktvideo mit [KURZE BESCHREIBUNG: z. B. "eine Tastatur-Taste baut sich auseinander"].

BEVOR DU BAUST, geh diese Punkte einzeln mit mir durch und warte auf meine Antworten:
1. Produktname und Marke, die auf der Seite stehen sollen
2. Akzentfarbe (eine einzige, z. B. ein warmes Orange)
3. Wie viele Text-Sektionen die Seite haben soll und was die Kernbotschaften sind (oder ob du Texte vorschlagen sollst)
4. Ob das Produkt links oder rechts stehen soll (Text auf der anderen Seite)
5. Stimmung des Hintergrunds (z. B. dunkel und tief, hell und cremig)

DANN BAUE EINE EINZIGE index.html MIT DIESEN PFLICHT-EIGENSCHAFTEN:

Scroll-Technik:
- Eine sticky Fullscreen-Bühne, die Scroll-Strecke der Seite ist etwa 550vh bis 700vh lang
- Die Frames werden auf ein Canvas gezeichnet. Der Frame-Index hängt NIEMALS direkt an der Scroll-Position, sondern läuft über eine requestAnimationFrame-Schleife mit Lerp weich hinterher (pro Tick etwa 8 bis 10 Prozent der Distanz zum Ziel). Das ist der Unterschied zwischen ruckelig und butterweich.
- Zusätzlich Sub-Frame-Blending: Bei Positionen zwischen zwei Frames beide Nachbar-Frames mit anteiligem Alpha übereinander zeichnen, damit auch langsames Scrollen stufenlos aussieht.
- Alle Frames werden vorab geladen, mit einem minimalistischen Ladebalken. Erst wenn alles geladen ist, blendet der Loader aus. Der allererste Frame muss sofort sichtbar sein, die Seite darf beim Start niemals leer wirken.

Layout:
- Das Produkt-Canvas sitzt auf EINER Seite (links oder rechts nach meiner Antwort), nimmt etwa 55 bis 60 Prozent der Breite ein und darf bewusst über den Bildschirmrand hinausragen (angeschnitten wirkt hochwertiger als mittig und riesig). NICHT fullscreen, nicht zentriert, nicht zu groß.
- Der Video-Hintergrund wird per weicher radialer CSS-Maske in die Seite eingeblendet, sodass keine sichtbare Kante zwischen Frame und Seiten-Hintergrund entsteht. Der Seiten-Hintergrund übernimmt den Farbton des Video-Hintergrunds.
- Text-Sektionen auf der gegenüberliegenden Seite: kleiner Kicker in der Akzentfarbe, große fette Headline, kurzer Absatz in gedimmtem Grau. Sie faden weich ein und aus, gesteuert vom gelerpten Scroll-Wert.
- Dezentes UI-Chrome wie bei großen Produktseiten: Logo oben links, schlanke Navigation, eine Pagination (001/00X) die mit den Sektionen mitzählt, unten ein Scroll-Hinweis, der am Ende der Strecke ausblendet.

Tiefe und Atmosphäre:
- Hintergrund als dunkler (oder je nach Antwort heller) Verlauf mit echter Tiefe: zwei bis drei große, weiche Licht-Glows in der Akzentfarbe (sehr subtil, Deckkraft unter 20 Prozent), die beim Scrollen minimal parallaxen, dazu ein feines Noise-Overlay gegen Banding und eine leichte Vignette.

Inhaltliche Kopplung (sehr wichtig):
- Schau dir zuerst einzelne Frames aus Anfang, Mitte und Ende der Sequenz an und bestimme, an welchen Scroll-Prozentwerten der Inhalt wechselt (z. B. wann aus der Nahaufnahme das ganze Produkt wird).
- Lege die Text-Sektionen exakt auf diese Phasen: Der Text spricht IMMER über genau das, was gerade im Bild zu sehen ist. Niemals Board-Text bei Nahaufnahme oder umgekehrt.

Anti-AI-Slop-Regeln:
- Keine Emojis, keine lila Verläufe, keine Karten-Grids, keine drei Spalten mit Icons, keine Standard-Schatten auf allem
- Eine einzige Akzentfarbe, viel Negativraum, klare Typo-Hierarchie mit maximal zwei Schriftschnitten
- Kurze, konkrete Produkttexte statt Marketing-Floskeln, kein Lorem Ipsum

Verifikation (bevor du mir die Seite gibst):
- Starte einen lokalen Server und prüfe die Seite selbst mit Screenshots an mindestens 6 Scroll-Positionen von 0 bis 100 Prozent
- Prüfe konkret: Ist bei 0 Prozent sofort Produkt UND Text sichtbar? Überlappt kein UI-Element den Text? Passt jeder Sektionstext zu dem, was im Bild zu sehen ist? Läuft der Frame-Index nach einem Scroll-Sprung weich nach (Lerp aktiv)? Null Fehler in der Browser-Konsole?
- Fixe alles, was du findest, und wiederhole die Prüfung, bis alle Punkte bestehen. Zeig mir erst dann das Ergebnis, zusammen mit den Screenshots.

Danach gehen wir gemeinsam in die Feinabstimmung (Glow-Stärke, Texte, Tempo), also frag mich nach meinem Feedback.