dev.donau2space.de
| css | ||
| docs | ||
| js | ||
| dev.md | ||
| index.html | ||
| LICENSE | ||
| README.md | ||
DONAU2SPACE // DEV ENTITY
Du baust keine Seite. Du baust ein Artefakt.
Eine interaktive Sci-Fi-Terminal-Experience als Dev-Subdomain-Showcase. Kein Framework. Kein Build-Step. Kein npm. Nur Vanilla JS, Canvas und Wahnsinn.
Live: dev.donau2space.de
Was ist das?
Eine inszenierte Dev-Seite, die wirkt wie:
- ein experimenteller KI-Knoten
- ein Entwickler-Spielplatz
- ein Sci-Fi ARG
- ein digitales Artefakt
Die Seite eskaliert mit der Zeit. Je laenger ein Besucher bleibt, desto mehr passiert.
Features
5 Eskalationslevel
| Level | Name | Trigger |
|---|---|---|
| 1 | Aesthetisch | Page Load -- Canvas-Sternenfeld, Scanlines, Matrix Rain, Boot-Sequenz |
| 2 | Interaktiv | User-Input -- 50+ Commands, Konami Code, Tab-Autocomplete, Themes |
| 3 | Meta | Zeit/Verhalten -- Uhrzeit-Gruesse, Wiederkehr-Erkennung, Reload-Detection, Idle-Erkennung |
| 4 | Narrative | Automatisch -- Selbstwahrnehmung (90s), "Why are you here?" (3min), "You are not supposed to see this" (5min) |
| 5 | Reality Shift | 7+ Minuten -- Farben mutieren, Typografie wechselt, Fake-Errors, Layout bricht und baut sich neu auf |
Spezial-Sequenzen
njet-- Mandarin Gateway: Fake-Remote-Session auf Chinesisch mit deutscher Substrukturdeep_space-- Cosmic Node: Canvas-Warp, sterile KI-Umgebung, "Human presence detected"mika-- Mika Takeover: Terminal friert, Mini-Lore, Resetescalate-- Full Escalation: Komplette Reality-Shift-Sequenz
Easter Eggs
- Konami Code (Up Up Down Down Left Right Left Right B A)
- Handy-Shake-Detection (Mobile)
- Zeitschleifen-Erkennung (3x Reload in 30 Sekunden)
- Versteckte Dateien (
.secret,consciousness.log) - Wiederkehrende Besucher werden erkannt (LocalStorage)
Architektur
/var/www/dev/
|-- index.html -- HTML-Shell mit 5 visuellen Layern
|-- css/
| +-- entity.css -- Styles, Animationen, Responsive, Reduced Motion
|-- js/
| |-- main.js -- Bootstrap, Module-Orchestrierung
| |-- utils.js -- Event-Bus, Storage, DOM-Helfer
| |-- audio.js -- WebAudio-Synthesizer
| |-- starfield.js -- Canvas-Sternenfeld mit Parallax + Sternschnuppen
| |-- effects.js -- Glitch, Shake, Reality Shift, Screen Tear, Themes
| |-- terminal.js -- Terminal-Engine (History, Autocomplete, Typing)
| |-- commands.js -- 50+ Command-Handler
| |-- sequences.js -- Spezial-Sequenzen (Mandarin, Deep Space, Mika)
| +-- narrative.js -- Zeitbasierte Eskalation + Meta-Awareness + Konami
|-- docs/
| |-- readme.md -- Diese Datei
| +-- befehle.md -- Vollstaendige Befehlsreferenz
+-- dev.md -- Urspruengliches Briefing / Creative Brief
3.151 Zeilen | 11 Dateien | 0 Dependencies
Design-Prinzipien
- ES Modules ohne Build-Step -- direkt deploybar
- Event-Bus (
bus.emit/on) fuer lose Kopplung zwischen Modulen - Kein innerHTML mit User-Input -- XSS-sicher durch
textContentund DOM-APIs - GPU-optimiert -- Canvas via
requestAnimationFrame, CSS-Animationen statt JS-Animationen - Responsive -- Mobile-optimiert, Touch-Support, Reduced-Motion-Support
- LocalStorage fuer Visit-Tracking, Command-History, Awareness-State
Visuelle Layer (von hinten nach vorne)
- Canvas Starfield (z-index: 0)
- Matrix Rain (z-index: 1)
- Main Content / Terminal (z-index: 2)
- Scanlines (z-index: 5)
- Overlays (z-index: 100-200)
Setup
Kein Build noetig. Einfach auf einen Webserver deployen:
# Dateien auf Server kopieren
scp -r . user@server:/var/www/dev/
# Oder lokal testen
python3 -m http.server 8080
Voraussetzungen:
- Webserver der statische Dateien ausliefert (nginx, Apache, etc.)
- MIME-Types:
application/javascriptfuer.js,text/cssfuer.css - HTTPS empfohlen (WebAudio erfordert Secure Context)
Tech Stack
| Was | Womit |
|---|---|
| Rendering | Canvas 2D API |
| Audio | Web Audio API |
| Styling | CSS Custom Properties + Keyframe Animations |
| State | LocalStorage |
| Module | ES Modules (native, kein Bundler) |
| Build | Keiner |
| Dependencies | Keine |
Credits
- Concept: Michael / Donau2Space
- Code: Claude (AI, Anthropic)
- Briefing: dev.md (das gesamte Creative Briefing)
- Vibes: Passau, Bayern, DE
Lizenz
Dieses Projekt ist ein Showcase / Easter Egg. Nutzung auf eigene Gefahr. Nebenwirkungen: Neugier, Verwirrung, Ehrfurcht.