01 · Überblick
Der Witz, der zur Methode wurde
Für dieses Konzept habe ich mir ein Studio vorgestellt, das immersive WebGL-Arbeiten und Echtzeit-3D verkauft. Die naheliegende Site ist ein Canvas mit einem Shader darin. Die interessante stellt eine härtere Frage: Wie weit kommt man ganz ohne Canvas?
Die Antwort lautet: bis ganz ans Ende. Das perspektivische Raster, die gefasten HUD-Panels, die Scanlines, der Chromatic-Aberration-Glitch auf den Überschriften, die magnetischen Buttons und die Live-Anzeigen sind alle CSS und neun Inline-SVGs. Ein Studio, das aus Gradienten und clip-paths ein überzeugendes Echtzeit-Interface bauen kann, hat ein Argument über Handwerk vorgebracht, das ein Shader nie könnte.
02 · Die Idee
Jeder Pixel im Browser erzeugt
Die Fase
Ein clip-path-Polygon, das zwei gegenüberliegende Ecken kappt. Auf jedes Panel, jeden Chip und jeden Button angewendet — die gesamte strukturelle Signatur der Seite.
Zwei Kanäle
Cyan trägt Struktur, Magenta trägt Zustand. Der Glitch ist genau dieses Kanalpaar, versetzt um vier Hundertstel eines em.
Anzeigen, die sich bewegen
Uptime, Frame-Zeit und Node-Zahl driften auf einem Timer, der stoppt, wenn der Tab verborgen ist oder Bewegung reduziert wird.
03 · Ziele
Missionsparameter
Teuer aussehen, nichts wiegen
Keine Fotografie, kein Video, keine 3D-Runtime. Das schwerste Asset der Seite ist das Stylesheet.
Sechs Übertragungen
Ein Raster ausgewählter Arbeiten, in dem jede Kachel im Browser erzeugt wird — der eigene Anspruch des Studios, wörtlich genommen.
Eine Crew, kein Führungsteam
Zwölf Menschen, ein Studiohund, null Account-Manager — die Team-Seite als Persönlichkeitstest.
Einen Kanal öffnen
Ein Kontaktformular mit Fehler-IDs pro Feld, sodass jede Validierungsmeldung programmatisch an ihr Eingabefeld gebunden ist.
04 · Bauablauf
Missionssequenz
Vierunddreißig Tokens
Der größte Token-Block der zehn: Void, Panel, zwei Kanäle, vier Glühstufen, die Fasengröße, der Skew-Winkel und der Scanline-Schritt.
Das clip-path-System
Die Schnittgröße als Variable, damit die Fase mit der Komponente skaliert, statt für jede neu gezeichnet zu werden.
Glühen ohne Filter
Box-Shadow für den Halo,
drop-shadownur dort, wo die Form unregelmäßig ist. Filter sind teuer; die Seite nutzt sie genau dort, wo ein Box-Shadow nicht hinkommt.Neun nummerierte Module
Nav, Header-Zustand, Anker, Reveals, Terminal-Typing, Count-ups, Live-HUD, magnetische Buttons, Kontaktformular.
Die Gates
Magnetismus verlangt einen hover-fähigen Zeiger und einen Viewport von mindestens 1100 Pixeln. Das HUD stoppt bei
visibilitychange. Keines von beiden läuft unter Reduced Motion.
05 · Architektur
Drei Dateien
├── index.html 44.9 KB — 6 Sektionen, 9 Inline-SVG, 0 Bilder
├── styles.css 52.5 KB — 34 Custom Properties, 4 Media Queries
└── script.js 13.1 KB — 415 Zeilen, 9 nummerierte Module
Der Stack
- clip-path
- Gradients
- box-shadow glow
- visibilitychange
- Unbounded
- Chakra Petch
Barrierefreiheit
- Per-field error IDs
- aria-describedby
- aria-live
- Reduced motion
- hover + width gate
06 · Was sich gewehrt hat
Was sich gewehrt hat
Neon auf Fast-Schwarz ist die am wenigsten barrierefreie Palette im Umlauf. Cyan ist hell genug, aber die gedämpften Grautöne, die ein Cyberpunk-Interface will, liegen weit unter AA.
Das Fließtext-Token wurde angehoben, bis es die Messung bestand, und die sehr gedämpften Werte wurden auf dekorative HUD-Beschriftungen mit aria-hidden beschränkt. Der Look überlebt; nichts, was man zum Lesen braucht, liegt unter dem Kontrast.
Ein von setInterval getriebenes HUD tickt im Hintergrund-Tab weiter und verbrennt Akku auf einer Seite, die niemand ansieht.
Ein visibilitychange-Listener stoppt das Intervall, wenn der Tab verborgen ist, und startet es bei der Rückkehr neu. Derselbe Listener stoppt es auch, wenn Reduced Motion mitten in der Sitzung eingeschaltet wird.
Magnetische Buttons, die dem Cursor folgen, sind auf Touch unbenutzbar, und auf einem kleinen Bildschirm ziehen sie das Bedienelement komplett unter dem Finger weg.
Zwei Gates statt einem: (hover: hover) und ein Mindest-Viewport von 1100 Pixeln. Der Magnetismus existiert nur dort, wo es einen Cursor gibt und Raum für Bewegung.
Ein Schreibmaschineneffekt, der Text Zeichen für Zeichen aufbaut, wird Zeichen für Zeichen vorgelesen — und lässt die Seite für Suchmaschinen leer.
Der vollständige String steht im Markup, und der Effekt spielt ihn nach. Während des Tippens trägt das Element ein aria-label mit dem kompletten Text; das Label wird entfernt, sobald die Animation gelandet ist.
07 · Was bleibt
Die Teile, die bleiben
WE BUILD ELECTRIC WORLDS
Drei glitchende Zeilen über einem perspektivischen CSS-Raster. Kein Canvas, kein Shader, kein Bild.
Selected Transmissions
Sechs Arbeitskacheln, jede einzelne im Browser gezeichnet — die Ansage des Studios, wörtlich genommen.
Das Fasensystem
Ein variablengetriebener clip-path, der über Panels, Chips und Buttons skaliert.
Active Roster
Zwölf Menschen, ein Studiohund, null Account-Manager. Die Crew-Sektion ist der Pitch.
08 · Live starten
Hier ausprobieren
Der echte Build, eingebettet und lauffähig. Er lädt erst auf Abruf — nichts wird geholt, bevor Sie es anfordern.
Live-Vorschau überspringen
Der echte Build, direkt in der Seite. Die Live-Vorschau ist eine eingebettete Seite; mit Escape verlassen Sie sie.
Im Vollbild öffnen ↗
