Animierte Website aus Video

Verwandle jedes MP4-Video in eine beeindruckende, scroll-gesteuerte animierte Website mit Parallax-Effekten, Glasmorphismus-Karten und Kino-Qualität. Ein Befehl, eine HTML-Datei, keine Abhängigkeiten.

Voraussetzungen

• FFmpeg installiert und im PATH verfügbar
• Python 3 (für lokalen Vorschau-Server)
• Eine vom Nutzer bereitgestellte MP4-Videodatei

Ablauf

Schritt 1: Video analysieren

Führe ffprobe auf der bereitgestellten MP4-Datei aus, um Folgendes zu extrahieren:

• Gesamtdauer (Sekunden)
• Bildrate (fps)
• Auflösung (Breite x Höhe)
• Gesamte Frame-Anzahl

Teile diese Werte dem Nutzer mit, bevor Du fortfährst.

Schritt 2: Frames extrahieren

Extrahiere Frames aus dem Video mit 2 fps (oder passe dies je nach Dauer an, um insgesamt unter 120 Frames zu bleiben).

# Desktop-Frames (1920x1080 WebP, Qualität 80)
ffmpeg -i INPUT.mp4 -vf "fps=2,scale=1920:1080" -c:v libwebp -quality 80 frames/desktop_%04d.webp

# Mobile-Frames (960x540 WebP, Qualität 70)
ffmpeg -i INPUT.mp4 -vf "fps=2,scale=960:540" -c:v libwebp -quality 70 frames/mobile_%04d.webp

Speichere die Frames in einem temporären frames/-Verzeichnis neben der Ausgabedatei.

Schritt 3: Abschnittsinhalte generieren

Analysiere den Videokontext (Dateiname, Nutzerbeschreibung oder ein bereitgestelltes Briefing) und generiere Inhalte für 6 Scroll-Abschnitte:

Abschnitt	Zweck	Benötigter Inhalt
Hero	Vollbild-Eröffnung	Headline, Subheadline, CTA-Button-Text
Features	Kernfähigkeiten	3-4 Feature-Karten mit Icon, Titel, Beschreibung
Stats	Social Proof / Zahlen	3-4 animierte Statistik-Zähler mit Beschriftungen
How It Works	Prozessübersicht	3-5 nummerierte Schritte mit kurzen Beschreibungen
Gallery	Visuelle Präsentation	Parallax-Bildraster mit Bildunterschriften
CTA	Finale Conversion	Headline, Fliesstext, Button-Text, Button-URL

Präsentiere den Entwurfsinhalt dem Nutzer zur Freigabe, bevor Du mit dem Bau beginnst.

Schritt 4: HTML-Datei erstellen

Generiere eine einzelne, in sich geschlossene HTML-Datei, in der alle Assets base64-kodiert eingebettet sind:

Scroll-Animations-Engine:

• Canvas-Element zeichnet Frames synchron zur Scroll-Position
• requestAnimationFrame-Loop für flüssige Wiedergabe
• Frame-Preloading mit Fortschrittsanzeige
• Responsive Breakpoint tauscht Desktop-/Mobile-Frame-Sets

Visuelle Effekte:

• Ambiente, schwebende Partikel (subtil, langsam bewegend, geringe Deckkraft)
• Filmkorn-Overlay (CSS-Rauschanimation)
• Glasmorphismus-Karten (backdrop-filter: blur(16px), halbtransparenter Hintergrund)
• Buchstaben-Split-Textanimationen (jedes Zeichen erscheint beim Scrollen versetzt)
• Parallax-Galerie (Ebenen bewegen sich mit unterschiedlicher Scroll-Geschwindigkeit)
• Navigationspunkte fest am rechten Rand (aktiver Abschnitt wird hervorgehoben)

Design-Tokens:

• Hintergrund: #0a0a0b
• Primärtext: #ffffff
• Sekundärtext: rgba(255,255,255,0.6)
• Akzent: vom Nutzer gewählt oder standardmässig #D97757
• Karten-Hintergrund: rgba(255,255,255,0.05)
• Karten-Rand: rgba(255,255,255,0.1)
• Schrift: Inter (von Google Fonts geladen) oder System-Sans-Serif als Fallback
• Rahmenradius: 16px bei Karten, 999px bei Buttons

Struktur:

- Fortschrittsbalken (oben, fixiert)
- Navigationspunkte (rechts, fixiert)
- Abschnitt 1: Hero (voller Viewport, Canvas-Hintergrund)
- Abschnitt 2: Features (Glaskarten-Raster)
- Abschnitt 3: Stats (animierte Zähler)
- Abschnitt 4: How It Works (nummerierte Schritte)
- Abschnitt 5: Gallery (Parallax-Raster)
- Abschnitt 6: CTA (zentriert, gross)
- Footer (minimal)

Speichere die Ausgabe als animated-site-[thema].html im aktuellen Arbeitsverzeichnis.

Schritt 5: Vorschau starten

Starte einen lokalen Python-Server und öffne die Seite im Standardbrowser:

python3 -m http.server 8888 &
open http://localhost:8888/animated-site-[thema].html

Anpassungsoptionen

Biete nach dem ersten Bau folgende Anpassungen an:

Option	Was sich ändert
Scroll-Geschwindigkeit	Frames pro Scroll-Pixel (Standard: 0.5)
Akzentfarbe	Primäre Hervorhebungsfarbe (Standard: #D97757)
Abschnittstext	Beliebige Headline, Beschreibung oder CTA-Texte
Logo	Logo-Bild im Hero und in der Navigation hinzufügen
Schrift	Inter durch eine andere Google-Schrift ersetzen
Frame-Dichte	Mehr oder weniger extrahierte Frames (beeinflusst Dateigrösse)
Abschnitte	Die 6 Abschnitte hinzufügen, entfernen oder neu anordnen

Regeln

• ALLE Assets müssen inline eingebettet sein (base64-Daten-URIs). Die finale HTML-Datei muss offline funktionieren, ohne externe Abfragen (ausser optional Google Fonts).
• Halte die Gesamtdateigrösse unter 50 MB. Wenn die Frames diese überschreiten, reduziere Frame-Anzahl oder Qualität.
• Jeder Abschnitt muss mindestens 100vh hoch sein, damit die Scroll-Animationen Raum zum Atmen haben.
• Teste, dass die Navigationspunkte den aktiven Abschnitt korrekt hervorheben.
• Mobile responsive: Karten vertikal stapeln, Mobile-Frame-Set unter 768px verwenden.
• Wenn FFmpeg nicht installiert ist, teile dem Nutzer mit, wie er es installieren kann, und stoppe.
• Erfinde niemals Videoinhalte. Wenn Du nicht bestimmen kannst, worum es im Video geht, bitte den Nutzer um eine Beschreibung.

---

Zuletzt aktualisiert: 01.08.2026 · Version 1.0.0 · skills.fragroger.ai

Lizenz: CC BY-NC-ND 4.0 (Namensnennung – nicht kommerziell – keine Bearbeitungen). Nutzung nur für den Eigengebrauch. https://creativecommons.org/licenses/by-nc-nd/4.0/deed.de