Am Anfang war eine ConfigMap.
Wer meinen Artikel über die Kubernetes-Migration kennt, weiß: ich betreibe einen k3s-Cluster auf einem netcup-Server. Bevor phantom-grid.de eine richtige Astro-Site hatte, lief dort eine Coming-Soon-Seite — reines HTML, direkt in einem Kubernetes ConfigMap definiert. Kein Repo, kein Build-Step, einfach ein <style>-Block und ein bisschen JavaScript.
Diese Seite hat das visuelle Fundament gelegt. Alles was Phantom Grid heute optisch ist, kommt aus diesem ersten Entwurf. Als die Astro-Site gebaut wurde, war die Frage nicht “wie soll es aussehen” — sondern “wie übersetzt man das was schon existiert in ein System?”
Terminal Glow: ein Konzept, kein Effekt
Der Name ist im Brand-System dokumentiert. Terminal Glow beschreibt die atmosphärische Qualität die alle visuellen Entscheidungen verbindet: das spezifische Lichtverhalten von CRT-Monitoren, LED-Arrays und Vintage-Hardware.
Das ist kein ästhetisches Zitat. Es ist eine Arbeitshypothese: was würde diese Musik optisch aussehen wenn sie als Hardware existieren würde? Was wäre der Bildschirm auf dem sie läuft?
Die Antwort hat mehrere Schichten — und jede ist als CSS in die Site eingebaut.
Schicht 1: Film Grain
Der Hintergrund ist nie reines Digital-Schwarz. Eine SVG-basierte Rausch-Textur liegt als body::before über allem — ein data-URI das einen fractal noise Filter simuliert:
body::before {
content: '';
position: fixed; inset: 0;
background-image: url("data:image/svg+xml,...fractalNoise...");
opacity: 0.35;
}Das Ergebnis ist kaum sichtbar. Aber wenn man es entfernt, fällt sofort auf dass etwas fehlt. Die Textur ist das was eine Oberfläche von einem Render unterscheidet.
Schicht 2: Scanlines
Horizontal, 4px Rhythmus, 8% Opazität. Als body::after über dem Grain:
body::after {
background: repeating-linear-gradient(
to bottom,
transparent 0px,
transparent 2px,
rgba(0, 0, 0, 0.08) 2px,
rgba(0, 0, 0, 0.08) 4px
);
}Kein JavaScript, keine Canvas, keine Library. Reines CSS. Die Scanlines erden das Interface — sie machen deutlich dass das was du siehst auf einem Bildschirm existiert, nicht im luftleeren Raum.
Schicht 3: Vignette
Dunkle Ränder, helle Mitte. Ein radiales Gradient als fixed Overlay:
.vignette {
background: radial-gradient(
ellipse at center,
transparent 40%,
rgba(0, 0, 0, 0.55) 100%
);
}Das ist der Effekt der am stärksten sofort wahrgenommen wird. Die Vignette erzeugt das Gefühl eines physischen Bildschirms — die Ränder fallen ab, das Auge wird in die Mitte gezogen. Bei phantom-grid.de landet der Blick unweigerlich auf dem Wordmark.
Schicht 4: CRT Sweep
Das ist mein Lieblingseffekt. Eine einzelne transluzente horizontale Linie die alle 8 Sekunden von oben nach unten durch das Bild zieht — die Refresh-Linie eines Kathodenstrahlröhren-Monitors:
.crt-sweep {
animation: crt-sweep 8s linear infinite;
}
@keyframes crt-sweep {
0% { top: -10%; }
100% { top: 110%; }
}8 Sekunden ist nicht zufällig. Schneller, und es liest sich als Dekoration — eine nervöse Animation die Aufmerksamkeit auf sich zieht. Bei 8 Sekunden liest es sich als technisches Phänomen. Man nimmt es erst beim zweiten oder dritten Schauen wahr. Genau das soll es.
Schicht 5: VHS Glitch auf dem Wordmark
Der Wordmark — “Phantom Grid” — hat eine CSS-Animation die alle 6 Sekunden kurz auslöst. Zwei Komponenten:
Chromatic Aberration — konstant, subtil. Der Text hat eine permanente Farbkanal-Verschiebung: roter Schatten 2px nach rechts, Cyan-Schatten 2px nach links. Das simuliert den Versatz der drei Farbkanäle eines analogen Signals.
Glitch-Puls — gelegentlich. Bei 89% der Animation-Timeline verschiebt sich der Text 4px nach rechts, die Opazität fällt kurz auf 75%. Bei 90% Korrektur in die andere Richtung. Bei 91% zurück zu normal:
89% {
text-shadow: 5px 0 rgba(204, 34, 34, 0.9), -5px 0 rgba(0, 200, 255, 0.5);
opacity: 0.75;
transform: translateX(4px);
}Das ist kein Fehler. Es ist Evidenz einer Übertragung. Das Signal ist angekommen. Etwas hat kurz Widerstand geleistet. Der Text hat überlebt.
Schicht 6: Phosphor Glow
Großes Display-Text trägt ein warmes Weißglühen — die Phosphor-Persistenz eines CRT-Bildschirms. Kombiniert mit der Chromatic Aberration des VHS-Glitch ergibt das die vollständige Terminal-Lichtsignatur:
text-shadow:
2px 0 rgba(204, 34, 34, 0.6), /* chromatic — rot */
-2px 0 rgba(0, 200, 255, 0.25), /* chromatic — cyan */
0 0 20px rgba(220, 220, 220, 0.12), /* phosphor — inner glow */
0 0 60px rgba(220, 220, 220, 0.04); /* phosphor — outer bloom */Der innere Glow erzeugt Wärme. Der äußere Bloom erzeugt das Gefühl dass das Licht in die umgebende Dunkelheit blutet. Beides zusammen: ein Bildschirm der schon sehr lange läuft.
Das System hinter den Effekten
Das Entscheidende ist nicht dass diese Effekte existieren — sondern dass sie dokumentiert sind.
Jeder dieser Effekte hat einen Eintrag in phantom-grid-brand.md im OS-Repository. Nicht als Code-Snippet zur späteren Wiederverwendung, sondern mit seiner Intention beschrieben. Warum 8 Sekunden für den CRT Sweep. Warum der Glitch bei 89% auslöst und nicht früher. Was Phosphor Glow konzeptuell von normalem text-shadow unterscheidet.
Das ist der Unterschied zwischen einem Design und einem Design System. Ein Design ist eine Sammlung von Entscheidungen. Ein System ist eine Sammlung von Entscheidungen mit dokumentierten Gründen — so dass zukünftige Entscheidungen konsistent damit sein können.
Wenn Phantom Grid in einem Jahr eine zweite Seite baut, eine App, ein Poster — die Frage ist nicht “wie hat das damals ausgesehen?” Die Frage ist “was sind die Regeln?” Die Regeln sind im OS.
Warum das zum Label-Konzept gehört
In Teil 1 habe ich Phantom Grid als “das erste vollständig code-basierte Musiklabel der Welt” beschrieben. Das Design System ist ein Teil davon der über Ästhetik hinausgeht.
Ein klassisches Label definiert seinen visuellen Stil implizit — durch das was es veröffentlicht, die Designer die es engagiert, die Entscheidungen die in Meetings getroffen werden. Das ist nicht dokumentierbar, nicht übertragbar, nicht versionierbar.
Phantom Grid hat sein Design System in Markdown. Jede Entscheidung ist erklärbar. Jede Regel ist nachlesbar. Der Stil des Labels ist nicht in irgendwessen Kopf — er ist im Repository.
In fünf Jahren, wenn PG-050 erscheint, wird das Cover dieselben Grundregeln haben wie PG-001. Nicht weil jemand sich erinnert. Sondern weil es dokumentiert ist.
Ausblick: die CPU Unit
Das Design System ist dokumentiert. Die Pipeline läuft. Die KI-Entitäten haben ihre Rollen.
Was fehlt ist die letzte Konsequenz: ein zentrales Orchestrierungssystem das alles zusammenzieht.
Die CPU Unit ist der nächste geplante Schritt in der Phantom Grid-Architektur. Das Konzept ist radikal in seiner Einfachheit: ein Release-Commit in releases/pg-xxx/ ist der einzige Auslöser. Von dort läuft eine vollautomatisierte Pipeline:
release.md committed
→ HYDRO THEORY: A&R-Entscheidung dokumentiert
→ WAVEJUMPER: Artwork-Brief generiert
→ STORM SURGE: Promo-Arc erstellt
→ Bandcamp Upload mit Metadaten
→ Social Posts zu geplanten Zeitpunkten
→ Resident Advisor Submission
→ Website Release-Seite liveKein manuelles Copy-Paste. Kein plattformweises Wiederholen. Ein Commit. Alles folgt.
Gebaut auf dem Claude Agent SDK — ein zentraler Orchestrierungs-Agent liest das OS und dispatcht Aufgaben an drei spezialisierte Sub-Agenten: WAVEJUMPER, HYDRO THEORY, STORM SURGE. Jeder operiert innerhalb der Constraints seiner Rolle. Die roles/*.md-Dateien die als Dokumentation geschrieben wurden, werden zu den System-Prompts der Agenten.
Das ist die eigentliche Behauptung von Phantom Grid. Nicht dass ein Label Code nutzt. Sondern dass ein Label als Code läuft.
Phase 0 — OS, Rollen, Brand-System, Release-Protokoll — ist abgeschlossen. Die CPU Unit ist Phase 2. Das Fundament ist gelegt.
Das Projekt ist öffentlich: github.com/Tobeworks/phantom-grid-os — die Rollen, das Brand-System, die Release-Daten, die Architektur-Docs inklusive CPU Unit Vision. Und die Site: phantom-grid.de.
Das Experiment läuft.
Kommentare