Das Labor

TOKYO
AT NIGHT

01 / DECONSTRUCT奥行き

Between
the layers.

Was wie ein Ort aussieht, sind sieben Tiefenebenen. Zieh sie auseinander. Blende einzelne Ebenen aus.

02 / TAKE CONTROL

Change the
weather.

Es ist deine Nacht.
Mach sie leiser. Oder wilder.

LIVE VIEW35°40′ N / 139°42′ E
AFTER HOURSDie Maus bewegt den Regen.
ATMOSPHERE CONTROL
TrockenStarkregen
Nach linksNach rechts
Deep bluePink hour
Eine Stimmung wählen
Am besten mit Kopfhörern.
DEINE EINSTELLUNGEN GELTEN AUCH IM HERO.Audio startet erst nach deinem Klick.

03 / IN TRANSIT

The last
train home.

Die Stadt bleibt wach.
Du bestimmst, wie schnell sie vorbeizieht.

Ein beleuchteter Nachtzug fährt durch die Stadt
SHIBUYA
HOME / 03:15

04 / UNDER THE HOOD

A little magic.
Actual pixels.

Keine Filmdatei. Kein vorgerenderter Loop.
Diese Nacht entsteht in deinem Browser.

LIVE FRAME MONITORWird gemessen
—FPS
Browser-Animationstakt
LETZTE 8 SEKUNDEN— ms / frame

Live gemessen, während dieser Bereich sichtbar ist. Regen zeichnet mit bis zu 30 FPS, Licht mit 15 FPS.

MAKE THE INVISIBLE VISIBLE

Einstellungen im Wetterfenster ansehen
01 / DEPTH

Raum aus Ebenen.

Transparente Bilder, verschiedene Geschwindigkeiten und echte Verdeckungen erzeugen die Perspektive.

02 / MOTION

Jeder Tropfen reagiert.

Canvas 2D berechnet Flugbahn und Mausimpulse. Transform und Opazität bewegen die übrige Szene.

03 / REST

Pause, wenn du gehst.

Unsichtbare Szenen ruhen. Reduzierte Bewegung wird respektiert. Die Bilddateien zusammen: etwa 1,5 MB.

NO RUSH. NO NEXT TRAIN.

Stay a
little longer.

Zurück auf den Balkon

BEHIND THE NIGHT

Art meets
code.

Konzept & Umsetzung

Die Tokio-Illustrationen wurden mit OpenAI Imagegen erstellt und in transparente Szenenebenen aufgeteilt.

Die Interaktion nutzt JavaScript, Canvas 2D und CSS. Der Regenklang wird lokal mit Web Audio synthetisiert. Keine Audioaufnahme. Seitenabrufe fließen in unsere serverseitige Besucherstatistik ein; Interaktionen werden nicht erfasst.

Schrift: DM Sans über Google Fonts.