Komponenten
317 frameworkunabhängige Komponenten (v0.1.0): native Web Components und CSS in Layers, null Laufzeitabhängigkeiten, für React, Vue, Svelte, Angular, Astro und reines HTML. Jede Seite zeigt das Markup, die vollständige API, wann du sie einsetzt, und Hinweise zur Barrierefreiheit.
KI-Agenten: Starte bei /llms.txt. Käufer erhalten alle Komponenten mit der CLI und dem MCP-Server: Pläne ansehen oder Free pack herunterladen.
Primitives 15
-
Avatar
.mv-avatarAvatar in CSS: ein Bild über Initialen gelegt (automatischer Fallback, wenn das Bild fehlt oder defekt ist), Größen, rund oder eckig, eingefärbte Initialen, Statuspunkt, Zähler; eine überlappende Gruppe mit einem „+3“-Chip, die sich beim Hover auffächert. -
BadgeGratis
.mv-badgeBadge in reinem CSS: 7 Varianten (sanfte oder volle Tönung), animierbarer Statuspunkt, Icon, Entfernen-Button, Pille/eckig, 3 Größen und ein Zähler an der Ecke eines Avatars oder Icons. -
ButtonGratis
.mv-buttonButton in reinem CSS auf <button> oder <a>: 6 Varianten, 4 Größen, Ladezustand, Gruppe. -
Button Effects
.mv-buttonSieben Effekte für .mv-button über data-effect: kreisender Funke, Regenbogenrand, Puls, 3D-Taste, wandernder Glanz, eingeblendeter Pfeil und Leuchten. -
CheckboxGratis
.mv-checkboxNative Checkbox in reinem CSS: ein sich selbst zeichnendes (umkehrbares) Häkchen, unbestimmter Zustand, Größen, ungültig; liefert außerdem die gemeinsamen Layouts .mv-choice und .mv-choice-card (Optionskarten, hervorgehoben über :has(:checked)). -
InputGratis
.mv-inputTextfeld in reinem CSS: 3 Größen, Zustände ungültig (aria-invalid / :user-invalid), schreibgeschützt und Datei, plus eine Gruppe mit Icons, Präfixen/Suffixen, Inline-Buttons und einem Löschen-Button. -
KbdGratis
.mv-kbdDezent erhabene Tastaturtasten auf <kbd>: verschachtelte Kombinationen, 3 Größen, eine flache Variante, passt sich in Buttons und Tooltips an. -
RadioGratis
.mv-radioNativer Radiobutton in reinem CSS: ein innerer Punkt, der federnd erscheint, Größen, eine Outline-Variante, Gruppen nebeneinander oder untereinander und Optionskarten (Planlisten, Kacheln mit Badge). -
Range FX
<mv-range-fx>Ausdrucksstarke Slider auf Basis eines einzigen barrierefreien Modells: Die Schiene wird zu einer Welle, die beim Ziehen schwingt (wave), eine Wertblase springt auf und neigt sich mit der Geschwindigkeit (bubble), ein Lineal gleitet mit Trägheit unter einer festen Nadel (ruler), eine flüssige Kappe dehnt sich (fluid) oder das Label sitzt in der Schiene und invertiert sich unter der Füllung (inline). -
SelectGratis
.mv-selectGestyltes natives <select> (Chevron in Token-Farbe), schrittweise erweitert zu einem anpassbaren Select (appearance: base-select): animierte Liste, Statuspunkte, Icons, Beschreibungen und Häkchen, optionales „flüssiges“ Öffnen; sauberer Fallback überall sonst. -
SeparatorGratis
.mv-separatorHorizontaler oder vertikaler Trenner in reinem CSS: durchgezogen, gestrichelt, gepunktet oder auslaufend, mit zentriertem („or“) oder ausgerichtetem Label, auf <hr> oder <div>. -
Slider
<mv-slider>Slider in zwei Formen: ein gestyltes natives <input type="range" class="mv-slider"> (synchronisierte Füllung) und ein formularfähiges <mv-slider> für fortgeschrittene Fälle: zwei Griffe, Teilstriche, beschriftete Markierungen, Wertblase, vertikale Ausrichtung, volle Tastaturunterstützung. -
SwitchGratis
.mv-switchSchalter in reinem CSS auf <input type="checkbox" role="switch">: Griff, der federnd gleitet und sich beim Drücken dehnt, Icons im Griff (anpassbar), Größen, Label links oder rechts, Optionskarte. -
TextareaGratis
.mv-textareaTextarea, die von selbst wächst (field-sizing: content), zwischen einer minimalen und maximalen Zeilenzahl, mit optionalem Ziehgriff zur Größenänderung, einer Gruppe mit Toolbar und einem Zeichenzähler <mv-char-count>. -
Toggle
<mv-toggle-group>Toggle-Button .mv-toggle (aria-pressed, Varianten, Icon, das mit dem Zustand wechselt) und <mv-toggle-group>, Einzel- oder Mehrfachauswahl: Roving Tabindex, value, verbundene Gruppe und ein Segmented Control, dessen Indikator zwischen den Optionen gleitet.
Formulare 47
-
Angle Dial
<mv-angle-dial>Winkeleingabe in Grad, die sich wie CSS liest (0° oben, im Uhrzeigersinn): ein Knopf in einem Ring aus Teilstrichen, der zugleich das Einrastraster ist, wobei die Striche hinter dem Knopf leuchten und mit der Entfernung verblassen. -
As StoredExklusiv
<mv-as-stored>Zeigt vor dem Speichern genau, wie jeder Wert abgelegt wird, wenn das System hinter dem Formular ihn umformt, statt ihn stillschweigend strecken oder abschneiden zu lassen. -
Balance SheetExklusiv
<mv-balance-sheet>Strukturierte zweispaltige Entscheidungsbilanz (Pro und Contra, selbst bauen oder kaufen, einstellen oder nicht, Anbieterauswahl, ein Umzug), angelegt wie ein Kassenbuch, in dem sich die Punkte gegenüberstehen. -
BloodstainExklusiv
<mv-bloodstain>Wiederherstellung von Formularentwürfen, die sich genau merkt, wo du warst: Umschließe ein beliebiges <form> (oder einen Bereich mit Feldern), und seine Werte werden automatisch gespeichert (entprellt, localStorage oder sessionStorage), zusammen mit dem zuletzt fokussierten Feld und der Position des Textcursors. -
Catch LoopExklusiv
<mv-catch-loop>Erkennt und erklärt Anforderungen, die sich nie erfüllen lassen, weil sie auf sich selbst zurückverweisen („SSO braucht eine verifizierte Domain, die Verifizierung der Domain braucht SSO“) oder einander widersprechen (ein Archiv, das sowohl Verschlüsselung als auch Volltextsuche braucht, die sich gegenseitig ausschließen). -
Color Picker
<mv-color-picker>Farbfeld, das ein Popover öffnet, das sich per Klick daneben schließt (oder inline sitzt): eine Sättigungs-/Helligkeitsfläche, Farbton- und Deckkraft-Slider, ein Textfeld, das jede CSS-Farbe annimmt, mit HEX/RGB/HSL/OKLCH-Umschalter, die Pipette, Farbfelder und zuletzt verwendete Farben. -
Combobox
<mv-combobox>Suchfeld mit akzentunabhängig gefilterter Liste, Gruppen, Einzel- oder Mehrfachauswahl als Chips, Anlegen von Optionen und einem Freitextmodus (Autocomplete); formularfähig. -
Curve Editor
<mv-curve-editor>Editor für Easing-Kurven: Zieh zwei Griffe oder verschieb sie per Tastatur, mit Live-Koordinaten und Überschwingen für Antizipation und Bounce. -
Date Picker
<mv-date-picker>Datumsauswahl: ein Auslöser im Stil eines Eingabefelds, der das formatierte Datum zeigt (auch Zeiträume), und ein Kalender in einem Popover, mit Presets wie „Today“, „Last 7 days“…; formularfähig. -
ExposureExklusiv
<mv-exposure>Eine Sichtbarkeitsanzeige für Freigabe- und Datenschutzeinstellungen (Teilen-Dialoge, Zielgruppe eines Beitrags, Profil-Privatsphäre, Projektsichtbarkeit, Kalenderfreigabe, Dateilinks), die die umschlossenen Steuerelemente ausliest und anzeigt, wie sichtbar man ist, bevor man sich festlegt. -
FieldGratis
.mv-fieldFeld-Layout in reinem CSS: Label (Pflicht / optional), Hilfetext, eine Fehlermeldung, die von selbst erscheint, wenn das Steuerelement ungültig ist, vertikale, horizontale, responsive und Inline-Ausrichtung, Auswahlkarten und Fieldset. -
File Upload
<mv-file-upload>Drop-Zone für Dateien: Drag-and-drop mit Hervorhebung (und sichtbarer Ablehnung nicht erlaubter Typen), eine Liste mit Bildvorschauen, Icons, Größen und Entfernen, Validierung von Typ/Größe/Anzahl und Fortschritt pro Datei; formularfähig (FormData). -
ForgotExklusiv
<mv-forgot>Prüfung vor dem Absenden („du hast vielleicht etwas vergessen“) für Eingabefelder und Formulare, die im Gegensatz zu einer vagen Warnung genau sagt, was zu fehlen scheint. -
Gradient Editor
<mv-gradient-editor>Formularfähiger Editor für CSS-Verläufe (linear, radial, conic): Farbstopps sind per Tastatur bedienbare Regler auf einer Live-Leiste, hinzugefügt per Klick, Enter oder +, entfernt durch Wegziehen oder Entf, jeder mit Farbwähler und Positionsfeld. -
Intent ComposerExklusiv
<mv-intent-composer>Ein Eingabefeld für KI-Anfragen, das die drei Teile einer Absicht beim Tippen sichtbar macht: das Ergebnis, die Rahmenbedingungen (Budget, Frist, zu Vermeidendes, Ort, Menge…) und die Grenze der Delegation. -
InvisiblesExklusiv
<mv-invisibles>Macht unsichtbare und verwechselbare Zeichen in Textfeldern sichtbar, wo sie echte Bugs verursachen: Nullbreiten-Leerzeichen und -Verbinder, die in IBANs, E-Mails, API-Schlüssel und Codes eingefügt werden, geschützte und exotische Leerzeichen, Leerraum am Anfang/Ende, Tabs, weiche Trennstriche, Steuerzeichen, Bidi-Steuerzeichen (Trojan Source), versteckter Tag-Text, Homoglyphen (ein kyrillisches „а“ in einem lateinischen Wort, „O“ zwischen Ziffern), vollbreite Buchstaben sowie typografische Anführungszeichen oder Gedankenstriche in Befehlen. -
Just RightExklusiv
<mv-just-right>Persönliches Passform-Feedback für eine native Radiogruppe aus Größen, Plänen oder Konfigurationen: Jede Option sagt diesem Nutzer Zone für Zone, ob sie für ihn zu klein, genau richtig oder zu groß ist. -
LifelinesExklusiv
<mv-lifelines>Entscheidungshilfen für eine schwierige Einzelwahl (ein Plan, eine Versandoption, eine Laptop-Konfiguration, ein Versicherungstarif, eine Instanzgröße), jede ein Joker mit begrenzter Anzahl an Einsätzen, deren Verbrauch sichtbar ist. -
MastExklusiv
<mv-mast>Asymmetrische Einstellung für selbst auferlegte oder sicherheitsrelevante Limits: Verschärfen wirkt sofort, Lockern wartet eine Bedenkzeit ab. -
Narrow DownExklusiv
<mv-narrow-down>Geführter Produktfinder, der als Nächstes die aufschlussreichste Frage stellt, statt einen festen Fragebogen abzuarbeiten. -
Number Field
<mv-number-field>Zahleneingabe mit − / + Buttons (gedrückt halten beschleunigt), Grenzen und Schrittweite, Pfeiltasten und Mausrad, Intl-Formatierung (Währung, Prozent, Einheit) und einem „Scrub“-Label: horizontal ziehen, um den Wert zu ändern, optional mit Pointer Lock. -
One More ThingExklusiv
<mv-one-more-thing>Priorisierte Formularvalidierung, die jeweils nur eine Sache verlangt, statt eine Wand aus Fehlern zu zeigen. -
OTP
<mv-otp>Eingabe für Einmalcodes: Ein echtes verstecktes Feld übernimmt Tippen, Einfügen und SMS-Autofill, während animierte Slots den Code mit blinkendem Textcursor, einem Trenner und einem Fehler-Schütteln anzeigen. -
Pass CardExklusiv
<mv-pass-card>Ein kleines, sichtbares Budget an Regelausnahmen („passes“) für die Momente, in denen eine Regel nachgeben muss: Mergen während eines Release-Freeze, Überspringen einer Pflichtprüfung, eine verspätete Abgabe, ein Kauf über dem Ausgabenlimit, eine gebührenfreie Umbuchung, eine SLA-Ausnahme. -
Password FieldExklusiv
<mv-password-field>Passwortfeld, das dein natives <input type="password"> behält (Autofill, Passwortmanager und Formularversand funktionieren also einfach) und einen echten Anzeigen/Verbergen-Button ergänzt, der den Textcursor behält und beim Absenden wieder verbirgt, eine Feststelltasten-Warnung bei Fokus und für neue Passwörter eine Checkliste der von dir deklarierten Regeln plus eine Stärkeeinschätzung in Worten, die Länge belohnt und gängige Wörter, Jahreszahlen, Folgen und Wiederholungen durchschaut. -
PhrasebookExklusiv
<mv-phrasebook>Eingeschränktes Eingabefeld für Nachrichten an Stellen, an denen Freitext riskant oder teuer ist: Man schreibt nur, indem man eine Vorlage wählt („{thing} was {quality}“, „Try {action}“, „Watch out for {thing}“) und jede Lücke aus einem festen, nach Kategorien geordneten Wortschatz füllt, optional mit einer zweiten Phrase, angehängt über ein Bindewort („but“, „so“). -
Posting AsExklusiv
<mv-posting-as>Identitätsschutz für Eingabefelder und Aktionsbereiche in Apps mit mehreren Konten (Marke vs. persönlich, gemeinsames Postfach vs. du selbst, Impersonation, Kunden-Workspaces, Produktion vs. Sandbox): Er macht die Identität, als die du gleich handelst, im Moment des Handelns unverwechselbar. -
Prep ListExklusiv
<mv-prep-list>Vorbereitungskarte „Before you start“ für lange oder folgenschwere Abläufe (Kredit-, Visums- oder Versicherungsanträge, Identitätsprüfung, Steuererklärung, Onboarding von Mitarbeitenden, eine Datenbankmigration, ein Produktions-Release). -
Quantity
<mv-quantity>Mengenauswahl für E-Commerce, eine schlanke Variante von <mv-number-field>: Minimum 1, automatisch auf den Lagerbestand begrenzt, eine mit dem Feld verknüpfte Beschriftung „In stock“ / „Only 3 left in stock“ / „Out of stock“, eine Meldung und ein Schütteln beim Erreichen des Bestandslimits, ein deaktivierter Ausverkauft-Zustand, der bei Wiederauffüllung wieder aktiv wird; Varianten pill und subtle für Warenkorbzeilen. -
Rating
<mv-rating>Sternebewertung, zur Anzeige (echte Dezimalgenauigkeit: 4,3 füllt 30 % des 5. Sterns, Anzahl der Bewertungen als Link) oder als formularfähige Eingabe: halbe Sterne, Hover-Vorschau, Beschriftungen wie „Very good“, volle Tastaturunterstützung, Zurücksetzen, Pflichtfeld; kompakte Variante ★ 4.8 (2,413). -
Read BackExklusiv
<mv-read-back>Rücklesebestätigung für folgenschwere Formulare, so wie Piloten eine Freigabe wiederholen: Umschließe ein Formular, markiere die kritischen Felder mit data-read-back, und beim Absenden gibt ein Inline-Panel jeden Wert in einer anderen Form wieder als der eingetippten, sodass ein Versehen sichtbar wird, statt im Autopilot bestätigt zu werden. -
RewindExklusiv
<mv-rewind>Eine Zeitmaschine für Formulare: Umschließt einen beliebigen Bereich, zeichnet jede Änderung (gruppiertes Tippen, Checkboxen, Selects, contenteditable) als beschrifteten Rückgängig-Baum auf („Address changed“, „Shipping method: Express“) und zeigt ihn als kompakte Zeitleiste. -
Same AgainExklusiv
<mv-same-again>Wiederkehrende Formulare, die sich an den letzten Durchlauf erinnern: Umschließe ein tägliches Standup, einen Stundenzettel, eine Schichtübergabe, eine Checkliste oder einen Wochenbericht, und jedes Absenden speichert die Antworten mit Datum (Browserspeicher unter einem Schlüssel oder dein Server über die Eigenschaft previous und mv-loop-saved). -
Scrub Field
<mv-scrub-field>Zahlenfeld für Inspektoren: Ziehe sein Label, Icon oder seinen Wert seitwärts, um zu scrubben, mit optionalem Pointer Lock, geschwindigkeitsabhängiger Beschleunigung, einem Badge, das die Änderung zählt, und einer Schiene, die zeigt, wo der Wert in seinem Bereich liegt. -
Search Autocomplete
<mv-search-autocomplete>Shop-Suche mit Autocomplete: beim Fokus letzte Suchen (localStorage, löschbar) und Trend-Chips; beim Tippen (entprellt, veraltete Anfragen abgebrochen, Ladeanzeige) Vorschläge mit akzentunabhängig hervorgehobener Suchanfrage, Kategorien mit Anzahl, Produkte mit Vorschaubild und Preis (Intl, durchgestrichener Vergleichspreis), „See all 42 results for ‘sweater’“; Zustand „No results“; Tastenkürzel; asynchroner Quellen-Hook oder lokaler JSON-Katalog. -
Segmented
<mv-segmented>Segmented Control mit der Semantik einer Radiogruppe, formularfähig: Ein erhabener Griff gleitet mit leichtem Überschwingen zur gewählten Option, Haarlinien trennen die inaktiven Optionen, drei Größen und reine Icon-Optionen, die per Tooltip benannt sind. -
Slosh Slider
<mv-slosh-slider>Ein Slider mit flüssiger Füllung: Der Griff bleibt unter deinem Finger starr, während die Flüssigkeit ihm an einer weichen Feder folgt, gegen die Endanschläge stößt, sich neigt und mit ihrer Geschwindigkeit Wellen schlägt. -
StripsExklusiv
<mv-strips>Kombinatorischer Editor: Ein Ergebnis (Anzeigentext, eine Produktkonfiguration, eine Benachrichtigung, ein Menü) wird aus unabhängigen Streifen zusammengesetzt, gestapelt wie eine in Scheiben geschnittene Seite; jeder Streifen ist ein Slot, dessen austauschbare Alternativen mit einer physischen Blätteranimation einzeln umklappen (Pfeile, vertikales Ziehen oder horizontales Wischen, Tippen und auf dem fokussierten Streifen Mausrad sowie Up/Down/Home/End). -
Swatch
<mv-swatch>Variantenauswahl auf Basis nativer Radiobuttons (oder Checkboxen für Filter): Farbfelder mit Doppelring, Größen-Chips, Produkt-Vorschaubilder; ausverkaufte Optionen durchgestrichen (wählbar oder deaktiviert), ein Label „Color: Sand“ mit Hover-Vorschau und Validierung von Pflichtgruppen mit Schütteln und Meldung. -
Tag InputExklusiv
<mv-tag-input>Chip-Eingabe für Labels, Empfänger, Skills und Stichwörter: Enter, Komma oder Tab fügt hinzu, das Einfügen von „a, b; c“ (oder einer aus einer Tabelle kopierten Spalte) fügt jeden Eintrag einzeln hinzu, Backspace markiert und entfernt dann den letzten Chip, die Pfeiltasten wandern durch die Chips, optional Muster, Limit, Duplikaterkennung ohne Rücksicht auf Groß-/Kleinschreibung und Akzente, die den vorhandenen Chip aufblinken lässt, und native <datalist>-Vorschläge. -
Timeline Scrubber
<mv-timeline>Zeitlineal wie in einem Videoeditor mit bildgenauem Abspielkopf, der beim Scrubben seinen Timecode zeigt, einer Hover-Anzeige, Zoom in Halboktavstufen (Buttons, Tasten, Strg/⌘ + Mausrad oder Pinch), einer Markerspur, In/Out-Griffen, die alles außerhalb des Bereichs abdunkeln, Clips auf Spuren und einer Übersichtsleiste. -
Tone DialExklusiv
<mv-tone-dial>Einstellungen für Persönlichkeit und Tonfall mit sofortiger, konkreter Vorschau, für KI-Assistenten, Chatbots, generierte Texte, den Ton von Benachrichtigungen oder E-Mails, Markenstimme und Support-Makros. -
Trio CheckExklusiv
<mv-trio-check>Stapelprüfung für Quizze, Wissenstests und Zuordnungsübungen, die Raten nutzlos macht: Antworten werden frei eingegeben (deine eigenen Inputs, Selects, Radiobuttons oder Checkboxen mit data-trio-item oder Zeilen, die aus einer items-Eigenschaft mit Textfeldern, Selects und Auswahl-Chips gerendert werden), und die Komponente verrät nie, ob eine einzelne Antwort richtig ist. -
Two-KeyExklusiv
<mv-two-key>Schutz für kritische Aktionen (Produktion löschen, Geld überweisen, Deployen), der nur durch zwei bewusste, synchronisierte „Schlüssel“ scharf geschaltet wird: zwei Schlüsselschalter, deren Zylinder sich federnd um eine Vierteldrehung dreht, und ein geschützter Aktions-Button unter einer Milchglasklappe. -
Vector Field
<mv-vector-field>Kompakte Eingaben für X/Y, X/Y/Z oder W/H in Inspektoren: Jede Achse ist ein Spinbutton, in den du tippen, den du per Tastatur schrittweise ändern oder durch Ziehen an seinem Buchstaben scrubben kannst, mit einer Haarlinie, die zeigt, wo der Wert in seinem Bereich liegt, und einer optionalen Seitenverhältnis-Sperre. Der Wert „x,y“ ist formularfähig. -
Wheel Picker
<mv-wheel-picker>Radauswahl im iOS-Stil: eine 3D-Trommel (rotateX + perspective), die du mit dem Finger anschnippst, mit Schwung und anschließendem Einrasten an der nächsten Kerbe, dazu Mausrad, Tastatur und Direkteingabe. -
Word RulesExklusiv
<mv-word-rules>Editor für Regeln, Filter und Automatisierungen, in dem jede Regel ein Satz aus Wortkacheln ist, die du verschiebst: Subjekte („Order“), Operatoren („is“, „is not“, „over“) und Eigenschaften („late“, „$500“), verkettet mit „and“.
Overlays 12
-
Command
<mv-command>Befehlspalette: akzentunabhängige Fuzzy-Suche (inklusive Schlüsselwörtern), gewichtete und gruppierte Ergebnisse, Tastaturnavigation mit aria-activedescendant; eigenständig oder in einem Dialog, der mit ⌘K geöffnet wird. -
Context Menu
<mv-context-menu>Kontextmenü, das am Zeiger (Rechtsklick), per langem Druck auf Touchscreens oder über die Tastatur (Shift+F10 / Menütaste) geöffnet wird; nutzt die Engine und die Styles von Menu wieder, einschließlich der Animation data-motion="glide". -
Cookie ConsentExklusiv
<mv-cookie-consent>Nicht-modales Cookie-Banner mit gleichgewichtigem Accept all und Reject all und einem Choose-Panel, gespeichert mit einer Richtlinienversion in localStorage und einem First-Party-Cookie; anders als die meisten Banner blockiert es Skripte tatsächlich: <script type="text/plain" data-consent="analytics"> und data-src-Einbettungen laufen erst nach der Einwilligung, einmal, der Reihe nach, mit beibehaltener CSP-Nonce. -
DialogGratis
<mv-dialog>Animiertes natives <dialog>-Modal; deckt auch Alert Dialog (persistent), Sheet (4 Seiten) und einen mobilen Drawer mit Wischen zum Schließen ab. -
Hover Card
<mv-hover-card>Umfangreiche Vorschaukarte bei Hover oder Tastaturfokus, mit Verzögerungen beim Öffnen und Schließen und einer unsichtbaren Brücke, die sie offen hält, während der Zeiger zu ihr wandert. -
MenuGratis
<mv-menu>Voll ausgestattetes Dropdown-Menü: Checkboxen, Radio-Einträge, Untermenüs mit Safe Triangle, Tastenkürzel, Typeahead und Tastaturnavigation nach APG; optional data-motion="glide" (öffnet aus der Ecke des Auslösers, eine einzige Hervorhebung, die zwischen den Einträgen gleitet, hineingleitende Untermenüs). -
PopoverGratis
<mv-popover>Nicht-modales schwebendes Panel im Top Layer (Popover API): automatische Platzierung mit Flip, optionaler Pfeil, schließt bei Klick außerhalb/Escape mit verwaltetem Fokus; Option data-open="liquid", bei der sich das Panel durch einen flüssigen „Hals“ aus dem Auslöser herauszieht und sich beim Schließen wieder in ihn zurückzieht. -
Timed ChoiceExklusiv
<mv-timed-choice>Eine unkritische Abfrage, die eine Wahl mit sichtbar ablaufendem Timer anbietet und eine sichere Voreinstellung übernimmt, wenn niemand antwortet: „Next episode in 8s · Cancel / Play now“, „Keep these display settings? -
ToastGratis
<mv-toaster>Gestapelte Benachrichtigungen im Stil von Sonner: ein kompakter Stapel, der sich beim Hover aufklappt, pausierte Timer, Wischen zum Schließen, Promises und Aktualisierungen an Ort und Stelle per ID, über eine imperative toast()-API. -
Toast PhysicsExklusiv
<mv-toast-physics>Benachrichtigungen, die echte Starrkörper sind: Sie fallen in eine Ablage in der Ecke und stapeln sich unter der Schwerkraft, und Priorität wird zu Masse (ein Fehler ist schwerer und breiter, landet mit einem Aufprall, der die anderen durchrüttelt, und sinkt dann unter leichtere Karten). -
TooltipGratis
<mv-tooltip>Tooltip im Top Layer (Popover API), automatische Platzierung mit Flip, Pfeil, gruppierte Verzögerung. -
Tooltip Group
<mv-tooltip-group>Tooltip, den sich eine Gruppe von Auslösern teilt, etwa eine Toolbar: Nach der ersten Verzögerung gleitet eine einzige Blase von Button zu Button, passt ihre Größe an und blendet ihr Label über, ohne Schließen, erneutes Öffnen oder zweites Warten.
Navigation 16
-
As OfExklusiv
<mv-as-of>Stichtagssteuerung („as of“) für Daten-Apps, die die Vergangenheit anzeigen können, damit historische Zahlen nie für aktuelle gehalten werden. -
Breadcrumb
.mv-breadcrumbBreadcrumb in reinem CSS auf nav > ol: Chevron, Schrägstrich oder Punkt als Trenner (für Screenreader stumm), Icons, Kürzung und eingeklappte Ebenen in einem verankerten nativen Popover. -
CrumbsExklusiv
<mv-crumbs>Eine Spur der Orte, an denen der Nutzer tatsächlich war, für Apps, in denen man zwischen Datensätzen springt (CRM, Support-Desk, Admin-Konsole, Dokumentation, Code-Browser, Backoffice), statt der Position der Seite in der Hierarchie. -
Dock
<mv-dock>Dock im macOS-Stil: Icons wachsen je nach Abstand zum Zeiger (federnd geglätteter Kosinusabfall), Labels beim Hover, Aktivitätspunkt, horizontal oder vertikal, volle Tastaturnavigation. -
Door DialExklusiv
<mv-door-dial>Kontextregler, der dieselben Links, Aktionen und Codebeispiele auf einen anderen Kontext umstellt (Umgebung, Region, Mandant, Doku-Version, API-Basis), ohne die Seite neu aufzubauen. -
Edge TrackerExklusiv
<mv-edge-tracker>Off-Screen-Indikatoren für alles, was der Nutzer in einem Scroll-Container, auf einer langen Seite oder einer verschiebbaren Fläche nicht sieht: ungelesene Nachrichten weiter unten, Formularfehler weiter oben, Erwähnungen, Suchtreffer, ausgewählte Elemente, Cursor von Mitwirkenden. -
Finger HoldExklusiv
<mv-finger-hold>Verzweigender Wizard, in dem jede Entscheidungsseite mit einem „Finger“ festgehalten werden kann: Wähle eine Option, erkunde, wohin sie führt (nächste Fragen, Preis, resultierender Plan), und blättere dann direkt zurück zur festgehaltenen Seite, genau so, wie du sie verlassen hast, Felder inklusive. -
FootprintsExklusiv
<mv-footprints>Live-Präsenz von Mitwirkenden für lange Dokumente, Spezifikationen, Codedateien und Tabellen: eine schmale Leiste neben dem Scroll-Container, in der jede Person ein kleiner beschrifteter Marker ist (Initialen oder Avatar, in der eigenen Farbe) genau an der Stelle, an der sie liest oder bearbeitet, mit ein paar verblassenden Fußspuren, die zeigen, in welche Richtung sie sich bewegt hat: nach unten, nach oben oder mit einem gepunkteten Bogen in einen anderen Abschnitt. -
Inside CountExklusiv
<mv-inside-count>Geschlossene Tabs, Accordions und Seiten, die sagen, was sie enthalten, bevor du sie öffnest. -
Keen SightExklusiv
<mv-keen-sight>Hinweismodus zum Gedrückthalten, mit dem Tastaturnutzer auf alles Sichtbare reagieren können, ohne sich per Tab dorthin durchzuarbeiten. -
Lock-onExklusiv
<mv-lock-on>Räumliche Tastaturnavigation für 2D-Layouts, in denen die Tab-Reihenfolge nutzlos ist (Dashboards mit ungleichen Widgets, Kartenraster, Kanban-Boards, Sitzpläne, Karten mit Markern, Node-Editoren, TV- und Konsolen-UIs), mit einer Zielerfassung, die ein bewegliches Ziel im Blick behält. -
Pagination
<mv-pagination>Nummerierte Paginierung mit Auslassungspunkten und einer konstanten Anzahl von Plätzen (die Leiste springt nie), Zurück/Weiter, ein kompakter Modus „Page x of y“; die CSS-Styles funktionieren auch allein für serverseitig gerenderte Links. -
Smart HeaderExklusiv
<mv-smart-header>Umschließe einen beliebigen Header, um ihn sticky zu machen, beim Scrollen nach unten wegzuschieben und beim Scrollen nach oben zurückzuholen, mit Hysterese, einem Stuck-Zustand und seiner aktuellen Höhe, veröffentlicht für scroll-padding. -
Stepper
<mv-stepper>Horizontale oder vertikale Schritte (abgeschlossen, aktuell, anstehend) mit Verbindungslinien, die sich in der Akzentfarbe füllen, automatischen Nummern, einem animierten Häkchen und einem Ladeschritt; optional <mv-stepper value>, um die Zustände zu steuern. -
TabsGratis
<mv-tabs>Barrierefreie Tabs mit gleitendem Indikator (Unterstrich, Pille oder segmentiert), horizontal oder vertikal, automatische oder manuelle Aktivierung und überblendende Panels. -
Thread BackExklusiv
<mv-thread-back>Ein Rückweg-Faden für tiefe Drill-downs, die von einer Aufgabe wegführen: Knüpfe ihn an einem Ausgangspunkt fest (eine Bezahlung, ein Bericht, ein Onboarding-Schritt) mit tie({ label, href, state, restore }) oder einem data-thread-tie-Link, und jede Navigation danach wickelt ihn Schritt für Schritt wieder ab.
Datenanzeige 56
-
AccordionGratis
<mv-accordion>CSS-Accordion auf nativem <details>: animierte Höhe (::details-content + interpolate-size), Chevron oder Plus/Minus, Varianten mit Rahmen, getrennt und als Karte; optional <mv-accordion type="single">. -
AccountsExklusiv
<mv-accounts>Zeitleiste aus mehreren Quellen, die verschiedene Darstellungen desselben Ereignisses nebeneinanderlegt und Fakt für Fakt zeigt, wo sie übereinstimmen, wo sie sich widersprechen und wo eine Quelle schweigt: Incident-Post-Mortems (Gateway-Logs vs. Zahlungsanbieter vs. Client-Telemetrie vs. Notizen der Rufbereitschaft), Lieferstreitigkeiten (Kunde vs. Lager vs. Spediteur), Audit-Trails, Faktenchecks, Besprechungsnotizen mehrerer Teilnehmender. -
Agent LensesExklusiv
<mv-agent-lenses>Ein Modell für KI-Agenten im Hintergrund, fünf Linsen (Board, Inbox, Tasks, Calendar, Graph), und jeder Agent ist eine dauerhafte Karte, die physisch zwischen den Layouts wandert: Beim Wechsel der Linse animiert FLIP jede Karte von ihrem alten Rechteck zum neuen, während sie sich von der vollen Karte in eine Zeile, einen Zeitbalken oder einen Graphknoten verwandelt, sodass du nie einen Agenten aus den Augen verlierst. -
All-in PriceExklusiv
<mv-all-in>Ehrliche Anzeige des Gesamtpreises, die offen ausspricht, was Drip Pricing verschweigt. -
Animated List
<mv-animated-list>Animierter Benachrichtigungs-Feed: Einträge erscheinen einer nach dem anderen mit Federeffekt und schieben die übrigen sanft weiter (FLIP), mit Eintragslimit, Schleifenmodus und einer add()-API. -
Blocked BlurExklusiv
<mv-blocked-blur>Stummschalten, das die Form des Gesprächs bewahrt. -
ButterflyExklusiv
<mv-butterfly>Auswirkungsvorschau für Einstellungen, Preisformulare, Editoren und tabellenartige Ansichten: Bevor ein Wert geändert wird, leuchtet jeder Wert auf, auf den sich die Änderung auswirkt. -
Calendar
<mv-calendar>Lokalisierter Monatskalender (Intl, die Woche beginnt am ersten Tag der Locale): Einzelauswahl, Zeitraum mit Hover-Vorschau oder Mehrfachauswahl, Min/Max und deaktivierte Daten, volle Tastaturnavigation, Monats- und Jahresansicht und ein gleitender Übergang. -
CardGratis
.mv-cardZusammensetzbare Karte (Medien, Header, Aktion, Inhalt, Footer): Varianten outline, elevated, ghost und muted sowie eine vollständig klickbare Karte. -
Chart
<mv-chart>SVG-Diagramm ohne Abhängigkeiten (Fläche, Balken, Linie, Sparkline): pixelgenaue Darstellung, gerundete Skala, animiertes Einzeichnen beim Erscheinen, Fadenkreuz und Tooltip bei Hover und per Tastatur sowie eine Datentabelle für Screenreader. -
Code BlockExklusiv
<mv-code-block>Umschließt jedes einfache oder bereits hervorgehobene <pre><code> mit Dateiname, Sprachlabel, Kopier-Button, Zeilennummern, hervorgehobenen und Diff-Zeilen, Einklappen und einem Umbruch-Schalter und kopiert genau das, was der Leser braucht: Shell-Prompts, Befehlsausgaben und Diff-Markierungen bleiben außen vor, und Zeilennummern oder Markierungen lassen sich auch von Hand nie markieren. -
Context RingsExklusiv
<mv-context-rings>Macht sichtbar und bearbeitbar, was ein KI-Assistent für die aktuelle Aufgabe „weiß“: drei konzentrische Ringe („This task“ im Zentrum, „Always“ für Vorlieben und Regeln, „Ambient“ für Datenströme: E-Mail, Kalender, Chat) plus eine Ablage „Out of context“. -
CountdownExklusiv
<mv-countdown>Countdown bis zu einem Datum für Launches, Sales, Webinare und Events: Tage, Stunden, Minuten und Sekunden (konfigurierbar) in tabellarischen Ziffern mit korrekten Pluralformen aus Intl, in den Varianten plain, card oder compact. -
CurtainExklusiv
<mv-curtain>„How is this calculated?“ für jede polierte Zahl: Umschließe ein Diagramm, einen KPI, einen Score, einen Preis oder eine KI-Antwort, und ein Griff zieht die Darstellung wie einen Vorhang beiseite (ein Clip-Wipe mit weichem Faltenschatten; eine einfache Überblendung bei reduzierter Bewegung), um auf derselben Fläche die Hintergründe zu zeigen, ohne Layoutsprung. -
DatelineExklusiv
<mv-dateline>Ein zeitzonenbewusster Zeitpunkt oder eine Frist, bei der sich Tagesverschiebungen nicht übersehen lassen. -
DeliberationExklusiv
<mv-deliberation>Gruppenentscheidungen in Runden mit verdeckten Stimmen und sichtbarer Annäherung: Schätzungen (Planning Poker), Go/No-Go-Entscheidungen, Nachbesprechungen von Bewerbungsgesprächen, Design-Kritiken, Priorisierung oder Abstimmungen über Retro-Maßnahmen. -
Delivery TrailExklusiv
<mv-delivery-trail>Macht die Zustellung kritischer Nachrichten Station für Station beobachtbar und verwandelt stille Fehler in laute, behebbare Stockungen: E-Mails zum Zurücksetzen des Passworts und zur Verifizierung, SMS-Codes, Rechnungen, Push-Benachrichtigungen, Webhooks, Anfragen für elektronische Signaturen. -
DorianExklusiv
<mv-dorian>Aktualität von Inhalten auf einen Blick: Umschließe beliebige Inhalte (Kopf einer Doku-Seite, Artikel im Hilfecenter, Preistabelle, Richtlinie), und sie bleiben genau so, wie sie sind, während ein kleines gerahmtes Porträt daneben mit der Zeit seit der letzten Prüfung altert. -
Drift CheckExklusiv
<mv-drift-check>Zeigt Station für Station, wie ein weitergegebener Text von seiner Quelle abgedriftet ist: Anforderungen, die vom Kunden über den Vertrieb und das PM ins Ticket wandern, Zitate, die vom Interview über die Pressemitteilung in den Artikel gelangen, Zusammenfassungen von Zusammenfassungen, weitergeleitete, übersetzte oder von KI umgeschriebene Texte. -
Field GuideExklusiv
<mv-field-guide>Nummeriertes Sammelraster, in dem jeder Eintrag drei Wissensstufen hat, sodass das Fehlende so sichtbar ist wie das Erledigte: unbekannt (ein leerer nummerierter Platz mit gestrichelter Kontur und optionalem Hinweis), gesehen (das Bild zu einer einfarbigen Silhouette abgeflacht, der Name, gesperrte Details und ein Hinweis „how to get it“) und im Besitz (vollfarbige Karte mit Zusammenfassung, Beschreibung, Fakten und einem Call to Action). -
ForkExklusiv
<mv-fork>Was-wäre-wenn-Zeitlinien für jede Ansicht, die von Eingaben gesteuert wird (Kredit- und Preisrechner, Planvergleiche, Konfigurationsvorschauen, Textvarianten): Fork teilt die Ansicht in nebeneinanderliegende Zeitlinien, die identisch beginnen, jede mit eigenen Eingaben, und berechnet die Ausgaben jeder Zeitlinie über deine Funktion compute(state) (synchron oder asynchron) oder einen Callback render(state, body) neu. -
Hold SlotExklusiv
<mv-hold-slot>Fokussierter Player für Arbeitswarteschlangen, der Einträge einzeln abarbeitet (Support-Tickets, Moderation, Code-Reviews, Fotoauswahl, Lead-Qualifizierung, Karteikarten): Der aktuelle Eintrag wird groß angezeigt, eine „Next“-Spalte zeigt die kommenden Einträge (standardmäßig 3, der erste etwas präsenter), und ein einziger Hold-Slot lässt dich den aktuellen Eintrag beiseitelegen, ohne ihn zu verlieren, und später zurücktauschen, aber nur einmal pro Zug (hold-limit), damit nichts ewig hin- und hergeschoben wird. -
InscribeExklusiv
<mv-inscribe>Kritische Notizen, die einem Datensatz überallhin folgen, wo er in der App erscheint. -
LacunaExklusiv
<mv-lacuna>Schrittweises Löschen an Ort und Stelle für Listen und Raster, ein Ersatz für Undo-Toasts, der auch dann funktioniert, wenn du mehrere Dinge nacheinander löschst. -
Lead BoardExklusiv
<mv-lead-board>Ein Ermittlungslog, in dem der einzige Fortschritt das ist, was du weißt: Recherche, Nutzerinterviews, Incident-Untersuchungen, Due Diligence, Fehlersuche, Journalismus. -
Mirror RankExklusiv
<mv-mirror-rank>Ein Ranking, das sich ehrlich selbst erklärt und sagt, was es für einen Aufstieg bräuchte: Bestenlisten (Vertrieb, Mitwirkende), Verkäufer- oder Suchrankings, Kredit-, Gesundheits-, SEO- oder Sicherheitsscores. -
Net ProgressExklusiv
<mv-net-progress>Trennt Bruttoaktivität von Nettofortschritt und macht Umwälzung sichtbar, für Dokumente und Spezifikationen, Code, Designdateien, Modelle, Backlogs, Redaktionspläne oder Verträge in der Verhandlung. -
Odd One OutExklusiv
<mv-odd-one-out>Automatisches Erkennen von Ausreißern in einer Menge von Elementen, die gleich sein sollten: Konfigurationsabweichungen zwischen Servern, Containern oder Umgebungen, Preis- und Bestandsunstimmigkeiten zwischen den Varianten eines Produkts, ein Mitarbeiter, dessen Berechtigungen von denen seiner Kollegen in derselben Rolle abweichen, eine Region, deren Einstellungen abweichen. -
OrigamiExklusiv
<mv-origami>Panels, die sich wie Papier falten. -
PapersExklusiv
<mv-papers>Abgleichspult für mehrere Dokumente in Prüfabläufen (KYC, Rechnung vs. Bestellung vs. Lieferschein, Vertrag vs. Angebot, Formulareinreichung vs. Ausweis). -
PeaExklusiv
<mv-pea>Macht ein winziges Problem, das tief in eingeklappten Ebenen vergraben ist, auf jeder Ebene darüber spürbar. -
Price
<mv-price>E-Commerce-Preis, formatiert mit Intl.NumberFormat (standardmäßig en-US / USD): aktueller Preis, durchgestrichener Vergleichspreis, berechnetes Rabatt-Badge (Prozent oder Betrag), Grundpreis, „From“, Preisspanne, hochgestellte Cents, vier Größen; auch als statisches HTML mit den Klassen .mv-price-* nutzbar. -
Product Card
<mv-product-card>Produktkarte in drei Formaten: Rasterkachel (zweites Bild beim Hover, Badges „New“ / „−20%“, Herz für die Wunschliste, Schnell-Hinzufügen nach Größe mit Bestätigung, Farbfelder, Ausverkauft-Zustand), Warenkorbzeile (Menge, neu berechnete Zeilensumme, animiertes Entfernen) und kompakte Übersichtszeile; barrierefreier Stretched Link, Container Queries. -
Real TermsExklusiv
<mv-real-terms>Zeigt eine Veränderung im Vergleich zu dem, was die Welt im selben Zeitraum getan hat, nicht nur im Vergleich zu null, damit Wachstum, das nur mithält (oder zurückfällt), nie für Fortschritt gehalten wird: Umsatz, Gehälter, Preise, Traffic, Marktanteil, Anlagerenditen. -
Relative TimeExklusiv
<mv-relative-time>„3 minutes ago“, das sich selbst aktuell hält: ein echtes <time datetime> mit Text aus Intl.RelativeTimeFormat („now“, „in 2 days“, „yesterday“ nach Kalendertag, nicht nach 24 h), das ab einer Schwelle zu einem absoluten Datum wechselt, in der Locale des nächstgelegenen lang. -
Reveal OnceExklusiv
<mv-reveal-once>Der vollständige Übergabeschritt für ein Geheimnis, das nur einmal angezeigt werden kann (API-Schlüssel, persönliches Zugriffstoken, Signaturgeheimnis für Webhooks, 2FA-Wiederherstellungscodes, temporäres Passwort, Seed-Phrase einer Wallet), ohne Timer: Der Wert bleibt so lange stehen, wie der Nutzer ihn braucht, aber er kann erst weitermachen, wenn er bestätigt hat, dass er ihn gespeichert hat. -
Scope TallyExklusiv
<mv-scope-tally>Macht das Wachstum des Umfangs gegenüber der ursprünglichen Anfrage sichtbar, für Kundenprojekte und Festpreisangebote, Produktspezifikationen, Sprint-Zusagen, Ausschreibungen und Verträge. -
Self-DestructExklusiv
<mv-self-destruct>Einmalige Anzeige eines Geheimnisses (API-Schlüssel, Wiederherstellungscodes, geteiltes Passwort, temporärer Link), das einmal gezeigt und dann wirklich vernichtet wird. -
SnowballExklusiv
<mv-snowball>Wischauswahl für Raster und Listen (Fotobibliotheken, Dateimanager, Posteingänge, Kataloge): Halte Shift gedrückt (oder eine beliebige andere Modifikatortaste oder keine) und fahre mit dem Zeiger über die Elemente. -
Steady PaceExklusiv
<mv-steady-pace>Zieltempo, das dir die gleichmäßige Rate ab heute nennt, nicht nur einen Prozentsatz: Sparziele, Verkaufsquoten, Lese- oder Lernziele, Spendensammlungen, Sprint-Umfang, Trainingspläne. -
Stone SoupExklusiv
<mv-stone-soup>Beitragsboard für ein gemeinsames Ziel, auf dem der Beitrag jedes Teilnehmenden sichtbar bleibt und das Ganze sichtbar mehr wird als die Summe seiner Teile: Mitbring-Buffets und Event-Anmeldungen („wer bringt was“), Sammelgeschenke im Team, Spendensammlungen, Bounties, Community-Wunschlisten, Schichtabdeckung oder die Kapazität eines Sprints pro Person. -
Table
<mv-table>Tabelle mit CSS-Styles (Hover, Streifen, Dichte, Sticky-Kopfzeile/-Spalte, Status) + optionales <mv-table> zum Sortieren und Filtern. -
Tamper SealExklusiv
<mv-tamper-seal>Manipulationssicherer Notfallzugriff („Glas einschlagen“) auf sensible Daten (eine Patientenakte, eine vollständige Kartennummer oder Sozialversicherungsnummer, ein Gehalt, die privaten Nachrichten eines Kunden, Produktionsgeheimnisse, ein versiegeltes Gebot), der sich öffnen lässt, aber nie heimlich. -
TheseusExklusiv
<mv-theseus>Herkunfts-Overlay, das die Frage beantwortet: „Wie viel davon ist noch das, was wir unterschrieben haben?“. -
Time VaultExklusiv
<mv-time-vault>Ein Tresor für Nachrichten, die jetzt geschrieben und bis zu einem genauen künftigen Zeitpunkt versiegelt werden: ein Datum (data-opens, absolut oder relativ wie „+1y“ nach dem Schreiben) oder eine benannte App-Bedingung („when we launch publicly“, „when MRR passes $10k“), die deine App über vault.check(state) oder das Attribut flags liefert, mit optionalem Fortschritt (0-1 oder „$7.4k of $10k“). -
To ScaleExklusiv
<mv-to-scale>Macht abstrakte Mengen greifbar, indem sie in einem menschlichen Maßstab ausgedrückt werden, den der Leser schon kennt, neben dem unveränderten genauen Wert: 2,4 TB ≈ 800 Stunden HD-Video, 412 t CO₂e ≈ das CO₂, das 7.000 Baumsetzlinge aufnehmen, 9.000 $ ≈ 6 Monatsmieten in Lissabon, 21.600 Bestellungen/Tag ≈ eine Bestellung alle 4 Sekunden, 38 % der Kunden ≈ 2 von 5 Kunden. -
Trend ChipExklusiv
<mv-trend-chip>Der kleine „▲ +12.4% vs last week“-Chip für KPI-Karten, Dashboards, Preistabellen und Berichte: Gib ihm die Änderung (value="0.124") oder zwei Beträge (from / to), und er gibt den Wert mit Vorzeichen über Intl als Prozent, Prozentpunkte, einfache Zahl, beliebige Währung oder beliebige Einheit („−32 ms“) aus, optional mit Zeitraum. -
Trust LadderExklusiv
<mv-trust-ladder>Abgestufte Autonomie, die durch eine Erfolgsbilanz verdient wird, für KI-Agenten, Automatisierungen, Integrationen und neue Teammitglieder gleichermaßen. -
Turn ClockExklusiv
<mv-turn-clock>Turn-Manager mit fairer Redezeit für Standups, Retros, Debatten, Interviews, Podiumsrunden und Rotationen beim Mob-Programming, gebaut wie eine Turnier-Schachuhr: Jeder Teilnehmende hat ein Zeitkonto (gleich oder pro Person angepasst), das nur während des eigenen Zugs abläuft, es läuft immer genau eine Uhr, und die Übergabe des Zugs (großer Pass-Button, Leertaste, eine Zifferntaste oder ein Klick auf die Person) stoppt deine Uhr und startet die nächste, optional mit einem Zeitzuschlag pro Zug. -
UnclaimedExklusiv
<mv-unclaimed>Zuständigkeitsradar für gemeinsame Arbeitslisten: Umschließe eine beliebige Liste, Tabelle oder ein Board mit Dingen, die alle für wichtig halten (Aufgaben aus Meetings, Incident-Nacharbeiten, Retro-Maßnahmen, Bug-Triage, Threads im gemeinsamen Postfach, Alarme ohne Rufbereitschaft, Dokumentationsschulden), und jeder Eintrag mit leerem data-owner bekommt eine ruhige „Nobody yet“-Markierung, einen leeren gestrichelten Platz, wo ein Verantwortlicher sitzen würde, der mit dem Alter sanft präsenter wird (Tönung, Rand und Text werden über das Reifefenster kräftiger; nie rot, nie animiert). -
UnobservedExklusiv
<mv-unobserved>Ein Live-Bereich (Feed, Bestenliste, Orderbuch, Benachrichtigungsliste, mit dem Server synchronisiertes Kanban), der sich nie umsortiert oder verschiebt, während jemand hinsieht. -
UnsourcedExklusiv
<mv-unsourced>Belege auf Ebene einzelner Aussagen für generierte oder lange Texte (KI-Antworten, Support-Antworten, Rechercheberichte, Berichte): Jede Aussage zeigt für sich, direkt an Ort und Stelle, ob etwas sie stützt. -
Variant TreeExklusiv
<mv-variant-tree>Ein verzweigender Variantenexplorer für jedes Element, das über CSS Custom Properties gesteuert wird (oder für jeden Zustand über Callbacks): „Generate 4 variants“ lässt mutierte Kinder der angewandten Variante sprießen (ein Spread-Slider legt fest, wie kühn die Mutationen ausfallen), dargestellt als aufgeräumter Baum aus Live-Vorschaubildern: skalierte, inerte Klone des Ziels, sodass es mit jeder Komponente ohne Screenshots funktioniert. -
WhereaboutsExklusiv
<mv-whereabouts>Team-Statusboard in Form eines Zifferblatts, dessen Zeiger auf das zeigen, was die Leute gerade tun, statt auf die Uhrzeit. -
Whose WordsExklusiv
<mv-whose-words>Offenlegung der Urheberschaft für Texte gemischter Herkunft: KI-gestützte Entwürfe, gemeinsam geschriebene Dokumente, zitierte Passagen, E-Mails aus Vorlagen und Übersetzungen. -
Yet To ComeExklusiv
<mv-yet-to-come>Eine Kennzahl, erzählt als dreiteilige Geschichte, gebaut, um zu verändern, was als Nächstes passiert: Past (Sparkline, Veränderung über den Zeitraum und der größte Sprung oder Einbruch mit Anmerkung), Now (aktueller Wert, Delta zum vorherigen Zeitraum, Trend pro Zeitraum) und Ahead (wo die Kennzahl landet, wenn der aktuelle Trend anhält, mit einem klar beschrifteten Unsicherheitsband, das heute null ist und mit jedem Zeitraum breiter wird).
Feedback 35
-
Alert
.mv-alertHinweisboxen in reinem CSS (neutral, info, success, warning, danger) mit Icon, Titel, Beschreibung und Aktionen, die bei geringer Breite unter den Text umbrechen, ein Banner über die volle Breite und ein optionales animiertes Schließen mit wenigen Zeilen JS. -
Alert PhaseExklusiv
<mv-alert-phase>Ein Incident-Status, dessen Schweregrad mit der Zeit abklingt, statt zwischen Rot und Grün hin- und herzuspringen. -
Announcement BarExklusiv
<mv-announcement-bar>Schmale Leiste oben auf der Website für Launches, Sales, Wartungshinweise und Feature-Teaser, mit einem Dismiss-Button, der pro id-key in localStorage gespeichert wird (eine neue Kampagnen-ID erscheint wieder), einem optionalen until-Datum, das sie von selbst zurückzieht, den Tönen info, accent und warning und Platz für einen per Slot eingefügten Countdown. -
Bench SyncExklusiv
<mv-bench-sync>Local-first-Sync-Status, der ausstehende Änderungen sichtbar macht und sie erst in Ruhepausen überträgt. -
Cry WolfExklusiv
<mv-cry-wolf>Schutz vor Alarmmüdigkeit für Benachrichtigungszentren und Monitoring-Konsolen: Er zeigt Alarme nicht nur an, sondern entscheidet, welche eine Unterbrechung verdienen. -
Deep PauseExklusiv
<mv-deep-pause>Stimmige Pause für ein ganzes Objekt (der Urlaubsmodus eines Onlineshops, ein Abo, ein Workspace, eine Integration, eine Werbekampagne, jemand, der in Urlaub geht) statt eines bloßen An/Aus-Schalters. -
Deja VuExklusiv
<mv-deja-vu>Markiert sofort und direkt an Ort und Stelle die Änderungen, die das System hinter dem Rücken des Nutzers vorgenommen hat, nie die, die er selbst verursacht hat. -
Empty
.mv-emptyLeerer Zustand in reinem CSS: eine Icon-Kachel über auslaufenden Ringen oder einem Raster, Titel, Beschreibung, Aktionen und Footer; kompakte (Listen, Tabellen) und illustrierte Varianten (aufgefächerte Karten über einem Punktmuster). -
Env MarkerExklusiv
<mv-env-marker>Umgebungsanzeige, durch die eine Nicht-Produktionsumgebung nie mit der Produktion verwechselt werden kann. -
FigurinesExklusiv
<mv-figurines>Anzeige der verbleibenden Versuche, die ein kleines, hartes Limit vor einer Sperre greifbar macht: Versuche für Code, PIN oder Passwort, erneute Zahlungsversuche, Antwortversuche, kostenlose Exporte. -
Ghost RunExklusiv
<mv-ghost-run>Fortschritt gegenüber deinem eigenen letzten Versuch, für Aufgaben, die man wiederholt: Ein durchscheinender Geist spielt deinen besten Durchlauf (oder deinen letzten, oder den eines Teammitglieds oder den Teammedian, von der App geliefert) in Echtzeit auf derselben Strecke ab, sodass du jederzeit siehst, ob du vorn oder hinten liegst. -
HatchExklusiv
<mv-hatch>Totmannschalter für den Sitzungsablauf: ein dezenter Countdown-Chip (tabellarische Ziffern, die wie ein mechanisches Zählwerk rollen), den jemand bewusst zurücksetzen muss, bevor er null erreicht. -
Honest WaitExklusiv
<mv-honest-wait>Eine Anzeige für lange Wartezeiten, die nie etwas vortäuscht, für Exporte, Video-Renderings, KI-Generierung, Berichtserstellung, Provisionierung, Warteschlangen und Uploads über langsame Verbindungen. -
InsistExklusiv
<mv-insist>Schrittweise Hinweise, die nur erscheinen, wenn der Nutzer feststeckt, und umso direkter werden, je länger er sich abmüht. -
LeitmotifExklusiv
<mv-leitmotif>Optionale Audiosignale, die du erkennst, ohne hinzusehen, für Bildschirme, die man nebenbei beobachtet: Ops-Konsolen, Support-Warteschlangen, Trading-Desks, Chat, Küchendisplays, CI-Dashboards. -
LookalikeExklusiv
<mv-lookalike>Erkennung von Doppelgängern für alles, was vorgibt, jemand zu sein, dem du vertraust: Umschließe E-Mails, Chat-Threads, Formulare oder Einfügeziele, gib ihr deine vertrauenswürdigen Identitäten (trusted="Acme Bank <acme-bank.com>, @stripe.com, @northwind, Payroll <DE89 3704 …>"), und jeder Link, Absender, jede E-Mail-Adresse, jedes @Handle, jeder Paket- oder Benutzername, jede IBAN und Wallet-Adresse in ihrem Bereich, einschließlich reinem Text und Feldern beim Tippen oder Einfügen, wird damit verglichen. -
MidnightExklusiv
<mv-midnight>Ein sichtbarer, zeitlich begrenzter Modus mit erhöhten Rechten (erneute sudo-/Admin-Authentifizierung, „als Kunde ansehen“, temporärer Freigabezugriff, eine Premium-Testphase, Notfallzugriff, eine Bearbeitungssperre), der pünktlich endet und alles wiederherstellt. -
Pixel Loader
<mv-pixel-loader>Denkanzeigen im Punktmatrix-Stil auf einem winzigen Pixelraster (3×3 bis 9×9) in currentColor: Schlange, Orbit, konzentrische Welle, Scan, Spirale, Atmen, Funkeln oder diagonale Welle, mit optionalem Label, über das ein hellerer Streifen läuft. -
Progress
.mv-progressFortschrittsbalken auf dem nativen <progress> (determiniert mit Glanz, indeterminiert mit Schwenk, segmentiert), ein kreisförmiger SVG-Ring, gesteuert über --value, mit animiertem Zähler, und eine <meter>-Anzeige, die nach ihren Schwellenwerten eingefärbt wird. -
Quiet AlarmExklusiv
<mv-quiet-alarm>Ein Abwesenheitsdetektor: Er schlägt Alarm, wenn etwas, das normalerweise passiert, nicht mehr passiert (Bestellungen, Webhooks, WebSocket-Nachrichten, Sensorwerte, Logzeilen). -
RechargeExklusiv
<mv-recharge>Ein sichtbares Budget für Rate-Limits und Kontingente (Token Bucket) für alles, was gemessen wird: KI-Nachrichten, API-Aufrufe, erneutes Senden von SMS-Codes, Sammelaktionen, Guthaben im Gratis-Tarif. -
RememberedExklusiv
<mv-remembered>Legt die bleibenden Nebenwirkungen einer Entscheidung in dem Moment offen, in dem sie getroffen wird, ohne zu unterbrechen. -
Run ContractExklusiv
<mv-run-contract>Ein Ausführungsvertrag für lange KI-Aufgaben, der zum Live-Dashboard desselben Jobs wird: eine Karte, zwei Leben. -
Saved StateExklusiv
<mv-saved-state>Statuszeile fürs automatische Speichern (Unsaved changes · Saving… · Saved · 2 minutes ago · Offline · Couldn’t save · Retry), gesteuert über saving() / saved() / failed() oder track(promise) oder indem man sie auf ein Formular richtet. -
SkeletonGratis
.mv-skeletonLade-Platzhalter mit einem über die ganze Seite synchronisierten Schimmer (oder einem Puls), Formen für Text, Überschrift, Avatar, Medien und Button und eine unscharfe Überblendung in den geladenen Inhalt, gesteuert über aria-busy. -
Skeleton MorphExklusiv
<mv-skeleton-morph>Das Skeleton macht dem Inhalt nicht Platz, es wird zu ihm: Jeder Block wird mit einem echten Element gepaart (data-skeleton-for, dann Art, Reihenfolge und Geometrie) und wandert zu ihm. -
Soft LockExklusiv
<mv-soft-lock>Weiche Sperren und Kollisionswarnungen für Datensätze, die mehrere Personen (oder Tabs) gleichzeitig ändern können: Rechnungen, Tickets, Dokumente, Konfigurationsseiten, Sammeloperationen. -
Spinner
.mv-spinnerEine Familie von Ladeanzeigen aus einem einzigen Element, gezeichnet in currentColor: Ring, nachlaufender Bogen, Wellenpunkte, Equalizer-Balken, Orbit und Puls; 5 Größen. -
Tell-TaleExklusiv
<mv-tell-tale>Anzeige für ungespeicherte Arbeit, deren Nachdruck mit dem wächst, was auf dem Spiel steht. -
Thinking Orb
<mv-thinking-orb>KI-Assistenten-Kugel auf Canvas: ein glänzender Blob, der sich je nach Zustand verformt, verwirbelt und sein Material wechselt (idle, listening, thinking mit kreisenden Satelliten, speaking, success, error), mit weichen Übergängen zwischen den Zuständen. -
TremorExklusiv
<mv-tremor>Unaufdringliche Frühwarnung für ein Limit, das näher rückt, für die Fälle, in denen ein Banner oder ein Modal zu viel wäre: Speicher oder Kontingent, das sich füllt, ein Budget nahe seiner Obergrenze, aufgebrauchtes Prepaid-Guthaben, eine wachsende Warteschlange, ein Zertifikat, ein Sprint oder eine Frist, die näher rückt. -
Understood AsExklusiv
<mv-understood-as>Zeigt direkt neben der Antwort, wie eine Freitextanfrage verstanden wurde, damit niemand einem Ergebnis vertraut, das für die falsche Frage berechnet wurde: „Showing results for [Net revenue] · [EU countries] · [Q2 2026 ?] · [Excluding refunds]“. -
While AwayExklusiv
<mv-while-away>„While you were away…“: Umschließt einen beliebigen Bereich (Dashboard, Feed, Board), bemerkt, was sich geändert hat, während du woanders warst (verborgener Tab oder Inaktivität), und bringt dich in 3 Sekunden zurück in den Kontext. -
Why NotExklusiv
<mv-why-not>Erklärbare Ablehnung: kein „Nein“ ohne Begründung und einen Weg nach vorn. -
WobbleExklusiv
<mv-wobble>Vorschau der Auswirkungen des Entfernens, die die Hürde beim Löschen, Archivieren, Deaktivieren, Widerrufen oder Depublizieren an dem ausrichtet, was wirklich von dem Element abhängt.
Layout 10
-
AttacheExklusiv
<mv-attache>Formbewusster Editor zum Packen in ein Raster: Jedes Kind belegt w × h Zellen eines festen Rasters (Dashboard-Widgets, Sticker auf einem Druckbogen, Kisten in einem Regal, Tische in einem Raum), und das Raster zeigt auf einen Blick, was passt und was nicht. -
Bento Grid
.mv-bentoBento-Grid in reinem CSS: Karten über mehrere Spalten/Zeilen (data-span="2x1"…), ein auslaufender Bildbereich, Titel, Beschreibung und ein Call to Action, der beim Hover erscheint; passt sich an die Größe seines Containers an. -
Carousel
<mv-carousel>Karussell auf Basis von nativem Scroll Snap: Pfeile, per IntersectionObserver synchronisierte Punkte, Tastatur, Endlosschleife, Autoplay mit Fortschrittspunkt (pausiert bei Hover, Fokus und reduzierter Bewegung), mehrere Slides pro Ansicht, vertikaler Modus und Ziehen mit der Maus. -
CourtyardExklusiv
<mv-courtyard>Monitoring-Wand, die alle Feeds gleichzeitig beobachtet und dir sagt, wohin du schauen sollst: Beliebige Kinder (Live-Statistiken, Video, Standbilder von Kameras, CI-Jobs, Bildschirme von Lernenden) werden zu „Fenstern“ in einem automatischen Raster, und jedes meldet Aktivität über ein anhaltendes data-activity-Level, einzelne Aufrufe von activity(window, level, note) oder die Änderung des eigenen DOM nach einer ruhigen Phase (MutationObserver, gebündelt, sodass eine gleichmäßig tickende Kachel ruhig bleibt und nur Neues hervorsticht). -
FogExklusiv
<mv-fog>Schrittweises Entdecken für dichte Oberflächen (Admin-Konsolen, Profi-Tools, Analyse-Apps mit vielen Panels, tiefe Einstellungen): Jeder mit data-fog markierte Bereich, den der Nutzer noch nicht erkundet hat, liegt unter einem leichten, strukturierten Schleier (ein Dunst in der Seitenfarbe, weiche Wolkenflecken, eine leichte Entsättigung und ein feines Korn, alles CSS, kein Canvas) mit einem winzigen Tag „Not explored yet · Automations“, während sein Inhalt lesbar, anklickbar und für assistive Technologien vollständig zugänglich bleibt. -
MarginaliaExklusiv
<mv-marginalia>Responsive Randnotizen für lange Inhalte (Dokumentation, Artikel, Rechtstexte, Changelogs, Forschungsberichte), bei denen jede Notiz selbst entscheidet, ob der Rand sie aufnehmen kann. -
Marquee
<mv-marquee>Endloses Laufband für Logos, Testimonials oder Karten: Geschwindigkeit in px/s unabhängig von der Inhaltsgröße, horizontal oder vertikal, Ziehen mit Trägheit, Randverlauf und eine geneigte 3D-Variante. -
Orbiting Circles
<mv-orbit>Elemente, die um ein Zentrum kreisen: mehrere Ringe (Radius, Dauer, Richtung), gleichmäßige Abstände, Icons, die aufrecht bleiben, gezeichnete Bahnen; 100 % CSS-Animation, pausiert außerhalb des sichtbaren Bereichs. -
Resizable
<mv-resizable>Horizontale oder vertikale größenveränderbare Panels (verschachtelbar), getrennt durch Griffe: Ziehen mit dem Zeiger, Pfeiltasten, Min-/Max-Größen in %, Einklappen per Doppelklick mit Einrasten, gespeichert in localStorage. -
Scroll Area
.mv-scroll-areaScrollbereich mit schmaler Scrollbar, automatischem Ausblenden, scrollgesteuerten Randverläufen und Einrasten.
Animierter Text 23
-
Adaptive InkExklusiv
<mv-adaptive-ink>Text, der auf jedem animierten Hintergrund lesbar bleibt (WebGL-Shader, Video, Canvas, Bild): Der Hintergrund wird unter jedem Wort in Echtzeit abgetastet, in Spalten geschnitten, und jede Spalte wählt mit einer Überblendung eine helle oder dunkle Tinte: Ein einzelner Buchstabe kann halb weiß, halb schwarz sein. -
CertaintyExklusiv
<mv-certainty>Text, dessen Passagen jeweils eine Konfidenzstufe tragen (KI-Antwort, Zusammenfassung, Bericht), ruhig dargestellt, damit Leser ihr Vertrauen kalibrieren können, ohne eine Wand aus Warnungen: drei Stufen (Verified ohne Markierung, Likely mit gepunkteter Unterstreichung, Uncertain mit einer handgezeichneten Welle, deren Amplitude mit dem Zweifel wächst) und eine Tinte, die mit sinkender Konfidenz heller wird. -
Circular Text
<mv-circular-text>Rotierender Textring um ein Icon, Logo oder Avatar, entlang eines echten SVG-Kreises gezeichnet, sodass die Schrift ihr Kerning behält und sich die Schleife gleichmäßig schließt; Hover oder Fokus lässt die Drehung sanft schneller, langsamer, zum Stillstand oder rückwärts laufen. -
Falling Text
<mv-falling-text>Text, in dem jedes Wort zu einer starren Box wird: Sobald ausgelöst (Sichtbarkeit, Klick, Hover), stieben die Wörter vom Auslösepunkt weg, überschlagen sich, prallen ab und türmen sich am Boden des Blocks auf, danach lassen sie sich greifen und werfen; Tastaturnutzer lösen den Haufen mit Enter aus und schütteln ihn. -
Glitch Text
.mv-glitch-textRGB-Split-Glitch in reinem CSS: Schmale magenta- und cyanfarbene Streifen des Textes springen in kurzen Schüben seitwärts, dauerhaft oder beim Hover, begrenzt auf weniger als drei Blitze pro Sekunde. -
Gradient Text
.mv-gradient-textMehrfarbiger Verlaufstext in reinem CSS: statisch, hin und her animiert, auslaufend im Editorial-Stil oder als Polarlicht aus farbigen Flecken, die in den Buchstaben treiben. -
Letter Swap
<mv-letter-swap>Rolleffekt pro Buchstabe für Navigationslinks und Buttons: Bei Hover oder Tastaturfokus rollt jeder Buchstabe weg und gibt seinen Zwilling frei, als Kaskade, oder dreht sich als kleiner 3D-Würfel. -
Morphing Text
<mv-morphing-text>Wörter, die ineinander verschmelzen: Zwei gestapelte Kopien verwischen sich gegenseitig, während ein SVG-Filter mit Alpha-Schwelle die Glyphen zu einem „gooey“-Blob verschmilzt. -
Number Ticker
<mv-number-ticker>Animierter Zähler, formatiert mit Intl (standardmäßig en-US: Währung, Prozent, kompakt, Dezimalstellen) in zwei Modi: sanfte Interpolation oder rollender Kilometerzähler; animiert bei jeder Wertänderung neu, ohne Layoutverschiebung. -
Particle CounterExklusiv
<mv-particle-counter>Eine KPI-Zahl, gezeichnet als Punktmatrix aus Partikeln: Ändert sich der Wert, zerfallen die Partikel der geänderten Ziffern, fliegen los und werden den Punkten der neuen Ziffern zugewiesen (erhalten: überzählige verschmelzen, fehlende spalten sich von den anderen ab), mit einem grünen Aufblitzen nach oben und einem roten nach unten. -
Particle Text
<mv-particle-text>Text aus Tausenden Canvas-Partikeln, abgetastet aus der eigenen Schrift des Elements: Sie gleiten von links nach rechts an ihren Platz, fliehen vor dem Zeiger und federn zurück, stieben beim Klick auseinander und strömen zum neuen Wort hinüber, wenn sich der Text ändert, eingefärbt von einem Verlauf, den sie durchwandern. -
Rolling Text
<mv-rolling-text>Hover-Label, das Buchstabe für Buchstabe von links nach rechts nach oben rollt und wieder landet oder ein zweites Label von unten landen lässt, mit leichter Unschärfe im Übergang und einer Grundfläche, die auf das längere Label fixiert ist; Glide-Variante: Ein Marker gleitet zwischen den Satzteilen eines Satzes. -
Scramble Text
<mv-scramble-text>Decodier-Effekt: Zufällige Glyphen lösen sich in den echten Text auf (vom Anfang, vom Ende, von der Mitte aus oder zufällig), beim Erscheinen, bei Hover oder Fokus. -
Scroll Text
<mv-scroll-text>Absatz, dessen Wörter (oder Buchstaben) beim Scrollen nach und nach aufleuchten, von blass und unscharf zu scharf; scrollgesteuerte CSS-Animationen, JS-Fallback. -
Shimmer Text
.mv-shimmer-textLichtschimmer in reinem CSS, der über Text gleitet (background-clip): ein „New“-Badge, KI-Zustände „thinking…“ mit animierten Punkten und eine Puls-Variante. -
Show MoreExklusiv
<mv-show-more>Kürzt lange Inhalte auf wenige Zeilen (oder eine Höhe, bei gemischten Inhalten) hinter einem weichen Verlauf und einem „Show more“-Schalter, den es nur gibt, wenn wirklich etwas abgeschnitten ist, neu geprüft bei Größenänderung sowie beim Laden von Bildern und Schriften; der verborgene Text bleibt für Screenreader und die Seitensuche lesbar, Tab oder ein #Link dorthin öffnet ihn an Ort und Stelle, und beim Einklappen wird der Schalter fixiert, damit die Seite nie springt. -
Sparkles Text
<mv-sparkles-text>Winzige funkelnde Sterne, die zufällig rund um den Text und darüber aufblitzen; einstellbare Farben, Dichte und Geschwindigkeit, ausgelöst beim Erscheinen oder beim Hover. -
Text Highlight
<mv-text-highlight>Hebt Wörter hervor, sobald sie in den Viewport kommen: ein Markerstrich, der über die Zeilen gleitet, oder eine handgezeichnete Anmerkung (Unterstreichung, Kreis, Kasten, Durchstreichung), Strich für Strich gezeichnet. -
Text Reveal
<mv-text-reveal>Text-Reveal, aufgeteilt in Buchstaben, Wörter oder Zeilen, mit 6 gestaffelten Presets (fade, blur, slide, 3D rotate, zoom, mask), ausgelöst beim Eintritt in den Viewport; Inline-Markup bleibt erhalten. -
Typewriter
<mv-typewriter>Schreibmaschine für Hero-Zeilen: Tippt Sätze Buchstabe für Buchstabe mit unregelmäßigem Rhythmus und Pausen bei Satzzeichen, löscht sie und wechselt sie ab, hinter einem Balken-, Block- oder Unterstrich-Cursor, in einer Box, die auf ihre endgültige Größe reserviert ist, sodass sich nichts drumherum bewegt. -
Variable Proximity
<mv-variable-proximity>Buchstaben schwellen entlang der Achsen einer variablen Schrift an (Strichstärke, Breite, jede eigene Achse), wenn sich eine Maus oder ein Stift nähert, mit einem Radius in em und linearem, exponentiellem oder gaußschem Abfall; die Buchstabenpositionen werden in Ruhe zwischengespeichert, damit das Feld nie zittert, und statische Schriften weichen auf einen Skalierungseffekt aus. -
Wind TextExklusiv
<mv-wind-text>Text, dessen Buchstaben sich wie Gras (oder eine Fahne) in einem einzigen Windfeld verhalten, das die ganze Seite teilt: Scrollen schickt Böen, deren Front in Scrollrichtung über den Text fegt, der Cursor bläst lokal auf einem advektierten Geschwindigkeitsgitter, das sich auflöst, jeder Buchstabe biegt sich an seiner eigenen Feder um seine Grundlinie, und ein paar Pollenkörner heben ab, wo immer der Wind weht. -
Word Rotate
<mv-word-rotate>Rotierendes Wort im Fließtext für Hero-Sätze (Slide, 3D-Flip, Blur oder Fade, Buchstabe für Buchstabe), dessen Breite gleitet, damit der Satz nie springt.
Hintergründe 11
-
Aurora Background
<mv-aurora-background>CSS-Aurora aus einer Klasse: Weiche Lichtfalten mit scharfen senkrechten Strahlen treiben und atmen in zwei gegenläufigen Ebenen (oder als große wandernde Flecken), dezent im hellen Modus und leuchtend im dunklen, mit einem optionalen Element, das einen Schein hinzufügt, der einer Maus oder einem Stift nachgleitet. -
BackdropExklusiv
.mv-backdropHero- und Sektionshintergründe aus einer Klasse und null JavaScript: die Presets glow, mesh, aurora-still, grid-fade, dots-fade, rays, topo und grain, kombinierbar (data-backdrop="mesh grain") und aus den Marken-Tokens gebaut, sodass sie hell, dunkel, [data-theme]-Teilbäumen und dem Akzentfarbton der App folgen. -
Beams
<mv-beams>Lichtstrahlen auf einem Canvas: Kometen mit verblassenden Schweifen rasen über Kurven, die in der oberen rechten Ecke zusammenlaufen, oder Strahlen fallen immer schneller und zerstieben in Funken auf einem leuchtenden Boden. -
Dot Matrix
<mv-dot-matrix>WebGL-Raster aus quadratischen Punkten: Beim Laden schalten sie sich mit einem kurzen Funken von der Mitte nach außen ein, dann würfelt jeder Punkt zu eigenen zufälligen Zeitpunkten seine Helligkeit neu aus und sorgt so für ein ruhiges Flackern, einige Akzentpunkte atmen heller, und um den Zeiger öffnet sich eine lebhaftere Zone. -
Dot Pattern
<mv-dot-pattern>Punktmuster in reinem CSS (auslaufend, versetzt) plus eine lebendige Canvas-Version: funkelnde Lichthöfe mit Leuchten beim Hover oder eine konzentrische Welle, die der Cursor mit elastischer Rückkehr wegdrückt. -
Grid Pattern
<mv-grid-pattern>Hintergrundraster in reinem CSS (durchgezogene oder gestrichelte Linien, hervorgehobene Zellen, radiales Auslaufen) plus ein animiertes Element: Flackern, Zellen, die unter dem Cursor mit einer Spur aufleuchten, und eine Welle beim Klick sowie ein Retro-Boden in Perspektive. -
Light Rays
.mv-light-raysGöttliche Lichtstrahlen, die von oben fallen, in reinem CSS: zwei Fächer aus unscharfen konischen Verläufen, die langsam schwanken und pulsieren, mit einem Leuchten am Ursprung. -
Mesh Gradient
<mv-mesh-gradient>Animierter WebGL-Mesh-Verlauf: Drei weiche Farbbänder wandern auf einer geneigten, sich faltenden Fläche über eine Grundfarbe, gemischt in Oklab, damit kontrastierende Markenfarbtöne nie in einem schlammigen Fleck aufeinandertreffen; optional neigt sich die Fläche zum Zeiger. -
Meteors
<mv-meteors>Diagonaler Meteorschauer mit leuchtenden Schweifen: 100 % CSS-Animation; das JS verteilt nur die Sternschnuppen und wechselt bei jedem Durchgang ihre Bahn. -
Particles
<mv-particles>Partikel auf Canvas, die treiben und funkeln, vom Cursor weggedrückt oder angezogen, mit elastischer Rückkehr; ein optionaler Sternbildmodus verbindet Nachbarn und den Zeiger. -
Still TimeExklusiv
<mv-still-time>Regler für Umgebungsbewegung: Umschließe einen beliebigen Bereich, und jede Animation darin (CSS-Keyframes, CSS-Transitions, Web Animations, stummgeschaltete Videos) läuft nur so schnell, wie der Nutzer aktiv ist.
Cursor 9
-
Busy CursorExklusiv
<mv-busy-cursor>Lokales „bitte warten“ für einen Bereich (eine Tabelle, die neu lädt, ein Diagramm, das neu rechnet, ein Panel, das speichert): Solange er beschäftigt ist, fährt ein winziger Ring neben dem Systemcursor mit, mit unbestimmtem oder echtem Fortschritt, der Bereich erhält cursor: progress und aria-busy, und Klicks können zurückgehalten und dann einmal wiederholt oder mit einem Schütteln verworfen werden. -
Cursor Follower
<mv-cursor>Eigener Cursor: ein präziser Punkt und ein Ring, der federnd folgt, sich mit der Geschwindigkeit streckt, über interaktiven Elementen wächst und ein Label zeigt (data-cursor="View"), mit einer Variante im Difference-Blend; auf einen Bereich oder die ganze Seite begrenzt. -
Cursor SnapExklusiv
<mv-cursor-snap>Premium-Zeigereffekt, der den System-Cursor behält: Eine weiche Fläche verwandelt sich in den Link oder Button unter dem Zeiger (seine Box und sein Eckenradius), gleitet sanft hinein, neigt sich leicht zum Zeiger und wandert zwischen den Zielen. -
Cursor Type
<mv-cursor-type>Ein großes Wort (eine 404, ein Stichwort), dessen Buchstaben auf einen präzisen Zeiger reagieren, jeder an seiner eigenen Feder: ein anschwellendes variables Gewicht, elastisches Strecken von der Grundlinie, beiseitegeschobene Buchstaben, die sich dabei neigen, oder eine Lupe im Dock-Stil, die die Nachbarn auseinanderschiebt. -
ForeseeExklusiv
<mv-foresee>Sagt anhand der Zeigerbahn voraus, welches Steuerelement der Nutzer gleich anklicken wird, noch vor dem Klick, und führt Buch über die eigene Trefferquote. -
Image Trail
<mv-image-trail>Bilderspur für Maus und Stift: Alle paar Dutzend Pixel entlang des Zeigerpfads fällt das nächste Kindbild genau auf den Pfad, wird vom Schwung des Strichs ein Stück mitgetragen und schrumpft dann weg, sodass schnelle Striche gleichmäßig verteilte Abdrücke hinterlassen; Varianten mit Drehung und Fallen. -
Magnetic
<mv-magnetic>Magnetischer Wrapper: Das Kindelement neigt sich mit sanftem Abfall zu einer nahen Maus, folgt ihr beim Hover ein wenig und federt dann zurück. -
Reading RulerExklusiv
<mv-reading-ruler>Leseführung für lange Texte (AGB, Artikel, Dokumentation), die Lesern mit Legasthenie, ADHS oder Sehschwäche hilft, die Stelle zu halten: Ein Band von genau einer Zeile Höhe rastet an den echten Zeilenboxen des Texts unter dem Zeiger ein, der Rest wird sanft abgedunkelt (Band, Maske oder Unterstreichung). -
Reveal Mask
<mv-reveal-mask>Weicher Kreis, der einem feinen Zeiger folgt und eine zweite Ebene freilegt, mit optionaler verblassender Spur; Touch-Taps, Tastaturfokus und revealed öffnen ihn wie eine Irisblende, und bei reduzierter Bewegung wird er eingeblendet.
Scrollen 11
-
Back to TopExklusiv
<mv-back-to-top>Schwebender Zurück-nach-oben-Button, der erst erscheint, wenn der Leser weit unten auf der Seite ist und nach oben scrollt oder innehält, nie beim Weiterlesen nach unten, mit optionalem… -
Container Scroll
<mv-container-scroll>Ein Gerätebildschirm, der sich mit einem Glanz auf dem Glas zurücklehnt, sich dann aufrichtet, zur Ruhe kommt und den Glanz verliert, während er ins Bild scrollt und der Titel an seinen Platz aufsteigt. -
Drag ScrollExklusiv
<mv-drag-scroll>Umschließt jede seitlich überlaufende Tabelle, Kartenleiste, Zeitleiste oder jedes Board, sodass Mausnutzer es sehen und bedienen können: Randverläufe und ein „More“-Hinweis nur an verdeckten Seiten, Greifen und Ziehen mit Schwung, das normale Mausrad seitwärts umgelenkt, optionale Blätter-Buttons. -
Parallax
<mv-parallax>Geschichtete Scrolltiefe ohne Einrichtung: Markiere ein beliebiges Nachfahrenelement mit data-speed, und es driftet in seinem eigenen Tempo, während der Abschnitt seinen Scroller durchquert, bewegt von einer nativen View Timeline abseits des Main Threads, mit einem leichten JS-Fallback, der nur sichtbare Elemente bewegt. -
Reading MapExklusiv
<mv-reading-map>Eine Live-Minimap eines Artikels, aufgebaut aus seinem DOM statt aus einem Screenshot: Jede Textzeile (mit ihrer echten Länge), Überschrift, jeder Aufzählungspunkt, jedes Bild, jede Tabelle und Codezeile wird zu einer abstrakten Form. -
Scroll Progress
<mv-scroll-progress>Lesefortschrittsanzeige: ein Balken in reinem CSS am oberen Seitenrand (Scroll Timeline) oder ein Balken- / Ring-Element mit Prozentangabe, das jedem scrollenden Container folgt, optional mit federnder Glättung. -
Scroll Reveal
<mv-reveal>Einblenden beim Scrollen: Kinder werden gestaffelt eingeblendet, aus der Unschärfe geholt, eingeschoben oder herangezoomt, einmal oder jedes Mal; eine Variante in reinem CSS wird über eine View Timeline gesteuert. -
Scroll Stack
<mv-scroll-stack>Sticky-Karten, die sich beim Scrollen stapeln: Jede neue Karte rastet ein, während die darunter einen Schritt zurückweichen (kleiner, dunkler), scrollgesteuert, wo unterstützt, Fokus legt verdeckte Karten frei, eine einfache Liste bei reduzierter Bewegung. -
Scroll Velocity
<mv-scroll-velocity>Zeilen mit großem Text, die endlos scrollen; ihre Geschwindigkeit und Richtung folgen der (federnd geglätteten) Scrollgeschwindigkeit, und bei schnellem Scrollen neigt sich der Text. -
Sticky Scroll
<mv-sticky-scroll>Scrollytelling-Sektion: Schritte hängen an einer Fortschrittsschiene, die sich beim Scrollen kontinuierlich füllt (Knoten erledigt / aktiv / anstehend), während das fixierte Panel entlang einer einzigen, richtungsabhängigen Naht zwischen den Visuals wechselt und eine segmentierte Anzeige den aktuellen Schritt verfolgt; auf Mobilgeräten untereinander gestapelt. -
Tracing Beam
<mv-tracing-beam>Zeitleisten-Schiene neben einem Artikel oder Changelog: Die Spur füllt sich mit dem Lesefortschritt, und jeder Abschnittsknoten leuchtet auf, wenn der Strahl ihn passiert, gesteuert von einer nativen View Timeline mit leichtem JS-Fallback.
Medien 9
-
Blur UpExklusiv
<mv-blur-up>Umschließt ein natives <img> (Lazy Loading, srcset, sizes, alt und <picture> bleiben unangetastet): hält sein Seitenverhältnis, sodass nichts springt, zeigt ein unscharfes Mini-Bild, die dominante Farbe oder einen Verlauf und blendet zum Foto über, sobald es dekodiert ist. -
Device Mockup
.mv-deviceGeräterahmen in reinem CSS um beliebige Inhalte: iPhone (Dynamic Island, Tasten), Android (Punch-Hole), iPad im Hoch- und Querformat, MacBook (Notch, Aluminiumsockel) und ein Browserfenster (Ampelknöpfe, Adressleiste über data-url); dunkle oder helle Rahmen, alles von einer einzigen Breite aus skaliert. -
Image Compare
<mv-image-compare>Vorher/Nachher-Vergleich, bei dem der ganze Rahmen die Schiene des Sliders ist: ein kapselförmiger Griff mit role=slider und voller Tastaturunterstützung, ein Live-Wert-Chip, Badges, die sauber an der Linie abgeschnitten werden, Touch-Bedienung, die Tippen, Wischen und Seitenscrollen unterscheidet, horizontal oder vertikal, Ziehen oder Mausverfolgung, ein optionaler Schwenk und eine Glow-Variante. -
Invite InExklusiv
<mv-invite-in>Datenschutzfreundliche Einbettung, die keine einzige Anfrage an Dritte stellt, bis der Nutzer sie hereinbittet: YouTube- und Vimeo-Videos, Karten, Social-Media-Beiträge, Chat-Widgets, trackinglastige iframes, Stylesheets für Schriften von Drittanbietern. -
Lens
<mv-lens>Lupe, die dem Cursor über einem Bild oder beliebigen Inhalten folgt: eine vergrößerte Kopie, auf einen Kreis (oder ein Quadrat) zugeschnitten und am Zeiger verankert, Glasrand, animiertes Öffnen, optional feste Position und Bewegung per Tastatur. -
Mosaic Gallery
<mv-mosaic>Bildmosaik, das sich selbst neu anordnet: Das gewählte Foto wird zur großen Kachel, und jede Kachel morpht in einer einzigen View Transition an ihren neuen Platz, beschnitten statt gestreckt. -
Product Gallery
<mv-product-gallery>Galerie für Produktseiten: Hauptbild auf nativem Scroll Snap (Wischen auf Touchscreens), synchronisierte Vorschaubilder in einer Spalte oder Zeile (optionaler Wechsel beim Hover), Hover-Zoom, der dem Zeiger folgt, Pfeile und Zähler, eine segmentierte Leiste in kleinen Containern und Vollbild in einem <dialog> mit Klick-Zoom und Verschieben. -
Step ZoomExklusiv
<mv-step-zoom>Bildinspektor mit tiefem Zoom, aufgebaut auf diskreten, adressierbaren Stufen statt auf freiem Pinch und Scrollen. -
World Map
<mv-world-map>Gepunktete SVG-Weltkarte aus gemeinfreien Landdaten von Natural Earth, mit echten Großkreisrouten, die sich einzeichnen und kleine Pakete tragen, Leuchtfeuern auf Knotenstädten, scharfen HTML-Beschriftungen und einer Liste aller Orte und Verbindungen für Screenreader.
3D 5
-
Card Stack
<mv-card-stack>Wischbarer Kartenstapel: Die Karten liegen jeweils leicht schräg und richten sich auf, während die oberste weggezogen wird; die oberste Karte dreht sich um den Punkt, an dem du sie gegriffen hast, ein Urteils-Badge und eine Randtönung wachsen mit dem Zug, während sich der passende Button füllt, Würfe behalten den Schwung der Geste, und next() schiebt die Karte unter den Stapel; Buttons, Pfeiltasten, Rückgängig, Schleife oder Ende und Autoplay. -
Exploded ViewExklusiv
<mv-exploded>Eine 3D-Explosionsansicht jeder beliebigen Live-Oberfläche: Jede Box wird zu einer Ebene, die entsprechend ihrer visuellen Tiefe angehoben wird (unsichtbare Wrapper fügen keine Etage hinzu), die ganze Baugruppe kippt in eine isometrische Pose, lässt sich per Ziehen oder Tastatur umkreisen, isoliert beim Hover eine Ebene (Tag, Klassen, Größe), beschriftet Ebenen mit Hinweislinien, setzt sich dann mit Federn pro Etage wieder zusammen und stellt die ursprünglichen Styles Byte für Byte wieder her. -
Flip Card
.mv-flip-cardZweiseitige Karte, die sich bei Hover, Tastaturfokus, Tippen oder Klick in 3D dreht, sich mitten in der Drehung zum Betrachter hebt, während das Licht von der abgewandten Seite abfällt; nur die sichtbare Seite ist für Tab, Zeiger und Screenreader aktiv. -
Gallery 3D
<mv-gallery-3d>CSS-3D-Galerie mit drei Inszenierungen: Ring (ein Zylinder, den du drehst, der ausrollt und auf einem Element zum Stehen kommt), Kuppel (Kacheln an der Innenseite einer Kugel, in der du dich umsiehst) und Kreisbogen (ein endloser Streifen entlang eines Bogens, gesteuert per Ziehen oder Mausrad). -
Globe
<mv-globe>Interaktiver Punktglobus auf 2D-Canvas (orthografische Projektion einer eingebetteten Landmaske, null Abhängigkeiten): Autorotation, Ziehen mit Trägheit, pulsierende Marker, Großkreisbögen, die wie Kometen animiert sind, sowie ein Lichthof und ein Atmosphärensaum in deinen Token-Farben.
Übergänge 6
-
Expandable Card
<mv-expandable>Raster oder Liste von Karten, bei denen eine Karte zu einer barrierefreien modalen Detailansicht wächst: Box, Bild, Titel und Beschreibung bewegen sich auf einer unterbrechbaren Feder, Text und Bilder werden nie verzerrt, und bei reduzierter Bewegung öffnet sie sich sofort. -
GrinExklusiv
<mv-grin>„Ausblenden bis auf einen Rest“ für Ankündigungsbanner, Chat-Widgets, Upload-Panels, Videoplayer und Filter-Panels: Statt zu verschwinden, löst sich ein geschlossenes, minimiertes, inaktives oder weggescrolltes Panel nach und nach auf und hinterlässt einen winzigen dauerhaften Rest, der sein einziges wesentliches Datum live behält („New · 2“, die Anzahl ungelesener Nachrichten, einen Fortschrittsring, „4 filters“). -
Morph Panel
<mv-morph-panel>Ein Container, der beim Wechsel der Ansicht seine gemessene Breite und Höhe animiert, mit einer unscharfen Überblendung des Inhalts: mehrstufige Drawer, Popovers und eine „Dynamic Island“-Variante, die von einer Pille zu einem Panel wächst. -
Page Transition
.mv-page-transitionNative Seitenübergänge mit der View Transitions API: Fade, Push-Slide, Tiefenzoom und eine kreisförmige Enthüllung ab dem Klick, jeweils mit einer Rückwärtsversion, für Multi-Page-Sites und SPAs, wobei der Fokus in die neue Ansicht verschoben wird. -
Pixel Transition
<mv-pixel-transition>Wechselt über ein Pixelraster zwischen zwei Ansichten: Quadratische Pixel wachsen in zufälliger, radialer (vom Zeiger aus), diagonaler oder zeilenweiser Reihenfolge über die erste Ansicht, die Ansichten tauschen unter voller Abdeckung, dann schrumpfen die Pixel weg. -
Twin DropExklusiv
<mv-twin-drop>Verknüpfte Drop-Zonen, die Elemente mit einer einzigen Geste über eine Seite bewegen: Zwei <mv-twin-drop>-Zonen werden gepaart, und jedes [data-twin-drop-item], das in die eine gezogen wird, gleitet in ihre Öffnung und kommt dann anderswo auf der Seite aus ihrem Zwilling heraus, fliegt in dessen Ausrichtung mit einer Geschwindigkeit, die proportional (und begrenzt) zur Eintrittsgeschwindigkeit ist, bremst ab und landet im Zielcontainer des Zwillings oder gleitet und prallt auf einer freien Fläche bis zum Stillstand, wenn es kein Ziel gibt.
Mikrointeraktionen 12
-
Click Spark
<mv-click-spark>Wrapper, der Funkenstriche vom Klickpunkt aus schleudert: Jeder Strich streckt sich, biegt sich unter der Schwerkraft leicht und schrumpft zu einem Punkt um einen sanften Blitz, gezeichnet auf einem einzigen gemeinsamen Seiten-Overlay, sodass Funken nie abgeschnitten werden und nie Klicks blockieren; Tastatur inklusive, und eine Funktion spark() funktioniert auch ohne das Element. -
Confetti
<mv-confetti-button>Physikbasiertes Konfetti auf Canvas (Schwerkraft, Luftwiderstand, 3D-Taumeln, Flattern): eine eigenständige confetti()-Funktion, Presets für Kanonen / Feuerwerk / Sterne / Emoji, ein Auslöse-Button und ein „cool“-Modus zum Gedrückthalten. -
Copy Button
<mv-copy-button>Kopier-Button mit Kilometerzähler-Feedback: Icon und Label rollen in festen Fenstern nach oben zu einem Häkchen (oder bei einem Fehler nach unten zu einer Warnung), während eine Tönung den Button füllt und über die Wartezeit als Countdown wieder abläuft; Icon-Buttons bekommen ein Status-Tag. -
Count BumpExklusiv
<mv-count-bump>Umschließe einen Warenkorbzähler, ein Benachrichtigungs-Badge, einen Ungelesen-Zähler oder eine Like-Anzahl, und jede Änderung fällt auf: ein winziger gerichteter Hüpfer (nach oben für mehr, nach unten für weniger), nur die geänderten Ziffern rollen, ein optionales „+2“ schwebt davon, und max="99" zeigt „99+“. -
Hold Button
<mv-hold-button>„Hold to confirm“-Button für destruktive Aktionen: Solange er gedrückt wird, steigt darin eine Flüssigkeit auf (oder schiebt sich von der Seite herein) und invertiert das Label, wo sie es bedeckt; wer zu früh loslässt, lässt sie wieder ablaufen, und vollständiges Halten endet mit einem Häkchen, einem Fertig-Label und mv-confirm. -
Icon Morph
.mv-icon-morphIcons in reinem CSS, die sich mit dem ARIA-Zustand ihres Elternelements verwandeln: Hamburger ↔ Schließen, Plus ↔ Minus, Play ↔ Pause, Chevron V ↔ Λ, rotierender Chevron, Pfeil → Häkchen. -
Like Button
<mv-like>Like- oder Favoriten-Schalter mit fühlbarem Druck: Das Symbol sinkt unter dem Zeiger ein und springt dann beim Füllen über seine volle Größe hinaus, während ein Ring und eine Krone aus Funken einmal ausstrahlen; geänderte Ziffern des Zählers rollen in festen Slots nach oben oder unten, formatiert mit Intl. -
Physics Stack
<mv-physics-stack>Eine Liste, deren Elemente Starrkörper sind, gestapelt in einer Box: Greif eine Karte an einer Ecke (sie dreht sich um den Griffpunkt), wirf sie, der Stapel fällt unter der Schwerkraft zurück, und die DOM-Reihenfolge folgt der visuellen Reihenfolge. -
Ripple
<mv-pulse-ring>Tintenwelle im Material-Stil vom Klickpunkt aus auf jedem beliebigen Element (.mv-ripple / data-mv-ripple, wächst beim Halten), plus <mv-pulse-ring>: konzentrische Ringe, die ausstrahlen oder atmen. -
Salvage StopExklusiv
<mv-salvage-stop>Ein Stopp-Button für lange laufende Prozesse (KI-Agenten, Exporte, Generierung), der zeigt, was du behältst, bevor du stoppst: Bei Hover oder Fokus klappt ein verankertes Panel zwei Ablagen auf, „You keep“ (fertige Artefakte, hell, mit dem Symbol ihrer Art) und „You lose“ (Elemente in Arbeit, gedimmt, mit ihrem Fortschritt), plus eine Überschrift, die den geretteten Wert nennt („You keep 7 of 9 items · 78% of the work“, pro Element gewichtet). -
Share ButtonExklusiv
<mv-share-button>Teilen-Button, der mit einem Tippen das native Teilen-Menü öffnet, wo die Web Share API die Daten teilen kann (geprüft mit navigator.canShare), und sonst ein kleines, per Tastatur bedienbares Menü mit Copy link, Email und den von dir aufgeführten Netzwerken, gebaut aus einfachen Intent-Links. -
Theme Toggle
<mv-theme-toggle>Hell/Dunkel-Schalter: Das neue Theme wird in einem Kreis vom Button aus enthüllt (View Transition + clip-path), eine Sonne verwandelt sich in einen Mond, die Wahl wird gespeichert und die Systemeinstellung respektiert.
Effekte 11
-
Animated Beam
<mv-animated-beam>Geschwungener SVG-Strahl zwischen zwei Elementen eines Containers, durchlaufen von einem Verlaufsimpuls; folgt Größenänderungen (ideal für Integrationsdiagramme). -
ASCII
<mv-ascii>Zeichnet ein Bild, ein Video, ein Canvas oder Text als Live-ASCII-Art neu: konfigurierbare Zeichenrampe und Zellgröße, monochrom oder vollfarbig, eine Zeigerspur, die die Zeichen dort kräftiger macht, wo sie vorbeizieht, und hinter sich wieder abkühlt, sowie eine optionale Enthüllung, die jedes Zeichen durcheinanderwirbelt, bevor sie die Zeichen von links nach rechts einrasten lässt. -
Border Beam
<mv-border-beam>Animiertes Licht, das den Rand jeder beliebigen Box entlangläuft: ein Komet mit konstanter Geschwindigkeit, konische Lichtreflexe, ein wandernder Verlauf, gleitende Sterne oder ein elektrischer Rand. -
Glass
<mv-liquid-glass>Milchglas, das auf jedem Hintergrund lesbar bleibt: Der Hintergrund wird weichgezeichnet, sein Kontrast gestaucht und dann von einem Scrim in der Farbe des Themes überdeckt, in 5 Presets für hell und dunkel, dazu ein Liquid Glass, das den Hintergrund über einen SVG-Filter kräuselt. -
Glow
.mv-glowUnscharfes Verlaufs-Hintergrundlicht hinter jedem beliebigen Element, plus eine Neon-Karte mit Verlaufsrand, statisch oder langsam rotierend. -
Gooey
.mv-gooeyMetaball-Utility: eine gefilterte Hintergrundebene (Unschärfe + SVG-Alpha-Schwelle), in der Formen wie Flüssigkeit ineinanderfließen, während Text, Icons und Fokus darüber scharf bleiben. -
Noise
.mv-noiseFilmkorn in reinem CSS (SVG-feTurbulence-Textur als Data-URI) auf jeder Fläche: fein oder grob, statisch oder animiert, unter oder über dem Inhalt. -
Progressive Blur
.mv-progressive-blurProgressive Randunschärfe in reinem CSS: gestapelte backdrop-filter-Ebenen, in Scheiben maskiert, an jeder Seite, optional mit Verlauf in die Hintergrundfarbe. -
Spotlight Card
<mv-spotlight>Ein Spotlight, das dem Cursor innerhalb einer Karte folgt und ihren Rand enthüllt; in einem Raster fällt dasselbe Licht auch auf die Ränder benachbarter Karten. -
SurfaceExklusiv
<mv-surface-layer>Ein GPU-Materialsystem für jedes Element: data-mv-surface="glass | chrome | jelly | velvet | holo". -
Tilt Card
<mv-tilt>Dezente 3D-Neigung unter einem präzisen Zeiger mit weichem Glanz und data-depth-Parallax, flach und scharf in Ruhe, ein sanftes Anheben bei Tastaturfokus und keine Neigung bei Touch oder reduzierter Bewegung.
Blöcke 24
-
AI Chat
<mv-ai-chat>Chat-Oberfläche für KI: gestreamte Antworten mit Textcursor, schimmernder „thinking“-Zustand, sicheres Markdown-Rendering (Listen, Fettdruck, Code mit Kopier-Button), mitwachsendes Eingabefeld mit Anhängen, Modellauswahl, Vorschläge, Stoppen / Neu generieren und Auto-Scroll, das dem Nutzer den Vortritt lässt. -
App Shell
<mv-app-shell>Kompletter Dashboard-Block: einklappbare Seitenleiste, Sticky-Header (Breadcrumb, Suche mit Strg/⌘ + K, ungelesene Benachrichtigungen, Konto), KPI-Kacheln mit Sparklines, ein Umsatzdiagramm nach Zeitraum und eine Aktivitätstabelle. -
Auth
<mv-auth>Authentifizierungsblock in vier Schritten (Anmelden, Registrieren, Passwort vergessen, OTP-Code): geteiltes Layout mit Bild und Testimonial, Social-Buttons, Passwort anzeigen, Stärkeanzeige, zeitgesteuertes erneutes Senden des Codes, native Validierung und asynchrones Absenden. -
Buy Box
<mv-buy-box>Kaufblock für Produktseiten: Marke, Titel, Bewertung, Preis (folgt der gewählten Variante), Ratenzahlung in 3 Raten, Farben und Größen (ausverkaufte durchgestrichen, „Notify me when it's back“), Menge begrenzt auf den Lagerbestand der Größe, In-den-Warenkorb-Button mit Ladezustand und anschließender Bestätigung, berechnete Lieferzeit und Countdown bis Versandschluss, Vertrauensvorteile und ein Details-Accordion; synchronisiert sich mit einer Galerie. -
Cart
<mv-cart>Kompletter Warenkorb (Drawer oder Seite): horizontale Produktzeilen mit Menge und Live-Summen, eine Leiste „Only $12.40 away from free shipping“, validierte Gutscheincodes mit Fehlermeldung (Prozent, Festbetrag oder kostenloser Versand, asynchroner Server-Hook), Ersparnis bei reduzierten Preisen, Versand, Gesamtsumme inklusive Steuern, Entfernen mit 5 Sekunden „Undo“, ein leerer Zustand und ein Button zur Bezahlung, der die Gesamtsumme zeigt. -
Checkout
<mv-checkout>Mehrstufige Bezahlung (Adresse → Versand → Zahlung → Prüfung): Validierung pro Schritt mit Inline-Meldungen und Fokus auf dem ersten Fehler, Versandarten als Karten mit voraussichtlichen Lieferdaten, die die Bestellübersicht aktualisieren, formatierte Karteneingabe (Zifferngruppen, MM/YY, Erkennung von Visa/Mastercard/Amex/CB, Luhn-Prüfung), PayPal und Apple Pay, einklappbare Rechnungsadresse, Prüfung mit „Edit“-Links, Verkaufsbedingungen, ein Button „Pay $157.32“ mit Ladezustand, abgelehnte Karte und Bestätigung. -
CTA
.mv-ctaCall to Action im Editorial-Stil: ein Band zwischen zwei Haarlinien mit der Überschrift links und Details rechts, eine stets dunkle Tintenfläche oder ein Newsletter-Panel mit Inline-Formular und Status-Feedback. -
Data table
<mv-data-table>Voll ausgestattete Datentabelle rund um eine .mv-table: Sortieren nach Spalten, akzentunabhängige Suche, Wertefilter, ein Menü zur Spaltensichtbarkeit, Zeilenauswahl (unbestimmte Checkbox im Tabellenkopf, Shift + Klick für Bereiche) mit einer Leiste für Sammelaktionen, Paginierung mit Zeilen pro Seite und ein leerer Zustand. -
Facets
<mv-facets>Filter-Panel für Produktlisten: einklappbare Checkbox-Gruppen mit Anzahl („Show 2 more“), Farb- und Größenfelder, ein Preisbereich mit zwei Griffen, synchronisiert mit zwei Eingabefeldern, eine abwählbare Mindestbewertung, ein Schalter für „auf Lager“, entfernbare Chips für aktive Filter mit „Clear all“ und ein mobiler Drawer (natives <dialog>) mit einem Button „Show 42 products“. -
FAQ
.mv-faqFAQ-Sektion im Editorial-Stil: nummerierte Fragen in einer Mono-Spalte auf Haarlinien, eine nach Themen sortierte Version mit Sticky-Index (gepunktete Führungslinien, Anzahlen) und einem Kontakthinweis oder ein offenes Raster nummerierter Antworten. -
Features
.mv-featuresFeature-Sektion im Editorial-Stil: ein nummeriertes Indexraster auf Haarlinien, getönte Panels, deren ganze Kachel der Link ist, oder ein Ledger mit Sticky-Intro und nummerierten Schritten. -
Footer
.mv-footerWebsite-Footer im Editorial-Stil: nummerierte Spaltenüberschriften in Mono auf Haarlinien, Marke + Newsletter, eine Reihe von Kontaktkacheln und ein Abschlussstreifen über die volle Breite; eine Statement-Version mit großer Überschrift und Calls to Action; oder eine minimale einzeilige Version. -
Hero
.mv-heroEinstieg für Landingpages im Editorial-Stil: eine Metazeile in Mono auf einer Haarlinie, eine übergroße zweifarbige Überschrift, Lead-Text und Aktionen, eine beschriftete Produkttafel und eine linierte Faktenzeile. -
Kanban
<mv-kanban>Kanban-Board mit offenen Spalten, getrennt durch Haarlinien: Drag-and-drop per Zeiger mit einer flachen schwebenden Kopie, einem schraffierten reservierten Platz und Karten, die an ihren Platz gleiten (FLIP), ein Einrastring beim Ablegen, Auto-Scroll, WIP-Auslastungsbalken für begrenzte Spalten und vollständige Verschiebungen per Tastatur (Leertaste, Pfeiltasten, Escape), die Screenreadern angesagt werden. -
Logo Cloud
<mv-logo-cloud>Sektion mit Kundenlogos im Editorial-Stil: eine linierte Logotabelle mit Beschriftungen in Mono neben einer Leitzahl, ein Laufband neben einer Statistik oder Spalten, die ihre Logos nacheinander austauschen (pausierbar, berücksichtigt reduzierte Bewegung). -
Mega Menu
<mv-mega-menu>E-Commerce-Navigation mit Mega-Panels: öffnet bei Hover mit Absichtserkennung (Verzögerung, sofortiger Wechsel zwischen Kategorien) oder per Klick, eine gemeinsame Fläche, deren Höhe sich animiert, während die Panels überblenden, Linkspalten mit Badges, Promo-Kacheln, eine Abdunklung der Seite; volle Tastaturunterstützung; unterhalb des Breakpoints (Breite des Hosts, ResizeObserver) ein Burger-Menü in einem <dialog>-Drawer mit Drill-down-Ansichten und einem Zurück-Button. -
Navbar
<mv-navbar>Sticky-Navigationsleiste im Editorial-Stil, die beim Scrollen unscharf wird: Labels und Zähler in Mono, Mega-Menüs als Popover mit einer Akzentlinie auf der Leiste, die das offene Menü markiert, ein optionaler gemeinsamer Viewport, der seine Größe zwischen den Menüs anpasst, ein schwebender Modus, der sich beim Scrollen als Karte ablöst, und ein gestapeltes Layout aus Suche + Bereichen; mobiler Drawer auf Dialog-Basis mit nummerierten Links. -
Preise
<mv-pricing>Preissektion im Stil eines Datenblatts: Plan-Panels in einem gedämpften Rahmen, ein segmentierter Monatlich-/Jährlich-Schalter auf nativen Radiobuttons, ein mit Ring markierter empfohlener Plan, Nutzungsanzeigen und eine ausdrücklich durchgestrichene Ersparnis bei Jahrespreisen; als Spalten, horizontale Zeilen oder ein einzelner Plan. -
Review
<mv-reviews>Kundenbewertungen: Übersicht (Durchschnittsbewertung, Sterne, Histogramm 5→1, bei dem jeder Balken filtert, Passform-Anzeige), Sortierung (neueste, hilfreichste, Bewertung), Filter „With photos“, Chips für aktive Filter, Paginierung „Show 4 more reviews“; <mv-review>-Karte mit „Verified purchase“, gekaufter Variante, eingeklapptem Text mit „Read more“, Foto-Lightbox, „helpful“-Stimmen (eine pro Besucher, rückgängig machbar), Melden und Antwort des Händlers; validiertes Formular „Write a review“, das die Bewertung zur Moderation hinzufügt. -
Settings
<mv-settings>Einstellungsseite: Abschnittsnavigation mit Scroll-Tracking, Profil (Fotovorschau, validierte Felder), Schalter für Benachrichtigungen, Sicherheit, eine Leiste für „unsaved changes“ und eine Gefahrenzone mit Bestätigung durch Eintippen. -
Sidebar
<mv-sidebar>App-Seitenleiste: animierte Icon-Leiste mit Tooltips, gespeicherter Zustand, Gruppen, einklappbare verschachtelte Abschnitte, Zähler, Workspace-Wechsler und Benutzermenü, ausklappbares Panel (Dialog), wenn der Container schmal ist, Tastenkürzel Strg/⌘ + B. -
Stats
.mv-statsSektion mit Kennzahlen und animierten Zählern (number-ticker): linierte Spalten mit Labels in Mono, KPI-Karten mit einem Trend-Slot und Sparkline oder eine einzelne übergroße Leitzahl neben einem gestapelten Ledger. -
Testimonials
.mv-testimonialsTestimonial-Sektion im Editorial-Stil mit Haarlinien: ein nummeriertes Ledger-Raster mit einem hervorgehobenen Ergebniseintrag, ein horizontaler Ticker kompakter Notizen oder eine geteilte Fallstudie, die ein Zitat mit seinen Kennzahlen kombiniert; im Header sitzt eine Übersicht der Bewertungen. -
Wordmark Footer
<mv-wordmark-footer>Footer mit Linkspalten über einem riesigen, haarfeinen Markennamen, der auf die Breite eingepasst ist: Zeiger, Tastaturfokus oder ein Tippen werden auf die Buchstaben projiziert, wo ein Spotlight sie über einer zarten Grundtönung mit einem Verlauf oder einer Vollfarbe füllt.
Utilities 5
-
Agent VisionExklusiv
<mv-agent-vision>Sieh deine Seite so, wie ein KI-Agent (oder ein Screenreader) sie sieht: Umschließt jeden beliebigen Bereich und teilt ihn mit einer ziehbaren Scanlinie. -
Assist ModeExklusiv
<mv-assist-mode>Ein wertungsfreies, seitenweites Hilfe-Panel für alles, was von Zeit oder Bewegung abhängt, angeboten als optionale Hilfe statt als „Barrierefreiheitsmodus“. -
ComboExklusiv
<mv-combo>Engine für Tastenfolgen-Shortcuts in Apps für Power-User, mit einem Live-Eingabepuffer. -
DrillExklusiv
<mv-drill>Shortcut-Trainer, der die Tastenkürzel einer App durch kurze, zeitlich verteilte Übungen zu Reflexen macht. -
Motion BudgetExklusiv
<mv-motion-budget>Ein Animationsregler: Umschließt einen Bereich (oder die ganze Seite) und gibt ihm ein Bewegungsbudget, den Anteil des Bildschirms, der sich gleichzeitig bewegen darf (standardmäßig 25 %).
Keine Komponente passt zu diesem Filter.