Componentes
317 componentes independientes de cualquier framework (v0.1.0): Web Components nativos y CSS por capas, cero dependencias en tiempo de ejecución, para React, Vue, Svelte, Angular, Astro y HTML puro. Cada página incluye el marcado de uso, la API completa, cuándo usarlo y notas de accesibilidad.
Agentes de IA: empiecen por /llms.txt. Los compradores obtienen todos los componentes con la CLI y el servidor MCP: ver los planes o descargar el Free pack.
Primitivas 15
-
Avatar
.mv-avatarAvatar en CSS: una imagen superpuesta a las iniciales (respaldo automático cuando la imagen falta o está rota), tamaños, redondo o cuadrado, iniciales tintadas, punto de estado, contador; un grupo superpuesto con un chip “+3” que se despliega al pasar el cursor. -
BadgeGratis
.mv-badgeInsignia en CSS puro: 7 variantes (tintes suaves o sólidos), punto de estado animable, icono, botón de eliminar, píldora/cuadrada, 3 tamaños y un contador colocado en la esquina de un avatar o un icono. -
ButtonGratis
.mv-buttonBotón en CSS puro sobre <button> o <a>: 6 variantes, 4 tamaños, estado de carga, grupo. -
Button Effects
.mv-buttonSiete efectos para .mv-button mediante data-effect: chispa en órbita, borde arcoíris, pulso, tecla 3D, brillo que barre, flecha que aparece y resplandor. -
CheckboxGratis
.mv-checkboxCasilla de verificación nativa en CSS puro: una marca que se dibuja sola (reversible), estado indeterminado, tamaños, inválido; también aporta los layouts compartidos .mv-choice y .mv-choice-card (tarjetas de opción resaltadas mediante :has(:checked)). -
InputGratis
.mv-inputCampo de texto en CSS puro: 3 tamaños, estados inválido (aria-invalid / :user-invalid), de solo lectura y de archivo, además de un grupo con iconos, prefijos/sufijos, botones en línea y un botón de borrar. -
KbdGratis
.mv-kbdTeclas de teclado sutilmente en relieve sobre <kbd>: combinaciones anidadas, 3 tamaños, una variante plana, se adapta dentro de botones y tooltips. -
RadioGratis
.mv-radioBotón de opción nativo en CSS puro: un punto interior que aparece con un resorte, tamaños, una variante con contorno, grupos en línea o apilados, y tarjetas de opción (listas de planes, baldosas con insignia). -
Range FX
<mv-range-fx>Sliders expresivos construidos sobre un único modelo accesible: la pista se convierte en una onda que ondula al arrastrar (wave), una burbuja de valor aparece y se inclina con la velocidad (bubble), una regla se desplaza bajo una aguja fija con inercia (ruler), un casquete líquido se estira (fluid), o la etiqueta vive dentro de la pista y se invierte bajo el relleno (inline). -
SelectGratis
.mv-select<select> nativo con estilo (chevron del color del token), mejorado progresivamente a un select personalizable (appearance: base-select): lista animada, puntos de estado, iconos, descripciones y marca de verificación, apertura “líquida” opcional; en los demás navegadores, un fallback limpio. -
SeparatorGratis
.mv-separatorSeparador horizontal o vertical en CSS puro: continuo, discontinuo, punteado o desvanecido, con una etiqueta centrada (“o”) o alineada, sobre <hr> o <div>. -
Slider
<mv-slider>Slider en dos formas: un <input type="range" class="mv-slider"> nativo con estilo (relleno sincronizado), y un <mv-slider> asociado a formularios para casos avanzados: doble tirador, marcas, marcas con etiqueta, burbuja de valor, orientación vertical y soporte completo de teclado. -
SwitchGratis
.mv-switchInterruptor en CSS puro sobre <input type="checkbox" role="switch">: tirador que se desliza con un resorte y se estira al pulsarlo, iconos en el tirador (personalizables), tamaños, etiqueta a la izquierda o a la derecha, tarjeta de opción. -
TextareaGratis
.mv-textareaÁrea de texto que crece sola (field-sizing: content) entre un número mínimo y máximo de filas, con un tirador de redimensionado opcional, un grupo con barra de herramientas y un contador de caracteres <mv-char-count>. -
Toggle
<mv-toggle-group>Botón conmutador .mv-toggle (aria-pressed, variantes, icono que cambia con el estado) y <mv-toggle-group>, simple o múltiple: roving tabindex, valor, grupo unido y un control segmentado cuyo indicador se desliza entre las opciones.
Formularios 47
-
Angle Dial
<mv-angle-dial>Campo de ángulo en grados que se lee como en CSS (0° arriba, sentido horario): un botón giratorio dentro de un anillo de marcas que sirve también de cuadrícula de ajuste, con las marcas detrás del botón iluminadas y apagándose con la distancia. -
As StoredExclusivo
<mv-as-stored>Muestra, antes de guardar, cómo se almacenará exactamente cada valor cuando el sistema detrás del formulario lo transforme, en lugar de dejar que se estire o se recorte en silencio. -
Balance SheetExclusivo
<mv-balance-sheet>Balance estructurado de decisión a dos columnas (pros y contras, construir o comprar, contratar o no, elegir proveedor, una mudanza) presentado como un libro contable donde los puntos quedan enfrentados. -
BloodstainExclusivo
<mv-bloodstain>Recuperación de borradores de formulario que recuerda exactamente dónde estabas: envuelve cualquier <form> (o región con campos) y sus valores se guardan automáticamente (con debounce, en localStorage o sessionStorage) junto con el último campo con foco y la posición del cursor de texto. -
Catch LoopExclusivo
<mv-catch-loop>Detector y explicador de requisitos que nunca pueden cumplirse porque se remiten a sí mismos en bucle (“SSO necesita un dominio verificado, verificar el dominio necesita SSO”) o se contradicen entre sí (un archivo que necesita a la vez cifrado y búsqueda de texto completo, que se excluyen mutuamente). -
Color Picker
<mv-color-picker>Muestra de color que abre un popover con cierre ligero (o se muestra en línea): un área de saturación/brillo, sliders de tono y opacidad, un único campo de texto que acepta cualquier color CSS con un selector HEX/RGB/HSL/OKLCH, el cuentagotas, muestras y colores recientes. -
Combobox
<mv-combobox>Campo de búsqueda con una lista filtrada que ignora los acentos, grupos, selección simple o múltiple en forma de chips, creación de opciones y un modo de texto libre (autocompletado); asociado a formularios. -
Curve Editor
<mv-curve-editor>Editor de curvas de easing: arrastra dos tiradores o ajústalos con el teclado, con coordenadas en vivo y overshoot para la anticipación y el rebote. -
Date Picker
<mv-date-picker>Selector de fecha: un disparador con aspecto de campo que muestra la fecha formateada (rangos incluidos) y un calendario en un popover, con preajustes como “Hoy”, “Últimos 7 días”…; asociado a formularios. -
ExposureExclusivo
<mv-exposure>Un indicador de visibilidad para los ajustes de compartir y privacidad (diálogos de compartir, audiencia de una publicación, privacidad del perfil, visibilidad de un proyecto, compartir el calendario, enlaces a archivos) que lee los controles que envuelve y dice a las personas lo expuestas que están antes de confirmar. -
FieldGratis
.mv-fieldLayout de campo en CSS puro: etiqueta (obligatorio / opcional), texto de ayuda, un mensaje de error que aparece solo cuando el control no es válido, orientaciones vertical, horizontal, responsive y en línea, tarjetas de opción y fieldset. -
File Upload
<mv-file-upload>Zona para soltar archivos: arrastrar y soltar con resaltado (y rechazo visual de los tipos no permitidos), una lista con miniaturas de imagen, iconos, tamaños y eliminación, validación de tipo/tamaño/número y progreso por archivo; asociado a formularios (FormData). -
ForgotExclusivo
<mv-forgot>Verificador previo al envío de “puede que se te haya olvidado algo” para editores de mensajes y formularios que, a diferencia de un aviso vago, dice exactamente qué parece faltar. -
Gradient Editor
<mv-gradient-editor>Editor de degradados CSS asociado a formularios (lineal, radial, cónico): las paradas son sliders de teclado sobre una barra en vivo; se añaden con un clic, Enter o +, se eliminan arrastrándolas fuera o con Delete, y cada una tiene un selector de color y un campo de posición. -
Intent ComposerExclusivo
<mv-intent-composer>Un editor para peticiones a la IA que hace visibles las tres partes de una intención mientras escribes: el resultado, las restricciones (presupuesto, plazo, cosas que evitar, lugar, cantidad…) y el límite de delegación. -
InvisiblesExclusivo
<mv-invisibles>Hace visibles los caracteres invisibles y los que se parecen a otros en los campos de texto, donde causan errores reales: espacios y uniones de ancho cero pegados en IBAN, correos electrónicos, claves de API y códigos, espacios de no separación y exóticos, espacios al principio o al final, tabulaciones, guiones suaves, caracteres de control, controles bidi (Trojan source), texto oculto en tags, homoglifos (una “а” cirílica en una palabra latina, una “O” entre dígitos), letras de ancho completo y comillas o guiones tipográficos en comandos. -
Just RightExclusivo
<mv-just-right>Feedback de ajuste personal sobre un grupo de radios nativo de tallas, planes o configuraciones: cada opción le dice a este usuario, zona por zona, si le queda pequeña, justa o grande. -
LifelinesExclusivo
<mv-lifelines>Ayudas para decidir en una elección única difícil (un plan, una opción de envío, la configuración de un portátil, un nivel de seguro, un tamaño de instancia), cada una un comodín con un número limitado de usos que se ve cómo se gasta. -
MastExclusivo
<mv-mast>Ajuste asimétrico para límites autoimpuestos o sensibles para la seguridad: endurecerlos es instantáneo, relajarlos requiere esperar un periodo de enfriamiento. -
Narrow DownExclusivo
<mv-narrow-down>Buscador de productos guiado que hace a continuación la pregunta más informativa en lugar de seguir un cuestionario fijo. -
Number Field
<mv-number-field>Entrada numérica con botones − / + (mantén pulsado para acelerar), límites y paso, teclas de flecha y rueda del mouse, formato Intl (moneda, porcentaje, unidad) y una etiqueta “scrub”: arrastra en horizontal para cambiar el valor, con bloqueo del puntero opcional. -
One More ThingExclusivo
<mv-one-more-thing>Validación de formularios priorizada que pide una cosa cada vez en lugar de mostrar un muro de errores. -
OTP
<mv-otp>Entrada de código de un solo uso: un campo oculto real gestiona la escritura, el pegado y el autocompletado por SMS, mientras unas casillas animadas muestran el código con un cursor parpadeante, un separador y una sacudida en caso de error. -
Pass CardExclusivo
<mv-pass-card>Un pequeño presupuesto visible de excepciones a las reglas (“pases”) para los momentos en que una regla tiene que ceder: fusionar durante una congelación de release, saltarse una comprobación obligatoria, una entrega tardía, una compra por encima de un límite de gasto, un cambio de cita sin coste, una excepción al SLA. -
Password FieldExclusivo
<mv-password-field>Campo de contraseña que conserva tu <input type="password"> nativo (así el autocompletado, los gestores de contraseñas y el envío del formulario funcionan sin más) y añade un auténtico botón mostrar/ocultar que conserva la posición del cursor y vuelve a ocultar al enviar, un aviso de Caps Lock mientras tiene el foco y, para las contraseñas nuevas, una lista de las reglas que declares más una estimación de robustez en palabras que premia la longitud y no se deja engañar por palabras comunes, años, secuencias ni repeticiones. -
PhrasebookExclusivo
<mv-phrasebook>Editor de mensajes restringido para lugares donde el texto libre es arriesgado o costoso: solo se escribe eligiendo una plantilla (“{thing} fue {quality}”, “Prueba {action}”, “Cuidado con {thing}”) y rellenando cada hueco con un vocabulario fijo y clasificado, con la opción de unir una segunda frase con un conector (“pero”, “así que”). -
Posting AsExclusivo
<mv-posting-as>Protección de identidad para editores de mensajes y zonas de acción en apps con varias cuentas (marca frente a personal, buzón compartido frente a ti mismo, suplantación, espacios de trabajo de clientes, producción frente a sandbox): hace inconfundible la identidad con la que vas a actuar en el momento de actuar. -
Prep ListExclusivo
<mv-prep-list>Tarjeta de preparación “Antes de empezar” para flujos largos o de alto riesgo (solicitudes de préstamo, visado o seguro, verificación de identidad, declaración de impuestos, incorporación de empleados, una migración de base de datos, una puesta en producción). -
Quantity
<mv-quantity>Selector de cantidad para e-commerce, una variante ligera de <mv-number-field>: mínimo 1, limitado automáticamente a las existencias, una leyenda “En stock” / “Solo quedan 3 en stock” / “Agotado” vinculada al campo, un mensaje y una sacudida al alcanzar el límite de existencias, un estado agotado deshabilitado que se reactiva al reponerse; variantes píldora y sutil para las líneas del carrito. -
Rating
<mv-rating>Valoración con estrellas, para mostrar (precisión decimal real: 4,3 llena el 30 % de la 5.ª estrella, número de reseñas como enlace) o como entrada asociada a formularios: medias estrellas, vista previa al pasar el cursor, leyendas como “Muy bueno”, compatibilidad total con teclado, borrado, obligatorio; variante compacta ★ 4,8 (2413). -
Read BackExclusivo
<mv-read-back>Confirmación por colación para formularios de alto riesgo, como los pilotos que repiten una autorización: envuelve un formulario, marca los campos críticos con data-read-back y, al enviar, un panel en línea repite cada valor en una forma distinta de aquella en que se escribió, para que un despiste se vea en lugar de confirmarse en piloto automático. -
RewindExclusivo
<mv-rewind>Una máquina del tiempo para formularios: envuelve cualquier región, registra cada cambio (escritura agrupada, casillas, selects, contenteditable) como un árbol de deshacer etiquetado (“Dirección cambiada”, “Método de envío: Express”), mostrado como una línea de tiempo compacta. -
Same AgainExclusivo
<mv-same-again>Formularios recurrentes que recuerdan la vuelta anterior: envuelve un standup diario, una hoja de horas, un relevo de turno, una checklist o un informe semanal y cada envío guarda las respuestas con su fecha (almacenamiento del navegador bajo una clave, o tu servidor mediante la propiedad previous y mv-loop-saved). -
Scrub Field
<mv-scrub-field>Campo numérico de inspector: arrastra su etiqueta, icono o valor hacia los lados para ajustarlo, con bloqueo de puntero opcional, aceleración según la velocidad, una insignia que cuenta el cambio y un carril que muestra dónde está el valor dentro de su rango. -
Search Autocomplete
<mv-search-autocomplete>Búsqueda de tienda con autocompletado: al recibir el foco, búsquedas recientes (localStorage, se pueden borrar) y chips de tendencias; al escribir (con debounce, peticiones obsoletas canceladas, indicador de carga), sugerencias con la consulta resaltada sin importar los acentos, categorías con recuentos, productos con miniatura y precio (Intl, precio de referencia tachado), “Ver los 42 resultados de ‘abrigo’”; estado “Sin resultados”; atajo de teclado; hook de fuente asíncrona o catálogo JSON local. -
Segmented
<mv-segmented>Control segmentado con la semántica de un grupo de radios, asociado a formularios: un tirador en relieve se desliza hasta la opción seleccionada con un ligero rebote, líneas finas separan las opciones inactivas, tres tamaños y opciones de solo icono nombradas mediante tooltips. -
Slosh Slider
<mv-slosh-slider>Un slider cuyo relleno es líquido: el tirador se mantiene rígido bajo tu dedo mientras el líquido lo persigue con un resorte suave, choca con los topes, se inclina y ondula según su velocidad. -
StripsExclusivo
<mv-strips>Editor combinatorio: un resultado (un texto publicitario, la configuración de un producto, una notificación, un menú) se ensambla a partir de tiras independientes apiladas como una página cortada en franjas, cada tira un hueco cuyas alternativas intercambiables pasan solas con una animación física de página que se levanta (flechas, arrastre vertical o deslizamiento horizontal, toque y, en la tira con foco, la rueda del mouse y Up/Down/Home/End). -
Swatch
<mv-swatch>Selector de variantes basado en radios nativos (o casillas para los filtros): muestras de color con doble anillo, chips de talla, miniaturas de producto; opciones agotadas tachadas (seleccionables o deshabilitadas), una etiqueta “Color: Arena” con vista previa al pasar el cursor y validación de grupo obligatorio con una sacudida y un mensaje. -
Tag InputExclusivo
<mv-tag-input>Campo de chips para etiquetas, destinatarios, habilidades y palabras clave: Enter, coma o Tab añaden, al pegar “a, b; c” (o una columna copiada de una hoja de cálculo) se añade cada una, Backspace selecciona y luego elimina el último chip, las flechas recorren los chips, con patrón y límite opcionales, deduplicación que ignora mayúsculas y acentos y hace destellar el chip existente, y sugerencias nativas de <datalist>. -
Timeline Scrubber
<mv-timeline>Regla de tiempo de editor de video con un cabezal preciso al fotograma que muestra su código de tiempo mientras lo arrastras, una lectura al pasar el cursor, zoom en una escala de medias octavas (botones, teclas, Ctrl/⌘ + rueda o pellizco), un carril de marcadores, tiradores de entrada/salida que velan todo lo que queda fuera del rango, clips en pistas y una barra de vista general. -
Tone DialExclusivo
<mv-tone-dial>Ajustes de personalidad y tono con una vista previa inmediata y concreta, para asistentes de IA, chatbots, textos generados, tono de notificaciones o correos electrónicos, voz de marca y macros de soporte. -
Trio CheckExclusivo
<mv-trio-check>Verificación por lotes para cuestionarios, pruebas de conocimientos y ejercicios de emparejar que hace inútil adivinar: las respuestas se introducen libremente (tus propios inputs, selects, radios o casillas marcados con data-trio-item, o filas generadas a partir de una propiedad items con campos de texto, selects y chips de opción), y el componente nunca revela si una respuesta concreta es correcta. -
Two-KeyExclusivo
<mv-two-key>Protección para acciones críticas (borrar producción, transferir fondos, desplegar) que solo se arma con dos “llaves” deliberadas y sincronizadas: dos interruptores de llave giratorios cuyo cilindro da un cuarto de vuelta con un resorte, y un botón de acción protegido oculto bajo una tapa esmerilada. -
Vector Field
<mv-vector-field>Campos compactos X/Y, X/Y/Z o W/H para inspectores: cada eje es un spinbutton en el que puedes escribir, avanzar por pasos con el teclado o arrastrar su letra para ajustarlo, con una línea fina que muestra dónde se sitúa el valor en su rango y un bloqueo de relación de aspecto opcional. -
Wheel Picker
<mv-wheel-picker>Selector de rueda al estilo iOS: un tambor 3D (rotateX + perspective) que haces girar con el dedo, con inercia y luego ajuste a la muesca más cercana, además de rueda del mouse, teclado y búsqueda al escribir. -
Word RulesExclusivo
<mv-word-rules>Constructor de reglas, filtros y automatizaciones donde cada regla es una frase hecha de fichas de palabras que mueves: sujetos (“Pedido”), operadores (“es”, “no es”, “más de”) y propiedades (“con retraso”, “500 $”), encadenados con “y”.
Superposiciones 12
-
Command
<mv-command>Paleta de comandos: búsqueda difusa que ignora los acentos (palabras clave incluidas), resultados ordenados y agrupados, navegación por teclado con aria-activedescendant; independiente o dentro de un Dialog que se abre con ⌘K. -
Context Menu
<mv-context-menu>Menú contextual que se abre en el puntero (clic derecho), con una pulsación larga en táctil o desde el teclado (Shift+F10 / tecla Menú); reutiliza el motor y los estilos de Menu, incluida la animación data-motion="glide". -
Cookie ConsentExclusivo
<mv-cookie-consent>Banner de cookies no modal con Aceptar todo y Rechazar todo con el mismo peso y un panel Elegir, guardado con una versión de la política en localStorage y una cookie propia; a diferencia de la mayoría de los banners, bloquea de verdad los scripts: <script type="text/plain" data-consent="analytics"> y los embeds con data-src solo se ejecutan tras el consentimiento, una vez, en orden, conservando el nonce de CSP. -
DialogGratis
<mv-dialog>Modal <dialog> nativo animado; también cubre Alert Dialog (persistente), Sheet (4 lados) y un Drawer para dispositivos móviles que se cierra deslizando. -
Hover Card
<mv-hover-card>Tarjeta de vista previa enriquecida al pasar el cursor o con el foco del teclado, con retardos de apertura/cierre y un puente invisible que la mantiene abierta mientras el puntero se desplaza hacia ella. -
MenuGratis
<mv-menu>Menú desplegable completo: casillas, elementos de radio, submenús con triángulo de seguridad, atajos, búsqueda al escribir y navegación por teclado APG; data-motion="glide" opcional (se abre desde la esquina del disparador, un único resaltado que se desliza entre los elementos, submenús que entran deslizándose). -
PopoverGratis
<mv-popover>Panel flotante no modal en la capa superior (Popover API): posicionamiento automático con volteo, flecha opcional, se cierra con un clic fuera o con Escape gestionando el foco; opción data-open="liquid" en la que el panel sale del disparador estirándose a través de un “cuello” líquido y vuelve a entrar en él al cerrarse. -
Timed ChoiceExclusivo
<mv-timed-choice>Un aviso no crítico que propone una elección con un temporizador que se vacía a la vista y aplica un valor por defecto seguro cuando nadie responde: “Siguiente episodio en 8 s · Cancelar / Reproducir ahora”, “¿Conservar esta configuración de pantalla? -
ToastGratis
<mv-toaster>Notificaciones apiladas al estilo Sonner: una pila compacta que se expande al pasar el cursor, temporizadores en pausa, deslizar para descartar, promesas y actualizaciones en su sitio por id, mediante una API imperativa toast(). -
Toast PhysicsExclusivo
<mv-toast-physics>Notificaciones que son auténticos cuerpos rígidos: caen en una bandeja de esquina y se apilan por la gravedad, y la prioridad se convierte en masa (un error es más pesado y ancho, aterriza con un golpe que sacude a los demás y luego se hunde por debajo de las tarjetas más ligeras). -
TooltipGratis
<mv-tooltip>Tooltip en la capa superior (Popover API), posicionamiento automático con volteo, flecha, retardo agrupado. -
Tooltip Group
<mv-tooltip-group>Tooltip compartido por un grupo de disparadores, como una barra de herramientas: tras el primer retardo, una sola burbuja se desliza y cambia de tamaño de botón en botón con un fundido cruzado de su etiqueta, sin cerrarse, reabrirse ni volver a esperar.
Navegación 16
-
As OfExclusivo
<mv-as-of>Control de fecha de referencia (“a fecha de”) para apps de datos que pueden mostrar el pasado, para que las cifras históricas nunca se confundan con las actuales. -
Breadcrumb
.mv-breadcrumbBreadcrumb en CSS puro sobre nav > ol: separadores de chevrón, barra o punto (silenciosos para los lectores de pantalla), iconos, truncado y niveles plegados en un popover nativo anclado. -
CrumbsExclusivo
<mv-crumbs>Un rastro de por dónde ha pasado realmente el usuario, para apps donde la gente salta entre registros (CRM, centro de soporte, consola de administración, documentación, navegador de código, back office), no de dónde está la página en la jerarquía. -
Dock
<mv-dock>Dock al estilo macOS: los iconos crecen según su distancia al puntero (caída en coseno suavizada con resorte), etiquetas al pasar el cursor, punto de actividad, horizontal o vertical, navegación completa por teclado. -
Door DialExclusivo
<mv-door-dial>Selector de contexto que redirige los mismos enlaces, acciones y ejemplos de código a otro contexto (entorno, región, tenant, versión de la documentación, URL base de la API) sin reconstruir la página. -
Edge TrackerExclusivo
<mv-edge-tracker>Indicadores fuera de pantalla para todo lo que el usuario no ve en un contenedor con desplazamiento, una página larga o un lienzo desplazable: mensajes sin leer más abajo, errores de formulario más arriba, menciones, coincidencias de búsqueda, elementos seleccionados, cursores de colaboradores. -
Finger HoldExclusivo
<mv-finger-hold>Asistente con ramificaciones en el que cualquier página de decisión se puede retener con un “dedo”: elige una opción, explora adónde lleva (siguientes preguntas, precio, plan resultante) y luego vuelve directamente a la página retenida tal como la dejaste, campos incluidos. -
FootprintsExclusivo
<mv-footprints>Presencia de colaboradores en vivo para documentos largos, especificaciones, archivos de código y hojas de cálculo: un carril estrecho junto al contenedor con desplazamiento donde cada persona es un pequeño marcador con etiqueta (iniciales o avatar, en su propio color) en el lugar exacto donde está leyendo o editando, seguido de unas cuantas huellas que se desvanecen y muestran en qué dirección se ha movido, bajando, subiendo o saltando a otra sección con un arco punteado. -
Inside CountExclusivo
<mv-inside-count>Pestañas, acordeones y páginas cerrados que dicen lo que contienen antes de abrirlos. -
Keen SightExclusivo
<mv-keen-sight>Modo de pistas que se muestra al mantener pulsado y permite a los usuarios de teclado actuar sobre cualquier cosa que vean sin recorrerla con Tab. -
Lock-onExclusivo
<mv-lock-on>Navegación espacial por teclado para layouts 2D donde el orden de Tab no sirve (dashboards con widgets desiguales, cuadrículas de tarjetas, tableros kanban, mapas de asientos, mapas con marcadores, editores de nodos, interfaces de TV y de consola), con un bloqueo que mantiene a la vista un objetivo en movimiento. -
Pagination
<mv-pagination>Paginación numerada con puntos suspensivos y un número constante de huecos (la barra nunca salta), anterior/siguiente, un modo compacto “Página x de y”; los estilos CSS funcionan por sí solos para los enlaces renderizados en el servidor. -
Smart HeaderExclusivo
<mv-smart-header>Envuelve cualquier cabecera para que sea fija, se oculte al desplazarte hacia abajo y vuelva al desplazarte hacia arriba, con histéresis, un estado de anclado y su altura en vivo publicada para scroll-padding. -
Stepper
<mv-stepper>Pasos horizontales o verticales (completados, actual, próximos) con conectores que se llenan con el color de acento, números automáticos, una marca de verificación animada y un paso de carga; <mv-stepper value> opcional para controlar los estados. -
TabsGratis
<mv-tabs>Pestañas accesibles con un indicador deslizante (subrayado, píldora o segmentado), horizontales o verticales, activación automática o manual, y paneles con fundido cruzado. -
Thread BackExclusivo
<mv-thread-back>Un hilo de regreso para las exploraciones en profundidad que te sacan de una tarea: átalo en un origen (un pago, un informe, un paso de onboarding) con tie({ label, href, state, restore }) o un enlace data-thread-tie, y cada navegación posterior lo desenrolla un paso.
Visualización de datos 56
-
AccordionGratis
<mv-accordion>Acordeón en CSS sobre <details> nativo: altura animada (::details-content + interpolate-size), chevrón o más/menos, variantes con borde, separada y tarjeta; <mv-accordion type="single"> opcional. -
AccountsExclusivo
<mv-accounts>Línea de tiempo multifuente que alinea varios relatos del mismo evento y muestra, dato por dato, dónde coinciden, dónde se contradicen y dónde una fuente guarda silencio: post-mortems de incidentes (logs del gateway frente a proveedor de pagos frente a telemetría del cliente frente a notas de guardia), disputas de entrega (cliente frente a almacén frente a transportista), registros de auditoría, verificación de datos, notas de reunión de varios asistentes. -
Agent LensesExclusivo
<mv-agent-lenses>Un único modelo de agentes de IA en segundo plano, cinco lentes (Board, Inbox, Tasks, Calendar, Graph), y cada agente es una tarjeta persistente que viaja físicamente entre los layouts: al cambiar de lente, cada tarjeta hace un FLIP de su antiguo rectángulo al nuevo mientras se transforma de tarjeta completa en fila, barra de tiempo o nodo del grafo, para que nunca pierdas de vista un agente. -
All-in PriceExclusivo
<mv-all-in>Precio honesto y con todo incluido, que dice en voz alta lo que el drip pricing oculta. -
Animated List
<mv-animated-list>Feed de notificaciones animado: los elementos aparecen uno a uno con un resorte y empujan suavemente a los demás (FLIP), con límite de elementos, modo bucle y una API add(). -
Blocked BlurExclusivo
<mv-blocked-blur>Silenciar sin perder la forma de la conversación. -
ButterflyExclusivo
<mv-butterfly>Vista previa del impacto para ajustes, formularios de precios, editores y pantallas tipo hoja de cálculo: antes de cambiar un valor, se iluminan todos los valores a los que se propagará. -
Calendar
<mv-calendar>Calendario mensual localizado (Intl, la semana empieza el primer día de la configuración regional): selección simple, de rango con vista previa al pasar el cursor o múltiple, fechas mín./máx. y deshabilitadas, navegación completa por teclado, vistas de mes/año y una transición deslizante. -
CardGratis
.mv-cardTarjeta componible (multimedia, cabecera, acción, contenido, pie): variantes con contorno, elevada, fantasma y atenuada, además de una tarjeta totalmente clicable. -
Chart
<mv-chart>Gráfico SVG sin dependencias (área, barras, líneas, sparkline): renderizado pixel-perfect, escala redondeada, trazado animado al aparecer, retícula y tooltip al pasar el cursor y con el teclado, y una tabla de datos para lectores de pantalla. -
Code BlockExclusivo
<mv-code-block>Envuelve cualquier <pre><code> simple o ya resaltado con un nombre de archivo, etiqueta de lenguaje, botón de copiar, números de línea, líneas resaltadas y de diff, plegado y un botón de ajuste de línea, y copia lo que el lector realmente necesita: se omiten los prompts del shell, la salida de los comandos y los marcadores de diff, y los números de línea o los marcadores tampoco pueden seleccionarse a mano. -
Context RingsExclusivo
<mv-context-rings>Hace visible (y editable) lo que un asistente de IA “sabe” para la tarea en curso: tres anillos concéntricos (“Esta tarea” en el centro, “Siempre” para las preferencias y las reglas, “Ambiente” para los flujos: correo electrónico, calendario, chat) y una bandeja “Fuera de contexto”. -
CountdownExclusivo
<mv-countdown>Cuenta atrás hasta una fecha para lanzamientos, rebajas, webinars y eventos: días, horas, minutos y segundos (configurables) en cifras tabulares con etiquetas en plural correcto gracias a Intl, en variantes simple, tarjeta o compacta. -
CurtainExclusivo
<mv-curtain>“¿Cómo se calcula esto?” para cualquier cifra pulida: envuelve un gráfico, KPI, puntuación, precio o respuesta de IA y un tirador aparta la visualización como un telón (un barrido con recorte y una suave sombra de pliegue; un simple fundido cruzado con movimiento reducido) para revelar su trastienda en el mismo espacio, sin saltos de layout. -
DatelineExclusivo
<mv-dateline>Un momento o plazo que tiene en cuenta la zona horaria y hace imposible pasar por alto un cambio de día. -
DeliberationExclusivo
<mv-deliberation>Decisiones de grupo por rondas con votos ocultos y convergencia visible: estimaciones (planning poker), decisiones de sí o no, debriefs de contratación, críticas de diseño, priorización o votos de acciones de retro. -
Delivery TrailExclusivo
<mv-delivery-trail>Hace observable salto a salto la entrega de los mensajes críticos y convierte los fallos silenciosos en bloqueos visibles y accionables: correos de restablecimiento de contraseña y de verificación, códigos por SMS, facturas, notificaciones push, webhooks, solicitudes de firma electrónica. -
DorianExclusivo
<mv-dorian>Frescura del contenido visible de un vistazo: envuelve cualquier contenido (cabecera de una página de documentación, artículo del centro de ayuda, tabla de precios, política) y se queda exactamente como está, mientras un pequeño retrato enmarcado a su lado envejece con el tiempo transcurrido desde su última revisión. -
Drift CheckExclusivo
<mv-drift-check>Muestra cómo un texto transmitido se ha alejado de su fuente, salto a salto: requisitos que pasan del cliente a ventas, al PM y al ticket, citas que viajan de la entrevista al comunicado de prensa y al artículo, resúmenes de resúmenes, textos reenviados, traducidos o reescritos por IA. -
Field GuideExclusivo
<mv-field-guide>Cuadrícula de colección numerada en la que cada entrada tiene tres niveles de conocimiento, para que lo que falta sea tan visible como lo que está hecho: desconocida (un hueco numerado vacío con contorno discontinuo y una pista opcional), vista (la ilustración reducida a una silueta de un solo tono, el nombre, los detalles bloqueados y una pista de “cómo conseguirla”) y obtenida (tarjeta a todo color con resumen, descripción, datos y una llamada a la acción). -
ForkExclusivo
<mv-fork>Líneas de tiempo hipotéticas para cualquier vista controlada por entradas (calculadoras de préstamos y precios, comparativas de planes, vistas previas de configuración, variantes de texto): Fork divide la vista en líneas de tiempo lado a lado que empiezan idénticas, cada una con sus propias entradas, y recalcula los resultados de cada una mediante tu función compute(state) (síncrona o asíncrona) o un callback render(state, body). -
Hold SlotExclusivo
<mv-hold-slot>Reproductor de cola de trabajo enfocado para procesar elementos de uno en uno (tickets de soporte, moderación, revisiones de código, selección de fotos, calificación de leads, tarjetas de estudio): el elemento actual se muestra en grande, una columna Next anticipa los siguientes elementos (3 por defecto, el primero un punto más presente) y un único hueco Hold te permite apartar el elemento actual sin perderlo y recuperarlo más tarde, pero solo una vez por turno (hold-limit), para que nada quede dando vueltas para siempre. -
InscribeExclusivo
<mv-inscribe>Notas críticas que siguen a un registro allá donde aparezca en la app. -
LacunaExclusivo
<mv-lacuna>Eliminación gradual y en su sitio para listas y cuadrículas, un sustituto de los toasts de deshacer que aguanta cuando borras varias cosas seguidas. -
Lead BoardExclusivo
<mv-lead-board>Un registro de investigación donde el único progreso es lo que sabes: investigación, entrevistas con usuarios, investigaciones de incidentes, due diligence, caza de bugs, periodismo. -
Mirror RankExclusivo
<mv-mirror-rank>Una clasificación que se explica con honestidad y dice qué haría falta para subir: tablas de clasificación (ventas, colaboradores), rankings de vendedores o de búsqueda, puntuaciones de crédito, salud, SEO o seguridad. -
Net ProgressExclusivo
<mv-net-progress>Separa la actividad bruta del progreso neto y hace visible el churn, para documentación y especificaciones, código, archivos de diseño, modelos, backlogs, calendarios de contenido o contratos en negociación. -
Odd One OutExclusivo
<mv-odd-one-out>Detección automática de valores atípicos en un conjunto de elementos que deberían ser iguales: deriva de configuración entre servidores, contenedores o entornos, incoherencias de precio y existencias entre las variantes de un producto, un empleado cuyos permisos difieren de los de sus pares en el mismo rol, una región cuyos ajustes divergen. -
OrigamiExclusivo
<mv-origami>Paneles que se pliegan como papel. -
PapersExclusivo
<mv-papers>Mesa de conciliación entre documentos para flujos de revisión (KYC, factura frente a orden de compra frente a nota de entrega, contrato frente a presupuesto, formulario enviado frente a documento de identidad). -
PeaExclusivo
<mv-pea>Hace que un problema minúsculo enterrado en lo más profundo de capas plegadas se note en cada nivel por encima de él. -
Price
<mv-price>Precio de e-commerce formateado con Intl.NumberFormat (en-US / USD por defecto): precio actual, precio de referencia tachado, insignia de descuento calculada (porcentaje o importe), precio por unidad, “Desde”, rango de precios, centavos en superíndice, cuatro tamaños; también utilizable como HTML estático con las clases .mv-price-*. -
Product Card
<mv-product-card>Tarjeta de producto en tres formatos: baldosa de cuadrícula (segunda imagen al pasar el cursor, insignias “Nuevo” / “−20 %”, corazón de lista de deseos, añadido rápido por talla con confirmación, muestras de color, estado agotado), línea de carrito (cantidad, total de línea recalculado, eliminación animada) y línea de resumen compacta; enlace extendido accesible, container queries. -
Real TermsExclusivo
<mv-real-terms>Muestra un cambio frente a lo que hizo el mundo en el mismo periodo, no solo frente a cero, para que un crecimiento que solo sigue el ritmo (o se queda atrás) nunca se confunda con progreso: ingresos, salarios, precios, tráfico, cuota de mercado, rentabilidad de inversiones. -
Relative TimeExclusivo
<mv-relative-time>“Hace 3 minutos” que se mantiene al día solo: un <time datetime> real con texto de Intl.RelativeTimeFormat (“ahora”, “dentro de 2 días”, “ayer” por día de calendario, no por 24 h), que pasa a una fecha absoluta a partir de un umbral, en el idioma del lang más cercano. -
Reveal OnceExclusivo
<mv-reveal-once>El paso completo de entrega de un secreto que solo puede mostrarse una vez (clave de API, token de acceso personal, secreto de firma de webhook, códigos de recuperación de 2FA, contraseña temporal, frase semilla de un monedero), sin temporizador: el valor permanece todo el tiempo que el usuario necesite, pero no puede continuar sin confirmar que lo ha guardado. -
Scope TallyExclusivo
<mv-scope-tally>Hace visible el crecimiento del alcance frente a la petición original, para proyectos de clientes y presupuestos cerrados, especificaciones de producto, compromisos de sprint, RFP y contratos. -
Self-DestructExclusivo
<mv-self-destruct>Visualización de un secreto de un solo uso (clave de API, códigos de recuperación, contraseña compartida, enlace temporal) que se muestra una vez y luego se destruye de verdad. -
SnowballExclusivo
<mv-snowball>Selección por barrido para cuadrículas y listas (fototecas, gestores de archivos, bandejas de entrada, catálogos): mantén Shift (o cualquier modificador, o ninguno) y pasa el puntero sobre los elementos. -
Steady PaceExclusivo
<mv-steady-pace>Ritmo de objetivos que te dice la cadencia constante necesaria a partir de hoy, no solo un porcentaje: objetivos de ahorro, cuotas de ventas, objetivos de lectura o de aprendizaje, recaudación de fondos, alcance de un sprint, planes de entrenamiento. -
Stone SoupExclusivo
<mv-stone-soup>Tablero de contribuciones a un objetivo común donde la aportación de cada participante sigue visible y el conjunto se convierte, a la vista, en algo más que la suma de sus partes: comidas compartidas e inscripciones a eventos (“quién trae qué”), botes para regalos de equipo, recaudación de fondos, recompensas, listas de deseos de una comunidad, cobertura de turnos o la capacidad de un sprint por persona. -
Table
<mv-table>Tabla con estilos CSS (hover, franjas, densidad, cabecera/columna fija, estados) + <mv-table> opcional para ordenar y filtrar. -
Tamper SealExclusivo
<mv-tamper-seal>Acceso “romper el cristal” con evidencia de manipulación a datos sensibles (un historial de paciente, un número de tarjeta o de seguridad social completo, un salario, los mensajes privados de un cliente, secretos de producción, una oferta sellada) que se puede abrir, pero nunca en secreto. -
TheseusExclusivo
<mv-theseus>Capa de procedencia que responde a “¿cuánto de esto sigue siendo lo que firmamos?”. -
Time VaultExclusivo
<mv-time-vault>Una cápsula de mensajes escritos hoy y sellados hasta un momento futuro preciso: una fecha (data-opens, absoluta o relativa como “+1y” tras escribir) o una condición de la app con nombre (“cuando lancemos públicamente”, “cuando el MRR supere los 10k $”) que tu app alimenta mediante vault.check(state) o el atributo flags, con progreso opcional (0-1 o “7,4k $ de 10k $”). -
To ScaleExclusivo
<mv-to-scale>Hace comprensibles las cantidades abstractas reformulándolas a una escala humana que el lector ya conoce, junto al valor preciso intacto: 2,4 TB ≈ 800 horas de video HD, 412 t CO₂e ≈ el CO₂ absorbido por 7000 plantones de árbol, 9000 $ ≈ 6 meses de alquiler en Lisboa, 21 600 pedidos/día ≈ un pedido cada 4 segundos, 38 % de los clientes ≈ 2 de cada 5 clientes. -
Trend ChipExclusivo
<mv-trend-chip>El diminuto chip “▲ +12,4 % vs. la semana pasada” para tarjetas de KPI, paneles, tablas de precios e informes: dale la variación (value="0.124") o dos importes (from / to) y muestra el valor con signo mediante Intl como porcentaje, puntos porcentuales, número simple, cualquier moneda o cualquier unidad (“−32 ms”), con un periodo opcional. -
Trust LadderExclusivo
<mv-trust-ladder>Autonomía gradual ganada con un historial, tanto para agentes de IA, automatizaciones e integraciones como para nuevos miembros del equipo. -
Turn ClockExclusivo
<mv-turn-clock>Gestor de turnos con tiempo equitativo para standups, retros, debates, entrevistas, mesas redondas y rotaciones de mob programming, construido como un reloj de ajedrez de torneo: cada participante tiene su propia bolsa de tiempo (igual para todos o personalizada por persona) que solo se consume durante su turno, solo corre un reloj a la vez, y pasar el turno (gran botón Pass, Space, una tecla numérica o un clic en la persona) detiene el tuyo e inicia el siguiente, con un incremento por turno opcional. -
UnclaimedExclusivo
<mv-unclaimed>Radar de responsables para listas de trabajo compartidas: envuelve cualquier lista, tabla o tablero de cosas que todos consideran importantes (acciones de una reunión, seguimientos de incidentes, acciones de retro, triaje de bugs, hilos de un buzón compartido, alertas sin guardia asignada, deuda de documentación) y cada elemento cuyo data-owner está vacío recibe un tranquilo marcador “Nadie todavía”, un asiento vacío con borde discontinuo donde iría el responsable, que se vuelve suavemente más presente con el tiempo (el tinte, el borde y el texto se afirman a lo largo de la ventana de maduración; nunca en rojo, nunca animado). -
UnobservedExclusivo
<mv-unobserved>Una región en vivo (feed, tabla de clasificación, libro de órdenes, lista de notificaciones, kanban sincronizado con el servidor) que nunca se reordena ni se desplaza mientras alguien la está mirando. -
UnsourcedExclusivo
<mv-unsourced>Fundamentación a nivel de afirmación para textos generados o extensos (respuestas de IA, respuestas de soporte, resúmenes de investigación, informes): cada afirmación muestra por sí sola, en su sitio, si algo la respalda. -
Variant TreeExclusivo
<mv-variant-tree>Un explorador de variantes con ramificaciones para cualquier elemento controlado por propiedades personalizadas de CSS (o cualquier estado mediante callbacks): “Generar 4 variantes” hace brotar hijos mutados de la variante aplicada (un slider Spread fija lo audaces que son las mutaciones), mostrados como un árbol ordenado de miniaturas en vivo, clones escalados e inertes del objetivo, así que funciona con cualquier componente sin capturas de pantalla. -
WhereaboutsExclusivo
<mv-whereabouts>Tablero de estado del equipo con forma de esfera cuyas agujas señalan lo que está haciendo cada persona en lugar de la hora. -
Whose WordsExclusivo
<mv-whose-words>Declaración de autoría para textos de origen mixto: borradores asistidos por IA, documentos escritos a varias manos, pasajes citados, correos electrónicos a partir de plantillas y traducciones. -
Yet To ComeExclusivo
<mv-yet-to-come>Una métrica contada como una historia en tres partes, pensada para cambiar lo que pasa después: Past (sparkline, variación en el periodo y la mayor subida o caída, con su anotación), Now (valor actual, delta frente al periodo anterior, tendencia por periodo) y Ahead (dónde acabará la métrica si la tendencia actual continúa, con una banda de incertidumbre claramente etiquetada que es cero hoy y se ensancha con cada periodo).
Feedback 35
-
Alert
.mv-alertAvisos en CSS puro (neutro, info, éxito, advertencia, peligro) con icono, título, descripción y acciones que pasan debajo del texto en anchos estrechos, un banner a todo el ancho y un cierre animado opcional en pocas líneas de JS. -
Alert PhaseExclusivo
<mv-alert-phase>Un estado de incidente cuya gravedad decae con el tiempo en lugar de saltar entre rojo y verde. -
Announcement BarExclusivo
<mv-announcement-bar>Barra fina en la parte superior del sitio para lanzamientos, ofertas, avisos de mantenimiento y adelantos de funciones, con un botón Dismiss recordado por id-key en localStorage (un nuevo id de campaña vuelve a mostrarla), una fecha until opcional que la retira sola, tonos info, accent y warning, y espacio para una cuenta regresiva en un slot. -
Bench SyncExclusivo
<mv-bench-sync>Estado de sincronización local-first que hace explícitos los cambios pendientes y solo los envía en los momentos de pausa. -
Cry WolfExclusivo
<mv-cry-wolf>Protección contra la fatiga de alertas para centros de notificaciones y consolas de monitorización: no se limita a mostrar alertas, decide cuáles merecen interrumpir. -
Deep PauseExclusivo
<mv-deep-pause>Pausa coherente para algo completo (el modo vacaciones de una tienda online, una suscripción, un espacio de trabajo, una integración, una campaña publicitaria, alguien que se va de permiso) en lugar de un simple interruptor de encendido/apagado. -
Deja VuExclusivo
<mv-deja-vu>Señala, al instante y en su sitio, los cambios que el sistema hizo a espaldas del usuario, nunca los que causó el propio usuario. -
Empty
.mv-emptyEstado vacío en CSS puro: una baldosa de icono sobre anillos que se desvanecen o una cuadrícula, título, descripción, acciones y pie; variantes compacta (listas, tablas) e ilustrada (tarjetas en abanico sobre un patrón de puntos). -
Env MarkerExclusivo
<mv-env-marker>Indicador de entorno que hace imposible confundir un entorno que no es de producción con producción. -
FigurinesExclusivo
<mv-figurines>Indicador de intentos restantes que hace tangible un límite pequeño y estricto antes de un bloqueo: intentos de código, PIN o contraseña, reintentos de pago, intentos de respuesta, exportaciones gratuitas. -
Ghost RunExclusivo
<mv-ghost-run>Progreso frente a tu propio intento anterior, para tareas que la gente repite: un fantasma translúcido reproduce tu mejor carrera (o la última, o la de un compañero, o la mediana del equipo que aporta la app) por el mismo recorrido en tiempo real, para que en cada momento veas si vas por delante o por detrás. -
HatchExclusivo
<mv-hatch>“Interruptor de hombre muerto” para la caducidad de la sesión: un discreto chip de cuenta regresiva (cifras tabulares que ruedan como un contador mecánico) que alguien debe reiniciar deliberadamente antes de que llegue a cero. -
Honest WaitExclusivo
<mv-honest-wait>Un indicador de espera larga que nunca finge, para exportaciones, renderizados de video, generación con IA, creación de informes, aprovisionamiento, colas y subidas con conexiones lentas. -
InsistExclusivo
<mv-insist>Pistas progresivas que solo aparecen cuando el usuario está atascado y se vuelven más directas cuanto más tiempo le cuesta. -
LeitmotifExclusivo
<mv-leitmotif>Señales sonoras opcionales que reconoces sin mirar, para pantallas que la gente vigila mientras hace otra cosa: consolas de operaciones, colas de soporte, mesas de trading, chat, pantallas de cocina, dashboards de CI. -
LookalikeExclusivo
<mv-lookalike>Detección de imitaciones para todo lo que dice ser alguien de confianza: envuelve correos electrónicos, hilos de chat, formularios o zonas de pegado, dale tus identidades de confianza (trusted="Acme Bank <acme-bank.com>, @stripe.com, @northwind, Payroll <DE89 3704 …>") y cada enlace, remitente, dirección de correo electrónico, @usuario, nombre de paquete o de usuario, IBAN y dirección de monedero dentro de su alcance, incluidos el texto sin formato y los campos mientras escribes o pegas, se compara con ellas. -
MidnightExclusivo
<mv-midnight>Un modo elevado visible y limitado en el tiempo (reautenticación sudo/admin, “ver como un cliente”, acceso compartido temporal, una prueba premium, acceso de emergencia, un bloqueo de edición) que termina exactamente a su hora y lo deja todo como estaba. -
Pixel Loader
<mv-pixel-loader>Indicadores de “pensando” en matriz de puntos sobre una diminuta cuadrícula de píxeles (de 3×3 a 9×9) en currentColor: serpiente, órbita, onda concéntrica, barrido, espiral, respiración, destello u onda diagonal, con una etiqueta opcional atravesada por una banda más brillante. -
Progress
.mv-progressBarras de progreso sobre el <progress> nativo (determinada con brillo, indeterminada con barrido, segmentada), un anillo SVG circular controlado por --value con un contador animado y un indicador <meter> coloreado según sus umbrales. -
Quiet AlarmExclusivo
<mv-quiet-alarm>Un detector de ausencias: da la alarma cuando algo que suele ocurrir ha dejado de ocurrir (pedidos, webhooks, mensajes de websocket, lecturas de sensores, líneas de log). -
RechargeExclusivo
<mv-recharge>Un presupuesto visible de límite de uso y cuota (token bucket) para todo lo medido: mensajes de IA, llamadas a la API, reenvíos de códigos por SMS, acciones en bloque, créditos del plan gratuito. -
RememberedExclusivo
<mv-remembered>Informa de los efectos secundarios duraderos de una elección en el momento en que se toma, sin interrumpir. -
Run ContractExclusivo
<mv-run-contract>Un contrato de ejecución para tareas largas de IA que se convierte en el dashboard en vivo del mismo trabajo: una tarjeta, dos vidas. -
Saved StateExclusivo
<mv-saved-state>Línea de estado de guardado automático (Cambios sin guardar · Guardando… · Guardado · Hace 2 minutos · Sin conexión · No se pudo guardar · Reintentar) controlada por saving() / saved() / failed() o track(promise), o apuntándola a un formulario. -
SkeletonGratis
.mv-skeletonMarcadores de carga con un destello sincronizado en toda la página (o un pulso), formas de texto, título, avatar, multimedia y botón, y una revelación con fundido cruzado difuminado hacia el contenido cargado controlada por aria-busy. -
Skeleton MorphExclusivo
<mv-skeleton-morph>El skeleton no deja paso al contenido, se convierte en él: cada bloque se empareja con un elemento real (data-skeleton-for, y después tipo, orden y geometría) y viaja hasta él. -
Soft LockExclusivo
<mv-soft-lock>Bloqueo suave y avisos de colisión para registros que varias personas (o pestañas) pueden cambiar a la vez: facturas, tickets, documentos, páginas de configuración, operaciones en bloque. -
Spinner
.mv-spinnerUna familia de indicadores de carga de un solo elemento dibujados en currentColor: anillo, arco con estela, puntos en onda, barras de ecualizador, órbita y pulso; 5 tamaños. -
Tell-TaleExclusivo
<mv-tell-tale>Indicador de trabajo sin guardar cuya insistencia crece con lo que está en juego. -
Thinking Orb
<mv-thinking-orb>Orbe de asistente de IA en canvas: una gota brillante que se deforma, se arremolina y cambia de material según su estado (inactivo, escuchando, pensando con satélites en órbita, hablando, éxito, error), con transiciones suaves entre estados. -
TremorExclusivo
<mv-tremor>Alerta temprana ambiental para un límite que se acerca, en los casos en que un banner o un modal serían demasiado: almacenamiento o cuota que se llenan, un presupuesto cerca de su tope, créditos prepago que se agotan, una cola que crece, un certificado, un sprint o un plazo que se acercan. -
Understood AsExclusivo
<mv-understood-as>Muestra cómo se entendió una petición en texto libre, justo al lado de la respuesta, para que nadie se fíe de un resultado calculado para la pregunta equivocada: “Mostrando resultados de [Ingresos netos] · [Países de la UE] · [T2 2026 ?] · [Sin reembolsos]”. -
While AwayExclusivo
<mv-while-away>“Mientras no estabas…”: envuelve cualquier región (dashboard, feed, tablero), detecta lo que cambió mientras estabas en otra parte (pestaña oculta o inactividad) y te devuelve el contexto en 3 segundos. -
Why NotExclusivo
<mv-why-not>Denegación explicable: ningún “no” sin un motivo y una salida. -
WobbleExclusivo
<mv-wobble>Vista previa del impacto de una eliminación que ajusta la fricción de borrar, archivar, desactivar, revocar o despublicar a lo que realmente depende del elemento.
Layout 10
-
AttacheExclusivo
<mv-attache>Editor de empaquetado en cuadrícula que tiene en cuenta las formas: cada hijo ocupa w × h celdas de una cuadrícula fija (widgets de un dashboard, pegatinas en una hoja de impresión, cajas en una estantería, mesas en una sala) y la cuadrícula muestra de un vistazo qué cabe y qué no. -
Bento Grid
.mv-bentoCuadrícula bento en CSS puro: tarjetas que ocupan varias columnas/filas (data-span="2x1"…), un área visual que se desvanece, título, descripción y una llamada a la acción que aparece al pasar el cursor; se adapta al tamaño de su contenedor. -
Carousel
<mv-carousel>Carrusel basado en el scroll snap nativo: flechas, puntos sincronizados con IntersectionObserver, teclado, bucle, reproducción automática con un punto de progreso (se pausa al pasar el cursor, con el foco y con movimiento reducido), varias diapositivas por vista, modo vertical y arrastre con el mouse. -
CourtyardExclusivo
<mv-courtyard>Muro de monitorización que vigila todos los flujos a la vez y te dice dónde mirar: cualquier hijo (estadísticas en vivo, video, imágenes de cámara, jobs de CI, pantallas de alumnos) se convierte en una “ventana” de una cuadrícula automática, y cada una informa de su actividad mediante un nivel data-activity sostenido, llamadas puntuales a activity(window, level, note) o los cambios de su propio DOM tras un periodo de calma (MutationObserver, por lotes, para que una baldosa que se actualiza a ritmo constante siga tranquila y solo destaque lo nuevo). -
FogExclusivo
<mv-fog>Descubrimiento progresivo para interfaces densas (consolas de administración, herramientas profesionales, apps de analítica con muchos paneles, ajustes profundos): cada zona marcada con data-fog que el usuario aún no ha explorado queda bajo un velo ligero y con textura (una bruma del color de la página, suaves manchas de nube, una ligera desaturación y un grano fino, todo en CSS, sin canvas) con una pequeña etiqueta “Aún sin explorar · Automatizaciones”, mientras su contenido sigue siendo legible, clicable y totalmente accesible para las tecnologías de apoyo. -
MarginaliaExclusivo
<mv-marginalia>Notas al margen responsive para contenido largo (documentación, artículos, términos legales, changelogs, informes de investigación) en las que cada nota decide por sí misma si cabe en el margen. -
Marquee
<mv-marquee>Desplazamiento infinito de logos, testimonios o tarjetas: velocidad en px/s sea cual sea el tamaño del contenido, horizontal o vertical, arrastre con inercia, desvanecido en los bordes y una variante 3D inclinada. -
Orbiting Circles
<mv-orbit>Elementos que orbitan alrededor de un centro: varios anillos (radio, duración, sentido), espaciado uniforme, iconos que se mantienen derechos, trayectorias dibujadas; animación 100 % CSS, en pausa cuando está fuera de pantalla. -
Resizable
<mv-resizable>Paneles redimensionables horizontales o verticales (anidables) separados por tiradores: arrastre con el puntero, teclas de flecha, tamaños mín./máx. en %, plegado con doble clic con ajuste magnético, persistencia en localStorage. -
Scroll Area
.mv-scroll-areaÁrea de desplazamiento con una barra fina, ocultación automática, desvanecidos en los bordes controlados por el scroll y ajuste magnético.
Texto animado 23
-
Adaptive InkExclusivo
<mv-adaptive-ink>Texto que sigue siendo legible sobre cualquier fondo animado (shader WebGL, video, canvas, imagen): el fondo se muestrea en tiempo real bajo cada palabra, se divide en columnas y cada columna elige una tinta clara u oscura con un fundido cruzado; una sola letra puede ser mitad blanca, mitad negra. -
CertaintyExclusivo
<mv-certainty>Texto cuyos pasajes llevan cada uno un nivel de confianza (respuesta de IA, resumen, informe), presentado con calma para que los lectores calibren su confianza sin un muro de advertencias: tres niveles (Verified sin marca, Likely con un subrayado punteado, Uncertain con una onda dibujada a mano cuya amplitud crece con la duda) y una tinta que se aclara a medida que baja la confianza. -
Circular Text
<mv-circular-text>Anillo giratorio de texto alrededor de un icono, un logotipo o un avatar, trazado a lo largo de un círculo SVG real para que la fuente conserve su interletraje y el bucle se cierre de forma uniforme; al pasar el cursor o con el foco, el giro se acelera, se ralentiza, se detiene o se invierte con suavidad. -
Falling Text
<mv-falling-text>Texto en el que cada palabra se convierte en una caja rígida: al activarse (al entrar en vista, clic, hover), las palabras salen disparadas desde el punto de liberación, dan tumbos, rebotan y se amontonan en el suelo del bloque, y después se pueden agarrar y lanzar; quienes usan el teclado liberan y sacuden el montón con Enter. -
Glitch Text
.mv-glitch-textGlitch RGB en CSS puro: finas bandas magenta y cian del texto saltan de lado en ráfagas breves, de forma continua o al pasar el puntero, con un límite por debajo de tres destellos por segundo. -
Gradient Text
.mv-gradient-textTexto con degradado multicolor en CSS puro: estático, animado de ida y vuelta, desvanecido editorial o una aurora de manchas de color que flotan dentro de las letras. -
Letter Swap
<mv-letter-swap>Giro letra a letra para enlaces de navegación y botones: al pasar el puntero o al recibir el foco de teclado, cada letra se aleja girando para revelar a su gemela, en cascada, o gira como un pequeño cubo 3D. -
Morphing Text
<mv-morphing-text>Palabras que se funden unas con otras: dos copias apiladas se difuminan en cruz mientras un filtro SVG de umbral alfa fusiona los glifos en una masa “gooey”. -
Number Ticker
<mv-number-ticker>Contador animado formateado con Intl (en-US por defecto: moneda, porcentaje, compacto, decimales) en dos modos: interpolación suave u odómetro giratorio; se vuelve a animar con cada cambio de valor, sin saltos de layout. -
Particle CounterExclusivo
<mv-particle-counter>Una cifra de KPI dibujada como una matriz de partículas: cuando el valor cambia, las partículas de los dígitos modificados se separan, vuelan y se reasignan a los puntos de los nuevos dígitos (se conservan: las sobrantes se fusionan, las que faltan se desprenden de las demás), con un destello verde al subir y uno rojo al bajar. -
Particle Text
<mv-particle-text>Texto dibujado por miles de partículas en canvas muestreadas de la propia fuente del elemento: llegan a su sitio de izquierda a derecha, huyen del puntero y vuelven con un resorte, salen despedidas al hacer clic y fluyen hacia la nueva palabra cuando cambia el texto, coloreadas por un degradado que recorren. -
Rolling Text
<mv-rolling-text>Etiqueta de hover que sube rodando letra a letra, de izquierda a derecha, y vuelve a aterrizar o hace aterrizar una segunda etiqueta desde abajo, con un ligero desenfoque en tránsito y una huella fijada a la etiqueta más larga; variante glide: un marcador se desliza entre las frases de una oración. -
Scramble Text
<mv-scramble-text>Efecto de decodificación: glifos aleatorios se resuelven en el texto real (desde el inicio, el final, el centro o al azar) al entrar en pantalla, con hover o con el foco. -
Scroll Text
<mv-scroll-text>Párrafo cuyas palabras (o letras) se iluminan progresivamente al desplazarte, de tenues y difuminadas a nítidas; animaciones CSS controladas por el scroll, con alternativa en JS. -
Shimmer Text
.mv-shimmer-textDestello de luz en CSS puro que barre el texto (background-clip): una insignia “Nuevo”, estados de IA “pensando…” con puntos animados y una variante de pulso. -
Show MoreExclusivo
<mv-show-more>Limita el contenido largo a unas pocas líneas (o a una altura, para contenido mixto) tras un suave desvanecido y un botón “Mostrar más” que solo existe cuando algo se recorta de verdad, comprobado de nuevo al redimensionar y al cargar imágenes y fuentes; el texto oculto sigue siendo legible para los lectores de pantalla y la búsqueda en la página, Tab o un #enlace hacia él lo abre en su sitio, y al plegarlo se fija el botón para que la página nunca salte. -
Sparkles Text
<mv-sparkles-text>Pequeñas estrellas titilantes que aparecen al azar alrededor del texto y sobre él; colores, densidad y velocidad ajustables, se activan al entrar en pantalla o al pasar el cursor. -
Text Highlight
<mv-text-highlight>Resalta las palabras cuando entran en el área visible: un trazo de rotulador que recorre las líneas, o una anotación dibujada a mano (subrayado, círculo, recuadro, tachado) trazo a trazo. -
Text Reveal
<mv-text-reveal>Revelación de texto dividida en letras, palabras o líneas con 6 presets escalonados (fundido, desenfoque, deslizamiento, rotación 3D, zoom, máscara), activada al entrar en el área visible; el marcado en línea se conserva. -
Typewriter
<mv-typewriter>Máquina de escribir para titulares hero: escribe frases letra a letra con un ritmo irregular y pausas en la puntuación, las borra y las alterna tras un cursor de barra, bloque o guion bajo, dentro de una caja reservada a su tamaño final para que nada a su alrededor se mueva. -
Variable Proximity
<mv-variable-proximity>Las letras se hinchan a lo largo de los ejes de una fuente variable (peso, ancho, cualquier eje personalizado) cuando se acerca un mouse o un lápiz, con un radio en em y una atenuación lineal, exponencial o gaussiana; las posiciones de las letras se guardan en caché en reposo para que el campo nunca tiemble, y las fuentes estáticas recurren a un efecto de escala. -
Wind TextExclusivo
<mv-wind-text>Texto cuyas letras se comportan como hierba (o una bandera) en un único campo de viento compartido por toda la página: el desplazamiento envía ráfagas cuyo frente recorre el texto en la dirección del scroll, el cursor sopla localmente sobre una cuadrícula de velocidades advectada que se disipa, cada letra se dobla sobre su línea base con su propio resorte y unos granos de polen salen volando allí donde sopla el viento. -
Word Rotate
<mv-word-rotate>Palabra giratoria en línea para frases de hero (deslizamiento, giro 3D, desenfoque o fundido, letra a letra) cuyo ancho se ajusta con suavidad para que la frase nunca salte.
Fondos 11
-
Aurora Background
<mv-aurora-background>Aurora en CSS con una sola clase: suaves pliegues de luz con nítidos rayos verticales flotan y respiran en dos capas opuestas (o grandes manchas errantes), discreta en modo claro y luminosa en modo oscuro, con un elemento opcional que añade un resplandor que se desliza tras el mouse o el lápiz. -
BackdropExclusivo
.mv-backdropFondos de hero y de sección con una sola clase y cero JavaScript: presets glow, mesh, aurora-still, grid-fade, dots-fade, rays, topo y grain, combinables (data-backdrop="mesh grain") y construidos con los tokens de marca, así que siguen el modo claro, el oscuro, los subárboles [data-theme] y el tono de acento de la app. -
Beams
<mv-beams>Haces de luz en un solo canvas: cometas con colas que se desvanecen recorren a toda velocidad curvas que convergen en la esquina superior derecha, o rayos caen cada vez más rápido y estallan en chispas sobre un suelo luminoso. -
Dot Matrix
<mv-dot-matrix>Cuadrícula WebGL de puntos cuadrados: al cargar se encienden desde el centro hacia fuera con una breve chispa, y luego cada punto vuelve a sortear su brillo en sus propios momentos aleatorios para un parpadeo tranquilo, algunos puntos de acento respiran con más brillo y se abre una zona más viva alrededor del puntero. -
Dot Pattern
<mv-dot-pattern>Patrón de puntos en CSS puro (desvanecido, escalonado) y una versión viva en canvas: halos que titilan con un brillo al pasar el cursor, o una onda concéntrica que el cursor aparta con un retorno elástico. -
Grid Pattern
<mv-grid-pattern>Cuadrícula de fondo en CSS puro (líneas continuas o discontinuas, celdas resaltadas, desvanecido radial) y un elemento animado: parpadeo, celdas que se iluminan bajo el cursor con una estela y una onda al hacer clic, y un suelo en perspectiva retro. -
Light Rays
.mv-light-raysRayos de luz divina que caen desde arriba, en CSS puro: dos abanicos de degradados cónicos difuminados que se balancean y laten lentamente, con un resplandor en el origen. -
Mesh Gradient
<mv-mesh-gradient>Degradado de malla animado en WebGL: tres suaves cintas de color vagan sobre un color base en un plano inclinado que se pliega, mezcladas en Oklab para que tonos de marca contrastados nunca se encuentren en una mancha turbia; opcionalmente, el plano se inclina hacia el puntero. -
Meteors
<mv-meteors>Lluvia de meteoros en diagonal con estelas brillantes: animación 100 % CSS; el JS solo distribuye las estrellas fugaces y cambia su carril en cada pasada. -
Particles
<mv-particles>Partículas en canvas que flotan y titilan, repelidas o atraídas por el cursor con un retorno elástico; un modo constelación opcional une a las vecinas y al puntero. -
Still TimeExclusivo
<mv-still-time>Regulador del movimiento ambiental: envuelve cualquier región y cada animación de su interior (keyframes CSS, transiciones CSS, Web Animations, videos silenciados) solo avanza tan rápido como actúa el usuario.
Cursores 9
-
Busy CursorExclusivo
<mv-busy-cursor>“Espera, por favor” local para una región (una tabla que se recarga, un gráfico que se recalcula, un panel que se guarda): mientras está ocupada, un anillo diminuto acompaña al cursor del sistema con un progreso indeterminado o real, la región recibe cursor: progress y aria-busy, y los clics pueden retenerse y luego reproducirse una vez o descartarse con una sacudida. -
Cursor Follower
<mv-cursor>Cursor personalizado: un punto preciso y un anillo que lo sigue con un resorte, se estira con la velocidad, crece sobre los elementos interactivos y muestra una etiqueta (data-cursor="View"), con una variante en modo de fusión difference; limitado a un área o a toda la página. -
Cursor SnapExclusivo
<mv-cursor-snap>Efecto de puntero premium que conserva el cursor del sistema: una placa suave se adapta al enlace o botón bajo el cursor (su caja y su radio de esquina), entra con suavidad, se inclina ligeramente hacia el puntero y se desliza entre los objetivos. -
Cursor Type
<mv-cursor-type>Una palabra grande (un 404, una palabra clave) cuyas letras responden a un puntero preciso, cada una con su propio resorte: un peso variable que se hincha, un estiramiento elástico desde la línea de base, letras apartadas que se inclinan al moverse o una lupa estilo dock que separa a sus vecinas. -
ForeseeExclusivo
<mv-foresee>Prevé qué control está a punto de pulsar el usuario a partir de la trayectoria del puntero, antes del clic, y lleva la cuenta de sus propios aciertos. -
Image Trail
<mv-image-trail>Estela de imágenes para mouse y lápiz: cada pocas decenas de píxeles a lo largo del recorrido del puntero, la siguiente imagen hija cae justo sobre el recorrido, se deja llevar un poco por el impulso del trazo y luego se encoge hasta desaparecer, así que los trazos rápidos dejan huellas espaciadas de forma regular; variantes rotate y fall. -
Magnetic
<mv-magnetic>Envoltorio magnético: el elemento hijo se inclina hacia el cursor cercano con una atenuación suave, lo sigue un poco mientras está encima y luego vuelve a su sitio con un rebote elástico. -
Reading RulerExclusivo
<mv-reading-ruler>Guía de lectura para textos largos (condiciones, artículos, documentación) que ayuda a los lectores con dislexia, TDAH o baja visión a no perder el hilo: una franja de exactamente una línea de alto se ajusta a las cajas de línea reales del texto bajo el puntero, con el resto ligeramente atenuado (franja, máscara o subrayado). -
Reveal Mask
<mv-reveal-mask>Círculo suave que sigue a un puntero preciso y descubre una segunda capa, con una estela opcional que se desvanece; los toques, el foco del teclado y revealed lo abren como un iris, y con movimiento reducido aparece con un fundido.
Desplazamiento 11
-
Back to TopExclusivo
<mv-back-to-top>Botón flotante de volver arriba que aparece solo cuando el lector ha bajado bastante por la página y sube o se detiene, nunca mientras lee hacia abajo, con un anillo de progreso opcional. -
Container Scroll
<mv-container-scroll>Una pantalla de dispositivo que se inclina hacia atrás con un reflejo en el cristal y luego se endereza, se asienta y pierde el reflejo al entrar en vista con el scroll, mientras el título sube hasta su sitio. -
Drag ScrollExclusivo
<mv-drag-scroll>Envuelve cualquier tabla, carrusel de tarjetas, línea de tiempo o tablero que desborde en horizontal para que quien usa mouse lo vea y lo use: fundidos en los bordes y un indicio “Más” solo en los lados ocultos, arrastre con inercia, la rueda normal convertida en desplazamiento lateral y botones de paginación opcionales. -
Parallax
<mv-parallax>Profundidad por capas al hacer scroll sin configuración: marca cualquier descendiente con data-speed y se desplaza a su propio ritmo mientras la sección cruza su contenedor de scroll, movido por una view timeline nativa fuera del hilo principal, con un respaldo JS ligero que solo actúa en lo visible. -
Reading MapExclusivo
<mv-reading-map>Un minimapa en vivo de un artículo, construido a partir de su DOM y no de una captura de pantalla: cada línea de texto (con su longitud real), título, viñeta, imagen, tabla y línea de código se convierte en una forma abstracta. -
Scroll Progress
<mv-scroll-progress>Indicador de progreso de lectura: una barra en CSS puro en la parte superior de la página (scroll timeline), o un elemento de barra / anillo con un porcentaje que sigue a cualquier contenedor con desplazamiento, con suavizado de resorte opcional. -
Scroll Reveal
<mv-reveal>Revelación al desplazarte: los hijos aparecen con fundido, desenfoque, deslizamiento o zoom de forma escalonada, una vez o cada vez; una variante en CSS puro se controla con una view timeline. -
Scroll Stack
<mv-scroll-stack>Tarjetas sticky que se apilan al desplazarte: cada tarjeta que llega se asienta en su sitio mientras las de debajo retroceden un paso (más pequeñas, más tenues), impulsado por el scroll donde hay soporte; el foco descubre las tarjetas tapadas, y con movimiento reducido es una lista normal. -
Scroll Velocity
<mv-scroll-velocity>Filas de texto grande que se desplazan infinitamente; su velocidad y su dirección siguen la velocidad del scroll (suavizada con resorte), y el texto se inclina en los desplazamientos rápidos. -
Sticky Scroll
<mv-sticky-scroll>Sección de scrollytelling: los pasos cuelgan de un carril de progreso que se llena de forma continua con el scroll (nodos hechos / activo / próximos), mientras el panel fijo pasa de una imagen a otra a lo largo de una única costura que tiene en cuenta la dirección y un indicador segmentado sigue el paso actual; se apila en dispositivos móviles. -
Tracing Beam
<mv-tracing-beam>Riel de línea de tiempo junto a un artículo o un registro de cambios: el trazo se llena con el progreso de lectura y cada nodo de sección se ilumina cuando el haz lo pasa, impulsado por una view timeline nativa con un respaldo ligero en JS.
Multimedia 9
-
Blur UpExclusivo
<mv-blur-up>Envuelve un <img> nativo (lazy loading, srcset, sizes, alt y <picture> intactos): mantiene su proporción para que nada se desplace, muestra una imagen diminuta desenfocada, el color dominante o un degradado, y hace un fundido cruzado hacia la foto una vez decodificada. -
Device Mockup
.mv-deviceMarcos de dispositivo en CSS puro alrededor de cualquier contenido: iPhone (Dynamic Island, botones), Android (cámara perforada), iPad vertical/horizontal, MacBook (notch, base de aluminio) y una ventana de navegador (semáforos, barra de direcciones mediante data-url); biseles oscuros o claros, todo escalado a partir de un único ancho. -
Image Compare
<mv-image-compare>Comparación antes/después en la que todo el marco es la pista del slider: un tirador en cápsula role=slider con compatibilidad total con teclado, un chip de valor en vivo, insignias cortadas limpiamente por la línea, gestos táctiles que distinguen toques, deslizamientos y desplazamientos de página, horizontal o vertical, arrastre o seguimiento del mouse, un barrido opcional y una variante con resplandor. -
Invite InExclusivo
<mv-invite-in>Embed que prioriza la privacidad y no hace ninguna petición a terceros hasta que el usuario lo invita a entrar: videos de YouTube y Vimeo, mapas, publicaciones de redes sociales, widgets de chat, iframes cargados de analítica, hojas de estilo de fuentes de terceros. -
Lens
<mv-lens>Lupa que sigue al cursor sobre una imagen o cualquier contenido: una copia ampliada recortada en un círculo (o un cuadrado) anclada al puntero, borde de cristal, apertura animada, posición fija opcional y movimiento con el teclado. -
Mosaic Gallery
<mv-mosaic>Mosaico de imágenes que se reorganiza solo: la foto elegida pasa a ser la tesela grande y cada tesela se transforma hasta su nuevo sitio en una sola View Transition, recortada en lugar de estirada. -
Product Gallery
<mv-product-gallery>Galería de la página de producto: imagen principal con scroll-snap nativo (deslizar en táctil), miniaturas sincronizadas en columna o en fila (cambio opcional al pasar el cursor), zoom al pasar el cursor que sigue al puntero, flechas y contador, una barra segmentada en contenedores pequeños, y pantalla completa en un <dialog> con zoom al hacer clic y desplazamiento de la imagen. -
Step ZoomExclusivo
<mv-step-zoom>Inspector de imágenes con zoom profundo basado en pasos discretos y direccionables en lugar de pellizcar y desplazarse libremente. -
World Map
<mv-world-map>Mapa del mundo SVG punteado, creado con datos terrestres de dominio público de Natural Earth, con rutas ortodrómicas reales que se dibujan y transportan pequeños paquetes, balizas en las ciudades nodo, etiquetas HTML nítidas y una lista para lectores de pantalla con cada lugar y cada conexión.
3D 5
-
Card Stack
<mv-card-stack>Pila de tarjetas para deslizar: cada tarjeta reposa con su propia ligera inclinación y se endereza cuando se aparta la de arriba; la tarjeta superior gira alrededor del punto por el que la agarraste, una insignia de veredicto y un tinte en el borde crecen con el tirón mientras se llena el botón correspondiente, los lanzamientos conservan la inercia del gesto y next() mete la tarjeta debajo de la pila; botones, teclas de flecha, deshacer, bucle o fin de pila, y reproducción automática. -
Exploded ViewExclusivo
<mv-exploded>Una vista explosionada en 3D de cualquier interfaz en vivo: cada caja se convierte en un plano elevado según su profundidad visual (los contenedores invisibles no añaden un piso), todo el conjunto se inclina hasta una pose isométrica, gira arrastrando o con el teclado, aísla una capa al pasar el cursor (tag, clases, tamaño), etiqueta las capas con líneas guía y luego se vuelve a montar con resortes por piso y restaura los estilos originales byte a byte. -
Flip Card
.mv-flip-cardTarjeta de dos caras que gira en 3D al pasar el puntero, con el foco del teclado, al tocarla o al hacer clic, y se eleva hacia el espectador a mitad del giro mientras la luz se apaga en la cara que se aleja; solo la cara visible está activa para Tab, los punteros y los lectores de pantalla. -
Gallery 3D
<mv-gallery-3d>Galería 3D en CSS con tres puestas en escena: ring (un cilindro que haces girar, que sigue por inercia y se detiene en un elemento), dome (teselas que recubren el interior de una esfera que recorres con la mirada) y circular (una tira infinita dispuesta a lo largo de un arco, controlada arrastrando o con la rueda). -
Globe
<mv-globe>Globo de puntos interactivo en canvas 2D (proyección ortográfica de una máscara de tierras integrada, cero dependencias): rotación automática, arrastre con inercia, marcadores que laten, arcos de círculo máximo animados como cometas, y un halo y un borde atmosférico con los colores de tus tokens.
Transiciones 6
-
Expandable Card
<mv-expandable>Cuadrícula o lista de tarjetas en la que una tarjeta se amplía hasta una vista de detalle modal accesible: su caja, imagen, título y descripción viajan con un único resorte interrumpible, el texto y las imágenes nunca se deforman, y con movimiento reducido se abre al instante. -
GrinExclusivo
<mv-grin>“Descartar a residuo” para banners de anuncios, widgets de chat, paneles de subida, reproductores de video y paneles de filtros: en lugar de desaparecer, un panel descartado, minimizado, inactivo o que ya quedó atrás al desplazarse se desvanece progresivamente y deja un diminuto residuo persistente que conserva su único dato esencial, en vivo (“Nuevo · 2”, el número de no leídos, un anillo de progreso, “4 filtros”). -
Morph Panel
<mv-morph-panel>Un contenedor que anima su ancho y su alto medidos al cambiar de vista, con un fundido cruzado difuminado del contenido: paneles laterales de varios pasos, popovers y una variante “Dynamic Island” que crece de una píldora a un panel. -
Page Transition
.mv-page-transitionTransiciones de página nativas con la View Transitions API: fundido, deslizamiento tipo push, zoom en profundidad y una revelación circular desde el clic, cada una con su versión de retroceso, para sitios de varias páginas y SPA, llevando el foco a la nueva vista. -
Pixel Transition
<mv-pixel-transition>Alterna entre dos caras a través de una cuadrícula de píxeles: píxeles cuadrados crecen sobre la primera cara en orden aleatorio, radial (desde el puntero), diagonal o por filas, las caras se intercambian bajo una cobertura completa y luego los píxeles se encogen hasta desaparecer. -
Twin DropExclusivo
<mv-twin-drop>Zonas de soltar enlazadas que mueven elementos por una página en un solo gesto: dos zonas <mv-twin-drop> se emparejan, y cualquier [data-twin-drop-item] arrastrado a una se desliza por su abertura y sale por su gemela en otro punto de la página, disparado en la orientación de la gemela a una velocidad proporcional a la de entrada (con un tope), frenando hasta asentarse en el contenedor de destino de la gemela, o deslizándose y rebotando hasta detenerse en un lienzo libre cuando no hay destino.
Microinteracciones 12
-
Click Spark
<mv-click-spark>Wrapper que lanza estelas de chispas desde el punto del clic: cada estela se estira, se curva ligeramente por la gravedad y se encoge hasta un punto alrededor de un destello suave, dibujadas en una sola capa superpuesta compartida de la página para que las chispas nunca se recorten ni bloqueen los clics; teclado incluido, y una función spark() funciona sin el elemento. -
Confetti
<mv-confetti-button>Confeti en canvas basado en física (gravedad, resistencia, giro 3D, bamboleo): una función confetti() independiente, presets de cañones / fuegos artificiales / estrellas / emoji, un botón disparador y un modo “cool” de mantener pulsado. -
Copy Button
<mv-copy-button>Botón de copiar con feedback de odómetro: el icono y la etiqueta suben hasta una marca de verificación (o bajan hasta una alerta si falla) dentro de ventanas fijas, mientras un baño de color llena el botón y se vacía durante el tiempo de espera como una cuenta regresiva; los botones de solo icono reciben una etiqueta de estado. -
Count BumpExclusivo
<mv-count-bump>Envuelve un contador de carrito, una insignia de notificación, un contador de no leídos o de “me gusta” y cada cambio se vuelve perceptible: un pequeño salto direccional (hacia arriba si sube, hacia abajo si baja), solo ruedan los dígitos que cambian, un “+2” opcional sale flotando y max="99" muestra “99+”. -
Hold Button
<mv-hold-button>Botón “Mantén pulsado para confirmar” para acciones destructivas: mientras se pulsa, un líquido sube por dentro (o entra desde el lado) e invierte la etiqueta donde la cubre, soltar antes de tiempo lo vacía, y una pulsación completa termina con una marca de verificación, una etiqueta de hecho y mv-confirm. -
Icon Morph
.mv-icon-morphIconos en CSS puro que se transforman según el estado ARIA de su padre: hamburguesa ↔ cerrar, más ↔ menos, reproducir ↔ pausa, chevrón V ↔ Λ, chevrón giratorio, flecha → marca de verificación. -
Like Button
<mv-like>Botón de “me gusta” o favorito con una pulsación táctil: el glifo se hunde bajo el puntero y luego rebota por encima de su tamaño completo mientras se rellena, al tiempo que un anillo y una corona de chispas irradian una vez; los dígitos del contador que cambian ruedan hacia arriba o hacia abajo en casillas fijas, formateados con Intl. -
Physics Stack
<mv-physics-stack>Una lista cuyos elementos son cuerpos rígidos apilados en una caja: agarra una tarjeta por una esquina (gira alrededor del punto de agarre), lánzala, la pila vuelve a caer por la gravedad y el orden del DOM sigue el orden visual. -
Ripple
<mv-pulse-ring>Onda de tinta al estilo Material desde el punto de clic en cualquier elemento (.mv-ripple / data-mv-ripple, crece mientras se mantiene pulsado), además de <mv-pulse-ring>: anillos concéntricos que irradian o respiran. -
Salvage StopExclusivo
<mv-salvage-stop>Un botón Stop para procesos largos (agentes de IA, exportaciones, generación) que muestra lo que conservas antes de detenerlo: al pasar el cursor o con el foco, un panel anclado despliega dos bandejas, “Conservas” (artefactos terminados, brillantes, con el glifo de su tipo) y “Pierdes” (elementos en curso, atenuados, con su progreso), además de un titular que indica el valor rescatado (“Conservas 7 de 9 elementos · 78 % del trabajo”, ponderado por elemento). -
Share ButtonExclusivo
<mv-share-button>Botón de compartir que abre la hoja de compartir nativa en un toque donde la Web Share API puede compartir los datos (comprobado con navigator.canShare), y en los demás casos un pequeño menú de teclado con Copiar enlace, Correo electrónico y las redes que indiques, construidos como simples enlaces de intención. -
Theme Toggle
<mv-theme-toggle>Interruptor claro/oscuro: el nuevo tema se revela en un círculo desde el botón (View Transition + clip-path), un sol se transforma en luna, la elección se recuerda y se respeta la preferencia del sistema.
Efectos 11
-
Animated Beam
<mv-animated-beam>Haz SVG curvo entre dos elementos de un contenedor, recorrido por un pulso en degradado; sigue los cambios de tamaño, ideal para diagramas de integración. -
ASCII
<mv-ascii>Redibuja una imagen, un video, un canvas o un texto como arte ASCII en vivo: rampa de caracteres y tamaño de celda configurables, monocromo o a todo color, una estela del puntero que engrosa los caracteres por donde pasa y se enfría tras él, y una revelación opcional que desordena cada carácter antes de fijarlos de izquierda a derecha. -
Border Beam
<mv-border-beam>Luz animada que recorre el borde de cualquier caja: un cometa a velocidad constante, destellos cónicos, un degradado en movimiento, estrellas que se deslizan o un borde eléctrico. -
Glass
<mv-liquid-glass>Vidrio esmerilado que sigue siendo legible sobre cualquier fondo: el fondo se desenfoca, se reduce su contraste y luego se cubre con un velo del color del tema, en 5 presets para claro y oscuro, más un vidrio líquido que ondula el fondo mediante un filtro SVG. -
Glow
.mv-glowRetroiluminación en degradado difuminado detrás de cualquier elemento, además de una tarjeta de neón con borde en degradado, estático o girando lentamente. -
Gooey
.mv-gooeyUtilidad de metaballs: una capa de fondo filtrada (blur + umbral alfa SVG) donde las formas se funden entre sí como un líquido, mientras el texto, los iconos y el foco siguen nítidos por encima. -
Noise
.mv-noiseGrano de película en CSS puro (textura SVG feTurbulence como data URI) sobre cualquier superficie: fino o grueso, estático o animado, por debajo o por encima del contenido. -
Progressive Blur
.mv-progressive-blurDesenfoque progresivo de los bordes en CSS puro: capas de backdrop-filter apiladas y enmascaradas por franjas, en cualquier lado, con un desvanecido opcional hacia el color de fondo. -
Spotlight Card
<mv-spotlight>Un foco que sigue al cursor dentro de una tarjeta y revela su borde; en una cuadrícula, la misma luz se derrama sobre los bordes de las tarjetas vecinas. -
SurfaceExclusivo
<mv-surface-layer>Un sistema de materiales en GPU para cualquier elemento: data-mv-surface="glass | chrome | jelly | velvet | holo". -
Tilt Card
<mv-tilt>Inclinación 3D sutil bajo un puntero preciso, con un brillo suave y parallax data-depth, plana y nítida en reposo, una ligera elevación con el foco del teclado y sin inclinación en pantallas táctiles ni con movimiento reducido.
Bloques 24
-
AI Chat
<mv-ai-chat>Interfaz de chat con IA: respuestas en streaming con cursor, estado de “pensando” con destello, renderizado seguro de Markdown (listas, negrita, código con botón de copiar), editor de mensajes que crece solo y admite adjuntos, selector de modelo, sugerencias, detener / regenerar y desplazamiento automático que cede el control al usuario. -
App Shell
<mv-app-shell>Bloque de dashboard completo: barra lateral plegable, cabecera fija (breadcrumb, búsqueda con Ctrl/⌘ + K, notificaciones sin leer, cuenta), tarjetas de KPI con sparklines, un gráfico de ventas por periodo y una tabla de actividad. -
Auth
<mv-auth>Bloque de autenticación en cuatro pasos (iniciar sesión, registrarse, contraseña olvidada, código OTP): layout dividido con imagen y testimonio, botones sociales, mostrar contraseña, medidor de seguridad, reenvío de código temporizado, validación nativa y envío asíncrono. -
Buy Box
<mv-buy-box>Bloque de compra para la página de producto: marca, título, valoración, precio (sigue la variante seleccionada), pago en 3 plazos, colores y tallas (las agotadas, tachadas, con “Avísame cuando vuelva”), cantidad limitada a las existencias de la talla, botón de añadir al carrito con estado de carga y luego confirmación, estimación de entrega calculada y cuenta regresiva hasta la hora límite de envío, ventajas de confianza y un acordeón de detalles; se sincroniza con una galería. -
Cart
<mv-cart>Carrito completo (panel lateral o página): líneas de producto horizontales con cantidad y totales en vivo, una barra “Solo te faltan 12,40 $ para el envío gratis”, códigos promocionales validados con mensajes de error (porcentaje, importe fijo o envío gratis, hook de servidor asíncrono), ahorro en precios rebajados, envío, total con impuestos incluidos, eliminación con “Deshacer” durante 5 segundos, un estado vacío y un botón de pago que muestra el total. -
Checkout
<mv-checkout>Pago en varios pasos (dirección → envío → pago → revisión): validación por paso con mensajes en línea y foco en el primer error, métodos de envío en tarjetas con fechas estimadas que actualizan el resumen del pedido, entrada de tarjeta formateada (grupos de dígitos, MM/AA, detección de Visa/Mastercard/Amex/CB, comprobación de Luhn), PayPal y Apple Pay, dirección de facturación plegable, revisión con enlaces “Editar”, condiciones de venta, un botón “Pagar 157,32 $” con estado de carga, tarjeta rechazada y confirmación. -
CTA
.mv-ctaLlamada a la acción editorial: una franja entre dos líneas finas con el titular a la izquierda y los detalles a la derecha, un bloque de tinta siempre oscuro o un panel de newsletter con formulario en línea y feedback de estado. -
Data table
<mv-data-table>Tabla de datos completa en torno a una .mv-table: ordenación por columnas, búsqueda que ignora los acentos, filtros por valor, un menú de visibilidad de columnas, selección de filas (casilla de cabecera indeterminada, Shift + clic para rangos) con una barra de acciones en bloque, paginación con filas por página y un estado vacío. -
Facets
<mv-facets>Panel de filtros para listados de productos: grupos de casillas plegables con recuentos (“Mostrar 2 más”), muestras de color y de talla, un rango de precios con dos tiradores sincronizado con dos campos, una valoración mínima que se puede desmarcar, un interruptor de “en stock”, chips de filtros activos que se pueden quitar con “Borrar todo”, y un panel lateral para dispositivos móviles (<dialog> nativo) con un botón “Mostrar 42 productos”. -
FAQ
.mv-faqSección de FAQ editorial: preguntas numeradas en un margen monoespaciado sobre líneas finas, una versión ordenada por temas con un índice fijo (guías de puntos, recuentos) y una nota de contacto, o una cuadrícula abierta de respuestas numeradas. -
Features
.mv-featuresSección de funcionalidades editorial: una cuadrícula de índice numerada sobre líneas finas, paneles tintados cuya baldosa entera es el enlace, o un libro contable con una introducción fija y pasos numerados. -
Footer
.mv-footerPie de página editorial: títulos de columna numerados y monoespaciados sobre líneas finas, marca + newsletter, una fila de baldosas de contacto y una franja inferior a todo el ancho; una versión declarativa con un gran titular y llamadas a la acción; o una versión mínima en una sola línea. -
Hero
.mv-heroApertura editorial para landing pages: una línea de metadatos en tipografía monoespaciada trazada sobre un filete fino, un titular enorme a dos tonos, entradilla y acciones, una lámina de producto con pie de foto y una franja de datos con filetes. -
Kanban
<mv-kanban>Tablero kanban en carriles abiertos separados por líneas finas: arrastrar y soltar con el puntero con una copia flotante plana, un hueco reservado rayado y tarjetas que se deslizan a su sitio (FLIP), un anillo de asentamiento al soltar, desplazamiento automático, barras de carga WIP para las columnas limitadas y movimientos completos con el teclado (Space, teclas de flecha, Escape) anunciados a los lectores de pantalla. -
Logo Cloud
<mv-logo-cloud>Sección de logos de clientes en registro editorial: una tabla de logos con reglas y leyendas monoespaciadas junto a una cifra destacada, una franja de marquee junto a una estadística, o columnas que intercambian los logos uno tras otro (se puede pausar, respeta el movimiento reducido). -
Mega Menu
<mv-mega-menu>Navegación de e-commerce con megapaneles: se abre al pasar el cursor con detección de intención (retardo, cambio instantáneo entre categorías) o al hacer clic, una superficie compartida cuya altura se anima mientras los paneles hacen un fundido cruzado, columnas de enlaces con insignias, baldosas promocionales, un velo sobre la página; compatibilidad total con teclado; por debajo del punto de corte (ancho del host, ResizeObserver), un menú hamburguesa en un panel lateral <dialog> con pantallas de navegación en profundidad y un botón de volver. -
Navbar
<mv-navbar>Barra de navegación editorial fija que se difumina al desplazarte: etiquetas y contadores monoespaciados, megamenús en popover con una regla de acento en la barra que marca el menú abierto, un viewport compartido opcional que cambia de tamaño entre menús, un modo flotante que se separa en forma de tarjeta al desplazarte y un layout apilado de búsqueda + secciones; panel lateral para dispositivos móviles basado en dialog con enlaces numerados. -
Precios
<mv-pricing>Sección de precios con estilo de ficha técnica: paneles de planes dentro de un mismo marco atenuado, un selector segmentado mensual / anual sobre radios nativos, un plan recomendado marcado con un anillo, medidores de uso y un ahorro explícito tachado en los precios anuales; en columnas, en filas horizontales o con un único plan. -
Review
<mv-reviews>Reseñas de clientes: resumen (valoración media, estrellas, histograma de 5→1 en el que cada barra filtra, indicador de ajuste), orden (recientes, útiles, valoración), filtro “Con fotos”, chips de filtros activos, paginación “Mostrar 4 reseñas más”; tarjeta <mv-review> con “Compra verificada”, variante comprada, texto plegado con “Leer más”, lightbox de fotos, votos de “útil” (uno por visitante, se puede deshacer), denuncia y respuesta del comercio; formulario “Escribir una reseña” validado que añade la reseña pendiente de moderación. -
Settings
<mv-settings>Página de ajustes: navegación por secciones con seguimiento del desplazamiento, perfil (vista previa de la foto, campos validados), interruptores de notificaciones, seguridad, una barra de “cambios sin guardar” y una zona de peligro con confirmación escribiendo. -
Sidebar
<mv-sidebar>Barra lateral de app: riel de iconos animado con tooltips, estado persistente, grupos, secciones anidadas plegables, contadores, selector de espacio de trabajo y menú de usuario, panel deslizante (dialog) cuando el contenedor es estrecho, atajo Ctrl/⌘ + B. -
Stats
.mv-statsSección de cifras clave con contadores animados (number-ticker): columnas con reglas y etiquetas monoespaciadas, tarjetas de KPI con un hueco para la tendencia y una sparkline, o una única cifra destacada enorme junto a un libro contable apilado. -
Testimonials
.mv-testimonialsSección de testimonios con un aspecto editorial de líneas finas: una cuadrícula de libro contable numerada con una entrada de resultado destacada, un ticker horizontal de notas compactas, o un caso de estudio dividido que empareja una cita con sus cifras clave; un resumen de puntuación se sitúa en la cabecera. -
Wordmark Footer
<mv-wordmark-footer>Pie de página con columnas de enlaces sobre un nombre de marca gigante de trazo fino ajustado al ancho: el puntero, el foco del teclado o un toque se proyecta sobre las letras, donde un foco de luz las rellena con un degradado o un color sólido sobre un tenue velo en reposo.
Utilidades 5
-
Agent VisionExclusivo
<mv-agent-vision>Mira tu página como la ve un agente de IA (o un lector de pantalla): envuelve cualquier región y la divide con una línea de escaneo que puedes arrastrar. -
Assist ModeExclusivo
<mv-assist-mode>Un panel de asistencia sin juicios, para todo el sitio, para todo lo que depende del tiempo o del movimiento, ofrecido como ayuda opcional y no como un “modo de accesibilidad”. -
ComboExclusivo
<mv-combo>Motor de atajos de teclado en secuencia para apps de usuarios avanzados, con un búfer de entrada en vivo. -
DrillExclusivo
<mv-drill>Entrenador de atajos de teclado que convierte los atajos de una app en reflejos mediante ejercicios cortos y espaciados. -
Motion BudgetExclusivo
<mv-motion-budget>Un regulador de animaciones: envuelve una región (o toda la página) y le da un presupuesto de movimiento, la proporción de pantalla que puede moverse a la vez (25 % por defecto).
Ningún componente coincide con este filtro.