● live
01 — Canvas API · Physik

Partikel-Universum

500 Partikel mit echter Physik. Linien bei Abstand < 100px. Doppeltippen schaltet zwischen Abstoßung und Anziehung. Terminal: neon-grüne Partikelwolke.

Was ist möglich?
Touch · Doppel-Tap = Anziehung umschalten
500 Partikel
02 — JavaScript · Modular Scale

Typografie-Rechner

Modular Scale und Golden Ratio parallel. Live-Vorschau eines echten Absatztextes verändert sich beim Schieben.

Ratio: × 1.25
Golden: × 1.618
Der Filmemacher komponiert Bilder, bevor das erste Wort gesprochen wird. Licht ist Sprache — Schatten sind Satzzeichen. Was der Zuschauer spürt, hat kein Drehbuch.
03 — SVG · Datenfluß

Web-Stack Querschnitt

Tap auf eine Schicht — sie öffnet sich und zeigt 3 konkrete Beispiele. Animierter Datenfluß zwischen den Ebenen.

HTML Struktur & Semantik CSS Stil & Animationen JavaScript Logik & Interaktion Server / API Daten & Logik
← Tap auf eine Schicht
04 — Canvas 2D · Vektorfeld

Noise Field

300 Punkte folgen einem unsichtbaren Vektorfeld aus sin/cos mit Zeit. Drei Modi. Terminal: sieht aus wie ein Datenfluß-Visualisierer.

05 — Three.js · WebGL · GLSL

Atmender Kristall

Custom Vertex-Shader lässt die Oberfläche atmen. Wireframe + halbtransparente Fläche. Klick/Tap: Kristall explodiert und federt zurück.

Klick → Explosion

WebGL · Custom Vertex Shader · Breath + Explode

06 — CSS 3D · DeviceOrientation

CSS 3D Raum

Echter CSS 3D-Raum mit vier Wänden. iPhone neigen = Kamera-Perspektive verschiebt sich. Desktop: Maus steuert den Blickwinkel.

Maus bewegen oder iPhone neigen — der Raum folgt

07 — SVG · SMIL path animation

SVG Morphing

5 Formen morphen ineinander: Kreis → Dreieck → Stern → Welle → Blatt. Jeder Übergang 4 Sekunden, cubic-bezier weich. Terminal: nur Kontur.

Kreis
08 — Canvas · Pixel Sampling

Generative Typografie

Text “WEB” als 800+ Partikel. Beim Erscheinen fliegen sie aus dem Nichts ein und formen die Buchstaben. Tap → auflösen und neu bilden.

Tap → auflösen + neu bilden
09 — localStorage · Auto-Save

Persistentes Notizbuch

Überlebt jeden Reload. Timestamp pro Eintrag. Zeichenzähler live. Löschen nur mit Bestätigung.

10 — Fetch API · Netzwerk-Graph

Server + Netzwerk Status

Pollt alle 5 Sekunden. Animierter Netzwerk-Graph zeigt den Weg von iPhone → Tailscale → Mac Mini → Server.

Dispatcher — ...
Verbinde…
Warte auf erste Antwort
Latenz
ms
📱 🔒 💻 iPhone Tailscale Mac Mini Server
Zeit: --:--:--