MZONE-UI@1.1.0 · PROTOTYPEN-WERKSTATT

fx-Playground: fünf Module live

fx-decrypt, fx-confetti, fx-ripple, fx-particle-reveal und fx-magnify — gebaut nach mzone-ui-Konvention, live abnehmbar. Der Titel oben entschlüsselt sich durch fx-decrypt selbst.

Datum
2026-08-03
Status
Prototypen — Kandidaten R1–R3, R5 und R6 aus dem Gap-Report
Ziel
Aufnahme ins libRegistry als mzone-ui@1.1.0/
Abhängigkeiten
keine — jedes Modul ist ein eigenständiges ES-Modul
Module
5
Gesamtgröße
25KB
Abhängigkeiten
0
Reduced-Motion
✓No-Op

Installation (sobald gepinnt)

// Zielzustand nach Aufnahme ins libRegistry:
import { decrypt }        from 'mzone-ui@1.1.0/fx-decrypt.js';
import { confetti }       from 'mzone-ui@1.1.0/fx-confetti.js';
import { ripple }         from 'mzone-ui@1.1.0/fx-ripple.js';
import { particleReveal } from 'mzone-ui@1.1.0/fx-particle-reveal.js';
import { magnify }        from 'mzone-ui@1.1.0/fx-magnify.js';

// Auf dieser Seite laufen sie bereits — als lokale Dateien unter ./fx/

fx-decrypt R1

TEXT-ENTSCHLÜSSELUNG FÜR TITEL & EYEBROWS
MaierZone entschlüsselt sich gerade selbst 
import { decrypt } from 'mzone-ui@1.1.0/fx-decrypt.js';
const fx = decrypt(document.querySelector('h1.mz-title'), { trigger: 'click' });
fx.play();

~2,5 KB. Data-Attribut data-text hält den Zieltext, der Pool ist konfigurierbar.

fx-confetti R3

BURSTS IN MZ-STATUSFARBEN — PRODUKTIVE FASSUNG DER KONFETTI-PROBE
… oder einfach irgendwo in diese Fläche klicken
import { confetti } from 'mzone-ui@1.1.0/fx-confetti.js';
const fx = confetti();
fx.burst(0.5, 0.35, { count: 160 });  // x/y als Fraktion oder in px

~4,4 KB. Fullscreen-Overlay (aria-hidden, pointer-events: none), Farben aus den mz-Tokens, Loop läuft nur solange Partikel leben.

fx-ripple R2 · Stufe 1

WASSER-WELLEN IN CANVAS 2D — WEBGL-REFRAKTION FOLGT ALS STUFE 2
Klick ins Wasser
import { ripple } from 'mzone-ui@1.1.0/fx-ripple.js';
const fx = ripple(document.querySelector('.hero'), {
  trigger: 'click', ambient: 4, rings: 3,
});

~5,4 KB. Legt sein Canvas selbst ins Ziel-Element, beobachtet Größenänderungen, Glanz-Innenring aus --mz-info.

fx-particle-reveal R5

HERO-TEXT AUS PARTIKELN — WEICHT DEM CURSOR AUS UND FEDERT ZURÜCK
Cursor durch die Partikel ziehen · Klick = neu formieren
import { particleReveal } from 'mzone-ui@1.1.0/fx-particle-reveal.js';
const fx = particleReveal(document.querySelector('.hero'), {
  text: 'MaierZone', repel: 90,
});

~6,9 KB. Der Text wird offscreen gerendert und punktweise abgetastet; die Partikel federn aus dem Streuradius ins Ziel. Ideal als Hero-Effekt über dem Seitentitel.

fx-magnify R6

SCANNER-LINSE MIT HUD — ÜBER JEDEM CHART-CANVAS
Cursor bewegen — die Linse zeigt Details der gemalten Daten-Szene
import { magnify } from 'mzone-ui@1.1.0/fx-magnify.js';
const fx = magnify(document.querySelector('.chart-card'), {
  source: 'canvas', zoom: 2, radius: 90,
});
fx.setOptions({ zoom: 3 });

~5,8 KB. Canvas-2D-Clip-Pfad, läuft überall; WebGL-Glas-Shader optional später. Die Demo-Szene wird per Code gemalt — Balken, Kurve, Micro-Labels, nur mit Lupe lesbar.

Der Weg nach mzone-ui@1.1.0

CHECKLISTE BIS ZUM PINNEN

✅ Fünf Module nach mzone-ui-Konvention gebaut: fx-decrypt (R1), fx-ripple Stufe 1 (R2), fx-confetti (R3), fx-particle-reveal (R5), fx-magnify (R6)
✅ Live-Abnahme im Playground (diese Seite)
☐ Code-Review + Minifizierung
☐ Aufnahme ins libRegistry als mzone-ui@1.1.0 (serverseitig)
☐ Katalog-Eintrag in getCapabilities().libCatalogs mit Modul-Doku
☐ Gap-Report aktualisieren: R1–R3, R5 und R6 auf „erfüllt“ setzen

Als Nächstes: R4 (Lenis + GSAP pinnen) und R2 Stufe 2 (WebGL-Refraktion + Dispersion). R7 — die Playground-Katalogseite — ist mit dieser Seite als Prototyp bereits angelegt.