NEONFRAME Jedes Pixel im Browser erzeugt

01 · Überblick

Der Witz, aus dem die Methode wurde

Für dieses Konzept habe ich mir ein Berliner Studio vorgestellt, das immersive WebGL-Arbeiten und Echtzeit-3D verkauft. Die naheliegende Site dafür ist ein Canvas mit einem Shader darin. Die interessantere stellt eine schwerere Frage: Wie weit kommt man ganz ohne Canvas?

Bis ganz ans Ende, wie sich zeigt. Das Perspektivraster, die gefasten HUD-Panels, die Scanlines, der Glitch mit chromatischer Aberration auf den Überschriften, die magnetischen Tasten und die Live-Anzeigen sind CSS und neun Inline-SVGs. Ein Studio, das aus Verläufen und clip-paths ein überzeugendes Echtzeit-Interface bauen kann, hat ein Argument über Handwerk gemacht, das ein Shader nie machen könnte.

02 · Die Idee

Kein Canvas, kein Shader, kein Bild

Die Regel passte in eine Zeile: Nichts auf dieser Seite darf eine Fotografie, ein Video oder eine 3D-Laufzeitumgebung sein. Drei Entscheidungen folgen daraus, und der Rest des Builds ist diese drei, auf jedes Bauteil der Seite angewendet.

• Die Fase

  Ein clip-path-Polygon, das zwei gegenüberliegende Ecken abschneidet, angewendet auf jedes Panel, jeden Chip und jede Taste. Die Schnittgröße ist eine Variable, die Fase skaliert also mit dem Bauteil, statt für jedes neu gezeichnet zu werden.

• Zwei Kanäle

  Cyan trägt Struktur, Magenta trägt Zustand, und keines borgt sich die Aufgabe des anderen. Der Glitch auf den Überschriften ist schlicht diese zwei Kanäle, um vier Hundertstel em versetzt.

• Anzeigen, die sich bewegen

  Betriebszeit, Frame-Zeit und Knotenzahl driften auf einem Timer, der in dem Moment stoppt, in dem der Tab verborgen wird oder Bewegung reduziert ist.

03 · Ziele

Missionsparameter

1. Teuer aussehen, nichts wiegen

   Keine Fotografie, kein Video, keine 3D-Laufzeitumgebung. Die schwerste Ressource im ganzen Build ist das 51,9 KB große Stylesheet, und der Browser zeichnet alles, was darin beschrieben ist.

2. Sechs Übertragungen

   Ein Raster ausgewählter Arbeiten, dessen Kacheln alle im Browser erzeugt werden — die eigene Behauptung des Studios über Echtzeitarbeit, von seiner eigenen Website wörtlich eingelöst.

3. Eine Crew, kein Führungsteam

   Zwölf Menschen, ein Studiohund, null Kundenbetreuer. Die Liste liest sich wie ein Persönlichkeitstest und nicht wie ein Organigramm.

4. Einen Kanal öffnen

   Ein Kontaktformular mit Fehler-IDs pro Feld, damit jede Validierungsmeldung programmatisch an das Eingabefeld gebunden ist, zu dem sie gehört, statt daneben zu schweben.

04 · Baureihenfolge

Missionsfolge

Das Aussehen wurde vor dem Verhalten gebaut: zuerst die Tokens, dann das clip-path-System, dann das Glühen, und erst danach die neun Module, die überhaupt etwas bewegen.

1. Vierunddreißig Tokens

   Der größte Token-Block der zehn: die Leere, das Panel, zwei Kanalfarben, vier Glühstufen, die Fasengröße, der Schrägungswinkel und die Scanline-Tönung.

2. Das clip-path-System

   Der Schnitt ist eine Variable statt eines festen Polygons, eine einzige Fasendefinition bedient also Panels, Chips und Tasten und skaliert mit jedem davon.

3. Glühen ohne Filter

   box-shadow für den Halo, drop-shadow nur dort, wo eine Fase einen beschneiden würde. Filter sind teuer, die Seite gibt sie also genau dort aus, wo ein box-shadow nicht hinreicht.

4. Neun nummerierte Module

   Navigation, Kopfbereichszustand, Anker, Reveals, Terminal-Tippen, Hochzähler, das Live-HUD, magnetische Tasten und das Kontaktformular: 416 Zeilen insgesamt.

