Gegenwartsfenster
Gegenwartsfenster verbindet die ruhige Atmosphäre klassischer Lofi Streams mit Echtzeitdaten aus der realen Welt. Die interaktive Webanwendung passt Wetter, Lichtstimmung und Tageszeit dynamisch an und schafft dadurch eine digitale Szene, die sich kontinuierlich an die Gegenwart anpasst.
Ich denke, jeder von uns hat irgendwann schon einmal einen Lofi Girl Stream gesehen oder zumindest auf YouTube vorgeschlagen bekommen. Ich war früher ein aktiver Zuschauer und habe die Hochphase dieses Formats vor einigen Jahren mitverfolgt. Im Jahr 2026 stellte ich mir die Frage: Existiert dieses Format eigentlich immer noch?
Ich suchte auf YouTube danach und stellte fest, dass dieses Format nach wie vor eine grosse und aktive Zuschauerschaft hat. Als ich den Stream öffnete, fiel mir auf, dass das Liveformat sehr interaktiv ist, auch wenn es auf den ersten Blick nicht so erscheint. Die Animation auf dem Bildschirm passt sich je nach Tageszeit den Lichtverhältnissen an.
Dieses kleine Detail empfand ich als äusserst wichtig, da es die Szenerie deutlich persönlicher wirken lässt.
Dies brachte mich auf die Idee: Warum versuche ich nicht selbst, etwas in dieser Art umzusetzen?
Ich nahm mir vor, eine ähnliche Szenerie zu gestalten, die zusätzlich noch mehr Einflüsse aus dem Alltag aufnimmt.
Schritt 1: Die Zeichnung
In einem ersten Schritt recherchierte ich, ob bereits ähnliche Projekte existieren. Dabei stellte ich fest, dass es keine direkt vergleichbaren interaktiven Webprojekte dieser Art gab. Somit musste ich mich selbst an die Umsetzung machen.
Ich suchte nach Inspirationsbildern, auf deren Grundlage ich meine eigene Szene illustrieren wollte. Dabei war es mir wichtig, das Lofi Girl nicht direkt als Bildkonzept zu übernehmen.
Für die Illustration entschied ich mich für das Programm Pixquare. Die Software ist primär für Pixel Art und Animation ausgelegt. Für diese Art von Illustration spielte das jedoch keine grosse Rolle, da der Stil bewusst plakativ und nicht übermässig detailreich sein sollte.
Ein grosser Vorteil von Pixquare war die Möglichkeit, Flächen mit einem Klick umzufärben und Linien effizienter zu zeichnen als beispielsweise in Procreate.
In der Zeichnung wollte ich hauptsächlich mich selbst und meine Katze in den Mittelpunkt stellen, da ich das Projekt künftig auch in mein Portfolio integrieren möchte. Die übrigen Elemente entstanden spontan während des Illustrationsprozesses.
Schritt 2: Die Animation
Ich bin zugegebenermassen nicht besonders geübt im Animieren handgezeichneter Szenen.
Zunächst wollte ich die gesamte Szene direkt in Pixquare animieren. Allerdings stellte ich fest, dass die Komposition aufgrund ihrer Komplexität die verfügbaren Ressourcen der Anwendung überstieg. Anschliessend versuchte ich die Animation in Procreate umzusetzen. Da ich die einzelnen Szenenelemente dort jedoch nicht effizient als Layer bearbeiten konnte, erwies sich auch dies als ungeeignet.
Deshalb entschied ich mich, die Szene in Procreate in mehrere Layer aufzuteilen:
- Vordergrund: Schreibtisch mit Materialien
- Mensch: Kopf, Torso, linker Arm, rechter Arm
- Mittelgrund: Rest des Raums
- Hintergrund: Himmel, Sonne usw. (alles ausserhalb des Fensters)
Der nächste Schritt bestand darin, sämtliche Assets in Photoshop weiterzubearbeiten.
In Photoshop lassen sich mithilfe des Timeline-Fensters Animationen erstellen. Die freigestellten Arme animierte ich mit der Funktion Puppet Warp Frame für Frame. Dasselbe Verfahren verwendete ich anschliessend für alle weiteren animierten Objekte innerhalb der Komposition.
Beim Hintergrund kam ich zur Erkenntnis, dass sich dieser deutlich effizienter in After Effects umsetzen liess, anstatt Wettereffekte wie Regen oder Schnee Frame für Frame zu zeichnen.
Erst zu diesem Zeitpunkt stellte sich die Frage, wie viele Szenen aufgrund von Tageszeit und Wetter überhaupt benötigt würden.
Für dieses Proof of Concept entschied ich mich für eine sinnvolle, aber nicht übermässig grosse Auswahl:
Tageszeiten
- Morgen
- Mittag
- Abend
- Nacht
(Für Sonnenaufgang und Sonnenuntergang wird dieselbe Szene verwendet.)
Wetter
- Sonnig
- Bewölkt
- Regen
- Schnee
Dies ergibt insgesamt 3 × 4 = 12 mögliche Szenenkombinationen.
Die Elemente des Hintergrunds wurden von Hand gezeichnet. Regen und Schnee entstanden mithilfe der Simulationseffekte CC Rainfall und CC Snowfall. Anschliessend fehlte lediglich noch ein Solid-Overlay mit den Lichtteilen ausgespart um die jeweilige Tageszeit glaubwürdig zu vermitteln.
(Durch die Komprimierung ist der Unterschied teilweise nicht gut erkennbar)
Schritt 3: Die Website
Da die Website visuell nicht besonders komplex sein sollte, setzte ich sie mithilfe von Vibecoding um.
Um die Darstellung interessanter zu gestalten, entschied ich mich zusätzlich dazu, weitere Zeitzonen unterhalb der Hauptanimation einzublenden. Dadurch entsteht ein stärkerer Kontrast zwischen verschiedenen Orten und Tageszeiten.
Zusätzlich integrierte ich eine kleine Funktion, welche lokal speichert, wie oft bestimmte Wetterzustände an den jeweiligen Orten aufgetreten sind.
Die Website ruft die Wetterdaten nur einmal pro Stunde ab, um die Anzahl der API-Anfragen möglichst gering zu halten.
Die Website arbeitet mit der folgenden API:
Während der Umsetzung traten einige Herausforderungen auf:
Digitale Uhr
Ursprünglich wollte ich die digitale Uhr auf dem Tresen direkt über das Frontend auf die Komposition legen. Dabei stellte sich jedoch heraus, dass die Position der Uhrzeit je nach Bildschirmgrösse unterschiedlich dargestellt wurde. Eine zuverlässige Zentrierung des divs innerhalb des Uhrbereichs war deshalb kaum möglich.
Daher entschied ich mich, sämtliche Zahlen von 0 bis 9 von Hand zu zeichnen und als transparente Bilder zu exportieren. Die Dateinamen wurden nach folgendem Schema aufgebaut:
Position-Zahl
Beispiel: 1-0 steht für die erste Position und die darzustellende Zahl 0.
Wetter-API
Die Wetter-API unterscheidet deutlich mehr Wetterzustände als die vier Zustände, die ich für dieses Projekt vorgesehen hatte. Deshalb musste definiert werden, wie die API Wetterzustände auf die vorhandenen Kategorien Sonnig, Bewölkt, Regen und Schnee abgebildet werden sollen.
Ladeverhalten der Website
Ursprünglich sollten alle Videos direkt geladen und automatisch abgespielt werden. Dies führte jedoch zu einer spürbaren Verschlechterung der Performance.
Deshalb entschied ich mich, die Animationen der verschiedenen Zeitzonen erst beim Darüberfahren mit der Maus abzuspielen. Dadurch konnte die Performance deutlich verbessert werden.
Endprodukt
Zu Beginn des Projekts war mir der tatsächliche Umfang der Arbeit nicht vollständig bewusst. Umso zufriedener bin ich mit dem Endergebnis, insbesondere weil die Anwendung genau so funktioniert, wie ich sie mir ursprünglich vorgestellt hatte.
Ihr könnt das Endergebnis hier anschauen: http://www.aasicht.ch/gegenwartsfenster
(mmi)
Rückblickend bin ich mit dem Endergebnis sehr zufrieden, insbesondere weil die Anwendung die ursprünglich gesetzten Ziele erfüllt. Die Kombination aus einer atmosphärischen Lofi-Szene und Echtzeitdaten funktioniert technisch zuverlässig und erzeugt den gewünschten Bezug zur realen Welt.
Trotzdem gibt es einige Aspekte, die bei zukünftigen Projekten dieser Art verbessert werden könnten:
- Aktuell durchläuft die Produktion insgesamt vier verschiedene Programme (Pixquare, Procreate, Photoshop und After Effects). Bei einem Folgeprojekt würde ich versuchen, die Anzahl der verwendeten Programme zu reduzieren. Dadurch könnten Arbeitsabläufe vereinfacht, Änderungsprozesse beschleunigt und die Reproduzierbarkeit des Projekts verbessert werden.
- Momentan werden sämtliche Zustände über Videodateien (.mp4) umgesetzt. Obwohl dies für das Proof of Concept gut funktioniert, beeinflusst es die Performance der Website. Für zukünftige Versionen würde ich prüfen, ob sich bestimmte Elemente direkt im Frontend animieren lassen oder ob effizientere Formate wie .webm eingesetzt werden könnten.
- Bereits während der Konzept- und Skizzierungsphase sollte der spätere Animationsprozess stärker berücksichtigt werden. Viele Objekte waren nicht von Anfang an sauber auf separaten Layern organisiert, wodurch während der Produktion zusätzlicher Aufwand entstand. Insbesondere bei komplexeren Illustrationen zeigte sich, wie wichtig eine durchdachte Layerstruktur für effiziente Arbeitsabläufe ist. Eine saubere Organisation spart nicht nur Zeit, sondern reduziert auch Fehlerquellen während der Animation erheblich.
Welche Key-Learnings nehme ich für die Zukunft mit?
- Technische Anforderungen sollten bereits während der Konzept- und Illustrationsphase berücksichtigt werden. Entscheidungen zu Bildaufbau, Layerstruktur und Assets haben einen direkten Einfluss auf den späteren Animations- und Entwicklungsaufwand.
- Eine saubere Organisation von Layern, Dateien und Assets spart während der Produktion erheblich Zeit. Gerade bei komplexeren Projekten reduziert eine klare Struktur Fehlerquellen und erleichtert spätere Anpassungen.
- Der tatsächliche Projektaufwand wird insbesondere bei interdisziplinären Projekten häufig unterschätzt. Die Kombination aus Illustration, Animation und Webentwicklung führte dazu, dass viele Arbeitsschritte voneinander abhängig waren und zusätzliche Anpassungen erforderlich machten.