Case · LULL
Ein Produktlaunch für ein Produkt, das es nicht gibt.
LULL ist eine Konzeptstudie: ein erfundener Titan-Schlafring, an dem sich zeigen lässt, wie weit eine Produktseite trägt, wenn Konzept, Bildwelt und Code aus einer Hand kommen. Die Seite führt in einer Scroll-Minute von tiefer Nacht zu warmem Morgenlicht.
Die Idee
Ein Produkt erfinden, um die Seite zu beweisen.
Ausgangsfrage war, wie professionell eine Produktseite wirkt, wenn kein reales Produkt dahintersteht. Die Antwort: eines erfinden. LULL wurde als Titan-Ring angelegt, der die Nachtphasen liest und in der leichtesten Schlafphase weckt. Marke, Bildwelt und Text entstanden zusammen, mit dunklem Indigo, einem teal-farbenen Akzent und einem warmen Sonnenaufgang als Zielbild. Die Dramaturgie folgt einer einzigen Linie, von tiefer Nacht bis zum warmen Morgenlicht, und jede Entscheidung bei Farbe, Text und Effekt ordnet sich dieser Linie unter.
Bildwelt
Ein Master-Render als Referenz für alles.
Alle Produktbilder stammen aus Leonardo. Ein einzelner Render wurde als Referenz festgelegt, jeder weitere Shot baut auf ihm auf, damit der Ring auf jedem Bild identisch aussieht. Seedance verwandelt das Standbild anschließend in eine langsame Rotation, die als Video weiterverarbeitet wird.
Technik
Der Ring folgt dem Scroll.
Das Ring-Video läuft nicht als Clip ab. Einzelbilder liegen bereit, und die Scroll-Position bestimmt, welches Bild sichtbar ist. Wer schnell scrollt, sieht den Ring schnell rotieren. Wer stehen bleibt, sieht ein stehendes Bild. Das Tempo kommt vom Nutzer.
Damit das im Browser flüssig wirkt, müssen die Frames vorab geladen sein. Bei zu großen Bildern oder zu vielen Frames ruckelt die Rotation, sobald jemand schnell scrollt. Für LULL bedeutete das, Bildgrößen und Frame-Anzahl so zu wählen, dass das Vorladen schnell genug durch ist, bevor der Ring überhaupt ins Bild kommt.
Choreografie
Vier weitere Effekte, eine Timeline.
Neben dem Ring-Scrubbing hängen vier weitere Effekte an derselben Scroll-Position. Die Headline zerfällt beim Scrollen in einzelne Buchstaben, ein Panel steigt von unten ins Bild, ein 3D-Text-Drum rotiert durch das Manifest, und die Farbwelt wandert währenddessen von dunklem Indigo über Teal zu warmem Sonnenaufgangslicht. Jeder Effekt hängt an derselben Zahl: der aktuellen Scroll-Position in Pixeln.
Entscheidung
Kein Framework, bewusst.
LULL ist reines HTML, CSS und JavaScript, ohne React, ohne Build-Pipeline. Bei einer Seite, die von einer einzigen Scroll-Position gesteuert wird, will ich genau wissen, wann welcher Effekt greift, ohne durch die Abstraktionsschichten eines Frameworks zu suchen. Für eine Landingpage mit fünf eng getakteten Effekten ist das der direktere Weg.
Einordnung
Wofür sich das eignet.
Scroll-gebundenes Frame-Scrubbing lohnt sich, wenn ein Produkt oder eine Bewegung im Zentrum der Seite steht und der Nutzer sie in seinem eigenen Tempo entdecken soll. Für eine Unternehmensseite mit vielen Unterseiten ist der Aufwand zu groß, die Technik ist auf eine einzelne, choreografierte Erzählung zugeschnitten. Für Produktlaunches, Kampagnenseiten oder ein einzelnes starkes Bildmotiv passt sie dagegen genau.
Einordnung
Was das ist und was nicht.
LULL hat keinen echten Auftraggeber und keinen realen Ring dahinter. Es ist eine Konzeptstudie, mit der ich zeigen wollte, wie weit Bildwelt, Text und Code tragen, wenn sie aus einer Hand kommen und kein Kunde dazwischen abstimmt. Genau deshalb sind Effekte und Technik hier deutlicher sichtbar, als es ein reales Kundenprojekt normalerweise zulässt.