Composants
317 composants indépendants de tout framework (v0.1.0) : Web Components natifs et CSS en couches, zéro dépendance à l’exécution, pour React, Vue, Svelte, Angular, Astro et le HTML pur. Chaque page donne le balisage d’utilisation, l’API complète, les cas d’usage et des notes d’accessibilité.
Agents IA : commencez par /llms.txt. Les acheteurs obtiennent tous les composants avec la CLI et le serveur MCP : voir les offres ou télécharger le Free pack.
Primitives 15
-
Avatar
.mv-avatarAvatar CSS : une image superposée aux initiales (repli automatique quand l’image est absente ou cassée), tailles, rond ou carré, initiales teintées, pastille de statut, compteur ; un groupe superposé avec une puce « +3 » qui s’écarte au survol. -
BadgeGratuit
.mv-badgeBadge en pur CSS : 7 variantes (teintes douces ou pleines), pastille de statut animable, icône, bouton de suppression, pilule/carré, 3 tailles, et un compteur positionné sur le coin d’un avatar ou d’une icône. -
ButtonGratuit
.mv-buttonBouton en pur CSS sur <button> ou <a> : 6 variantes, 4 tailles, état de chargement, groupe. -
Button Effects
.mv-buttonSept effets pour .mv-button via data-effect : étincelle en orbite, bordure arc-en-ciel, pulsation, touche 3D, reflet qui balaie, flèche révélée et halo. -
CheckboxGratuit
.mv-checkboxCase à cocher native en pur CSS : coche qui se dessine d’elle-même (réversible), état indéterminé, tailles, invalide ; fournit aussi les dispositions partagées .mv-choice et .mv-choice-card (cartes d’option mises en évidence via :has(:checked)). -
InputGratuit
.mv-inputChamp texte en CSS pur : 3 tailles, états invalide (aria-invalid / :user-invalid), lecture seule et fichier, plus un groupe avec icônes, préfixes/suffixes, boutons intégrés et bouton d’effacement. -
KbdGratuit
.mv-kbdTouches de clavier légèrement en relief sur <kbd> : combinaisons imbriquées, 3 tailles, variante plate, s’adapte dans les boutons et les infobulles. -
RadioGratuit
.mv-radioBouton radio natif en CSS pur : point intérieur qui apparaît avec un effet ressort, plusieurs tailles, variante outline, groupes en ligne ou empilés, et cartes d’option (listes d’offres, tuiles avec badge). -
Range FX
<mv-range-fx>Sliders expressifs construits sur un seul modèle accessible : la piste devient une vague qui ondule pendant le glissement (wave), une bulle de valeur surgit et s’incline selon la vitesse (bubble), une règle défile avec inertie sous une aiguille fixe (ruler), un embout liquide s’étire (fluid), ou le libellé se loge dans la piste et s’inverse sous le remplissage (inline). -
SelectGratuit
.mv-select<select> natif stylé (chevron coloré par les tokens), amélioré progressivement en select personnalisable (appearance: base-select) : liste animée, pastilles d’état, icônes, descriptions et coche, ouverture « liquide » en option ; repli propre ailleurs. -
SeparatorGratuit
.mv-separatorSéparateur horizontal ou vertical en CSS pur : plein, en tirets, en pointillés ou estompé, avec un libellé centré (« ou ») ou aligné, sur <hr> ou <div>. -
Slider
<mv-slider>Slider sous deux formes : un <input type="range" class="mv-slider"> natif stylé (remplissage synchronisé), et un <mv-slider> associé aux formulaires pour les cas avancés : double poignée, graduations, repères libellés, bulle de valeur, orientation verticale, prise en charge complète du clavier. -
SwitchGratuit
.mv-switchInterrupteur en CSS pur sur <input type="checkbox" role="switch"> : poignée qui glisse avec un effet ressort et s’étire à l’appui, icônes dans la poignée (personnalisables), plusieurs tailles, libellé à gauche ou à droite, carte d’option. -
TextareaGratuit
.mv-textareaZone de texte qui s’agrandit d’elle-même (field-sizing: content) entre un nombre minimal et maximal de lignes, avec poignée de redimensionnement en option, un groupe avec barre d’outils et un compteur de caractères <mv-char-count>. -
Toggle
<mv-toggle-group>Bouton bascule .mv-toggle (aria-pressed, variantes, icône qui change avec l’état) et <mv-toggle-group>, à sélection unique ou multiple : roving tabindex, value, groupe accolé, et contrôle segmenté dont l’indicateur glisse d’une option à l’autre.
Formulaires 47
-
Angle Dial
<mv-angle-dial>Saisie d’angle en degrés qui se lit comme en CSS (0° en haut, sens horaire) : un bouton rotatif dans un anneau de graduations qui sert aussi de grille d’aimantation, avec les graduations derrière le bouton allumées et qui s’estompent avec la distance. -
As StoredExclusif
<mv-as-stored>Montre, avant l’enregistrement, exactement comment chaque valeur sera stockée quand le système derrière le formulaire la remodèle, au lieu de la laisser être étirée ou coupée en silence. -
Balance SheetExclusif
<mv-balance-sheet>Grille de décision structurée en deux colonnes (pour et contre, construire ou acheter, recruter ou non, choix d’un fournisseur, un déménagement) présentée comme un registre où les arguments se font face. -
BloodstainExclusif
<mv-bloodstain>Récupération de brouillon de formulaire qui se souvient exactement où vous en étiez : enveloppez n’importe quel <form> (ou zone de champs) et ses valeurs sont sauvegardées automatiquement (avec debounce, dans localStorage ou sessionStorage), avec le dernier champ actif et la position du curseur. -
Catch LoopExclusif
<mv-catch-loop>Détecteur et explication des exigences impossibles à satisfaire parce qu’elles tournent en boucle (« le SSO exige un domaine vérifié, vérifier le domaine exige le SSO ») ou se contredisent (une archive qui exige à la fois le chiffrement et la recherche plein texte, qui s’excluent mutuellement). -
Color Picker
<mv-color-picker>Pastille de couleur qui ouvre un popover fermé par un clic extérieur (ou s’affiche en ligne) : une zone saturation/luminosité, des sliders de teinte et d’opacité, un champ texte unique qui accepte n’importe quelle couleur CSS avec un sélecteur HEX/RGB/HSL/OKLCH, la pipette, des échantillons et les couleurs récentes. -
Combobox
<mv-combobox>Champ de recherche avec une liste filtrée insensible aux accents, des groupes, une sélection simple ou multiple sous forme de puces, la création d’options et un mode texte libre (autocomplete) ; associé aux formulaires. -
Curve Editor
<mv-curve-editor>Éditeur de courbe d’easing : faites glisser deux poignées ou déplacez-les au clavier, avec les coordonnées en direct et un dépassement pour l’anticipation et le rebond. -
Date Picker
<mv-date-picker>Sélecteur de date : un déclencheur façon champ de saisie qui affiche la date formatée (plages comprises) et un calendrier dans un popover, avec des préréglages comme « Aujourd’hui », « 7 derniers jours »… ; associé aux formulaires. -
ExposureExclusif
<mv-exposure>Jauge de visibilité pour les réglages de partage et de confidentialité (boîtes de partage, audience d’une publication, confidentialité du profil, visibilité d’un projet, partage d’agenda, liens de fichiers), qui lit les contrôles qu’elle enveloppe et indique le niveau d’exposition avant validation. -
FieldGratuit
.mv-fieldMise en page de champ en CSS pur : libellé (obligatoire / facultatif), texte d’aide, message d’erreur qui apparaît de lui-même quand le contrôle est invalide, orientations verticale, horizontale, responsive et en ligne, cartes de choix et fieldset. -
File Upload
<mv-file-upload>Zone de dépôt de fichiers : glisser-déposer avec mise en évidence (et refus visuel des types non autorisés), liste avec miniatures d’images, icônes, tailles et suppression, validation du type, de la taille et du nombre, et progression par fichier ; associé aux formulaires (FormData). -
ForgotExclusif
<mv-forgot>Vérificateur « vous avez peut-être oublié quelque chose » avant envoi, pour les zones de rédaction et les formulaires, qui, contrairement à un avertissement vague, dit exactement ce qui semble manquer. -
Gradient Editor
<mv-gradient-editor>Éditeur de dégradés CSS associé aux formulaires (linéaire, radial, conique) : les arrêts de couleur sont des sliders clavier sur une barre en direct, ajoutés par clic, Entrée ou +, retirés en les faisant glisser hors de la barre ou avec Suppr, chacun avec un sélecteur de couleur et un champ de position. -
Intent ComposerExclusif
<mv-intent-composer>Un éditeur de requêtes IA qui rend visibles, pendant la saisie, les trois parties d’une intention : le résultat attendu, les contraintes (budget, échéance, choses à éviter, lieu, quantité…) et la limite de délégation. -
InvisiblesExclusif
<mv-invisibles>Rend visibles, dans les champs texte, les caractères invisibles et les sosies qui causent de vrais bugs : espaces et liants de largeur nulle collés dans des IBAN, e-mails, clés d’API et codes, espaces insécables et exotiques, blancs en début et en fin, tabulations, traits d’union conditionnels, caractères de contrôle, contrôles bidi (Trojan Source), texte masqué en caractères tag, homoglyphes (un « а » cyrillique dans un mot latin, un « O » parmi des chiffres), lettres pleine chasse, guillemets et tirets typographiques dans des commandes. -
Just RightExclusif
<mv-just-right>Indication d’ajustement personnalisée sur un groupe radio natif de tailles, d’offres ou de configurations : chaque option dit à cet utilisateur, zone par zone, si elle est trop petite, juste bien ou trop grande pour lui. -
LifelinesExclusif
<mv-lifelines>Aides à la décision pour un choix unique difficile (une offre, un mode de livraison, une configuration d’ordinateur portable, un niveau d’assurance, une taille d’instance), chacune étant un joker à usages limités, dont la consommation se voit. -
MastExclusif
<mv-mast>Réglage asymétrique pour les limites qu’on s’impose ou qui touchent à la sécurité : resserrer est immédiat, desserrer attend la fin d’un délai de réflexion. -
Narrow DownExclusif
<mv-narrow-down>Outil de recherche de produit guidé qui pose à chaque étape la question la plus informative, au lieu de dérouler un questionnaire figé. -
Number Field
<mv-number-field>Champ numérique avec boutons − / + (maintenez pour accélérer), bornes et pas, flèches du clavier et molette, formatage Intl (devise, pourcentage, unité) et libellé « scrub » : glissez horizontalement pour changer la valeur, avec verrouillage du pointeur en option. -
One More ThingExclusif
<mv-one-more-thing>Validation de formulaire priorisée qui demande une chose à la fois au lieu d’afficher un mur d’erreurs. -
OTP
<mv-otp>Saisie de code à usage unique : un vrai champ masqué gère la frappe, le collage et le remplissage automatique par SMS, tandis que des cases animées affichent le code avec un curseur clignotant, un séparateur et une secousse en cas d’erreur. -
Pass CardExclusif
<mv-pass-card>Un petit budget visible de dérogations aux règles (« laissez-passer ») pour les moments où une règle doit plier : fusionner pendant un gel des mises en production, sauter une vérification obligatoire, un rendu en retard, un achat au-delà d’un plafond de dépenses, un report sans frais, une exception au SLA. -
Password FieldExclusif
<mv-password-field>Champ de mot de passe qui conserve votre <input type="password"> natif (l’autoremplissage, les gestionnaires de mots de passe et l’envoi du formulaire fonctionnent donc tels quels) et ajoute un vrai bouton afficher/masquer qui garde la position du curseur et remasque à l’envoi, un avertissement Verr. Maj tant que le champ a le focus et, pour les nouveaux mots de passe, une liste des règles que vous déclarez ainsi qu’une estimation de robustesse en toutes lettres qui récompense la longueur et démasque les mots courants, les années, les suites et les répétitions. -
PhrasebookExclusif
<mv-phrasebook>Éditeur de messages contraint pour les endroits où le texte libre est risqué ou coûteux : on n’écrit qu’en choisissant un modèle (« {thing} était {quality} », « Essayez {action} », « Attention à {thing} ») et en remplissant chaque blanc à partir d’un vocabulaire fixe classé par catégories, avec la possibilité d’enchaîner une seconde phrase par un connecteur (« mais », « donc »). -
Posting AsExclusif
<mv-posting-as>Garde-fou d’identité pour les éditeurs et les zones d’action des apps multicomptes (marque ou compte personnel, boîte partagée ou vous-même, emprunt d’identité, espaces de travail clients, production ou sandbox) : il rend impossible à confondre l’identité sous laquelle vous allez agir, au moment même d’agir. -
Prep ListExclusif
<mv-prep-list>Carte de préparation « Avant de commencer » pour les parcours longs ou à fort enjeu (demande de prêt, de visa ou d’assurance, vérification d’identité, déclaration d’impôts, onboarding d’un salarié, migration de base de données, mise en production). -
Quantity
<mv-quantity>Sélecteur de quantité e-commerce, variante légère de <mv-number-field> : minimum 1, plafonné automatiquement au stock, une légende « En stock » / « Plus que 3 en stock » / « Rupture de stock » liée au champ, un message et une secousse à la limite du stock, un état épuisé désactivé qui se réactive au réassort ; variantes pill et subtle pour les lignes de panier. -
Rating
<mv-rating>Notation par étoiles, en affichage (vraie précision décimale : 4,3 remplit 30 % de la 5e étoile, nombre d’avis en lien) ou en saisie associée aux formulaires : demi-étoiles, aperçu au survol, légendes comme « Très bien », prise en charge complète du clavier, effacement, champ obligatoire ; variante compacte ★ 4,8 (2 413). -
Read BackExclusif
<mv-read-back>Confirmation par collationnement pour les formulaires à fort enjeu, comme les pilotes qui répètent une clairance : enveloppez un formulaire, marquez les champs critiques avec data-read-back, et à l’envoi un panneau intégré renvoie chaque valeur sous une autre forme que celle saisie, pour qu’une erreur devienne visible au lieu d’être confirmée en pilote automatique. -
RewindExclusif
<mv-rewind>Une machine à remonter le temps pour les formulaires : enveloppe n’importe quelle zone, enregistre chaque modification (frappe regroupée, cases à cocher, selects, contenteditable) dans un arbre d’annulation libellé (« Adresse modifiée », « Mode de livraison : Express ») et l’affiche sous forme de frise compacte. -
Same AgainExclusif
<mv-same-again>Des formulaires récurrents qui se souviennent de la fois précédente : enveloppez un standup quotidien, une feuille de temps, une passation de poste, une checklist ou un rapport hebdomadaire, et chaque envoi enregistre les réponses avec leur date (stockage navigateur sous une clé, ou votre serveur via la propriété previous et mv-loop-saved). -
Scrub Field
<mv-scrub-field>Champ numérique d’inspecteur : faites glisser son libellé, son icône ou sa valeur latéralement pour ajuster, avec verrouillage du pointeur facultatif, accélération selon la vitesse, un badge qui compte la variation et un rail qui montre où se situe la valeur dans sa plage. -
Search Autocomplete
<mv-search-autocomplete>Recherche de boutique avec autocomplétion : au focus, recherches récentes (localStorage, effaçables) et chips de tendances ; pendant la saisie (debounce, requêtes obsolètes annulées, indicateur de chargement), suggestions avec la requête surlignée sans tenir compte des accents, catégories avec compteurs, produits avec vignette et prix (Intl, prix de comparaison barré), « Voir les 42 résultats pour “pull” » ; état « Aucun résultat » ; raccourci clavier ; hook de source asynchrone ou catalogue JSON local. -
Segmented
<mv-segmented>Contrôle segmenté avec la sémantique d’un groupe de boutons radio, associé aux formulaires : une poignée en relief glisse vers l’option sélectionnée avec un léger dépassement, de fins filets séparent les options inactives, trois tailles, et des options à icône seule nommées par des infobulles. -
Slosh Slider
<mv-slosh-slider>Un slider dont le remplissage est liquide : la poignée reste rigide sous votre doigt tandis que le liquide la rattrape avec un ressort souple, cogne contre les butées, s’incline et ondule selon sa vitesse. -
StripsExclusif
<mv-strips>Éditeur combinatoire : un résultat (texte publicitaire, configuration produit, notification, menu) s’assemble à partir de bandes indépendantes empilées comme une page découpée en tranches, chaque bande étant un emplacement dont les alternatives interchangeables tournent chacune de leur côté avec une animation physique de page soulevée (flèches, glissement vertical ou balayage horizontal, tap, et sur la bande active la molette et Haut/Bas/Début/Fin). -
Swatch
<mv-swatch>Sélecteur de variantes construit sur des radios natifs (ou des cases à cocher pour les filtres) : pastilles de couleur à double anneau, chips de taille, vignettes produit ; options épuisées barrées (sélectionnables ou désactivées), libellé « Couleur : Sable » avec aperçu au survol, et validation de groupe obligatoire avec secousse et message. -
Tag InputExclusif
<mv-tag-input>Champ à puces pour les étiquettes, les destinataires, les compétences et les mots-clés : Entrée, virgule ou Tab ajoute, coller « a, b; c » (ou une colonne copiée depuis un tableur) ajoute chaque élément, Retour arrière sélectionne puis supprime la dernière puce, les flèches parcourent les puces, avec en option un motif, une limite et un dédoublonnage insensible à la casse et aux accents qui fait clignoter la puce existante, et des suggestions natives <datalist>. -
Timeline Scrubber
<mv-timeline>Règle temporelle de logiciel de montage vidéo avec une tête de lecture précise à l’image qui affiche son timecode pendant le déplacement, un affichage au survol, un zoom par demi-octaves (boutons, touches, Ctrl/⌘ + molette ou pincement), une piste de marqueurs, des poignées d’entrée/sortie qui voilent tout ce qui est hors de la plage, des clips sur des pistes et une barre d’aperçu. -
Tone DialExclusif
<mv-tone-dial>Réglages de personnalité et de ton avec un aperçu immédiat et concret, pour les assistants IA, les chatbots, les textes générés, le ton des notifications ou des e-mails, la voix de marque et les macros de support. -
Trio CheckExclusif
<mv-trio-check>Vérification groupée pour les quiz, contrôles de connaissances et exercices d’association, qui rend inutile de répondre au hasard : les réponses se saisissent librement (vos propres inputs, selects, radios ou cases à cocher marqués data-trio-item, ou des lignes générées depuis une propriété items avec champs texte, selects et chips de choix), et le composant ne révèle jamais si une réponse isolée est juste. -
Two-KeyExclusif
<mv-two-key>Garde-fou pour les actions critiques (supprimer la production, virer des fonds, déployer) qui ne s’arme qu’avec deux « clés » délibérées et synchronisées : deux serrures rotatives dont le barillet tourne d’un quart de tour avec un ressort, et un bouton d’action protégé caché sous un couvercle dépoli. -
Vector Field
<mv-vector-field>Saisies X/Y, X/Y/Z ou W/H compactes pour les inspecteurs : chaque axe est un spinbutton dans lequel vous pouvez taper, avancer par pas au clavier ou ajuster en faisant glisser sa lettre, avec un filet qui montre où se situe la valeur dans sa plage et un verrouillage facultatif des proportions. -
Wheel Picker
<mv-wheel-picker>Sélecteur à roue façon iOS : un tambour 3D (rotateX + perspective) qu’on lance d’un geste du doigt, avec inertie puis calage sur le cran le plus proche, plus molette, clavier et saisie anticipée. -
Word RulesExclusif
<mv-word-rules>Constructeur de règles, de filtres et d’automatisations où chaque règle est une phrase faite de tuiles de mots qu’on déplace : sujets (« Commande »), opérateurs (« est », « n’est pas », « supérieur à ») et propriétés (« en retard », « 500 $ »), enchaînés par « et ».
Surcouches 12
-
Command
<mv-command>Palette de commandes : recherche floue insensible aux accents (mots-clés compris), résultats classés et groupés, navigation au clavier avec aria-activedescendant ; autonome ou dans un Dialog ouvert avec ⌘K. -
Context Menu
<mv-context-menu>Menu contextuel ouvert au niveau du pointeur (clic droit), par appui long sur écran tactile ou au clavier (Maj+F10 / touche Menu) ; réutilise le moteur et les styles de Menu, y compris l’animation data-motion="glide". -
Cookie ConsentExclusif
<mv-cookie-consent>Bandeau cookies non modal avec Tout accepter et Tout refuser de même poids et un panneau Choisir, enregistré avec une version de politique dans localStorage et un cookie propriétaire ; contrairement à la plupart des bandeaux, il bloque réellement les scripts : <script type="text/plain" data-consent="analytics"> et les intégrations data-src ne s’exécutent qu’après consentement, une seule fois, dans l’ordre, en conservant le nonce CSP. -
DialogGratuit
<mv-dialog>Modale <dialog> native animée ; couvre aussi Alert Dialog (persistante), Sheet (4 côtés) et un Drawer mobile qui se ferme d’un balayage. -
Hover Card
<mv-hover-card>Carte d’aperçu enrichie au survol ou au focus clavier, avec délais d’ouverture et de fermeture et un pont invisible qui la garde ouverte pendant que le pointeur la rejoint. -
MenuGratuit
<mv-menu>Menu déroulant complet : cases à cocher, éléments radio, sous-menus avec safe-triangle, raccourcis, recherche à la frappe et navigation clavier APG ; option data-motion="glide" (ouverture depuis le coin du déclencheur, une seule surbrillance qui glisse entre les éléments, sous-menus qui arrivent en glissant). -
PopoverGratuit
<mv-popover>Panneau flottant non modal dans le top layer (Popover API) : placement automatique avec retournement, flèche en option, fermeture au clic extérieur ou sur Échap avec gestion du focus ; option data-open="liquid" où le panneau s’étire hors du déclencheur par un « col » liquide, puis s’y résorbe à la fermeture. -
Timed ChoiceExclusif
<mv-timed-choice>Une invite non critique qui propose un choix avec un minuteur qui se vide sous vos yeux et applique une valeur par défaut sûre si personne ne répond : « Épisode suivant dans 8 s · Annuler / Lire maintenant », « Conserver ces paramètres d’affichage ? -
ToastGratuit
<mv-toaster>Notifications empilées façon Sonner : une pile compacte qui se déploie au survol, minuteurs mis en pause, balayage pour fermer, promesses et mises à jour sur place par id, via une API impérative toast(). -
Toast PhysicsExclusif
<mv-toast-physics>Des notifications qui sont de vrais corps rigides : elles tombent dans un bac en coin et s’empilent sous l’effet de la gravité, et la priorité devient une masse (une erreur est plus lourde et plus large, atterrit avec un bruit sourd qui bouscule les autres, puis s’enfonce sous les cartes plus légères). -
TooltipGratuit
<mv-tooltip>Infobulle dans le top layer (Popover API), placement automatique avec retournement, flèche, délai groupé. -
Tooltip Group
<mv-tooltip-group>Infobulle partagée par un groupe de déclencheurs, comme une barre d’outils : après le premier délai, une seule bulle glisse et se redimensionne de bouton en bouton et fait un fondu enchaîné de son libellé, sans fermeture, réouverture ni seconde attente.
Navigation 16
-
As OfExclusif
<mv-as-of>Contrôle de point dans le temps (« à la date du ») pour les applications de données capables d’afficher le passé, afin que des chiffres historiques ne soient jamais pris pour des chiffres actuels. -
Breadcrumb
.mv-breadcrumbFil d’Ariane en pur CSS sur nav > ol : séparateurs chevron, barre oblique ou point (muets pour les lecteurs d’écran), icônes, troncature, et niveaux repliés dans un popover natif ancré. -
CrumbsExclusif
<mv-crumbs>Une trace des endroits où l’utilisateur est réellement passé, pour les apps où l’on saute d’une fiche à l’autre (CRM, support, console d’administration, docs, navigateur de code, back-office), et non la position de la page dans la hiérarchie. -
Dock
<mv-dock>Dock façon macOS : les icônes grossissent selon leur distance au pointeur (atténuation en cosinus lissée par un ressort), libellés au survol, point d’activité, horizontal ou vertical, navigation complète au clavier. -
Door DialExclusif
<mv-door-dial>Sélecteur de contexte qui redirige les mêmes liens, actions et exemples de code vers un autre contexte (environnement, région, tenant, version de la doc, base d’API) sans reconstruire la page. -
Edge TrackerExclusif
<mv-edge-tracker>Indicateurs hors écran pour tout ce que l’utilisateur ne voit pas dans un conteneur défilant, une longue page ou un canevas déplaçable : messages non lus plus bas, erreurs de formulaire plus haut, mentions, résultats de recherche, éléments sélectionnés, curseurs des collaborateurs. -
Finger HoldExclusif
<mv-finger-hold>Assistant à embranchements où chaque page de décision peut être retenue avec un « doigt » : choisissez une option, explorez où elle mène (questions suivantes, prix, offre obtenue), puis revenez directement à la page retenue exactement comme vous l’avez laissée, champs compris. -
FootprintsExclusif
<mv-footprints>Présence des collaborateurs en direct pour les longs documents, specs, fichiers de code et tableurs : un fin rail à côté du conteneur défilant, où chaque personne est un petit repère libellé (initiales ou avatar, dans sa couleur) à l’endroit exact où elle lit ou modifie, suivi de quelques empreintes qui s’estompent et montrent dans quel sens elle se déplace, vers le bas, vers le haut, ou d’un bond vers une autre section avec un arc en pointillés. -
Inside CountExclusif
<mv-inside-count>Des onglets, accordéons et pages fermés qui annoncent leur contenu avant qu’on les ouvre. -
Keen SightExclusif
<mv-keen-sight>Mode d’indices affichés tant qu’une touche est maintenue, qui permet aux utilisateurs du clavier d’agir sur tout ce qu’ils voient sans y aller à coups de Tab. -
Lock-onExclusif
<mv-lock-on>Navigation clavier spatiale pour les mises en page 2D où l’ordre de tabulation ne sert à rien (tableaux de bord aux widgets inégaux, grilles de cartes, tableaux kanban, plans de salle, cartes avec marqueurs, éditeurs de nœuds, interfaces TV et console), avec un verrouillage qui garde une cible mobile en vue. -
Pagination
<mv-pagination>Pagination numérotée avec points de suspension et un nombre d’emplacements constant (la barre ne saute jamais), précédent/suivant, mode compact « Page x sur y » ; les styles CSS fonctionnent seuls pour des liens rendus côté serveur. -
Smart HeaderExclusif
<mv-smart-header>Enveloppez n’importe quel en-tête pour le rendre collant, le faire disparaître quand on défile vers le bas et revenir quand on remonte, avec hystérésis, un état collé et sa hauteur en direct publiée pour scroll-padding. -
Stepper
<mv-stepper>Étapes horizontales ou verticales (terminée, en cours, à venir) avec des connecteurs qui se remplissent de la couleur d’accent, numéros automatiques, coche animée et étape de chargement ; <mv-stepper value> en option pour piloter les états. -
TabsGratuit
<mv-tabs>Onglets accessibles avec un indicateur glissant (souligné, pill ou segmenté), horizontaux ou verticaux, activation automatique ou manuelle, et fondu enchaîné entre les panneaux. -
Thread BackExclusif
<mv-thread-back>Un fil de retour pour les explorations en profondeur qui éloignent d’une tâche : nouez-le à un point de départ (un paiement, un rapport, une étape d’onboarding) avec tie({ label, href, state, restore }) ou un lien data-thread-tie, et chaque navigation qui suit le rembobine d’un cran.
Affichage de données 56
-
AccordionGratuit
<mv-accordion>Accordéon CSS sur le <details> natif : hauteur animée (::details-content + interpolate-size), chevron ou plus/moins, variantes bordée, séparée et carte ; <mv-accordion type="single"> en option. -
AccountsExclusif
<mv-accounts>Frise multisource qui aligne plusieurs récits d’un même événement et montre, fait par fait, où ils concordent, où ils se contredisent et où une source reste muette : post-mortems d’incident (logs de la passerelle vs prestataire de paiement vs télémétrie client vs notes d’astreinte), litiges de livraison (client vs entrepôt vs transporteur), pistes d’audit, fact-checking, comptes rendus de réunion rédigés par plusieurs participants. -
Agent LensesExclusif
<mv-agent-lenses>Un seul modèle d’agents IA en arrière-plan, cinq vues (Board, Inbox, Tasks, Calendar, Graph), et chaque agent est une carte persistante qui voyage physiquement d’une disposition à l’autre : changer de vue anime chaque carte en FLIP de son ancien rectangle vers le nouveau, pendant qu’elle se transforme de carte complète en ligne, barre de temps ou nœud de graphe, pour ne jamais perdre un agent de vue. -
All-in PriceExclusif
<mv-all-in>Affichage honnête du prix tout compris, qui dit tout haut ce que la tarification au goutte-à-goutte (drip pricing) cache. -
Animated List
<mv-animated-list>Flux de notifications animé : les éléments apparaissent un à un avec un ressort et poussent les autres en douceur (FLIP), avec une limite d’éléments, un mode boucle et une API add(). -
Blocked BlurExclusif
<mv-blocked-blur>Une mise en sourdine qui préserve la forme de la conversation. -
ButterflyExclusif
<mv-butterfly>Aperçu d’impact pour les réglages, les formulaires de tarification, les éditeurs et les écrans de type tableur : avant qu’une valeur ne change, chaque valeur sur laquelle elle se répercutera s’illumine. -
Calendar
<mv-calendar>Calendrier mensuel localisé (Intl, semaine commençant au premier jour de la locale) : sélection simple, de plage avec aperçu au survol, ou multiple, dates min/max et désactivées, navigation complète au clavier, vues mois/année et transition glissée. -
CardGratuit
.mv-cardCarte composable (média, en-tête, action, contenu, pied) : variantes outline, elevated, ghost et muted, plus une carte entièrement cliquable. -
Chart
<mv-chart>Graphique SVG sans dépendance (aires, barres, lignes, sparkline) : rendu au pixel près, échelle arrondie, tracé animé à l’apparition, réticule et infobulle au survol et au clavier, et un tableau de données pour les lecteurs d’écran. -
Code BlockExclusif
<mv-code-block>Enveloppe n’importe quel <pre><code>, brut ou déjà coloré, avec un nom de fichier, une étiquette de langage, un bouton de copie, des numéros de ligne, des lignes surlignées et de diff, le repli et un bouton de retour à la ligne, et copie ce dont le lecteur a vraiment besoin : les invites du shell, la sortie des commandes et les marqueurs de diff sont exclus, et les numéros de ligne comme les marqueurs ne peuvent pas non plus être sélectionnés à la main. -
Context RingsExclusif
<mv-context-rings>Rend visible, et modifiable, ce qu’un assistant IA « sait » pour la tâche en cours : trois anneaux concentriques (« Cette tâche » au centre, « Toujours » pour les préférences et les règles, « Ambiant » pour les flux : e-mail, agenda, chat) plus un bac « Hors contexte ». -
CountdownExclusif
<mv-countdown>Compte à rebours jusqu’à une date pour les lancements, soldes, webinaires et événements : jours, heures, minutes et secondes (configurables) en chiffres tabulaires avec des libellés au pluriel correct fournis par Intl, en variantes simple, carte ou compacte. -
CurtainExclusif
<mv-curtain>« Comment est-ce calculé ? » pour n’importe quel chiffre soigné : enveloppez un graphique, un KPI, un score, un prix ou une réponse IA, et une poignée écarte le visuel comme un rideau (un balayage par clip avec une ombre de pli douce ; un simple fondu en mouvement réduit) pour révéler ses coulisses au même emplacement, sans saut de mise en page. -
DatelineExclusif
<mv-dateline>Un moment ou une échéance qui tient compte des fuseaux horaires et rend les changements de jour impossibles à manquer. -
DeliberationExclusif
<mv-deliberation>Décisions de groupe par tours, avec votes cachés et convergence visible : estimation (planning poker), décisions go/no-go, débriefs de recrutement, critiques de design, priorisation ou votes sur les actions de rétro. -
Delivery TrailExclusif
<mv-delivery-trail>Rend observable, étape par étape, l’acheminement des messages critiques et transforme les échecs silencieux en blocages bien visibles et actionnables : e-mails de réinitialisation de mot de passe et de vérification, codes SMS, factures, notifications push, webhooks, demandes de signature électronique. -
DorianExclusif
<mv-dorian>La fraîcheur du contenu lisible d’un coup d’œil : enveloppez n’importe quel contenu (en-tête de page de doc, article du centre d’aide, grille tarifaire, politique) et il reste exactement tel quel, tandis qu’un petit portrait encadré à côté vieillit avec le temps écoulé depuis sa dernière relecture. -
Drift CheckExclusif
<mv-drift-check>Montre comment un texte relayé a dérivé de sa source, étape par étape : exigences transmises du client aux commerciaux, puis au PM, puis au ticket, citations qui passent de l’interview au communiqué puis à l’article, résumés de résumés, textes transférés, traduits ou réécrits par IA. -
Field GuideExclusif
<mv-field-guide>Grille de collection numérotée où chaque entrée a trois niveaux de connaissance, pour que ce qui manque soit aussi visible que ce qui est acquis : inconnue (un emplacement numéroté vide au contour en tirets, avec un indice en option), vue (l’illustration réduite à une silhouette monochrome, le nom, les détails verrouillés et un indice « comment l’obtenir ») et possédée (carte en couleurs avec résumé, description, faits et appel à l’action). -
ForkExclusif
<mv-fork>Lignes temporelles « et si » pour toute vue pilotée par des entrées (simulateurs de prêt et de prix, comparaisons d’offres, aperçus de configuration, variantes de texte) : Fork divise la vue en lignes temporelles côte à côte, identiques au départ, chacune avec ses propres entrées, et recalcule les sorties de chacune via votre fonction compute(state) (synchrone ou asynchrone) ou un callback render(state, body). -
Hold SlotExclusif
<mv-hold-slot>Lecteur de file de travail pour traiter les éléments un par un (tickets de support, modération, revues de code, tri de photos, qualification de leads, flashcards) : l’élément courant s’affiche en grand, une colonne Next présente les suivants (3 par défaut, le premier un peu plus marqué) et un unique emplacement Hold permet de mettre l’élément courant de côté sans le perdre, puis de le reprendre plus tard, mais une seule fois par tour (hold-limit), pour que rien ne soit jonglé indéfiniment. -
InscribeExclusif
<mv-inscribe>Des notes critiques qui suivent une fiche partout où elle apparaît dans l’app. -
LacunaExclusif
<mv-lacuna>Suppression progressive et sur place pour les listes et les grilles, qui remplace les toasts d’annulation et tient la route quand on supprime plusieurs éléments d’affilée. -
Lead BoardExclusif
<mv-lead-board>Un journal d’enquête où le seul progrès est ce que vous savez : recherche, entretiens utilisateurs, investigations d’incidents, due diligence, chasse aux bugs, journalisme. -
Mirror RankExclusif
<mv-mirror-rank>Un classement qui s’explique honnêtement et dit ce qu’il faudrait pour monter : leaderboards (ventes, contributeurs), classements de vendeurs ou de recherche, scores de crédit, de santé, SEO ou de sécurité. -
Net ProgressExclusif
<mv-net-progress>Distingue l’activité brute du progrès net et rend le churn visible, pour les docs et specs, le code, les fichiers de design, les modèles, les backlogs, les calendriers éditoriaux ou les contrats en négociation. -
Odd One OutExclusif
<mv-odd-one-out>Repérage automatique des anomalies dans un ensemble d’éléments censés être semblables : dérive de configuration entre serveurs, conteneurs ou environnements, incohérences de prix et de stock entre les variantes d’un produit, un salarié dont les droits diffèrent de ceux de ses pairs au même poste, une région dont les réglages divergent. -
OrigamiExclusif
<mv-origami>Des panneaux qui se plient comme du papier. -
PapersExclusif
<mv-papers>Poste de rapprochement multidocument pour les workflows de vérification (KYC, facture vs bon de commande vs bon de livraison, contrat vs devis, formulaire soumis vs pièce d’identité). -
PeaExclusif
<mv-pea>Fait ressentir à chaque niveau supérieur un minuscule problème enfoui au fond de couches repliées. -
Price
<mv-price>Prix e-commerce formaté avec Intl.NumberFormat (en-US / USD par défaut) : prix actuel, prix de comparaison barré, badge de remise calculé (pourcentage ou montant), prix unitaire, « À partir de », fourchette de prix, centimes en exposant, quatre tailles ; utilisable aussi en HTML statique avec les classes .mv-price-*. -
Product Card
<mv-product-card>Carte produit en trois formats : vignette de grille (seconde image au survol, badges « Nouveau » / « −20 % », cœur de liste de souhaits, ajout rapide par taille avec confirmation, pastilles de couleur, état épuisé), ligne de panier (quantité, total de ligne recalculé, suppression animée) et ligne de récapitulatif compacte ; lien étendu accessible, container queries. -
Real TermsExclusif
<mv-real-terms>Compare une évolution à ce qu’a fait le monde sur la même période, pas seulement à zéro, pour qu’une croissance qui ne fait que suivre (ou qui décroche) ne passe jamais pour un progrès : chiffre d’affaires, salaires, prix, trafic, part de marché, rendements d’investissement. -
Relative TimeExclusif
<mv-relative-time>« Il y a 3 minutes » qui reste à jour tout seul : un vrai <time datetime> avec un texte Intl.RelativeTimeFormat (« maintenant », « dans 2 jours », « hier » selon le jour calendaire, pas sur 24 h), qui passe à une date absolue au-delà d’un seuil, dans la locale du lang le plus proche. -
Reveal OnceExclusif
<mv-reveal-once>L’étape complète de remise d’un secret qui ne peut s’afficher qu’une fois (clé d’API, jeton d’accès personnel, secret de signature de webhook, codes de récupération 2FA, mot de passe temporaire, phrase de récupération d’un wallet), sans minuteur : la valeur reste affichée aussi longtemps que nécessaire, mais l’utilisateur ne peut pas continuer sans confirmer qu’il l’a sauvegardée. -
Scope TallyExclusif
<mv-scope-tally>Rend visible l’augmentation du périmètre par rapport à la demande initiale, pour les projets clients et les devis au forfait, les specs produit, les engagements de sprint, les appels d’offres et les contrats. -
Self-DestructExclusif
<mv-self-destruct>Affichage de secret à usage unique (clé d’API, codes de récupération, mot de passe partagé, lien temporaire), montré une fois puis réellement détruit. -
SnowballExclusif
<mv-snowball>Sélection par balayage pour les grilles et les listes (photothèques, gestionnaires de fichiers, boîtes de réception, catalogues) : maintenez Maj (ou un autre modificateur, ou aucun) et faites rouler le pointeur sur les éléments. -
Steady PaceExclusif
<mv-steady-pace>Suivi du rythme d’un objectif qui indique la cadence régulière nécessaire à partir d’aujourd’hui, pas seulement un pourcentage : objectifs d’épargne, quotas de vente, objectifs de lecture ou d’apprentissage, levée de fonds, périmètre de sprint, plans d’entraînement. -
Stone SoupExclusif
<mv-stone-soup>Tableau de contributions à un objectif commun où l’apport de chaque participant reste visible et où l’ensemble devient visiblement plus que la somme de ses parties : repas partagés et inscriptions à des événements (« qui apporte quoi »), cagnottes d’équipe, levées de fonds, primes, listes de souhaits communautaires, couverture de plannings ou capacité d’un sprint par personne. -
Table
<mv-table>Tableau stylé en CSS (survol, zébrures, densité, en-tête/colonne sticky, statuts) + <mv-table> en option pour le tri et le filtrage. -
Tamper SealExclusif
<mv-tamper-seal>Accès « bris de glace » à des données sensibles, avec trace de toute ouverture (un dossier patient, un numéro de carte complet ou de sécurité sociale, un salaire, les messages privés d’un client, des secrets de production, une offre sous pli scellé), qui peut s’ouvrir, mais jamais en secret. -
TheseusExclusif
<mv-theseus>Surcouche de provenance qui répond à la question « quelle part de ceci correspond encore à ce que nous avons signé ? ». -
Time VaultExclusif
<mv-time-vault>Un coffre de messages écrits maintenant et scellés jusqu’à un moment futur précis : une date (data-opens, absolue ou relative comme « +1y » après l’écriture) ou une condition nommée de l’app (« quand nous lancerons publiquement », « quand le MRR dépassera 10 k $ ») que votre app transmet via vault.check(state) ou l’attribut flags, avec une progression en option (0-1 ou « 7,4 k $ sur 10 k $ »). -
To ScaleExclusif
<mv-to-scale>Rend les quantités abstraites parlantes en les reformulant à une échelle humaine que le lecteur connaît déjà, à côté de la valeur précise intacte : 2,4 To ≈ 800 heures de vidéo HD, 412 t CO₂e ≈ le CO₂ absorbé par 7 000 jeunes arbres, 9 000 $ ≈ 6 mois de loyer à Lisbonne, 21 600 commandes/jour ≈ une commande toutes les 4 secondes, 38 % des clients ≈ 2 clients sur 5. -
Trend ChipExclusif
<mv-trend-chip>La petite puce « ▲ +12,4 % vs la semaine dernière » pour les cartes KPI, les tableaux de bord, les grilles tarifaires et les rapports : donnez-lui la variation (value="0.124") ou deux montants (from / to) et elle affiche la valeur signée via Intl en pourcentage, en points de pourcentage, en nombre simple, dans n’importe quelle devise ou n’importe quelle unité (« −32 ms »), avec une période facultative. -
Trust LadderExclusif
<mv-trust-ladder>Une autonomie graduée, gagnée par l’historique, aussi bien pour les agents IA que pour les automatisations, les intégrations et les nouveaux membres d’équipe. -
Turn ClockExclusif
<mv-turn-clock>Gestionnaire de temps de parole équitable pour les standups, rétros, débats, entretiens, tables rondes et rotations de mob programming, conçu comme une pendule d’échecs de tournoi : chaque participant dispose d’une réserve de temps (égale, ou propre à chacun) qui ne s’écoule que pendant son tour, une seule pendule tourne à la fois, et passer le tour (grand bouton Pass, Espace, une touche chiffre ou un clic sur la personne) arrête la vôtre et lance la suivante, avec un incrément par tour en option. -
UnclaimedExclusif
<mv-unclaimed>Radar des responsabilités pour les listes de travail partagées : enveloppez n’importe quelle liste, table ou tableau de choses que tout le monde juge importantes (actions de réunion, suites d’incident, actions de rétro, triage de bugs, fils de boîte partagée, alertes sans astreinte, dette de documentation), et chaque élément dont data-owner est vide reçoit un repère discret « Personne pour l’instant », un siège vide en pointillés là où siégerait un responsable, qui se fait doucement plus présent en vieillissant (teinte, bordure et texte se renforcent sur la fenêtre de maturité ; jamais rouge, jamais animé). -
UnobservedExclusif
<mv-unobserved>Une zone mise à jour en direct (fil, leaderboard, carnet d’ordres, liste de notifications, kanban synchronisé avec le serveur) qui ne se réordonne ni ne bouge jamais pendant qu’on la regarde. -
UnsourcedExclusif
<mv-unsourced>Ancrage dans les sources, affirmation par affirmation, pour les textes générés ou longs (réponses IA, réponses du support, synthèses de recherche, rapports) : chaque affirmation indique d’elle-même, sur place, si quelque chose l’étaye. -
Variant TreeExclusif
<mv-variant-tree>Un explorateur de variantes arborescent pour tout élément piloté par des propriétés CSS personnalisées (ou tout état via des callbacks) : « Générer 4 variantes » fait pousser des enfants mutés de la variante appliquée (un slider Spread règle l’audace des mutations), présentés comme un arbre ordonné de vignettes en direct : des clones inertes et réduits de la cible, si bien que cela fonctionne avec n’importe quel composant, sans captures d’écran. -
WhereaboutsExclusif
<mv-whereabouts>Tableau de statut d’équipe en forme de cadran dont les aiguilles indiquent ce que font les gens au lieu de l’heure. -
Whose WordsExclusif
<mv-whose-words>Mention de l’auteur pour les textes d’origine mixte : brouillons assistés par IA, docs co-écrites, passages cités, e-mails issus de modèles et traductions. -
Yet To ComeExclusif
<mv-yet-to-come>Une métrique racontée comme une histoire en trois temps, conçue pour changer la suite : Past (sparkline, évolution sur la période et plus forte hausse ou baisse, avec son annotation), Now (valeur actuelle, écart avec la période précédente, tendance par période) et Ahead (où la métrique arrivera si la tendance actuelle se poursuit, avec une bande d’incertitude clairement libellée, nulle aujourd’hui et qui s’élargit à chaque période).
Feedback 35
-
Alert
.mv-alertEncadrés en pur CSS (neutral, info, success, warning, danger) avec icône, titre, description et actions qui passent sous le texte sur les largeurs étroites, un bandeau pleine largeur et une fermeture animée facultative en quelques lignes de JS. -
Alert PhaseExclusif
<mv-alert-phase>Un statut d’incident dont la gravité décroît avec le temps au lieu de basculer entre rouge et vert. -
Announcement BarExclusif
<mv-announcement-bar>Fine barre en haut du site pour les lancements, les soldes, les avis de maintenance et les avant-goûts de fonctionnalités, avec un bouton de fermeture mémorisé par id-key dans localStorage (un nouvel id de campagne la réaffiche), une date until facultative qui la retire d’elle-même, des tons info, accent et warning, et de la place pour un compte à rebours en slot. -
Bench SyncExclusif
<mv-bench-sync>Statut de synchronisation local-first qui rend les modifications en attente explicites et ne les envoie qu’aux points de repos. -
Cry WolfExclusif
<mv-cry-wolf>Garde-fou contre la fatigue d’alerte pour les centres de notifications et les consoles de supervision : il ne se contente pas d’afficher les alertes, il décide lesquelles méritent d’interrompre. -
Deep PauseExclusif
<mv-deep-pause>Une pause cohérente pour un tout (mode vacances d’une boutique en ligne, abonnement, espace de travail, intégration, campagne publicitaire, départ en congé) au lieu d’un simple interrupteur marche/arrêt. -
Deja VuExclusif
<mv-deja-vu>Signale, instantanément et sur place, les changements que le système a faits dans le dos de l’utilisateur, jamais ceux que l’utilisateur a provoqués. -
Empty
.mv-emptyÉtat vide en CSS pur : une tuile d’icône sur des anneaux en fondu ou une grille, titre, description, actions et pied de bloc ; variantes compacte (listes, tableaux) et illustrée (cartes en éventail sur un motif de points). -
Env MarkerExclusif
<mv-env-marker>Indicateur d’environnement qui rend impossible de confondre un environnement hors production avec la production. -
FigurinesExclusif
<mv-figurines>Indicateur de tentatives restantes qui rend tangible une limite faible et stricte avant un blocage : essais de code, de PIN ou de mot de passe, nouvelles tentatives de paiement, tentatives de réponse, exports gratuits. -
Ghost RunExclusif
<mv-ghost-run>Votre progression face à votre propre tentative précédente, pour les tâches qu’on répète : un fantôme translucide rejoue votre meilleur passage (ou le dernier, celui d’un coéquipier ou la médiane de l’équipe fournie par l’app) sur la même piste en temps réel, pour voir à chaque instant si vous êtes en avance ou en retard sur lui. -
HatchExclusif
<mv-hatch>« Dispositif de l’homme mort » pour l’expiration de session : une discrète pastille de compte à rebours (chiffres tabulaires qui défilent comme un compteur mécanique) que quelqu’un doit réinitialiser délibérément avant qu’elle n’atteigne zéro. -
Honest WaitExclusif
<mv-honest-wait>Un indicateur d’attente longue qui ne fait jamais semblant, pour les exports, rendus vidéo, générations par IA, constructions de rapports, provisionnements, files d’attente et uploads sur des connexions lentes. -
InsistExclusif
<mv-insist>Des indices progressifs qui n’apparaissent que lorsque l’utilisateur bloque, et deviennent plus directs à mesure qu’il peine. -
LeitmotifExclusif
<mv-leitmotif>Des signaux sonores optionnels qu’on reconnaît sans regarder, pour les écrans qu’on surveille en faisant autre chose : consoles d’exploitation, files de support, salles de marché, chat, écrans de cuisine, tableaux de bord CI. -
LookalikeExclusif
<mv-lookalike>Détection des sosies pour tout ce qui prétend venir de quelqu’un de confiance : enveloppez des e-mails, fils de discussion, formulaires ou zones de collage, donnez-lui vos identités de confiance (trusted="Acme Bank <acme-bank.com>, @stripe.com, @northwind, Payroll <DE89 3704 …>"), et chaque lien, expéditeur, adresse e-mail, @handle, nom de paquet ou d’utilisateur, IBAN et adresse de wallet dans son périmètre, y compris le texte brut et les champs pendant la saisie ou le collage, leur est comparé. -
MidnightExclusif
<mv-midnight>Un mode à privilèges élevés visible et limité dans le temps (réauthentification sudo/admin, « vue en tant que client », accès partagé temporaire, essai premium, accès bris de glace, verrou d’édition), qui se termine pile à l’heure et remet tout en place. -
Pixel Loader
<mv-pixel-loader>Indicateurs de réflexion en matrice de points sur une minuscule grille de pixels (3×3 à 9×9) en currentColor : serpent, orbite, ondulation concentrique, balayage, spirale, respiration, scintillement ou vague diagonale, avec un libellé facultatif traversé par une bande plus claire. -
Progress
.mv-progressBarres de progression sur le <progress> natif (déterminée avec reflet, indéterminée avec balayage, segmentée), anneau SVG circulaire piloté par --value avec compteur animé, et jauge <meter> colorée selon ses seuils. -
Quiet AlarmExclusif
<mv-quiet-alarm>Un détecteur d’absence : il donne l’alerte quand quelque chose qui se produit d’habitude a cessé de se produire (commandes, webhooks, messages websocket, relevés de capteurs, lignes de log). -
RechargeExclusif
<mv-recharge>Un budget de rate limit et de quota visible (token bucket) pour tout ce qui est décompté : messages IA, appels d’API, renvois de codes SMS, actions groupées, crédits de l’offre gratuite. -
RememberedExclusif
<mv-remembered>Signale les effets durables d’un choix au moment où il est fait, sans interrompre. -
Run ContractExclusif
<mv-run-contract>Un contrat d’exécution pour les longues tâches IA, qui devient le tableau de bord en direct de ce même travail : une carte, deux vies. -
Saved StateExclusif
<mv-saved-state>Ligne d’état de sauvegarde automatique (Modifications non enregistrées · Enregistrement… · Enregistré · il y a 2 minutes · Hors ligne · Échec de l’enregistrement · Réessayer) pilotée par saving() / saved() / failed() ou track(promise), ou en la pointant vers un formulaire. -
SkeletonGratuit
.mv-skeletonSquelettes de chargement avec un reflet synchronisé sur toute la page (ou une pulsation), formes de texte, de titre, d’avatar, de média et de bouton, et un fondu flouté vers le contenu chargé, piloté par aria-busy. -
Skeleton MorphExclusif
<mv-skeleton-morph>Le squelette ne cède pas la place au contenu, il le devient : chaque bloc est associé à un élément réel (data-skeleton-for, puis type, ordre et géométrie) et se déplace jusqu’à lui. -
Soft LockExclusif
<mv-soft-lock>Verrouillage souple et alertes de collision pour les fiches que plusieurs personnes (ou onglets) peuvent modifier en même temps : factures, tickets, documents, pages de configuration, opérations groupées. -
Spinner
.mv-spinnerUne famille d’indicateurs de chargement à élément unique, dessinés en currentColor : anneau, arc à traîne, points en vague, barres d’égaliseur, orbite et pulsation ; 5 tailles. -
Tell-TaleExclusif
<mv-tell-tale>Indicateur de travail non enregistré dont l’insistance croît avec l’enjeu. -
Thinking Orb
<mv-thinking-orb>Orbe d’assistant IA en canvas : une goutte brillante qui se déforme, tourbillonne et change de matière selon son état (repos, écoute, réflexion avec satellites en orbite, parole, succès, erreur), avec des transitions fluides entre les états. -
TremorExclusif
<mv-tremor>Alerte précoce ambiante pour une limite qui se rapproche, quand une bannière ou une modale serait excessive : stockage ou quota qui se remplit, budget qui approche de son plafond, crédits prépayés qui s’épuisent, file qui s’allonge, certificat, sprint ou échéance qui approche. -
Understood AsExclusif
<mv-understood-as>Montre comment une requête en texte libre a été comprise, juste à côté de la réponse, pour que personne ne se fie à un résultat calculé pour la mauvaise question : « Résultats pour [Chiffre d’affaires net] · [Pays de l’UE] · [T2 2026 ?] · [Hors remboursements] ». -
While AwayExclusif
<mv-while-away>« Pendant votre absence… » : enveloppe n’importe quelle zone (tableau de bord, fil, board), repère ce qui a changé pendant que vous étiez ailleurs (onglet masqué ou inactivité) et vous remet dans le contexte en 3 secondes. -
Why NotExclusif
<mv-why-not>Refus explicable : pas de « non » sans raison ni piste pour avancer. -
WobbleExclusif
<mv-wobble>Aperçu de l’impact d’un retrait, qui dose la friction d’une suppression, d’un archivage, d’une désactivation, d’une révocation ou d’une dépublication selon ce qui dépend réellement de l’élément.
Mise en page 10
-
AttacheExclusif
<mv-attache>Éditeur d’agencement de grille qui tient compte des formes : chaque enfant occupe w × h cellules d’une grille fixe (widgets de tableau de bord, stickers sur une planche d’impression, cartons sur une étagère, tables dans une salle) et la grille montre d’un coup d’œil ce qui rentre et ce qui ne rentre pas. -
Bento Grid
.mv-bentoGrille bento en pur CSS : cartes qui s’étendent sur plusieurs colonnes/lignes (data-span="2x1"…), zone visuelle en fondu, titre, description et appel à l’action révélé au survol ; s’adapte à la taille de son conteneur. -
Carousel
<mv-carousel>Carrousel construit sur le scroll snap natif : flèches, points synchronisés via IntersectionObserver, clavier, boucle, lecture automatique avec un point de progression (pause au survol, au focus et en mouvement réduit), plusieurs diapositives par vue, mode vertical et glisser à la souris. -
CourtyardExclusif
<mv-courtyard>Mur de supervision qui surveille tous les flux à la fois et vous dit où regarder : n’importe quels enfants (stats en direct, vidéo, images de caméras, jobs CI, écrans d’élèves) deviennent des « fenêtres » dans une grille automatique, et chacune signale son activité via un niveau data-activity durable, des appels ponctuels activity(window, level, note), ou les changements de son propre DOM après une période calme (MutationObserver, par lots, pour qu’une tuile qui s’actualise régulièrement reste calme et que seules les nouveautés ressortent). -
FogExclusif
<mv-fog>Découverte progressive pour les interfaces denses (consoles d’administration, outils pro, apps d’analytics aux nombreux panneaux, réglages profonds) : chaque zone marquée data-fog que l’utilisateur n’a pas encore explorée se trouve sous un voile léger et texturé (une brume de la couleur de la page, de douces nappes de nuages, une légère désaturation et un grain fin, le tout en CSS, sans canvas) avec une minuscule étiquette « Pas encore exploré · Automatisations », tandis que son contenu reste lisible, cliquable et entièrement exposé aux technologies d’assistance. -
MarginaliaExclusif
<mv-marginalia>Notes latérales responsives pour les contenus longs (docs, articles, conditions juridiques, changelogs, rapports de recherche), où chaque note décide d’elle-même si la marge peut l’accueillir. -
Marquee
<mv-marquee>Défilement infini de logos, de témoignages ou de cartes : vitesse en px/s quelle que soit la taille du contenu, horizontal ou vertical, glissement avec inertie, fondu sur les bords et variante 3D inclinée. -
Orbiting Circles
<mv-orbit>Des éléments en orbite autour d’un centre : plusieurs anneaux (rayon, durée, sens), espacement régulier, icônes qui restent droites, trajectoires dessinées ; animation 100 % CSS, en pause hors écran. -
Resizable
<mv-resizable>Panneaux redimensionnables horizontaux ou verticaux (imbricables), séparés par des poignées : glissement au pointeur, flèches du clavier, tailles min/max en %, repli au double-clic avec magnétisme, persistance dans localStorage. -
Scroll Area
.mv-scroll-areaZone de défilement avec barre fine, masquage automatique, fondus de bord pilotés par le défilement et magnétisme.
Texte animé 23
-
Adaptive InkExclusif
<mv-adaptive-ink>Un texte qui reste lisible sur n’importe quel fond animé (shader WebGL, vidéo, canvas, image) : l’arrière-plan est échantillonné en temps réel sous chaque mot, découpé en colonnes, et chaque colonne choisit une encre claire ou foncée avec un fondu : une même lettre peut être à moitié blanche, à moitié noire. -
CertaintyExclusif
<mv-certainty>Un texte dont chaque passage porte un niveau de confiance (réponse IA, résumé, rapport), rendu sobrement pour que le lecteur ajuste sa confiance sans mur d’avertissements : trois niveaux (Verified sans marque, Likely avec un soulignement pointillé, Uncertain avec une vague dessinée à la main dont l’amplitude croît avec le doute) et une encre qui s’éclaircit quand la confiance baisse. -
Circular Text
<mv-circular-text>Anneau de texte en rotation autour d’une icône, d’un logo ou d’un avatar, tracé le long d’un vrai cercle SVG pour que la police garde son crénage et que la boucle se referme régulièrement ; le survol ou le focus accélère la rotation en douceur, la ralentit, l’arrête ou l’inverse. -
Falling Text
<mv-falling-text>Un texte dont chaque mot devient une boîte rigide : au déclenchement (entrée dans la vue, clic, survol), les mots sont projetés loin du point de libération, culbutent, rebondissent et s’empilent sur le fond du bloc, puis peuvent être attrapés et lancés ; au clavier, Entrée libère les mots et secoue la pile. -
Glitch Text
.mv-glitch-textGlitch à séparation RGB en pur CSS : de fines bandes magenta et cyan du texte sautent de côté par courtes rafales, en continu ou au survol, limité à moins de trois flashs par seconde. -
Gradient Text
.mv-gradient-textTexte en dégradé multicolore en CSS pur : statique, animé en va-et-vient, fondu éditorial, ou aurore de taches colorées qui dérivent à l’intérieur des lettres. -
Letter Swap
<mv-letter-swap>Roulement lettre par lettre pour les liens de navigation et les boutons : au survol ou au focus clavier, chaque lettre roule pour révéler son double, en cascade, ou tourne comme un petit cube 3D. -
Morphing Text
<mv-morphing-text>Des mots qui fondent les uns dans les autres : deux copies superposées se floutent en alternance pendant qu’un filtre SVG de seuil alpha fusionne les glyphes en une masse « gluante ». -
Number Ticker
<mv-number-ticker>Compteur animé formaté avec Intl (en-US par défaut : devise, pourcentage, compact, décimales) en deux modes : interpolation fluide ou odomètre à rouleaux ; se réanime à chaque changement de valeur, sans décalage de mise en page. -
Particle CounterExclusif
<mv-particle-counter>Un chiffre de KPI dessiné comme une matrice de points en particules : quand la valeur change, les particules des chiffres modifiés se dispersent, volent et sont réaffectées aux points des nouveaux chiffres (avec conservation : les surplus fusionnent, les manquantes se détachent des autres), avec un flash vert à la hausse et un rouge à la baisse. -
Particle Text
<mv-particle-text>Un texte dessiné par des milliers de particules sur canvas, échantillonnées dans la police même de l’élément : elles se mettent en place de gauche à droite, fuient le pointeur et reviennent comme un ressort, volent en éclats au clic et coulent vers le nouveau mot quand le texte change, colorées par un dégradé qu’elles traversent. -
Rolling Text
<mv-rolling-text>Libellé de survol qui roule vers le haut lettre par lettre, de gauche à droite, puis retombe en place ou fait arriver un second libellé par le bas, avec un léger flou pendant le trajet et une emprise fixée sur le libellé le plus long ; variante glide : un marqueur glisse entre les segments d’une phrase. -
Scramble Text
<mv-scramble-text>Effet de décodage : des glyphes aléatoires se résolvent en vrai texte (depuis le début, la fin, le centre ou au hasard) à l’apparition à l’écran, au survol ou au focus. -
Scroll Text
<mv-scroll-text>Paragraphe dont les mots (ou les lettres) s’éclairent progressivement au défilement, de pâles et flous à nets ; animations CSS pilotées par le défilement, repli en JS. -
Shimmer Text
.mv-shimmer-textReflet lumineux en CSS pur qui balaie le texte (background-clip) : un badge « Nouveau », des états IA « réflexion… » avec points animés, et une variante pulsée. -
Show MoreExclusif
<mv-show-more>Limite un contenu long à quelques lignes (ou à une hauteur, pour un contenu mixte) derrière un fondu doux et un bouton « Afficher plus » qui n’existe que si quelque chose est vraiment coupé, revérifié au redimensionnement et au chargement des images et des polices ; le texte masqué reste lisible par les lecteurs d’écran et par la recherche dans la page, Tab ou un #lien vers son contenu l’ouvre sur place, et le repli épingle le bouton pour que la page ne saute jamais. -
Sparkles Text
<mv-sparkles-text>De minuscules étoiles scintillantes qui apparaissent au hasard autour et au-dessus du texte ; couleurs, densité et vitesse réglables, déclenchement à l’apparition ou au survol. -
Text Highlight
<mv-text-highlight>Surligne les mots à leur entrée dans le viewport : un trait de marqueur qui balaie les lignes, ou une annotation dessinée à la main (soulignement, cercle, encadré, barré) tracée trait par trait. -
Text Reveal
<mv-text-reveal>Apparition de texte découpé en lettres, en mots ou en lignes avec 6 préréglages échelonnés (fade, blur, slide, 3D rotate, zoom, mask), déclenchée à l’entrée dans le viewport ; le balisage inline est préservé. -
Typewriter
<mv-typewriter>Machine à écrire pour les phrases de hero : tape des phrases lettre par lettre avec un rythme irrégulier et des pauses à la ponctuation, les efface et les fait défiler derrière un curseur en barre, en bloc ou souligné, dans une boîte réservée à sa taille finale pour que rien ne bouge autour. -
Variable Proximity
<mv-variable-proximity>Les lettres gonflent le long des axes d’une police variable (graisse, chasse, tout axe personnalisé) à l’approche d’une souris ou d’un stylet, avec un rayon en em et une atténuation linéaire, exponentielle ou gaussienne ; la position des lettres est mise en cache au repos pour que le champ ne tremble jamais, et les polices statiques se replient sur un effet d’échelle. -
Wind TextExclusif
<mv-wind-text>Un texte dont les lettres se comportent comme de l’herbe (ou un drapeau) dans un unique champ de vent partagé par toute la page : le défilement envoie des rafales dont le front balaie le texte dans le sens du défilement, le curseur souffle localement sur une grille de vitesse advectée qui se dissipe, chaque lettre ploie autour de sa ligne de base sur son propre ressort, et quelques grains de pollen s’envolent là où souffle le vent. -
Word Rotate
<mv-word-rotate>Mot rotatif en ligne pour les phrases de hero (glissement, retournement 3D, flou ou fondu, lettre par lettre) dont la largeur s’ajuste en douceur pour que la phrase ne saute jamais.
Arrière-plans 11
-
Aurora Background
<mv-aurora-background>Aurore en CSS avec une seule classe : de doux plis de lumière traversés de rayons verticaux nets dérivent et respirent en deux couches opposées (ou de grandes taches errantes), discrète en mode clair et lumineuse en mode sombre, avec un élément facultatif qui ajoute une lueur glissant à la suite d’une souris ou d’un stylet. -
BackdropExclusif
.mv-backdropArrière-plans de hero et de section avec une seule classe et zéro JavaScript : presets glow, mesh, aurora-still, grid-fade, dots-fade, rays, topo et grain, combinables (data-backdrop="mesh grain") et construits à partir des tokens de la marque, pour suivre le clair, le sombre, les sous-arbres [data-theme] et la teinte d’accent de l’application. -
Beams
<mv-beams>Faisceaux lumineux sur un seul canvas : des comètes à la traîne évanescente filent le long de courbes qui convergent vers le coin supérieur droit, ou des rayons tombent de plus en plus vite et éclatent en étincelles sur un sol lumineux. -
Dot Matrix
<mv-dot-matrix>Grille WebGL de points carrés : au chargement, ils s’allument du centre vers l’extérieur avec une brève étincelle, puis chaque point tire à nouveau sa luminosité au hasard, à ses propres moments, pour un scintillement paisible, quelques points d’accent respirent avec plus d’éclat, et une zone plus vive s’ouvre autour du pointeur. -
Dot Pattern
<mv-dot-pattern>Motif de points en CSS pur (fondu, en quinconce) et version canvas vivante : halos scintillants avec lueur au survol, ou onde concentrique que le curseur repousse avec un retour élastique. -
Grid Pattern
<mv-grid-pattern>Grille d’arrière-plan en CSS pur (lignes pleines ou pointillées, cellules en surbrillance, fondu radial) et un élément animé : scintillement, cellules qui s’allument sous le curseur avec une traînée et une onde au clic, et un sol rétro en perspective. -
Light Rays
.mv-light-raysDes rayons de lumière divine qui tombent d’en haut, en CSS pur : deux éventails de dégradés coniques flous qui oscillent et pulsent lentement, avec un halo à l’origine. -
Mesh Gradient
<mv-mesh-gradient>Dégradé en maillage WebGL animé : trois doux rubans de couleur errent sur une couleur de base, sur un plan incliné qui se replie, mélangés en Oklab pour que des teintes de marque contrastées ne se rencontrent jamais dans une zone boueuse ; en option, le plan se penche vers le pointeur. -
Meteors
<mv-meteors>Pluie de météores en diagonale aux traînées lumineuses : animation 100 % CSS ; le JS se contente de répartir les étoiles filantes et de changer leur couloir à chaque passage. -
Particles
<mv-particles>Particules en canvas qui dérivent et scintillent, repoussées ou attirées par le curseur avec un retour élastique ; un mode constellation optionnel relie les voisines entre elles et au pointeur. -
Still TimeExclusif
<mv-still-time>Régulateur de mouvement ambiant : enveloppez n’importe quelle zone et chaque animation qu’elle contient (keyframes CSS, transitions CSS, Web Animations, vidéos muettes) ne va pas plus vite que l’activité de l’utilisateur.
Curseurs 9
-
Busy CursorExclusif
<mv-busy-cursor>« Veuillez patienter » local pour une seule région (un tableau qui se recharge, un graphique qui se recalcule, un panneau qui enregistre) : tant qu’elle est occupée, un petit anneau accompagne le curseur système avec une progression indéterminée ou réelle, la région reçoit cursor: progress et aria-busy, et les clics peuvent être retenus, puis rejoués une fois ou abandonnés avec une secousse. -
Cursor Follower
<mv-cursor>Curseur personnalisé : un point précis et un anneau qui suit avec un ressort, s’étire avec la vitesse, grossit sur les éléments interactifs et affiche un libellé (data-cursor="View"), avec une variante en mode de fusion difference ; limité à une zone ou à toute la page. -
Cursor SnapExclusif
<mv-cursor-snap>Effet de pointeur premium qui conserve le curseur système : une plaque douce prend la forme du lien ou du bouton survolé (sa boîte et son rayon d’angle), apparaît en douceur, penche légèrement vers le pointeur et glisse d’une cible à l’autre. -
Cursor Type
<mv-cursor-type>Un grand mot (un 404, un mot-clé) dont les lettres répondent à un pointeur précis, chacune sur son propre ressort : une graisse variable qui enfle, un étirement élastique depuis la ligne de base, des lettres repoussées qui s’inclinent en s’écartant, ou une loupe façon dock qui écarte les voisines. -
ForeseeExclusif
<mv-foresee>Anticipe le contrôle sur lequel l’utilisateur va cliquer d’après la trajectoire du pointeur, avant le clic, et tient le score de ses propres prédictions. -
Image Trail
<mv-image-trail>Traînée d’images pour souris et stylet : toutes les quelques dizaines de pixels le long du trajet du pointeur, l’image enfant suivante se pose exactement sur le trajet, est un peu emportée par l’élan du geste, puis rétrécit et disparaît, si bien que les gestes rapides laissent des empreintes régulièrement espacées ; variantes rotate et fall. -
Magnetic
<mv-magnetic>Conteneur magnétique : l’enfant se penche vers une souris proche avec une atténuation progressive, la suit un peu pendant le survol, puis revient en place comme un ressort. -
Reading RulerExclusif
<mv-reading-ruler>Guide de lecture pour les textes longs (conditions, articles, documentation) qui aide les lecteurs dyslexiques, atteints de TDAH ou malvoyants à ne pas perdre leur ligne : une bande d’exactement une ligne de haut se cale sur les vraies boîtes de ligne du texte sous le pointeur, le reste étant légèrement assombri (bande, masque ou soulignement). -
Reveal Mask
<mv-reveal-mask>Cercle doux qui suit un pointeur précis et découvre une seconde couche, avec une traînée facultative qui s’estompe ; le toucher, le focus clavier et revealed l’ouvrent comme un iris, et le mouvement réduit le fait apparaître en fondu.
Défilement 11
-
Back to TopExclusif
<mv-back-to-top>Bouton flottant de retour en haut qui n’apparaît qu’une fois le lecteur bien avancé dans la page, quand il remonte ou marque une pause, jamais pendant la lecture vers le bas, avec un anneau de progression facultatif. -
Container Scroll
<mv-container-scroll>Un écran d’appareil qui bascule en arrière avec un reflet sur sa vitre, puis se redresse, se pose et perd son reflet en entrant dans la vue au défilement, pendant que le titre monte à sa place. -
Drag ScrollExclusif
<mv-drag-scroll>Enveloppe n’importe quel tableau, rail de cartes, frise ou kanban qui déborde latéralement pour que les utilisateurs de souris le voient et s’en servent : fondus sur les bords et indice « Plus » uniquement sur les côtés masqués, saisie et glissement avec inertie, molette classique convertie en défilement horizontal, boutons de pagination facultatifs. -
Parallax
<mv-parallax>Profondeur de défilement en couches sans aucune configuration : marquez n’importe quel descendant avec data-speed et il dérive à son propre rythme quand la section traverse son conteneur de défilement, déplacé par une view timeline native hors du thread principal, avec un repli JS léger limité à ce qui est visible. -
Reading MapExclusif
<mv-reading-map>Une minimap en direct d’un article, construite à partir de son DOM et non d’une capture d’écran : chaque ligne de texte (avec sa vraie longueur), titre, puce, image, tableau et ligne de code devient une forme abstraite. -
Scroll Progress
<mv-scroll-progress>Indicateur de progression de lecture : une barre en CSS pur en haut de la page (scroll timeline), ou un élément barre / anneau avec pourcentage qui suit n’importe quel conteneur défilant, avec lissage par ressort en option. -
Scroll Reveal
<mv-reveal>Apparition au défilement : les enfants apparaissent en fondu, flou, glissement ou zoom, de façon échelonnée, une seule fois ou à chaque passage ; une variante en CSS pur est pilotée par une view timeline. -
Scroll Stack
<mv-scroll-stack>Cartes sticky qui s’empilent au défilement : chaque carte qui arrive se met en place pendant que celles du dessous reculent d’un cran (plus petites, plus sombres), pilotées par le défilement là où c’est pris en charge ; le focus découvre les cartes recouvertes, et le mouvement réduit donne une simple liste. -
Scroll Velocity
<mv-scroll-velocity>Des rangées de grand texte qui défilent à l’infini ; leur vitesse et leur sens suivent la vitesse de défilement (lissée par ressort), et le texte s’incline lors des défilements rapides. -
Sticky Scroll
<mv-sticky-scroll>Section de scrollytelling : les étapes s’accrochent à un rail de progression qui se remplit en continu au défilement (nœuds terminés / actif / à venir), tandis que le panneau épinglé passe d’un visuel à l’autre le long d’une seule jointure qui suit le sens du défilement et qu’un indicateur segmenté suit l’étape en cours ; empilement sur mobile. -
Tracing Beam
<mv-tracing-beam>Rail de frise chronologique à côté d’un article ou d’un changelog : la traînée se remplit avec la progression de la lecture et chaque nœud de section s’allume quand le faisceau le dépasse, piloté par une view timeline native avec un repli JS léger.
Médias 9
-
Blur UpExclusif
<mv-blur-up>Enveloppe une <img> native (lazy loading, srcset, sizes, alt et <picture> intacts) : garde son ratio pour que rien ne bouge, affiche une minuscule image floutée, une couleur dominante ou un dégradé, puis passe en fondu à la photo une fois décodée. -
Device Mockup
.mv-deviceCadres d’appareils en CSS pur autour de n’importe quel contenu : iPhone (Dynamic Island, boutons), Android (poinçon), iPad portrait/paysage, MacBook (encoche, base en aluminium) et fenêtre de navigateur (boutons feux tricolores, barre d’adresse via data-url) ; bordures sombres ou claires, le tout mis à l’échelle à partir d’une seule largeur. -
Image Compare
<mv-image-compare>Comparaison avant/après où tout le cadre sert de piste au curseur : une poignée en capsule role=slider entièrement utilisable au clavier, une pastille de valeur en direct, des badges coupés net par la ligne, un tactile qui distingue tapotements, glissements et défilement de la page, horizontal ou vertical, au glisser ou en suivi de la souris, un balayage facultatif et une variante lumineuse. -
Invite InExclusif
<mv-invite-in>Intégration respectueuse de la vie privée qui n’envoie aucune requête à un tiers tant que l’utilisateur ne l’a pas invitée : vidéos YouTube et Vimeo, cartes, publications de réseaux sociaux, widgets de chat, iframes chargées de traceurs, feuilles de style de polices tierces. -
Lens
<mv-lens>Loupe qui suit le curseur sur une image ou n’importe quel contenu : une copie agrandie découpée en cercle (ou en carré), ancrée au pointeur, bord en verre, ouverture animée, position fixe en option et déplacement au clavier. -
Mosaic Gallery
<mv-mosaic>Mosaïque d’images qui se réorganise d’elle-même : la photo choisie devient la grande vignette et chaque vignette se transforme jusqu’à sa nouvelle place en une seule View Transition, recadrée plutôt qu’étirée. -
Product Gallery
<mv-product-gallery>Galerie de page produit : image principale sur scroll-snap natif (balayage au toucher), vignettes synchronisées en colonne ou en ligne (changement au survol en option), zoom au survol qui suit le pointeur, flèches et compteur, barre segmentée dans les petits conteneurs, et plein écran dans un <dialog> avec zoom au clic et déplacement. -
Step ZoomExclusif
<mv-step-zoom>Inspecteur d’images à zoom profond, fondé sur des paliers discrets et adressables plutôt que sur le pincement et le défilement libres. -
World Map
<mv-world-map>Carte du monde SVG en points, construite à partir des données terrestres Natural Earth du domaine public, avec de vraies routes orthodromiques qui se tracent et transportent de petits paquets, des balises sur les villes pivots, des libellés HTML nets et une liste pour lecteurs d’écran de chaque lieu et de chaque liaison.
3D 5
-
Card Stack
<mv-card-stack>Pile de cartes à balayer : les cartes reposent chacune avec sa légère inclinaison et se redressent quand celle du dessus est tirée ; la carte du dessus pivote autour du point saisi, un badge de verdict et une teinte sur le bord grandissent avec la traction pendant que le bouton correspondant se remplit, les lancers conservent l’élan du geste, et next() glisse la carte sous la pile ; boutons, touches fléchées, annulation, boucle ou fin de pile, et lecture automatique. -
Exploded ViewExclusif
<mv-exploded>Vue éclatée en 3D de n’importe quelle interface vivante : chaque boîte devient un plan surélevé selon sa profondeur visuelle (les conteneurs invisibles n’ajoutent pas d’étage), l’ensemble s’incline en pose isométrique, pivote au glisser ou au clavier, isole une couche au survol (tag, classes, taille), étiquette les couches avec des lignes de rappel, puis se réassemble sur des ressorts par étage et restaure les styles d’origine à l’octet près. -
Flip Card
.mv-flip-cardCarte à deux faces qui se retourne en 3D au survol, au focus clavier, au toucher ou au clic, en se soulevant vers le spectateur à mi-rotation, avec une lumière qui décroît sur la face qui s’éloigne ; seule la face visible est active pour Tab, les pointeurs et les lecteurs d’écran. -
Gallery 3D
<mv-gallery-3d>Galerie 3D en CSS avec trois mises en scène : ring (un cylindre que vous faites tourner, qui continue sur son élan et s’arrête sur un élément), dome (des vignettes qui tapissent l’intérieur d’une sphère dont vous faites le tour du regard) et circular (une bande sans fin disposée le long d’un arc, pilotée au glisser ou à la molette). -
Globe
<mv-globe>Globe à points interactif sur canvas 2D (projection orthographique d’un masque des terres embarqué, zéro dépendance) : rotation automatique, glisser avec inertie, marqueurs pulsants, arcs de grand cercle animés comme des comètes, ainsi qu’un halo et un liseré atmosphérique aux couleurs de vos tokens.
Transitions 6
-
Expandable Card
<mv-expandable>Grille ou liste de cartes où une carte s’agrandit en une vue détaillée modale accessible : sa boîte, son image, son titre et sa description voyagent sur un seul ressort interruptible, le texte et les images ne sont jamais étirés, et le mouvement réduit l’ouvre instantanément. -
GrinExclusif
<mv-grin>« Fermer en laissant un résidu » pour les bannières d’annonce, widgets de chat, panneaux d’envoi de fichiers, lecteurs vidéo et panneaux de filtres : au lieu de disparaître, un panneau fermé, réduit, inactif ou dépassé au défilement s’efface progressivement et laisse un minuscule résidu persistant qui garde sa seule donnée essentielle, en direct (« Nouveau · 2 », le nombre de non-lus, un anneau de progression, « 4 filtres »). -
Morph Panel
<mv-morph-panel>Un conteneur qui anime sa largeur et sa hauteur mesurées lors d’un changement de vue, avec un fondu flouté du contenu : tiroirs à plusieurs étapes, popovers, et une variante « Dynamic Island » qui passe d’une pilule à un panneau. -
Page Transition
.mv-page-transitionTransitions de page natives sur la View Transitions API : fondu, glissement push, zoom en profondeur et révélation circulaire depuis le clic, chacun avec une version retour, pour les sites multipages et les SPA, avec le focus déplacé vers la nouvelle vue. -
Pixel Transition
<mv-pixel-transition>Passe d’une face à l’autre à travers une grille de pixels : des pixels carrés grandissent sur la première face dans un ordre aléatoire, radial (depuis le pointeur), diagonal ou par rangées, les faces s’échangent sous une couverture complète, puis les pixels rétrécissent et disparaissent. -
Twin DropExclusif
<mv-twin-drop>Des zones de dépôt liées qui déplacent des éléments d’un bout à l’autre de la page en un seul geste : deux zones <mv-twin-drop> sont appariées, et tout [data-twin-drop-item] glissé dans l’une s’engouffre dans son ouverture, puis ressort de sa jumelle ailleurs sur la page, projeté dans l’orientation de la jumelle à une vitesse proportionnelle à celle de son entrée (bornée), en ralentissant jusqu’à se poser dans le conteneur cible de la jumelle, ou en glissant et rebondissant jusqu’à l’arrêt sur un canevas libre en l’absence de cible.
Micro-interactions 12
-
Click Spark
<mv-click-spark>Conteneur qui projette des traînées d’étincelles depuis le point de clic : chaque traînée s’étire, se courbe légèrement sous la gravité et se réduit à un point autour d’un léger flash, le tout dessiné sur une seule surcouche partagée de la page, si bien que les étincelles ne sont jamais rognées et ne bloquent jamais les clics ; clavier compris, et une fonction spark() fonctionne sans l’élément. -
Confetti
<mv-confetti-button>Confettis sur canvas avec physique (gravité, traînée, culbute 3D, oscillation) : une fonction confetti() autonome, des préréglages canons / feux d’artifice / étoiles / emoji, un bouton déclencheur et un mode « cool » par appui prolongé. -
Copy Button
<mv-copy-button>Bouton de copie avec retour façon compteur kilométrique : l’icône et le libellé défilent vers le haut jusqu’à une coche (ou vers le bas jusqu’à une alerte en cas d’échec) dans des fenêtres fixes, pendant qu’un voile teinté remplit le bouton puis se vide pendant le délai, comme un compte à rebours ; les boutons à icône reçoivent une étiquette d’état. -
Count BumpExclusif
<mv-count-bump>Enveloppez un compteur de panier, un badge de notification, un compteur de non-lus ou de j’aime, et chaque changement devient visible : un petit rebond directionnel (vers le haut quand ça augmente, vers le bas quand ça diminue), seuls les chiffres modifiés défilent, un « +2 » facultatif s’envole et max="99" affiche « 99+ ». -
Hold Button
<mv-hold-button>Bouton « Maintenir pour confirmer » pour les actions destructrices : tant qu’il est pressé, un liquide monte à l’intérieur (ou arrive par le côté) et inverse le libellé là où il le recouvre, relâcher trop tôt le fait redescendre, et un maintien complet se conclut par une coche, un libellé de fin et mv-confirm. -
Icon Morph
.mv-icon-morphIcônes en CSS pur qui se transforment selon l’état ARIA de leur parent : hamburger ↔ fermer, plus ↔ moins, lecture ↔ pause, chevron V ↔ Λ, chevron rotatif, flèche → coche. -
Like Button
<mv-like>Bouton j’aime ou favori à la pression tactile : le pictogramme s’enfonce sous le pointeur, puis dépasse sa taille normale en se remplissant tandis qu’un anneau et une couronne d’étincelles rayonnent une fois ; les chiffres modifiés du compteur défilent vers le haut ou vers le bas dans des emplacements fixes, formatés avec Intl. -
Physics Stack
<mv-physics-stack>Une liste dont les éléments sont des corps rigides empilés dans une boîte : attrapez une carte par un coin (elle pivote autour du point de prise), lancez-la, la pile retombe sous l’effet de la gravité et l’ordre du DOM suit l’ordre visuel. -
Ripple
<mv-pulse-ring>Ondulation d’encre façon Material depuis le point de clic sur n’importe quel élément (.mv-ripple / data-mv-ripple, grandit tant qu’on maintient), plus <mv-pulse-ring> : des anneaux concentriques qui rayonnent ou respirent. -
Salvage StopExclusif
<mv-salvage-stop>Un bouton Stop pour les processus longs (agents IA, exports, génération) qui montre ce que vous gardez avant d’arrêter : au survol ou au focus, un panneau ancré déplie deux bacs, « Vous gardez » (artefacts terminés, bien visibles, avec le glyphe de leur type) et « Vous perdez » (éléments en cours, estompés, avec leur progression), plus un titre qui annonce ce qui est sauvé (« Vous gardez 7 éléments sur 9 · 78 % du travail », pondéré par élément). -
Share ButtonExclusif
<mv-share-button>Bouton de partage qui ouvre la feuille de partage native en un toucher là où la Web Share API peut partager les données (vérifié avec navigator.canShare), et ailleurs un petit menu clavier avec « Copier le lien », « E-mail » et les réseaux que vous indiquez, sous forme de simples liens d’intention. -
Theme Toggle
<mv-theme-toggle>Bascule clair/sombre : le nouveau thème se dévoile en cercle depuis le bouton (View Transition + clip-path), un soleil se transforme en lune, le choix est mémorisé et la préférence système respectée.
Effets 11
-
Animated Beam
<mv-animated-beam>Faisceau SVG courbe entre deux éléments d’un conteneur, parcouru par une impulsion en dégradé ; suit les redimensionnements, idéal pour les schémas d’intégration. -
ASCII
<mv-ascii>Redessine une image, une vidéo, un canvas ou un texte en art ASCII en temps réel : rampe de caractères et taille de cellule configurables, monochrome ou en couleurs, un sillage du pointeur qui épaissit les caractères sur son passage et refroidit derrière lui, et une révélation facultative qui brouille chaque caractère avant de les figer de gauche à droite. -
Border Beam
<mv-border-beam>Lumière animée qui parcourt la bordure de n’importe quelle boîte : comète à vitesse constante, reflets coniques, dégradé mouvant, étoiles qui glissent ou bordure électrique. -
Glass
<mv-liquid-glass>Verre dépoli qui reste lisible sur n’importe quel arrière-plan : le fond est flouté, son contraste compressé, puis recouvert d’un voile aux couleurs du thème, en 5 presets pour le clair et le sombre, plus un verre liquide qui fait onduler l’arrière-plan grâce à un filtre SVG. -
Glow
.mv-glowRétroéclairage en dégradé flouté derrière n’importe quel élément, et carte néon à bordure en dégradé, statique ou en lente rotation. -
Gooey
.mv-gooeyUtilitaire metaball : une couche d’arrière-plan filtrée (flou + seuil alpha SVG) où les formes fondent les unes dans les autres comme un liquide, tandis que le texte, les icônes et le focus restent nets au-dessus. -
Noise
.mv-noiseGrain argentique en CSS pur (texture SVG feTurbulence en data URI) sur n’importe quelle surface : fin ou grossier, statique ou animé, sous le contenu ou au-dessus. -
Progressive Blur
.mv-progressive-blurFlou de bord progressif en CSS pur : des couches de backdrop-filter empilées et masquées par tranches, sur n’importe quel côté, avec un fondu optionnel vers la couleur de fond. -
Spotlight Card
<mv-spotlight>Un projecteur qui suit le curseur dans une carte et en révèle la bordure ; dans une grille, la même lumière déborde sur les bordures des cartes voisines. -
SurfaceExclusif
<mv-surface-layer>Un système de matières GPU pour n’importe quel élément : data-mv-surface="glass | chrome | jelly | velvet | holo". -
Tilt Card
<mv-tilt>Légère inclinaison 3D sous un pointeur précis avec un reflet doux et une parallaxe data-depth, plate et nette au repos, un léger soulèvement au focus clavier, et aucune inclinaison au toucher ni en mouvement réduit.
Blocs 24
-
AI Chat
<mv-ai-chat>Interface de chat IA : réponses en streaming avec un curseur, état « réflexion » scintillant, rendu Markdown sécurisé (listes, gras, code avec bouton de copie), zone de saisie qui s’agrandit automatiquement avec pièces jointes, sélecteur de modèle, suggestions, arrêt / régénération, et défilement automatique qui cède la main à l’utilisateur. -
App Shell
<mv-app-shell>Bloc de tableau de bord complet : barre latérale repliable, en-tête collant (fil d’Ariane, recherche Ctrl/⌘ + K, notifications non lues, compte), tuiles KPI avec sparklines, un graphique des ventes par période et un tableau d’activité. -
Auth
<mv-auth>Bloc d’authentification en quatre étapes (connexion, inscription, mot de passe oublié, code OTP) : mise en page scindée avec visuel et témoignage, boutons de connexion sociale, affichage du mot de passe, jauge de robustesse, renvoi du code minuté, validation native et soumission asynchrone. -
Buy Box
<mv-buy-box>Bloc d’achat de page produit : marque, titre, note, prix (qui suit la variante choisie), paiement en 3 fois, couleurs et tailles (celles en rupture barrées, « Me prévenir du retour en stock »), quantité plafonnée au stock de la taille, bouton d’ajout au panier avec chargement puis confirmation, estimation de livraison calculée et compte à rebours avant l’heure limite d’expédition, arguments de réassurance et accordéon de détails ; se synchronise avec une galerie. -
Cart
<mv-cart>Panier complet (tiroir ou page) : lignes produit horizontales avec quantité et totaux en direct, une barre « Plus que 12,40 $ pour la livraison gratuite », codes promo validés avec message d’erreur (pourcentage, montant fixe ou livraison gratuite, hook serveur asynchrone), économies sur les prix soldés, livraison, total TTC, suppression avec « Annuler » pendant 5 secondes, un état vide et un bouton de paiement qui affiche le total. -
Checkout
<mv-checkout>Tunnel de paiement en plusieurs étapes (adresse → livraison → paiement → récapitulatif) : validation à chaque étape avec messages en ligne et focus sur la première erreur, modes de livraison sous forme de cartes avec dates estimées qui mettent à jour le récapitulatif de commande, saisie de carte formatée (groupes de chiffres, MM/YY, détection Visa/Mastercard/Amex/CB, contrôle de Luhn), PayPal et Apple Pay, adresse de facturation repliable, récapitulatif avec liens « Modifier », conditions générales de vente, un bouton « Payer 157,32 $ » avec état de chargement, refus de carte et confirmation. -
CTA
.mv-ctaAppel à l’action éditorial : un bandeau entre deux filets avec le titre à gauche et les détails à droite, un bloc d’encre toujours sombre, ou un panneau newsletter avec formulaire intégré et retour d’état. -
Data table
<mv-data-table>Tableau de données complet autour d’un .mv-table : tri des colonnes, recherche insensible aux accents, filtres par valeur, menu de visibilité des colonnes, sélection de lignes (case d’en-tête indéterminée, Maj + clic pour les plages) avec une barre d’actions groupées, pagination avec nombre de lignes par page, et un état vide. -
Facets
<mv-facets>Panneau de filtres de liste produits : groupes de cases à cocher repliables avec compteurs (« Afficher 2 de plus »), pastilles de couleur et de taille, plage de prix à deux poignées synchronisée avec deux champs, note minimale désélectionnable, interrupteur « en stock », chips de filtres actifs supprimables avec « Tout effacer », et tiroir mobile (<dialog> natif) avec un bouton « Voir 42 produits ». -
FAQ
.mv-faqSection FAQ éditoriale : questions numérotées dans une gouttière mono sur de fins filets, une version triée par thème avec un index sticky (points de conduite, compteurs) et une note de contact, ou une grille ouverte de réponses numérotées. -
Features
.mv-featuresSection de fonctionnalités éditoriale : une grille d’index numérotée sur de fins filets, des panneaux teintés dont toute la tuile sert de lien, ou un registre avec une introduction sticky et des étapes numérotées. -
Footer
.mv-footerPied de page éditorial : titres de colonnes mono numérotés sur de fins filets, marque + newsletter, une rangée de tuiles de contact et une bande inférieure pleine largeur ; une version manifeste avec un grand titre et des appels à l’action ; ou une version minimale sur une seule ligne. -
Hero
.mv-heroOuverture éditoriale de landing page : une ligne méta mono tracée sur un fin filet, un titre surdimensionné bicolore, un chapô et des actions, une planche produit légendée et une rangée de chiffres clés entre filets. -
Kanban
<mv-kanban>Tableau kanban en couloirs ouverts séparés par des filets fins : glisser-déposer au pointeur avec une copie flottante à plat, un emplacement réservé hachuré et des cartes qui glissent en place (FLIP), un anneau de stabilisation au dépôt, défilement automatique, barres de charge WIP pour les colonnes limitées, et déplacements complets au clavier (Espace, flèches, Échap) annoncés aux lecteurs d’écran. -
Logo Cloud
<mv-logo-cloud>Section de logos clients au ton éditorial : un tableau de logos à filets avec légendes en mono à côté d’un chiffre phare, un bandeau défilant à côté d’une statistique, ou des colonnes qui changent de logo l’une après l’autre (avec pause, respect du mouvement réduit). -
Mega Menu
<mv-mega-menu>Navigation e-commerce avec méga-panneaux : ouverture au survol avec détection d’intention (délai, passage instantané d’une catégorie à l’autre) ou au clic, une surface partagée dont la hauteur s’anime pendant le fondu des panneaux, colonnes de liens avec badges, tuiles promo, voile sur la page ; prise en charge complète du clavier ; sous le point de rupture (largeur de l’hôte, ResizeObserver), un menu burger dans un tiroir <dialog> avec écrans d’exploration par niveau et bouton retour. -
Navbar
<mv-navbar>Barre de navigation éditoriale sticky qui se floute au défilement : libellés et compteurs en mono, méga-menus en popover avec un filet d’accent sur la barre qui signale le menu ouvert, viewport partagé optionnel qui se redimensionne d’un menu à l’autre, mode flottant qui se détache en carte au défilement, et disposition empilée recherche + sections ; tiroir mobile basé sur un dialog, avec liens numérotés. -
Tarifs
<mv-pricing>Section tarifs présentée comme une fiche technique : panneaux d’offres réunis dans un même cadre sobre, bascule segmentée mensuel / annuel sur des radios natifs, offre recommandée marquée d’un anneau, jauges d’utilisation et économie explicite avec prix barré sur les tarifs annuels ; en colonnes, en rangées horizontales ou en offre unique. -
Review
<mv-reviews>Avis clients : synthèse (note moyenne, étoiles, histogramme 5→1 dont chaque barre filtre, jauge de taille), tri (récents, utiles, note), filtre « Avec photos », chips de filtres actifs, pagination « Afficher 4 avis de plus » ; carte <mv-review> avec « Achat vérifié », variante achetée, texte replié avec « Lire la suite », lightbox photo, votes « utile » (un par visiteur, annulable), signalement et réponse du marchand ; formulaire « Écrire un avis » validé qui ajoute l’avis en attente de modération. -
Settings
<mv-settings>Page de réglages : navigation par section avec suivi du défilement, profil (aperçu de photo, champs validés), interrupteurs de notification, sécurité, barre « modifications non enregistrées » et zone de danger avec confirmation par saisie. -
Sidebar
<mv-sidebar>Barre latérale d’app : rail d’icônes animé avec infobulles, état persistant, groupes, sections imbriquées repliables, compteurs, sélecteur d’espace de travail et menu utilisateur, panneau coulissant (dialog) quand le conteneur est étroit, raccourci Ctrl/⌘ + B. -
Stats
.mv-statsSection de chiffres clés avec compteurs animés (number-ticker) : colonnes séparées par des filets avec libellés en mono, cartes KPI avec emplacement de tendance et sparkline, ou un grand chiffre phare à côté d’un registre empilé. -
Testimonials
.mv-testimonialsSection de témoignages au style éditorial, tracée de filets fins : une grille de registre numérotée avec un résultat mis en avant, un ticker horizontal de notes compactes, ou une étude de cas en deux colonnes qui associe une citation à ses chiffres clés ; une synthèse des notes figure dans l’en-tête. -
Wordmark Footer
<mv-wordmark-footer>Pied de page avec des colonnes de liens au-dessus d’un nom de marque géant au trait fin, ajusté à la largeur : le pointeur, le focus clavier ou un toucher est projeté sur les lettres, où un projecteur les remplit d’un dégradé ou d’une couleur unie par-dessus un léger voile au repos.
Utilitaires 5
-
Agent VisionExclusif
<mv-agent-vision>Voyez votre page comme un agent IA (ou un lecteur d’écran) la voit : enveloppe n’importe quelle zone et la partage avec une ligne de balayage déplaçable. -
Assist ModeExclusif
<mv-assist-mode>Un panneau d’assistance sans jugement, pour tout le site, qui couvre tout ce qui dépend du temps ou du mouvement, proposé comme une aide facultative plutôt que comme un « mode accessibilité ». -
ComboExclusif
<mv-combo>Moteur de raccourcis clavier en séquence pour les applications destinées aux utilisateurs avancés, avec un tampon de saisie en direct. -
DrillExclusif
<mv-drill>Entraîneur de raccourcis clavier qui transforme les raccourcis d’une app en réflexes grâce à de courts exercices espacés. -
Motion BudgetExclusif
<mv-motion-budget>Un régulateur d’animation : enveloppe une zone (ou toute la page) et lui attribue un budget de mouvement, la part de l’écran autorisée à bouger simultanément (25 % par défaut).
Aucun composant ne correspond à ce filtre.