Was dem Publisher an UI-Magie fehlt
canvas-ui als Referenz: 33 Canvas-/WebGL-Komponenten, sechs Kategorien — und eine ehrliche Bestandsaufnahme, wo das MaierZone-Universum heute steht.
→ Zum fx-Playground · Offen: R4 (serverseitig), R2 Stufe 2 (WebGL), R8 (3D) und das Pinnen ins libRegistry.
Ausgangslage
mzone-ui ist als Report-Vokabular erwachsen geworden: Typografie, Karten, Tabellen, Findings, Stat-Kacheln, Chart-Preset — sauber, themefähig, barrierearm. Aber bei Erlebnis-Komponenten — interaktive Canvas- und WebGL-Effekte, Text-Magie, 3D — ist der Katalog fast leer.
Die gesamte Effekt-Flotte des Publishers besteht aus zwei Ambient-Modulen (particleField, pulseGrid). Beide reagieren allenfalls auf die Mausposition; keines verzerrt Inhalte, keines spielt mit Typografie, keines nutzt die gepinnte three.js-Bibliothek. Genau dort setzt die Referenz an.
Die Referenz: canvas-ui
canvas-ui (David H., canvasui.dev) liefert 33 Komponenten, die den lebenden DOM als Textur auf ein Canvas ziehen: Text bleibt markierbar, Links klickbar — während Fluid-Simulationen, Feuer, Glas-Linsen und Glitch-Effekte darüber laufen. Wo das experimentelle HTML-in-canvas-API fehlt (nur Chrome mit Flag/Origin-Trial), springt automatisch ein WebGL-Overlay ein. Architektur-Lehre, die wir kopieren sollten: eine Engine in plain TypeScript + WebGL (~15–24 KB, gesamt ~0,9 MB für alle 33), dazu hauchdünne Wrapper für React, Solid, Preact, Vue, Svelte und Vanilla. Getypte Options, Instanz-API (setOptions / resize / destroy), null Laufzeit-Abhängigkeiten, „copy, don't install“ über eine shadcn-kompatible Registry — inklusive MCP-Anbindung, damit Assistenten Komponenten selbst finden und installieren.
| Kategorie | Komponenten (6 Kategorien, 33 gesamt) | Erlebnis |
|---|---|---|
| 🌊 Fluid & Motion | Liquid, Ripple, Cloth, Droplets, Bubble, Displacement | Pointer-getriebene Flüssigkeit, Klick-Wellen, Stoff im Wind |
| 🔥 Feuer & Energie | Blaze, FlameWrap, ForceField, Laser | Funken & Hitzeflimmern, Feuerrahmen, Schockwellen-Schild |
| 💎 Glas & Optik | Glass, Frost, Magnify, Bend, Peel, Clouds | Linsen, schmelzendes Eis, Seite falten & abziehen |
| 📼 Retro & Glitch | VHS, Glitch, RetroDither, Asciify, DecryptReveal, GlyphRain | Bandrauschen, RGB-Splits, Dither, entschlüsselnder Text |
| ✨ Partikel & Struktur | ParticleReveal, ParticleScroll, Shatter, Grid, HexFloat, Canvas | Partikel, die sich zu scharfem UI zusammenfinden |
| 🧊 3D-Objekte | AsciiObject, GlassObject, ParticleObject, DitheredObject, LiquidObject | GLB/glTF-Modelle als ASCII, Glas, Partikel, Dither, Liquid |
Live-Demo: Was heute schon geht
Dieser Report ist selbst der Beleg: Hintergrund = particleField aus mzone-ui@1.0.0. Der Seitentitel oben entschlüsselt sich beim Laden (und bei Klick) — ein Decrypt-Reveal-Prototyp in ~40 Zeilen. Unten ein Ripple-Prototyp in Canvas 2D (~110 Zeilen): Klick ins Feld. Kein WebGL, keine neue Lib — die Basis stimmt also schon heute. Bei prefers-reduced-motion bleiben alle Effekte aus. Seit dem Abend existieren beide Effekte als ausgebaute Module mit Instanz-API im fx-Playground.
Klick erzeugt Wellenringe mit Abklingen, Glanz und Ambient-Tropfen. Die ausgebaute Modul-Version läuft im Playground; die WebGL-Version (echte Refraktion + Dispersion wie canvas-ui Ripple) bleibt als Stufe 2 offen.
Gap-Analyse
Bewertung je Kategorie: Was canvas-ui kann, was MZP heute hat, wie groß die Lücke ist — mit Priorität (P1 · sofort P2 · nächster Sprint P3 · später) und geschätztem Umsetzungsaufwand im Publisher (Personentage, PT). Update: die ✅-markierten Lücken sind seit heute Abend als Prototypen geschlossen.
| Kategorie | MZP heute | Lücke | Prio | Aufwand |
|---|---|---|---|---|
| 🌊 Fluid & Motion ✅ | fx-ripple (Canvas 2D) als Prototyp gebaut | Stufe 1 geschlossen. Offen: WebGL-Refraktion/Dispersion (Liquid, Displacement). | P1 | 1–4 PT |
| 📼 Retro & Glitch ✅ | fx-decrypt als Prototyp gebaut | DecryptReveal geschlossen. Offen: GlyphRain, Glitch, VHS. | P1 | 0,5–2 PT |
| ✨ Partikel & Struktur ✅ | fx-particle-reveal als Prototyp gebaut (inkl. Cursor-Abstoßung) | Hero-Text-Lücke geschlossen. Offen: ParticleScroll, Shatter, HexFloat. | P2 | 2 PT |
| 💎 Glas & Optik ✅ | fx-magnify (Canvas-2D-Linse) als Prototyp gebaut | Lupe/Scanner geschlossen. Offen: echte Glas-Optik (Frost, Bend, Peel) per WebGL. | P2 | 2–3 PT |
| 🔥 Feuer & Energie | Nichts | Spektakulär, aber situativ einsetzbar — FlameWrap/ForceField eher für Specials (April Fools, Release-Posts). | P3 | 3–4 PT |
| 🧊 3D-Objekte | three@0.170 gepinnt, aber null Komponenten | GLB→ASCII/Glas/Partikel wäre das Sahnehäubchen; braucht Loader-Pipeline + Fallbacks. | P3 | 5+ PT |
Jenseits von canvas-ui: eigene Ideen
canvas-ui deckt Effekte ab — aber ein Publishing-Universum braucht mehr. Diese Punkte fließen ebenfalls in die Anforderungsanalyse ein:
| Idee | Nutzen für MZP | Prio | Aufwand |
|---|---|---|---|
| Konfetti-Modul ✅ | Umgesetzt: fx-confetti.js ist die produktive Fassung der konfetti-probe — Demo im Playground. | P1 | 0,5 PT |
| Scroll-Choreografie | Lenis (Smooth Scroll) + GSAP ScrollTrigger pinnen: Sektionen, die sich beim Scrollen aufbauen — macht lange Reports erlebbar. | P1 | 0,5 PT |
| Komponenten-Playground ✅ | Angelegt: der fx-Playground zeigt jedes Modul live mit Reglern und Copy-Snippet. Fehlt: Katalog aller 29 mz-Klassen. | P2 | 2–3 PT |
| View Transitions | Native View-Transitions-API für weiche Übergänge zwischen Artefakt-Seiten (Index → Report). Kein Lib nötig. | P2 | 1 PT |
| Shader-Hero | Plasma/Noise-Gradient als optionale Hero-Fläche hinter dem Titel (fx-hero.js, WebGL, ~2 PT). | P2 | 2 PT |
| Theme-Switcher pro Artefakt | Kleiner Toggle, der data-theme flipt und die Wahl speichert — mzone-ui kann hell/dunkel schon, es fehlt nur der Schalter. | P2 | 0,5 PT |
| Registry-/MCP-Flow | canvas-ui lässt Assistenten Komponenten per MCP installieren. Pendant für MZP: getComponent(name), das fertige fx-Snippets zurückgibt. | P3 | 3–4 PT |
Anforderungsanalyse — mzone-ui@1.1.0 / Publisher Next
Verdichtet zu acht Anforderungen. Jede folgt der canvas-ui-Bauweise: ein ES-Modul, getypte Options, destroy(), reduced-motion-No-Op, keine externen Abhängigkeiten. Stand v2: fünf davon sind als Prototypen erfüllt.
-
R1✓ PROTOTYP LIVEP1 · 0,5 PT
fx-decrypt.js— Text-Entschlüsselung für Titel/Eyebrows (Trigger load/click/hover, Pool konfigurierbar). Gebaut und abgenommen im fx-Playground. -
R2✓ STUFE 1 LIVEP1 · 1,5–4 PT
fx-ripple.js— Stufe 1 (Canvas-2D-Ringe mit Glanz, Ambient-Tropfen, Hover-Modus) gebaut und abgenommen im fx-Playground. Stufe 2 (WebGL-Refraktion + Dispersion) bleibt offen. -
R3✓ PROTOTYP LIVEP1 · 0,5 PT
fx-confetti.js— Konfetti-Probe produktiv gesetzt:burst(x, y)als Fraktion oder Pixel, Farben aus mz-Tokens. Gebaut und abgenommen im fx-Playground. -
R4P1 · 0,5 PTScroll-Libs pinnen — Lenis + GSAP ScrollTrigger ins
libRegistryaufnehmen, inkl. mzone-Preset-Modul mit sinnvollen Defaults. Rein serverseitiger Schritt. -
R5✓ PROTOTYP LIVEP2 · 2 PT
fx-particle-reveal.js— Partikel formieren sich zu Hero-Text und weichen dem Cursor aus (canvas-ui ParticleReveal als Blaupause). Gebaut und abgenommen im fx-Playground. -
R6✓ PROTOTYP LIVEP2 · 2–3 PT
fx-magnify.js— Scanner-Linse mit HUD über Canvas-/Bild-Inhalten,setOptions()nach canvas-ui-Vorbild. Gebaut und abgenommen im fx-Playground. WebGL-Glas-Shader optional später. -
R7P2 · 2–3 PT · TEILWEISEmzone-ui Playground — als Prototyp angelegt (fx-Playground, fünf Module mit Reglern und Snippets). Offen: vollständiger Katalog aller 29 mz-Klassen und der drei Bestandsmodule.
-
R8P3 · 5+ PT
fx-object3d.js— GLB/glTF als ASCII/Glas/Partikel rendern (three ist gepinnt). Erst nach R1–R7; Lizenz-Check der canvas-ui-Engines prüfen (MIT + Commons Clause erlaubt Nutzung, nicht Weiterverkauf).
Aufwand im Überblick
Personentage je Anforderung (obere Schätzung, Original aus v1). Praxis-Check am selben Tag: R1–R3, R5 und R6 wurden in einer Session als Prototypen gebaut — die Schätzungen der kleinen Module erwiesen sich als realistisch.
Empfehlung
Stand Abend: Das P1-Paket ist zu drei Vierteln erledigt — R1, R2 (Stufe 1) und R3 laufen als Prototypen; R5 und R6 sind ebenfalls schon gebaut. Nächster Schritt: Code-Review und Minifizierung der fünf Module, dann Aufnahme ins libRegistry als mzone-ui@1.1.0 samt Katalog-Eintrag — parallel R4 (Lenis/GSAP pinnen), ebenfalls ein serverseitiger Schritt. Danach: R7 zum Vollkatalog ausbauen und R2 Stufe 2 (WebGL-Refraktion) angehen. Bewusst zurückgestellt: HTML-in-canvas (DOM→Textur) — browserseitig Chrome-exklusiv; erst mit Origin-Trial angehen, bis dahin WebGL-Overlays wie canvas-ui im Fallback-Pfad. Und R8, das 3D-Sahnehäubchen, wenn das Fundament steht.