● live
01 — Canvas API

Partikel die atmen

Jedes Partikel folgt eigener Physik. Mausbewegung oder Touch: Abstoßung in 80px Radius. Das Canvas rendert in Echtzeit — kein Framework, nur Browser-APIs.

Bewege die Maus
02 — JavaScript

Typografie-Rechner live

Modular Scale mit 1.25 Ratio — alle Größen berechnen sich live beim Schieben. Das Ergebnis kann direkt kopiert werden.

Ratio: × 1.25
03 — SVG

Web-Stack als Querschnitt

SVG mit animiertem stroke-dashoffset und transformierten Rechtecken. Jede Schicht leuchtet beim Hover auf — vollständig deklarativ, kein Canvas.

HTML Struktur & Semantik CSS Stil & Animationen JavaScript Logik & Interaktion Server / API Daten & Logik
← Hover über eine Schicht
04 — Canvas 2D

Generative Linie

Organisch wachsende Kurve via sin/cos mit phasenversetzten Offsets. Jede Iteration ist einzigartig. Im Terminal-Theme: Oszilloskop-Stil.

05 — Three.js / WebGL

Kristall im Wireframe

Rotierendes Ikosaeder via WebGL. Three.js importiert direkt als ES-Modul vom CDN — kein Build-Schritt. Klick stoppt/startet die Rotation.

Klick → Rotation anhalten

06 — CSS Animationen

Sechs Techniken live

Klick auf eine Karte — die Animation startet neu. Alle Kurven sind deklaratives CSS, kein JavaScript bewegt irgendetwas.

spring-bounce
cubic-bezier(.34,1.56,.64,1)
fade-in
opacity 0→1
slide-from-bottom
translateY(30px)
scale-pop
scale 0.5→1
color-breathe
background pulse
text-flip
rotateX 3D
07 — localStorage

Persistentes Notizbuch

Alles was hier getippt wird, überlebt den Seiten-Reload. Browser-native, kein Server, kein Cookie.

08 — Fetch API

Server-Status live

Pollt alle 5 Sekunden den lokalen Server. Fetch API + Performance.now() für Latenz-Messung. Kein WebSocket — nur natives fetch().

Dispatcher Server — 192.168.0.192:8089
Verbinde…
Warte auf erste Antwort
Letzte Messung
ms
Lokale Zeit: --:--:--