Projekte / Website
Eine Website, die beim Scrollen erzählt.
Der gemeinsame Auftritt der KI-Kits: ein filmischer Ablauf, den das Scrollen steuert, mit KI-generierten Szenen und einer eigenen Fassung für das Handy.
- Leistung
- Konzept, Gestaltung, Umsetzung, KI-Film
- Art
- Website
- Technik
- Next.js, GSAP, KI-Videoproduktion
01 · Ausgangslage
Sechs Produkte, ein Auftritt
Sechs Kits für sechs Branchen brauchten ein gemeinsames Dach: eine Seite, die die Familie vorstellt und Besucher in wenigen Sekunden zum passenden Kit führt.
Eine Produktliste hätte das erledigt. Sie hätte aber nicht gezeigt, wofür die Kits stehen, und sich nicht von den vielen KI-Angeboten abgehoben.
02 · Aufgabe
Was die Seite leisten musste
- Einen Auftritt mit Wiedererkennung und Bewegung schaffen, der in Erinnerung bleibt.
- Auf dem Handy genauso wirken wie am Schreibtisch, ohne lange Ladezeiten.
- Die Einstellung "Bewegung reduzieren" respektieren.
- Datenschutz von Anfang an: Schriften selbst gehostet, keine Cookies, strenge Sicherheitsregeln.
03 · Lösung
Ein Film, den das Scrollen steuert
Der Einstieg ist eine Bildfolge aus 120 Einzelbildern, die beim Scrollen abgespielt wird, mit einer eigenen Hochformat-Fassung für das Handy. Danach tragen KI-generierte Filmszenen drei Kernaussagen und die sechs Kits; Überschriften bauen sich im Takt des Scrollens auf.
Die Filme laufen nur, solange sie zu sehen sind. Wer in den Systemeinstellungen weniger Bewegung wünscht, sieht ruhige Standbilder, und auch ohne JavaScript bleibt die Seite vollständig lesbar.
Filmszenen KI-generiert (Seedance 2.0)
04 · Technik
Bewegung, die auf jedem Gerät trägt
- Grundlage
- Next.js 16 mit App Router, React 19, TypeScript, Tailwind CSS 4
- Bewegung
- GSAP mit ScrollTrigger; Lenis für weiches Scrollen, an den Takt von GSAP gekoppelt
- Bildfolge
- Canvas mit 120 WebP-Bildern je Fassung, 1600 × 900 für den Schreibtisch und 720 × 1280 für das Handy; erst jedes achte Bild, dann der Rest, Standbild als Rückfall
- KI-Film
- Szenen mit Seedance 2.0, Einzelbilder mit ffmpeg extrahiert und mit sharp als WebP gespeichert
- Barrierefreiheit
- bei "Bewegung reduzieren" Standbilder statt Film und kein Weich-Scrollen; Rückfall ohne JavaScript
- Datenschutz
- Schriften selbst gehostet, cookielose Reichweitenmessung, KI-Kennzeichnung nach Art. 50 KI-Verordnung
- Sicherheit
- Content-Security-Policy, Sicherheits-Header, dauerhafte Weiterleitung auf eine Adresse
- Auffindbarkeit
- strukturierte Daten, robots.txt mit ausdrücklich erlaubten KI-Crawlern, llms.txt
05 · Worauf es ankam
Der schwächste Moment entscheidet
Ein Film auf einer Website ist nur so gut wie sein schwächster Moment auf dem Handy. Deshalb hat jede Szene eine Fassung für das Hochformat und einen ruhigen Rückfall.