Case · Biottle
Ein Video wird zur atmenden Landingpage.
Biottle ist eine Konzeptstudie für einen Biotop-im-Glas-Anbieter. Ausgangspunkt war ein Rotationsvideo einer Flasche mit einem Mini-Dschungel darin. Daraus entstand eine Landingpage, die sich wie ein Blick in ein eigenes, geschlossenes Ökosystem anfühlt.
Die Flasche
121 Frames für eine Flasche.
Ffmpeg zerlegt das Rotationsvideo der Flasche in 121 Einzelbilder, rembg schneidet das Glas samt transparenten Kanten sauber aus dem Hintergrund. Übrig bleibt eine freigestellte Bildfolge, die im Browser wie eine schwebende Flasche wirkt. Kein einzelnes Produktfoto könnte diesen Effekt liefern.
Glas hat keine harte Kante wie ein Möbelstück oder ein Gerät. Der Rand ist selbst durchsichtig und bricht Licht, in jedem der 121 Frames wieder anders, weil sich die Flasche dabei dreht. Rembg musste am Glasrand deshalb echte transparente Übergänge erzeugen. Eine harte Kontur um die Flasche hätte nicht gereicht. Ohne diese Übergänge wäre in jedem Frame ein sichtbarer heller oder dunkler Saum übrig geblieben, sobald das Bild vor einem neuen Seitenhintergrund liegt.
Die Engine
Scroll steuert Frame, Position, Drehung.
Die Flasche steigt beim Scrollen von unten auf, dreht sich dabei, kommt mittig zur Ruhe und lässt sich dort mit der Maus drehen. Beim Weiterscrollen dreht sie sich wieder aus dem Bild, während am rechten Rand eine Liana ins Bild geschoben wird und einzelne freigestellte Blätter durchs Bild trudeln.
121 Einzelbilder ergeben eine feine Rotation, aber nur, wenn sie vorab geladen sind, bevor jemand zur Flasche scrollt. Bei zu großen Bildern dauert das Laden zu lange, und die Rotation setzt ruckartig ein. Für Biottle bedeutete das, Bildgröße und Kompression der 121 Frames so abzustimmen, dass alle rechtzeitig im Speicher liegen, wenn die Flasche zum ersten Mal ins Bild fährt.
Entscheidung
Kein Framework, nur Lenis für den Scroll.
Das Wechseln der Frames, das Ein- und Ausfahren der Liana und das Timing der fallenden Blätter stecken in eigenem JavaScript. Lenis übernimmt nur den Smooth-Scroll, damit sich das Scrollen weich anfühlt und nicht in Sprüngen. Für eine einzelne Seite mit einer klaren Choreografie ist ein größeres Framework nicht nötig, der Code bleibt so überschaubar, dass sich jeder Effekt einzeln nachvollziehen lässt.
Farbwelt
Weiß, Grün, ein Hauch Orange.
Die Palette bleibt ruhig, während sich die Flasche und die Liana bewegen. Das Ergebnis ist eine Landingpage, die sich wie ein Blick in ein eigenes, lebendiges Ökosystem anfühlt, ruhig und lebendig zugleich.
Einordnung
Wofür sich das eignet.
Freigestellte Frame-Sequenzen mit Scrollsteuerung eignen sich, wenn ein einzelnes Produkt im Zentrum der Seite stehen soll und sich drehen, wachsen oder atmen soll, während der Nutzer scrollt. Für einen Shop mit hunderten Artikeln ist der Aufwand pro Produkt zu groß, 121 Frames pro Artikel freizustellen skaliert nicht. Für eine einzelne Kampagnenseite oder ein Hero-Produkt ist die Technik dagegen ein Weg, ein Video wie ein interaktives Objekt wirken zu lassen.
Einordnung
Was das ist und was nicht.
Biottle hat keinen echten Auftraggeber. Es ist eine Konzeptstudie für einen Biotop-im-Glas-Anbieter, den es nicht gibt, gebaut um zu zeigen, wie sich ein einzelnes Rotationsvideo in eine vollständige, scrollgesteuerte Seite verwandeln lässt. Ergebnis- oder Traffic-Zahlen gibt es entsprechend nicht. Die Demo lässt sich aber live anschauen und selbst drehen.