5. Die Tore

   Magnetismus verlangt einen hover-fähigen Zeiger und einen Viewport von mindestens 1100 Pixeln. Das HUD stoppt bei visibilitychange. Keines von beidem läuft unter reduzierter Bewegung.

05 · Architektur

Drei Dateien, und das Aussehen wohnt im Stylesheet

Es gibt keinen Bundler, keine Abhängigkeit und keinen Build-Schritt — und, ungewöhnlich für eine Seite, die so aussieht, auch keine Grafik-Laufzeitumgebung. Die Fasen, das Perspektivraster, die Scanlines und das Glühen sind alle in CSS deklariert, der Browser zeichnet sie also, ob das Skript je ankommt oder nicht.

Das größte Stylesheet der zehn und der größte Token-Block sind derselbe Sachverhalt, zweimal ausgesprochen: Die Identität wird in der Datei verfasst, die auch das Layout macht, statt aus einem Designwerkzeug exportiert und obendrauf gelegt zu werden.

06 · Was sich gewehrt hat

Probleme, und was sie gelöst hat

1. Problem

   Neon auf beinahe Schwarz ist die am wenigsten barrierefreie gebräuchliche Palette. Cyan ist für sich hell genug, aber die matten Grautöne, die ein Cyberpunk-Interface will, liegen deutlich unter AA.

   Lösung

   Das Fließtext-Token wurde angehoben, bis es maß, und die ganz matten Werte blieben auf dekorative HUD-Beschriftungen beschränkt, die aria-hidden tragen. Das Aussehen bleibt intakt; nichts, was eine Leserin tatsächlich braucht, ist unterkontrastiert.

2. Problem

   Ein HUD, das von setInterval getrieben wird, tickt in einem Hintergrund-Tab weiter und verbrennt Akku auf einer Seite, die niemand anschaut.

   Lösung

   Ein visibilitychange-Listener stoppt das Intervall, wenn der Tab verborgen wird, und startet es bei der Rückkehr neu. Derselbe Listener stoppt es, wenn reduzierte Bewegung mitten in einer Sitzung eingeschaltet wird.

3. Problem

   Magnetische Tasten, die dem Cursor folgen, sind auf Touch unbenutzbar, und auf einem kleinen Bildschirm ziehen sie das Bedienelement ganz unter dem Finger weg.

   Lösung

   Zwei Tore statt einem: ein hover-fähiger Zeiger und ein Viewport von mindestens 1100 Pixeln. Der Magnetismus existiert nur dort, wo es einen Cursor gibt und Platz, sich zu bewegen.

4. Problem

   Ein Schreibmaschineneffekt, der Text Zeichen für Zeichen aufbaut, wird Zeichen für Zeichen angesagt — und lässt die Seite leer für alles, was den Quelltext liest.

   Lösung

   Die vollständige Zeichenkette wird im Markup ausgeliefert, und der Effekt spielt sie nur nach. Während getippt wird, trägt das Element ein aria-label mit dem vollständigen Text, und das Label wird entfernt, sobald die Animation gelandet ist.

07 · Behaltenswert

Die Teile, die es wert sind zu bleiben

• WE BUILD ELECTRIC WORLDS

  Drei glitchende Zeilen über einem CSS-Perspektivraster. Kein Canvas, kein Shader, kein Bild — und der ganze Effekt sind zwei Kanäle, vier Hundertstel em auseinander.

• Ausgewählte Übertragungen

  Sechs Arbeitskacheln, jede einzelne im Browser gezeichnet. Es ist die Angeberei des Studios über Echtzeitarbeit, wörtlich genommen von der Seite, die sie macht.

• Das Fasensystem

  Ein variablengeführter clip-path, der über Panels, Chips und Tasten skaliert — die Seite hat also eine strukturelle Signatur statt einer Menge dekorierter Kästen.

• Aktive Besetzung

  Zwölf Menschen, ein Studiohund, null Kundenbetreuer. Der Crew-Abschnitt ist der Pitch, und er brauchte dafür keine Fotografie.

08 · Live starten

Hier starten

Der echte Build, eingebettet und laufend. Er lädt auf Abruf — es wird nichts davon geholt, bevor du es verlangst.

neonframe.studio

Hier starten

Der echte Build, laufend in der Seite. Die Live-Vorschau ist eine eingebettete Seite. Drücke Escape, um sie zu verlassen.

Im Vollbild öffnen