Componentes
317 componentes independentes de framework (v0.1.0): Web Components nativos e CSS em camadas, zero dependências em tempo de execução, para React, Vue, Svelte, Angular, Astro e HTML puro. Cada página traz a marcação de uso, a API completa, quando usar e notas de acessibilidade.
Agentes de IA: comecem por /llms.txt. Quem compra recebe todos os componentes com a CLI e o servidor MCP: veja os planos ou baixe o Free pack.
Primitivos 15
-
Avatar
.mv-avatarAvatar em CSS: uma imagem sobreposta às iniciais (fallback automático quando a imagem falta ou está quebrada), tamanhos, redondo ou quadrado, iniciais coloridas, ponto de status, contador; um grupo sobreposto com um chip “+3” que se abre ao passar o mouse. -
BadgeGrátis
.mv-badgeBadge em CSS puro: 7 variantes (tons suaves ou sólidos), ponto de status animável, ícone, botão de remover, pílula/quadrado, 3 tamanhos e um contador posicionado no canto de um avatar ou ícone. -
ButtonGrátis
.mv-buttonBotão em CSS puro sobre <button> ou <a>: 6 variantes, 4 tamanhos, estado de carregamento, grupo. -
Button Effects
.mv-buttonSete efeitos para .mv-button via data-effect: faísca em órbita, borda arco-íris, pulso, tecla 3D, brilho que varre, seta revelada e brilho difuso. -
CheckboxGrátis
.mv-checkboxCheckbox nativo em CSS puro: uma marca de seleção que se desenha sozinha (reversível), estado indeterminado, tamanhos, inválido; também fornece os layouts compartilhados .mv-choice e .mv-choice-card (cards de opção destacados via :has(:checked)). -
InputGrátis
.mv-inputCampo de texto em CSS puro: 3 tamanhos, estados inválido (aria-invalid / :user-invalid), somente leitura e de arquivo, além de um grupo com ícones, prefixos/sufixos, botões embutidos e um botão de limpar. -
KbdGrátis
.mv-kbdTeclas de teclado levemente em relevo sobre <kbd>: combinações aninhadas, 3 tamanhos, uma variante plana, se adapta dentro de botões e tooltips. -
RadioGrátis
.mv-radioBotão de rádio nativo em CSS puro: um ponto interno que surge com efeito de mola, tamanhos, uma variante com contorno, grupos em linha ou empilhados, e cards de opção (listas de planos, blocos com badge). -
Range FX
<mv-range-fx>Sliders expressivos construídos sobre um único modelo acessível: a trilha vira uma onda que ondula enquanto você arrasta (wave), uma bolha de valor aparece e se inclina com a velocidade (bubble), uma régua desliza sob uma agulha fixa com inércia (ruler), uma cápsula líquida se estica (fluid), ou o rótulo fica dentro da trilha e se inverte sob o preenchimento (inline). -
SelectGrátis
.mv-select<select> nativo estilizado (chevron na cor do token), aprimorado progressivamente para um select personalizável (appearance: base-select): lista animada, pontos de status, ícones, descrições e marca de seleção, abertura “líquida” opcional; nos demais navegadores, um fallback limpo. -
SeparatorGrátis
.mv-separatorSeparador horizontal ou vertical em CSS puro: contínuo, tracejado, pontilhado ou esmaecido, com um rótulo centralizado (“ou”) ou alinhado, sobre <hr> ou <div>. -
Slider
<mv-slider>Slider em duas formas: um <input type="range" class="mv-slider"> nativo estilizado (preenchimento sincronizado) e um <mv-slider> integrado a formulários para casos avançados: dois cursores, marcações, marcas com rótulo, bolha de valor, orientação vertical, suporte completo a teclado. -
SwitchGrátis
.mv-switchSwitch em CSS puro sobre <input type="checkbox" role="switch">: cursor que desliza com efeito de mola e se estica ao ser pressionado, ícones no cursor (personalizáveis), tamanhos, rótulo à esquerda ou à direita, card de opção. -
TextareaGrátis
.mv-textareaÁrea de texto que cresce sozinha (field-sizing: content) entre um número mínimo e máximo de linhas, com alça de redimensionamento opcional, um grupo com barra de ferramentas e um contador de caracteres <mv-char-count>. -
Toggle
<mv-toggle-group>Botão de alternância .mv-toggle (aria-pressed, variantes, ícone que muda com o estado) e <mv-toggle-group>, simples ou múltiplo: roving tabindex, valor, grupo unido e um controle segmentado cujo indicador desliza entre as opções.
Formulários 47
-
Angle Dial
<mv-angle-dial>Campo de ângulo em graus que se lê como no CSS (0° para cima, sentido horário): um botão giratório dentro de um anel de marcações que também serve de grade de encaixe, com as marcações atrás do botão acesas e se apagando com a distância. -
As StoredExclusivo
<mv-as-stored>Mostra, antes de salvar, exatamente como cada valor será armazenado quando o sistema por trás do formulário o transformar, em vez de deixá-lo ser esticado ou cortado em silêncio. -
Balance SheetExclusivo
<mv-balance-sheet>Balanço estruturado de decisão em duas colunas (prós e contras, construir ou comprar, contratar ou não, escolha de fornecedor, uma mudança) apresentado como um livro-razão em que os pontos ficam frente a frente. -
BloodstainExclusivo
<mv-bloodstain>Recuperação de rascunhos de formulário que lembra exatamente onde você estava: envolva qualquer <form> (ou região com campos) e os valores são salvos automaticamente (com debounce, em localStorage ou sessionStorage) junto com o último campo em foco e a posição do cursor de texto. -
Catch LoopExclusivo
<mv-catch-loop>Detector e explicador de requisitos que nunca podem ser cumpridos porque remetem a si mesmos em ciclo (“o SSO precisa de um domínio verificado, verificar o domínio precisa do SSO”) ou se contradizem (um arquivo morto que precisa ao mesmo tempo de criptografia e de busca de texto completo, que se excluem mutuamente). -
Color Picker
<mv-color-picker>Amostra de cor que abre um popover com fechamento leve (ou fica embutida): uma área de saturação/brilho, sliders de matiz e opacidade, um único campo de texto que aceita qualquer cor CSS com um seletor HEX/RGB/HSL/OKLCH, o conta-gotas, amostras e cores recentes. -
Combobox
<mv-combobox>Campo de busca com uma lista filtrada que ignora acentos, grupos, seleção simples ou múltipla em chips, criação de opções e um modo de texto livre (autocompletar); integrado a formulários. -
Curve Editor
<mv-curve-editor>Editor de curvas de easing: arraste duas alças ou ajuste-as com o teclado, com coordenadas ao vivo e overshoot para antecipação e quique. -
Date Picker
<mv-date-picker>Seletor de data: um gatilho com aparência de campo que mostra a data formatada (intervalos incluídos) e um calendário em um popover, com atalhos como “Today”, “Last 7 days”…; integrado a formulários. -
ExposureExclusivo
<mv-exposure>Um medidor de visibilidade para configurações de compartilhamento e privacidade (diálogos de compartilhar, público de uma publicação, privacidade do perfil, visibilidade de um projeto, compartilhamento de agenda, links de arquivos) que lê os controles que envolve e diz às pessoas o quanto estão expostas antes de confirmarem. -
FieldGrátis
.mv-fieldLayout de campo em CSS puro: rótulo (obrigatório / opcional), texto de ajuda, uma mensagem de erro que aparece sozinha quando o controle é inválido, orientações vertical, horizontal, responsiva e em linha, cards de opção e fieldset. -
File Upload
<mv-file-upload>Zona para soltar arquivos: arrastar e soltar com destaque (e rejeição visual dos tipos não permitidos), uma lista com miniaturas de imagem, ícones, tamanhos e remoção, validação de tipo/tamanho/quantidade e progresso por arquivo; integrado a formulários (FormData). -
ForgotExclusivo
<mv-forgot>Verificador de “você pode ter esquecido algo” antes do envio, para editores de mensagens e formulários, que, ao contrário de um aviso vago, diz exatamente o que parece faltar. -
Gradient Editor
<mv-gradient-editor>Editor de gradientes CSS integrado a formulários (linear, radial, cônico): as paradas são sliders de teclado sobre uma barra ao vivo, adicionadas com um clique, Enter ou +, removidas ao arrastá-las para fora ou com Delete, cada uma com um seletor de cor e um campo de posição. -
Intent ComposerExclusivo
<mv-intent-composer>Um editor para pedidos à IA que torna visíveis as três partes de uma intenção enquanto você digita: o resultado, as restrições (orçamento, prazo, coisas a evitar, local, quantidade…) e o limite da delegação. -
InvisiblesExclusivo
<mv-invisibles>Torna visíveis, nos campos de texto, os caracteres invisíveis e os que se parecem com outros, onde causam bugs reais: espaços e junções de largura zero colados em IBANs, e-mails, chaves de API e códigos, espaços não separáveis e exóticos, espaços no início ou no fim, tabulações, hifens suaves, caracteres de controle, controles bidi (Trojan source), texto oculto em tags, homóglifos (um “а” cirílico numa palavra latina, um “O” entre dígitos), letras de largura total e aspas ou travessões tipográficos em comandos. -
Just RightExclusivo
<mv-just-right>Feedback de caimento pessoal sobre um grupo de rádios nativo de tamanhos, planos ou configurações: cada opção diz a este usuário, zona por zona, se fica pequena, na medida ou grande demais para ele. -
LifelinesExclusivo
<mv-lifelines>Ajudas de decisão para uma escolha única difícil (um plano, uma opção de frete, a configuração de um notebook, um nível de seguro, um tamanho de instância), cada uma uma ajuda com um número limitado de usos, que se vê sendo gasto. -
MastExclusivo
<mv-mast>Ajuste assimétrico para limites autoimpostos ou sensíveis à segurança: apertar é instantâneo, afrouxar exige esperar um período de reflexão. -
Narrow DownExclusivo
<mv-narrow-down>Buscador de produtos guiado que faz a seguir a pergunta mais informativa em vez de seguir um questionário fixo. -
Number Field
<mv-number-field>Entrada numérica com botões − / + (mantenha pressionado para acelerar), limites e passo, teclas de seta e roda do mouse, formatação Intl (moeda, porcentagem, unidade) e um rótulo “scrub”: arraste na horizontal para mudar o valor, com bloqueio do ponteiro opcional. -
One More ThingExclusivo
<mv-one-more-thing>Validação de formulários priorizada que pede uma coisa de cada vez em vez de mostrar um paredão de erros. -
OTP
<mv-otp>Entrada de código de uso único: um campo oculto real cuida da digitação, da colagem e do preenchimento automático por SMS, enquanto casas animadas exibem o código com um cursor piscando, um separador e um tremor em caso de erro. -
Pass CardExclusivo
<mv-pass-card>Um pequeno orçamento visível de exceções às regras (“passes”) para os momentos em que uma regra precisa ceder: fazer merge durante um congelamento de release, pular uma verificação obrigatória, uma entrega atrasada, uma compra acima de um limite de gastos, uma remarcação sem taxa, uma exceção ao SLA. -
Password FieldExclusivo
<mv-password-field>Campo de senha que mantém o seu <input type="password"> nativo (assim o preenchimento automático, os gerenciadores de senhas e o envio do formulário simplesmente funcionam) e adiciona um botão real de mostrar/ocultar que mantém a posição do cursor e volta a ocultar no envio, um aviso de Caps Lock enquanto tem o foco e, para senhas novas, uma checklist das regras que você declarar mais uma estimativa de força em palavras que valoriza o comprimento e não se deixa enganar por palavras comuns, anos, sequências e repetições. -
PhrasebookExclusivo
<mv-phrasebook>Editor de mensagens restrito para lugares onde o texto livre é arriscado ou caro: as pessoas só escrevem escolhendo um modelo (“{thing} was {quality}”, “Try {action}”, “Watch out for {thing}”) e preenchendo cada lacuna com um vocabulário fixo e categorizado, com a opção de juntar uma segunda frase com um conector (“but”, “so”). -
Posting AsExclusivo
<mv-posting-as>Proteção de identidade para editores de mensagens e áreas de ação em apps com várias contas (marca ou pessoal, caixa compartilhada ou você mesmo, personificação, espaços de trabalho de clientes, produção ou sandbox): torna inconfundível a identidade com a qual você está prestes a agir, no momento de agir. -
Prep ListExclusivo
<mv-prep-list>Card de preparação “Antes de começar” para fluxos longos ou de alto risco (pedidos de empréstimo, visto ou seguro, verificação de identidade, declaração de imposto de renda, integração de funcionários, uma migração de banco de dados, uma entrada em produção). -
Quantity
<mv-quantity>Seletor de quantidade para e-commerce, uma variante leve de <mv-number-field>: mínimo 1, limitado automaticamente ao estoque, uma legenda “In stock” / “Only 3 left in stock” / “Out of stock” vinculada ao campo, uma mensagem e um tremor ao atingir o limite de estoque, um estado esgotado desativado que volta a ficar ativo na reposição; variantes pílula e sutil para as linhas do carrinho. -
Rating
<mv-rating>Avaliação por estrelas, para exibição (precisão decimal real: 4,3 preenche 30% da 5ª estrela, número de avaliações como link) ou como entrada integrada a formulários: meias estrelas, prévia ao passar o mouse, legendas como “Very good”, suporte completo a teclado, limpeza, obrigatório; variante compacta ★ 4,8 (2.413). -
Read BackExclusivo
<mv-read-back>Confirmação por repetição para formulários de alto risco, como os pilotos que repetem uma autorização: envolva um formulário, marque os campos críticos com data-read-back e, no envio, um painel embutido repete cada valor em uma forma diferente daquela em que foi digitado, para que um deslize fique visível em vez de ser confirmado no piloto automático. -
RewindExclusivo
<mv-rewind>Uma máquina do tempo para formulários: envolve qualquer região, registra cada alteração (digitação agrupada, checkboxes, selects, contenteditable) como uma árvore de desfazer rotulada (“Address changed”, “Shipping method: Express”), exibida como uma linha do tempo compacta. -
Same AgainExclusivo
<mv-same-again>Formulários recorrentes que lembram a rodada anterior: envolva uma daily, uma folha de horas, uma passagem de turno, uma checklist ou um relatório semanal e cada envio guarda as respostas com a data (armazenamento do navegador sob uma chave, ou o seu servidor pela propriedade previous e mv-loop-saved). -
Scrub Field
<mv-scrub-field>Campo numérico de inspetor: arraste o rótulo, o ícone ou o valor para os lados para ajustar, com bloqueio do ponteiro opcional, aceleração conforme a velocidade, um badge que conta a alteração e um trilho que mostra onde o valor está dentro do intervalo. -
Search Autocomplete
<mv-search-autocomplete>Busca de loja com autocompletar: ao receber o foco, buscas recentes (localStorage, apagáveis) e chips de tendências; ao digitar (com debounce, requisições obsoletas canceladas, indicador de carregamento), sugestões com a consulta destacada independentemente de acentos, categorias com contagens, produtos com miniatura e preço (Intl, preço de referência riscado), “See all 42 results for ‘sweater’”; estado “No results”; atalho de teclado; hook de fonte assíncrona ou catálogo JSON local. -
Segmented
<mv-segmented>Controle segmentado com semântica de grupo de rádios, integrado a formulários: um cursor em relevo desliza até a opção selecionada com um leve overshoot, linhas finas separam as opções inativas, três tamanhos e opções só com ícone nomeadas por tooltips. -
Slosh Slider
<mv-slosh-slider>Um slider cujo preenchimento é líquido: a alça fica rígida sob o seu dedo enquanto o líquido a persegue com uma mola suave, bate nos batentes, se inclina e ondula conforme a velocidade. -
StripsExclusivo
<mv-strips>Editor combinatório: um resultado (um texto de anúncio, a configuração de um produto, uma notificação, um menu) é montado a partir de tiras independentes empilhadas como uma página cortada em fatias, cada tira um espaço cujas alternativas intercambiáveis viram sozinhas com uma animação física de página que se levanta (setas, arraste vertical ou deslize horizontal, toque e, na tira em foco, a roda do mouse e Up/Down/Home/End). -
Swatch
<mv-swatch>Seletor de variantes baseado em rádios nativos (ou checkboxes para filtros): amostras de cor com anel duplo, chips de tamanho, miniaturas de produto; opções esgotadas riscadas (selecionáveis ou desativadas), um rótulo “Color: Sand” com prévia ao passar o mouse e validação de grupo obrigatório com um tremor e uma mensagem. -
Tag InputExclusivo
<mv-tag-input>Campo de chips para etiquetas, destinatários, habilidades e palavras-chave: Enter, vírgula ou Tab adicionam, colar “a, b; c” (ou uma coluna copiada de uma planilha) adiciona cada um, Backspace seleciona e depois remove o último chip, as setas percorrem os chips, padrão e limite opcionais, deduplicação que ignora maiúsculas e acentos e faz piscar o chip existente, e sugestões nativas de <datalist>. -
Timeline Scrubber
<mv-timeline>Régua de tempo de editor de vídeo com um cabeçote preciso ao quadro que mostra o timecode enquanto você arrasta, uma leitura ao passar o mouse, zoom em uma escala de meias oitavas (botões, teclas, Ctrl/⌘ + roda ou pinça), uma faixa de marcadores, alças de entrada/saída que encobrem tudo fora do intervalo, clipes em trilhas e uma barra de visão geral. -
Tone DialExclusivo
<mv-tone-dial>Ajustes de personalidade e tom com uma prévia imediata e concreta, para assistentes de IA, chatbots, textos gerados, tom de notificações ou e-mails, voz da marca e macros de suporte. -
Trio CheckExclusivo
<mv-trio-check>Verificação em lote para quizzes, testes de conhecimento e exercícios de associação que torna inútil chutar: as respostas são inseridas livremente (seus próprios inputs, selects, rádios ou checkboxes marcados com data-trio-item, ou linhas geradas a partir de uma propriedade items com campos de texto, selects e chips de opção), e o componente nunca revela se uma resposta isolada está certa. -
Two-KeyExclusivo
<mv-two-key>Proteção para ações críticas (apagar produção, transferir fundos, fazer deploy) que só é armada por duas “chaves” deliberadas e sincronizadas: dois interruptores de chave giratórios cujo cilindro dá um quarto de volta com uma mola, e um botão de ação protegido escondido sob uma tampa fosca. -
Vector Field
<mv-vector-field>Campos compactos X/Y, X/Y/Z ou W/H para inspetores: cada eixo é um spinbutton em que você pode digitar, avançar por passos com o teclado ou ajustar arrastando a letra, com uma linha fina que mostra onde o valor está no intervalo e um bloqueio de proporção opcional. -
Wheel Picker
<mv-wheel-picker>Seletor de roda no estilo iOS: um tambor 3D (rotateX + perspective) que você gira com um toque do dedo, com inércia e depois encaixe no entalhe mais próximo, além de roda do mouse, teclado e busca ao digitar. -
Word RulesExclusivo
<mv-word-rules>Construtor de regras, filtros e automações em que cada regra é uma frase feita de blocos de palavras que você move: sujeitos (“Order”), operadores (“is”, “is not”, “over”) e propriedades (“late”, “$500”), encadeados com “and”.
Sobreposições 12
-
Command
<mv-command>Paleta de comandos: busca aproximada que ignora acentos (palavras-chave incluídas), resultados classificados e agrupados, navegação por teclado com aria-activedescendant; independente ou dentro de um Dialog aberto com ⌘K. -
Context Menu
<mv-context-menu>Menu de contexto aberto no ponteiro (clique direito), com um toque longo em telas sensíveis ao toque ou pelo teclado (Shift+F10 / tecla Menu); reutiliza o motor e os estilos de Menu, incluindo a animação data-motion="glide". -
Cookie ConsentExclusivo
<mv-cookie-consent>Banner de cookies não modal com Aceitar tudo e Rejeitar tudo com o mesmo peso e um painel Escolher, salvo com uma versão da política em localStorage e um cookie próprio; ao contrário da maioria dos banners, ele realmente bloqueia os scripts: <script type="text/plain" data-consent="analytics"> e os embeds com data-src só rodam após o consentimento, uma vez, em ordem, mantendo o nonce de CSP. -
DialogGrátis
<mv-dialog>Modal <dialog> nativo animado; também cobre Alert Dialog (persistente), Sheet (4 lados) e um Drawer para celular que fecha ao deslizar. -
Hover Card
<mv-hover-card>Card de prévia rico ao passar o mouse ou com o foco do teclado, com atrasos de abertura/fechamento e uma ponte invisível que o mantém aberto enquanto o ponteiro vai até ele. -
MenuGrátis
<mv-menu>Menu suspenso completo: checkboxes, itens de rádio, submenus com triângulo de segurança, atalhos, busca ao digitar e navegação por teclado APG; data-motion="glide" opcional (abre a partir do canto do gatilho, um único destaque que desliza entre os itens, submenus que entram deslizando). -
PopoverGrátis
<mv-popover>Painel flutuante não modal na camada superior (Popover API): posicionamento automático com inversão, seta opcional, fecha com clique fora/Escape com o foco gerenciado; opção data-open="liquid" em que o painel sai do gatilho se esticando por um “pescoço” líquido e depois volta para dentro dele ao fechar. -
Timed ChoiceExclusivo
<mv-timed-choice>Um aviso não crítico que propõe uma escolha com um temporizador que se esvazia à vista e aplica um padrão seguro quando ninguém responde: “Next episode in 8s · Cancel / Play now”, “Manter estas configurações de tela? -
ToastGrátis
<mv-toaster>Notificações empilhadas no estilo Sonner: uma pilha compacta que se expande ao passar o mouse, temporizadores pausados, deslizar para dispensar, promises e atualizações no lugar por id, por meio de uma API imperativa toast(). -
Toast PhysicsExclusivo
<mv-toast-physics>Notificações que são corpos rígidos de verdade: caem numa bandeja de canto e se empilham pela gravidade, e a prioridade vira massa (um erro é mais pesado e mais largo, aterrissa com um baque que sacode os outros e depois afunda abaixo dos cards mais leves). -
TooltipGrátis
<mv-tooltip>Tooltip na camada superior (Popover API), posicionamento automático com inversão, seta, atraso agrupado. -
Tooltip Group
<mv-tooltip-group>Tooltip compartilhado por um grupo de gatilhos, como uma barra de ferramentas: após o primeiro atraso, uma única bolha desliza e muda de tamanho de botão em botão, com transição cruzada do rótulo, sem fechar, reabrir nem esperar de novo.
Navegação 16
-
As OfExclusivo
<mv-as-of>Controle de data de referência (“na data de”) para apps de dados que podem mostrar o passado, para que números históricos nunca sejam confundidos com os atuais. -
Breadcrumb
.mv-breadcrumbBreadcrumb em CSS puro sobre nav > ol: separadores em chevron, barra ou ponto (silenciosos para leitores de tela), ícones, truncamento e níveis recolhidos em um popover nativo ancorado. -
CrumbsExclusivo
<mv-crumbs>Um rastro de por onde o usuário realmente passou, para apps em que as pessoas pulam entre registros (CRM, central de suporte, console de administração, documentação, navegador de código, back office), e não de onde a página fica na hierarquia. -
Dock
<mv-dock>Dock no estilo macOS: os ícones crescem conforme a distância até o ponteiro (queda em cosseno suavizada com mola), rótulos ao passar o mouse, ponto de atividade, horizontal ou vertical, navegação completa por teclado. -
Door DialExclusivo
<mv-door-dial>Seletor de contexto que redireciona os mesmos links, ações e exemplos de código para outro contexto (ambiente, região, tenant, versão da documentação, URL base da API) sem reconstruir a página. -
Edge TrackerExclusivo
<mv-edge-tracker>Indicadores fora da tela para tudo o que o usuário não consegue ver em um contêiner com rolagem, uma página longa ou uma tela de desenho deslocável: mensagens não lidas mais abaixo, erros de formulário mais acima, menções, resultados de busca, itens selecionados, cursores de colaboradores. -
Finger HoldExclusivo
<mv-finger-hold>Assistente com ramificações em que qualquer página de decisão pode ser segurada com um “dedo”: escolha uma opção, explore aonde ela leva (próximas perguntas, preço, plano resultante) e depois volte direto à página segurada exatamente como você a deixou, campos incluídos. -
FootprintsExclusivo
<mv-footprints>Presença de colaboradores ao vivo para documentos longos, especificações, arquivos de código e planilhas: um trilho estreito ao lado do contêiner com rolagem em que cada pessoa é um pequeno marcador com rótulo (iniciais ou avatar, na própria cor) no lugar exato em que está lendo ou editando, deixando atrás algumas pegadas que se apagam e mostram para que lado ela vem se movendo, descendo, subindo ou saltando para outra seção com um arco pontilhado. -
Inside CountExclusivo
<mv-inside-count>Abas, acordeões e páginas fechados que dizem o que contêm antes de você abri-los. -
Keen SightExclusivo
<mv-keen-sight>Modo de dicas revelado ao manter uma tecla pressionada, que permite a quem usa teclado agir sobre qualquer coisa visível sem percorrê-la com Tab. -
Lock-onExclusivo
<mv-lock-on>Navegação espacial por teclado para layouts 2D em que a ordem de Tab não serve (dashboards com widgets desiguais, grades de cards, quadros kanban, mapas de assentos, mapas com marcadores, editores de nós, interfaces de TV e de console), com uma trava que mantém à vista um alvo em movimento. -
Pagination
<mv-pagination>Paginação numerada com reticências e um número constante de posições (a barra nunca pula), anterior/próxima, um modo compacto “Page x of y”; os estilos CSS funcionam sozinhos para links renderizados no servidor. -
Smart HeaderExclusivo
<mv-smart-header>Envolva qualquer cabeçalho para deixá-lo fixo, fazê-lo sumir ao rolar para baixo e voltar ao rolar para cima, com histerese, um estado fixado e a altura ao vivo publicada para scroll-padding. -
Stepper
<mv-stepper>Etapas horizontais ou verticais (concluídas, atual, próximas) com conectores que se preenchem com a cor de destaque, números automáticos, uma marca de seleção animada e uma etapa de carregamento; <mv-stepper value> opcional para controlar os estados. -
TabsGrátis
<mv-tabs>Abas acessíveis com um indicador deslizante (sublinhado, pílula ou segmentado), horizontais ou verticais, ativação automática ou manual, e painéis com transição cruzada. -
Thread BackExclusivo
<mv-thread-back>Um fio de retorno para explorações profundas que tiram você de uma tarefa: amarre-o em uma origem (um pagamento, um relatório, uma etapa de onboarding) com tie({ label, href, state, restore }) ou um link data-thread-tie, e cada navegação seguinte o desenrola um passo.
Exibição de dados 56
-
AccordionGrátis
<mv-accordion>Acordeão em CSS sobre <details> nativo: altura animada (::details-content + interpolate-size), chevron ou mais/menos, variantes com borda, separada e card; <mv-accordion type="single"> opcional. -
AccountsExclusivo
<mv-accounts>Linha do tempo multifonte que alinha vários relatos do mesmo evento e mostra, fato por fato, onde eles concordam, onde se contradizem e onde uma fonte fica em silêncio: post-mortems de incidentes (logs do gateway versus provedor de pagamento versus telemetria do cliente versus notas do plantão), disputas de entrega (cliente versus armazém versus transportadora), trilhas de auditoria, checagem de fatos, atas de reunião de vários participantes. -
Agent LensesExclusivo
<mv-agent-lenses>Um único modelo de agentes de IA em segundo plano, cinco lentes (Board, Inbox, Tasks, Calendar, Graph), e cada agente é um card persistente que viaja fisicamente entre os layouts: ao trocar de lente, cada card faz um FLIP do retângulo antigo para o novo enquanto se transforma de card completo em linha, barra de tempo ou nó do grafo, para que você nunca perca um agente de vista. -
All-in PriceExclusivo
<mv-all-in>Preço honesto, com tudo incluído, que diz em voz alta o que o drip pricing esconde. -
Animated List
<mv-animated-list>Feed de notificações animado: os itens aparecem um a um com uma mola, empurrando suavemente os outros (FLIP), com limite de itens, modo loop e uma API add(). -
Blocked BlurExclusivo
<mv-blocked-blur>Silenciar sem perder a forma da conversa. -
ButterflyExclusivo
<mv-butterfly>Prévia de impacto para configurações, formulários de preço, editores e telas tipo planilha: antes de um valor mudar, todos os valores aos quais ele vai se propagar se acendem. -
Calendar
<mv-calendar>Calendário mensal localizado (Intl, a semana começa no primeiro dia da localidade): seleção simples, de intervalo com prévia ao passar o mouse ou múltipla, datas mín./máx. e desativadas, navegação completa por teclado, visualizações de mês/ano e uma transição deslizante. -
CardGrátis
.mv-cardCard combinável (mídia, cabeçalho, ação, conteúdo, rodapé): variantes com contorno, elevada, fantasma e atenuada, além de um card totalmente clicável. -
Chart
<mv-chart>Gráfico SVG sem dependências (área, barras, linhas, sparkline): renderização pixel-perfect, escala arredondada, traçado animado ao aparecer, mira e tooltip ao passar o mouse e pelo teclado, e uma tabela de dados para leitores de tela. -
Code BlockExclusivo
<mv-code-block>Envolve qualquer <pre><code> simples ou já destacado com um nome de arquivo, rótulo da linguagem, botão de copiar, números de linha, linhas destacadas e de diff, recolhimento e um botão de quebra de linha, e copia o que o leitor realmente precisa: os prompts do shell, a saída dos comandos e os marcadores de diff ficam de fora, e os números de linha e os marcadores também não podem ser selecionados à mão. -
Context RingsExclusivo
<mv-context-rings>Torna visível, e editável, o que um assistente de IA “sabe” para a tarefa atual: três anéis concêntricos (“This task” no centro, “Always” para preferências e regras, “Ambient” para fluxos: e-mail, agenda, chat) e uma bandeja “Out of context”. -
CountdownExclusivo
<mv-countdown>Contagem regressiva até uma data para lançamentos, promoções, webinars e eventos: dias, horas, minutos e segundos (configuráveis) em algarismos tabulares, com rótulos no plural correto graças ao Intl, nas variantes simples, card ou compacta. -
CurtainExclusivo
<mv-curtain>“Como isso é calculado?” para qualquer número bem apresentado: envolva um gráfico, KPI, pontuação, preço ou resposta de IA e uma alça afasta o visual como uma cortina (um recorte que varre com uma suave sombra de dobra; uma simples transição cruzada com movimento reduzido) para revelar os bastidores no mesmo espaço, sem salto de layout. -
DatelineExclusivo
<mv-dateline>Um momento ou prazo que leva em conta o fuso horário e torna impossível não notar uma mudança de dia. -
DeliberationExclusivo
<mv-deliberation>Decisões em grupo por rodadas, com votos ocultos e convergência visível: estimativas (planning poker), decisões de seguir ou não, debriefs de contratação, críticas de design, priorização ou votação de ações de retro. -
Delivery TrailExclusivo
<mv-delivery-trail>Torna observável, salto a salto, a entrega de mensagens críticas e transforma falhas silenciosas em travamentos visíveis e acionáveis: e-mails de redefinição de senha e de verificação, códigos por SMS, faturas, notificações push, webhooks, pedidos de assinatura eletrônica. -
DorianExclusivo
<mv-dorian>Atualidade do conteúdo visível num relance: envolva qualquer conteúdo (cabeçalho de página de documentação, artigo da central de ajuda, tabela de preços, política) e ele fica exatamente como está, enquanto um pequeno retrato emoldurado ao lado envelhece com o tempo desde a última revisão. -
Drift CheckExclusivo
<mv-drift-check>Mostra como um texto repassado se afastou da fonte, salto a salto: requisitos que passam do cliente para vendas, para o PM e para o ticket, citações que viajam da entrevista ao comunicado de imprensa e ao artigo, resumos de resumos, textos encaminhados, traduzidos ou reescritos por IA. -
Field GuideExclusivo
<mv-field-guide>Grade de coleção numerada em que cada entrada tem três níveis de conhecimento, para que o que falta seja tão visível quanto o que já foi feito: desconhecida (uma posição numerada vazia com contorno tracejado e uma dica opcional), vista (a ilustração reduzida a uma silhueta de um só tom, o nome, os detalhes bloqueados e uma dica de “como conseguir”) e obtida (card colorido com resumo, descrição, dados e uma chamada para ação). -
ForkExclusivo
<mv-fork>Linhas do tempo hipotéticas para qualquer visualização controlada por entradas (calculadoras de empréstimo e de preço, comparações de planos, prévias de configuração, variantes de texto): Fork divide a visualização em linhas do tempo lado a lado que começam idênticas, cada uma com suas próprias entradas, e recalcula os resultados de cada uma pela sua função compute(state) (síncrona ou assíncrona) ou por um callback render(state, body). -
Hold SlotExclusivo
<mv-hold-slot>Player de fila de trabalho focado para processar itens um de cada vez (tickets de suporte, moderação, code reviews, seleção de fotos, qualificação de leads, flashcards): o item atual aparece em destaque, uma coluna Next antecipa os próximos itens (3 por padrão, o primeiro um pouco mais presente) e um único espaço Hold permite deixar o item atual de lado sem perdê-lo e trazê-lo de volta depois, mas só uma vez por turno (hold-limit), para que nada fique rodando para sempre. -
InscribeExclusivo
<mv-inscribe>Notas críticas que acompanham um registro em todos os lugares em que ele aparece no app. -
LacunaExclusivo
<mv-lacuna>Exclusão gradual e no lugar para listas e grades, um substituto dos toasts de desfazer que se sustenta quando você apaga várias coisas seguidas. -
Lead BoardExclusivo
<mv-lead-board>Um diário de investigação em que o único progresso é o que você sabe: pesquisa, entrevistas com usuários, investigações de incidentes, due diligence, caça a bugs, jornalismo. -
Mirror RankExclusivo
<mv-mirror-rank>Um ranking que se explica com honestidade e diz o que seria preciso para subir: leaderboards (vendas, colaboradores), rankings de vendedores ou de busca, pontuações de crédito, saúde, SEO ou segurança. -
Net ProgressExclusivo
<mv-net-progress>Separa a atividade bruta do progresso líquido e torna o retrabalho visível, para documentação e especificações, código, arquivos de design, modelos, backlogs, calendários editoriais ou contratos em negociação. -
Odd One OutExclusivo
<mv-odd-one-out>Detecção automática de pontos fora da curva em um conjunto de itens que deveriam ser iguais: divergência de configuração entre servidores, contêineres ou ambientes, inconsistências de preço e estoque entre as variantes de um produto, um funcionário cujas permissões diferem das dos colegas na mesma função, uma região cujas configurações divergem. -
OrigamiExclusivo
<mv-origami>Painéis que se dobram como papel. -
PapersExclusivo
<mv-papers>Mesa de conciliação entre documentos para fluxos de revisão (KYC, fatura versus pedido de compra versus nota de entrega, contrato versus orçamento, formulário enviado versus documento de identidade). -
PeaExclusivo
<mv-pea>Faz um problema minúsculo, enterrado no fundo de camadas recolhidas, ser sentido em cada nível acima dele. -
Price
<mv-price>Preço de e-commerce formatado com Intl.NumberFormat (en-US / USD por padrão): preço atual, preço de referência riscado, badge de desconto calculado (porcentagem ou valor), preço unitário, “A partir de”, faixa de preço, centavos sobrescritos, quatro tamanhos; também pode ser usado como HTML estático com as classes .mv-price-*. -
Product Card
<mv-product-card>Card de produto em três formatos: bloco de grade (segunda imagem ao passar o mouse, badges “New” / “−20%”, coração de lista de desejos, adição rápida por tamanho com confirmação, amostras de cor, estado esgotado), linha de carrinho (quantidade, total da linha recalculado, remoção animada) e linha de resumo compacta; link estendido acessível, container queries. -
Real TermsExclusivo
<mv-real-terms>Mostra uma variação em relação ao que o mundo fez no mesmo período, e não só em relação a zero, para que um crescimento que apenas acompanha o ritmo (ou fica para trás) nunca seja confundido com progresso: receita, salários, preços, tráfego, participação de mercado, retorno de investimentos. -
Relative TimeExclusivo
<mv-relative-time>“Há 3 minutos” que se mantém atualizado sozinho: um <time datetime> real com texto de Intl.RelativeTimeFormat (“agora”, “em 2 dias”, “ontem” por dia do calendário, não por 24 h), que passa para uma data absoluta a partir de um limite, no idioma do lang mais próximo. -
Reveal OnceExclusivo
<mv-reveal-once>A etapa completa de entrega de um segredo que só pode ser mostrado uma vez (chave de API, token de acesso pessoal, segredo de assinatura de webhook, códigos de recuperação de 2FA, senha temporária, frase-semente de carteira), sem temporizador: o valor fica o tempo que o usuário precisar, mas ele não pode seguir sem confirmar que o guardou. -
Scope TallyExclusivo
<mv-scope-tally>Torna visível o crescimento do escopo em relação ao pedido original, para projetos de clientes e orçamentos fechados, especificações de produto, compromissos de sprint, RFPs e contratos. -
Self-DestructExclusivo
<mv-self-destruct>Exibição de segredo de uso único (chave de API, códigos de recuperação, senha compartilhada, link temporário) que é mostrado uma vez e depois destruído de verdade. -
SnowballExclusivo
<mv-snowball>Seleção por varredura para grades e listas (bibliotecas de fotos, gerenciadores de arquivos, caixas de entrada, catálogos): segure Shift (ou qualquer modificador, ou nenhum) e passe o ponteiro sobre os itens. -
Steady PaceExclusivo
<mv-steady-pace>Ritmo de metas que diz a cadência constante necessária a partir de hoje, e não só uma porcentagem: metas de poupança, cotas de vendas, metas de leitura ou de aprendizado, arrecadação de fundos, escopo de sprint, planos de treino. -
Stone SoupExclusivo
<mv-stone-soup>Quadro de contribuições para um objetivo comum em que o aporte de cada participante continua visível e o conjunto se torna, à vista de todos, mais que a soma das partes: almoços coletivos e inscrições em eventos (“quem leva o quê”), vaquinhas para presentes da equipe, arrecadação de fundos, recompensas, listas de desejos de uma comunidade, cobertura de turnos ou a capacidade de um sprint por pessoa. -
Table
<mv-table>Tabela estilizada em CSS (destaque ao passar o mouse, listras, densidade, cabeçalho/coluna fixos, status) + <mv-table> opcional para ordenar e filtrar. -
Tamper SealExclusivo
<mv-tamper-seal>Acesso “quebre o vidro” com evidência de violação a dados sensíveis (um prontuário de paciente, um número completo de cartão ou de CPF, um salário, as mensagens privadas de um cliente, segredos de produção, uma proposta lacrada) que pode ser aberto, mas nunca em segredo. -
TheseusExclusivo
<mv-theseus>Camada de procedência que responde a “quanto disto ainda é o que assinamos?”. -
Time VaultExclusivo
<mv-time-vault>Um cofre de mensagens escritas agora e lacradas até um momento futuro preciso: uma data (data-opens, absoluta ou relativa como “+1y” após a escrita) ou uma condição nomeada do app (“when we launch publicly”, “when MRR passes $10k”) que o seu app alimenta via vault.check(state) ou pelo atributo flags, com progresso opcional (0-1 ou “$7.4k of $10k”). -
To ScaleExclusivo
<mv-to-scale>Torna palpáveis quantidades abstratas ao reformulá-las numa escala humana que o leitor já conhece, ao lado do valor preciso intacto: 2,4 TB ≈ 800 horas de vídeo HD, 412 t CO₂e ≈ o CO₂ absorvido por 7.000 mudas de árvore, US$ 9.000 ≈ 6 meses de aluguel em Lisboa, 21.600 pedidos/dia ≈ um pedido a cada 4 segundos, 38% dos clientes ≈ 2 em cada 5 clientes. -
Trend ChipExclusivo
<mv-trend-chip>O pequeno chip “▲ +12.4% vs last week” para cards de KPI, dashboards, tabelas de preços e relatórios: passe a variação (value="0.124") ou dois valores (from / to) e ele exibe o valor com sinal via Intl como porcentagem, pontos percentuais, número simples, qualquer moeda ou qualquer unidade (“−32 ms”), com um período opcional. -
Trust LadderExclusivo
<mv-trust-ladder>Autonomia gradual conquistada por um histórico, tanto para agentes de IA, automações e integrações quanto para novos membros da equipe. -
Turn ClockExclusivo
<mv-turn-clock>Gerenciador de turnos com tempo justo para dailies, retros, debates, entrevistas, painéis e rodízios de mob programming, construído como um relógio de xadrez de torneio: cada participante tem um banco de tempo próprio (igual ou personalizado por pessoa) que só se esgota durante o seu turno, apenas um relógio corre por vez, e passar a vez (grande botão Pass, Space, uma tecla numérica ou um clique na pessoa) para o seu relógio e inicia o próximo, com um incremento por turno opcional. -
UnclaimedExclusivo
<mv-unclaimed>Radar de responsáveis para listas de trabalho compartilhadas: envolva qualquer lista, tabela ou quadro de coisas que todos concordam serem importantes (ações de reunião, acompanhamentos de incidentes, ações de retro, triagem de bugs, conversas de uma caixa compartilhada, alertas sem plantonista, dívida de documentação) e cada item cujo data-owner está vazio recebe um marcador tranquilo “Nobody yet”, um lugar vazio tracejado onde ficaria o responsável, que se torna aos poucos mais presente com o tempo (cor, borda e texto se firmam ao longo da janela de maturação; nunca em vermelho, nunca animado). -
UnobservedExclusivo
<mv-unobserved>Uma região ao vivo (feed, ranking, livro de ofertas, lista de notificações, kanban sincronizado com o servidor) que nunca se reordena nem se desloca enquanto alguém está olhando para ela. -
UnsourcedExclusivo
<mv-unsourced>Fundamentação por afirmação para textos gerados ou longos (respostas de IA, respostas de suporte, resumos de pesquisa, relatórios): cada afirmação mostra sozinha, no lugar, se há algo que a sustente. -
Variant TreeExclusivo
<mv-variant-tree>Um explorador de variantes com ramificações para qualquer elemento controlado por propriedades personalizadas de CSS (ou qualquer estado via callbacks): “Generate 4 variants” faz brotar filhos mutados da variante aplicada (um slider Spread define o quanto as mutações são ousadas), exibidos como uma árvore organizada de miniaturas ao vivo, clones inertes e em escala do alvo, então funciona com qualquer componente sem capturas de tela. -
WhereaboutsExclusivo
<mv-whereabouts>Quadro de status da equipe em forma de mostrador cujos ponteiros indicam o que cada pessoa está fazendo em vez da hora. -
Whose WordsExclusivo
<mv-whose-words>Declaração de autoria para textos de origem mista: rascunhos assistidos por IA, documentos escritos a várias mãos, trechos citados, e-mails a partir de modelos e traduções. -
Yet To ComeExclusivo
<mv-yet-to-come>Uma métrica contada como uma história em três partes, feita para mudar o que acontece depois: Past (sparkline, variação no período e o maior salto ou queda, com a anotação), Now (valor atual, delta em relação ao período anterior, tendência por período) e Ahead (onde a métrica chega se a tendência atual continuar, com uma faixa de incerteza claramente rotulada que é zero hoje e se alarga a cada período).
Feedback 35
-
Alert
.mv-alertAlertas em CSS puro (neutro, info, sucesso, aviso, perigo) com ícone, título, descrição e ações que passam para baixo do texto em larguras estreitas, um banner de largura total e um fechamento animado opcional em poucas linhas de JS. -
Alert PhaseExclusivo
<mv-alert-phase>Um status de incidente cuja gravidade diminui com o tempo em vez de alternar entre vermelho e verde. -
Announcement BarExclusivo
<mv-announcement-bar>Barra fina no topo do site para lançamentos, promoções, avisos de manutenção e prévias de recursos, com um botão Dismiss lembrado por id-key em localStorage (um novo id de campanha volta a exibi-la), uma data until opcional que a retira sozinha, tons info, accent e warning, e espaço para uma contagem regressiva em um slot. -
Bench SyncExclusivo
<mv-bench-sync>Status de sincronização local-first que deixa explícitas as alterações pendentes e só as envia nos momentos de pausa. -
Cry WolfExclusivo
<mv-cry-wolf>Proteção contra a fadiga de alertas para centrais de notificações e consoles de monitoramento: não se limita a exibir alertas, decide quais merecem interromper. -
Deep PauseExclusivo
<mv-deep-pause>Pausa coerente para algo inteiro (o modo férias de uma loja online, uma assinatura, um espaço de trabalho, uma integração, uma campanha publicitária, alguém que sai de licença) em vez de um simples interruptor liga/desliga. -
Deja VuExclusivo
<mv-deja-vu>Sinaliza, na hora e no lugar, as alterações que o sistema fez pelas costas do usuário, nunca as que o próprio usuário causou. -
Empty
.mv-emptyEstado vazio em CSS puro: um bloco de ícone sobre anéis que se apagam ou uma grade, título, descrição, ações e rodapé; variantes compacta (listas, tabelas) e ilustrada (cards em leque sobre um padrão de pontos). -
Env MarkerExclusivo
<mv-env-marker>Indicador de ambiente que torna impossível confundir um ambiente que não é de produção com a produção. -
FigurinesExclusivo
<mv-figurines>Indicador de tentativas restantes que torna palpável um limite pequeno e rígido antes de um bloqueio: tentativas de código, PIN ou senha, novas tentativas de pagamento, tentativas de resposta, exportações gratuitas. -
Ghost RunExclusivo
<mv-ghost-run>Progresso em relação à sua própria tentativa anterior, para tarefas que as pessoas repetem: um fantasma translúcido reproduz a sua melhor corrida (ou a última, ou a de um colega, ou a mediana da equipe fornecida pelo app) no mesmo percurso em tempo real, para que a cada momento você veja se está à frente ou atrás dele. -
HatchExclusivo
<mv-hatch>“Interruptor do homem morto” para a expiração da sessão: um chip discreto de contagem regressiva (algarismos tabulares que rolam como um contador mecânico) que alguém precisa reiniciar deliberadamente antes que chegue a zero. -
Honest WaitExclusivo
<mv-honest-wait>Um indicador de espera longa que nunca finge, para exportações, renderizações de vídeo, geração com IA, criação de relatórios, provisionamento, filas e uploads em conexões lentas. -
InsistExclusivo
<mv-insist>Dicas progressivas que só aparecem quando o usuário está travado e ficam mais diretas quanto mais tempo ele tem dificuldade. -
LeitmotifExclusivo
<mv-leitmotif>Sinais sonoros opcionais que você reconhece sem olhar, para telas que as pessoas acompanham enquanto fazem outra coisa: consoles de operações, filas de suporte, mesas de trading, chat, telas de cozinha, dashboards de CI. -
LookalikeExclusivo
<mv-lookalike>Detecção de imitações para tudo o que se passa por alguém de confiança: envolva e-mails, conversas de chat, formulários ou áreas de colagem, informe as suas identidades de confiança (trusted="Acme Bank <acme-bank.com>, @stripe.com, @northwind, Payroll <DE89 3704 …>") e cada link, remetente, endereço de e-mail, @usuário, nome de pacote ou de usuário, IBAN e endereço de carteira no escopo, incluindo texto simples e campos enquanto você digita ou cola, é comparado com elas. -
MidnightExclusivo
<mv-midnight>Um modo elevado visível e limitado no tempo (reautenticação sudo/admin, “visualizando como cliente”, acesso compartilhado temporário, um teste premium, acesso de emergência, um bloqueio de edição) que termina exatamente na hora e deixa tudo como estava. -
Pixel Loader
<mv-pixel-loader>Indicadores de “pensando” em matriz de pontos sobre uma minúscula grade de pixels (3×3 a 9×9) em currentColor: cobra, órbita, ondulação concêntrica, varredura, espiral, respiração, cintilação ou onda diagonal, com um rótulo opcional atravessado por uma faixa mais brilhante. -
Progress
.mv-progressBarras de progresso sobre o <progress> nativo (determinada com brilho, indeterminada com varredura, segmentada), um anel SVG circular controlado por --value com um contador animado e um medidor <meter> colorido conforme os limites. -
Quiet AlarmExclusivo
<mv-quiet-alarm>Um detector de ausências: dispara o alarme quando algo que costuma acontecer deixou de acontecer (pedidos, webhooks, mensagens de websocket, leituras de sensores, linhas de log). -
RechargeExclusivo
<mv-recharge>Um orçamento visível de limite de uso e cota (token bucket) para tudo o que é medido: mensagens de IA, chamadas de API, reenvios de códigos por SMS, ações em massa, créditos do plano gratuito. -
RememberedExclusivo
<mv-remembered>Informa os efeitos colaterais duradouros de uma escolha no momento em que ela é feita, sem interromper. -
Run ContractExclusivo
<mv-run-contract>Um contrato de execução para tarefas longas de IA que se torna o dashboard ao vivo do mesmo trabalho: um card, duas vidas. -
Saved StateExclusivo
<mv-saved-state>Linha de status de salvamento automático (Alterações não salvas · Salvando… · Salvo · Há 2 minutos · Offline · Não foi possível salvar · Tentar de novo) controlada por saving() / saved() / failed() ou track(promise), ou apontando-a para um formulário. -
SkeletonGrátis
.mv-skeletonPlaceholders de carregamento com um brilho sincronizado em toda a página (ou um pulso), formas de texto, título, avatar, mídia e botão, e uma revelação com transição cruzada desfocada para o conteúdo carregado, controlada por aria-busy. -
Skeleton MorphExclusivo
<mv-skeleton-morph>O skeleton não abre espaço para o conteúdo, ele se torna o conteúdo: cada bloco é pareado com um elemento real (data-skeleton-for, depois tipo, ordem e geometria) e viaja até ele. -
Soft LockExclusivo
<mv-soft-lock>Bloqueio suave e avisos de colisão para registros que várias pessoas (ou abas) podem alterar ao mesmo tempo: faturas, tickets, documentos, páginas de configuração, operações em massa. -
Spinner
.mv-spinnerUma família de indicadores de carregamento de um único elemento desenhados em currentColor: anel, arco com rastro, pontos em onda, barras de equalizador, órbita e pulso; 5 tamanhos. -
Tell-TaleExclusivo
<mv-tell-tale>Indicador de trabalho não salvo cuja insistência cresce com o que está em jogo. -
Thinking Orb
<mv-thinking-orb>Orbe de assistente de IA em canvas: uma gota brilhante que se deforma, gira e muda de material conforme o estado (ocioso, ouvindo, pensando com satélites em órbita, falando, sucesso, erro), com transições suaves entre os estados. -
TremorExclusivo
<mv-tremor>Alerta antecipado discreto para um limite que se aproxima, nos casos em que um banner ou um modal seriam demais: armazenamento ou cota enchendo, um orçamento perto do teto, créditos pré-pagos acabando, uma fila crescendo, um certificado, um sprint ou um prazo se aproximando. -
Understood AsExclusivo
<mv-understood-as>Mostra como um pedido em texto livre foi entendido, logo ao lado da resposta, para que ninguém confie num resultado calculado para a pergunta errada: “Showing results for [Net revenue] · [EU countries] · [Q2 2026 ?] · [Excluding refunds]”. -
While AwayExclusivo
<mv-while-away>“Enquanto você estava fora…”: envolve qualquer região (dashboard, feed, quadro), percebe o que mudou enquanto você estava em outro lugar (aba oculta ou inatividade) e devolve o contexto em 3 segundos. -
Why NotExclusivo
<mv-why-not>Recusa explicável: nenhum “não” sem um motivo e um caminho a seguir. -
WobbleExclusivo
<mv-wobble>Prévia do impacto de uma remoção, que ajusta o atrito de apagar, arquivar, desativar, revogar ou despublicar ao que realmente depende do item.
Layout 10
-
AttacheExclusivo
<mv-attache>Editor de encaixe em grade que leva em conta as formas: cada filho ocupa w × h células de uma grade fixa (widgets de dashboard, adesivos numa folha de impressão, caixas numa prateleira, mesas numa sala) e a grade mostra num relance o que cabe e o que não cabe. -
Bento Grid
.mv-bentoGrade bento em CSS puro: cards que ocupam várias colunas/linhas (data-span="2x1"…), uma área visual que se esmaece, título, descrição e uma chamada para ação revelada ao passar o mouse; se adapta ao tamanho do contêiner. -
Carousel
<mv-carousel>Carrossel baseado no scroll snap nativo: setas, pontos sincronizados via IntersectionObserver, teclado, loop, reprodução automática com ponto de progresso (pausa ao passar o mouse, com o foco e com movimento reduzido), vários slides por visualização, modo vertical e arraste com o mouse. -
CourtyardExclusivo
<mv-courtyard>Mural de monitoramento que observa todos os fluxos ao mesmo tempo e diz para onde olhar: quaisquer filhos (estatísticas ao vivo, vídeo, imagens de câmera, jobs de CI, telas de alunos) viram “janelas” numa grade automática, e cada uma informa sua atividade por um nível data-activity contínuo, chamadas pontuais a activity(window, level, note) ou mudanças no próprio DOM após um período de calma (MutationObserver, em lote, para que um bloco que se atualiza em ritmo constante continue calmo e só as novidades se destaquem). -
FogExclusivo
<mv-fog>Descoberta progressiva para interfaces densas (consoles de administração, ferramentas profissionais, apps de analytics com muitos painéis, configurações profundas): cada área marcada com data-fog que o usuário ainda não explorou fica sob um véu leve e texturizado (uma névoa da cor da página, manchas suaves de nuvem, uma leve dessaturação e um grão fino, tudo em CSS, sem canvas) com uma pequena etiqueta “Not explored yet · Automations”, enquanto o conteúdo continua legível, clicável e totalmente exposto às tecnologias assistivas. -
MarginaliaExclusivo
<mv-marginalia>Notas laterais responsivas para conteúdo longo (documentação, artigos, termos legais, changelogs, relatórios de pesquisa) em que cada nota decide sozinha se cabe na margem. -
Marquee
<mv-marquee>Rolagem infinita de logos, depoimentos ou cards: velocidade em px/s independentemente do tamanho do conteúdo, horizontal ou vertical, arraste com inércia, esmaecimento nas bordas e uma variante 3D inclinada. -
Orbiting Circles
<mv-orbit>Itens orbitando um centro: vários anéis (raio, duração, sentido), espaçamento uniforme, ícones que ficam em pé, trajetórias desenhadas; animação 100% CSS, pausada fora da tela. -
Resizable
<mv-resizable>Painéis redimensionáveis horizontais ou verticais (aninháveis) separados por alças: arraste com o ponteiro, teclas de seta, tamanhos mín./máx. em %, recolhimento com duplo clique e encaixe, persistência em localStorage. -
Scroll Area
.mv-scroll-areaÁrea de rolagem com barra fina, ocultação automática, esmaecimento nas bordas controlado pela rolagem e encaixe.
Texto animado 23
-
Adaptive InkExclusivo
<mv-adaptive-ink>Texto que continua legível sobre qualquer fundo animado (shader WebGL, vídeo, canvas, imagem): o fundo é amostrado em tempo real sob cada palavra, fatiado em colunas, e cada coluna escolhe uma tinta clara ou escura com uma transição cruzada: uma única letra pode ser metade branca, metade preta. -
CertaintyExclusivo
<mv-certainty>Texto em que cada trecho traz um nível de confiança (resposta de IA, resumo, relatório), exibido com calma para que os leitores calibrem a confiança sem um paredão de avisos: três níveis (Verified sem marca, Likely com sublinhado pontilhado, Uncertain com uma onda desenhada à mão cuja amplitude cresce com a dúvida) e uma tinta que clareia à medida que a confiança cai. -
Circular Text
<mv-circular-text>Anel giratório de texto em volta de um ícone, logo ou avatar, traçado ao longo de um círculo SVG real para que a fonte mantenha o kerning e o loop se feche de forma uniforme; ao passar o mouse ou com o foco, o giro acelera, desacelera, para ou se inverte suavemente. -
Falling Text
<mv-falling-text>Texto em que cada palavra vira uma caixa rígida: quando acionado (ao aparecer, ao clicar, ao passar o mouse), as palavras explodem para longe do ponto de liberação, rodopiam, quicam e se amontoam no chão do bloco, e depois podem ser agarradas e arremessadas; quem usa o teclado solta e sacode a pilha com Enter. -
Glitch Text
.mv-glitch-textGlitch RGB em CSS puro: faixas finas magenta e ciano do texto saltam para o lado em rajadas curtas, sem parar ou ao passar o mouse, com limite abaixo de três flashes por segundo. -
Gradient Text
.mv-gradient-textTexto com gradiente multicolorido em CSS puro: estático, animado de um lado para o outro, esmaecimento editorial ou uma aurora de manchas coloridas que flutuam dentro das letras. -
Letter Swap
<mv-letter-swap>Giro letra a letra para links de navegação e botões: ao passar o mouse ou com o foco do teclado, cada letra sai girando para revelar a sua gêmea, em cascata, ou gira como um pequeno cubo 3D. -
Morphing Text
<mv-morphing-text>Palavras que se fundem umas nas outras: duas cópias empilhadas se desfocam em cruz enquanto um filtro SVG de limiar alfa funde os glifos numa massa “gooey”. -
Number Ticker
<mv-number-ticker>Contador animado formatado com Intl (en-US por padrão: moeda, porcentagem, compacto, decimais) em dois modos: interpolação suave ou odômetro giratório; anima de novo a cada mudança de valor, sem deslocamento de layout. -
Particle CounterExclusivo
<mv-particle-counter>Um número de KPI desenhado como uma matriz de partículas: quando o valor muda, as partículas dos dígitos alterados se separam, voam e são reatribuídas aos pontos dos novos dígitos (conservadas: as que sobram se fundem, as que faltam se desprendem das outras), com um flash verde na subida e um vermelho na descida. -
Particle Text
<mv-particle-text>Texto desenhado por milhares de partículas de canvas amostradas da própria fonte do elemento: elas entram no lugar da esquerda para a direita, fogem do ponteiro e voltam com efeito de mola, se dispersam com um clique e fluem até a nova palavra quando o texto muda, coloridas por um gradiente que elas atravessam. -
Rolling Text
<mv-rolling-text>Rótulo que, ao passar o mouse, sobe rolando letra a letra, da esquerda para a direita, e pousa de novo ou faz pousar um segundo rótulo vindo de baixo, com um leve desfoque no trajeto e uma área fixada no rótulo mais longo; variante glide: um marcador desliza entre as expressões de uma frase. -
Scramble Text
<mv-scramble-text>Efeito de decodificação: glifos aleatórios se resolvem no texto real (a partir do início, do fim, do centro ou ao acaso) ao entrar na tela, ao passar o mouse ou com o foco. -
Scroll Text
<mv-scroll-text>Parágrafo cujas palavras (ou letras) se acendem progressivamente conforme você rola, de apagadas e desfocadas a nítidas; animações CSS controladas pela rolagem, fallback em JS. -
Shimmer Text
.mv-shimmer-textBrilho de luz em CSS puro que varre o texto (background-clip): um badge “New”, estados de IA “pensando…” com pontos animados e uma variante de pulso. -
Show MoreExclusivo
<mv-show-more>Limita conteúdos longos a poucas linhas (ou a uma altura, para conteúdo misto) atrás de um esmaecimento suave e de um botão “Show more” que só existe quando algo é realmente cortado, verificado de novo ao redimensionar e ao carregar imagens e fontes; o texto oculto continua legível para leitores de tela e para a busca na página, Tab ou um #link para dentro dele o abre no lugar, e ao recolher o botão fica fixo para que a página nunca pule. -
Sparkles Text
<mv-sparkles-text>Pequenas estrelas cintilantes que surgem ao acaso em volta e por cima do texto; cores, densidade e velocidade ajustáveis, disparadas ao entrar na tela ou ao passar o mouse. -
Text Highlight
<mv-text-highlight>Destaca as palavras quando entram na área visível: um traço de marca-texto que percorre as linhas, ou uma anotação desenhada à mão (sublinhado, círculo, caixa, tachado) traçada traço a traço. -
Text Reveal
<mv-text-reveal>Revelação de texto dividida em letras, palavras ou linhas com 6 presets escalonados (fade, desfoque, deslize, rotação 3D, zoom, máscara), disparada ao entrar na área visível; a marcação inline é preservada. -
Typewriter
<mv-typewriter>Máquina de escrever para frases de hero: digita frases letra a letra com um ritmo irregular e pausas na pontuação, apaga e alterna as frases atrás de um cursor de barra, bloco ou sublinhado, dentro de uma caixa reservada no tamanho final para que nada em volta se mova. -
Variable Proximity
<mv-variable-proximity>As letras crescem ao longo dos eixos de uma fonte variável (peso, largura, qualquer eixo personalizado) quando um mouse ou uma caneta se aproxima, com um raio em em e uma atenuação linear, exponencial ou gaussiana; as posições das letras ficam em cache em repouso para que o campo nunca trema, e as fontes estáticas recorrem a um efeito de escala. -
Wind TextExclusivo
<mv-wind-text>Texto cujas letras se comportam como grama (ou uma bandeira) num único campo de vento compartilhado por toda a página: a rolagem envia rajadas cuja frente varre o texto no sentido da rolagem, o cursor sopra localmente numa grade de velocidades advectada que se dissipa, cada letra se curva sobre a linha de base com a própria mola e alguns grãos de pólen levantam voo onde o vento sopra. -
Word Rotate
<mv-word-rotate>Palavra giratória inline para frases de hero (deslize, giro 3D, desfoque ou fade, letra a letra) cuja largura se ajusta suavemente para que a frase nunca pule.
Fundos 11
-
Aurora Background
<mv-aurora-background>Aurora em CSS com uma única classe: dobras suaves de luz com raios verticais nítidos flutuam e respiram em duas camadas opostas (ou grandes manchas errantes), discreta no modo claro e brilhante no modo escuro, com um elemento opcional que acrescenta um brilho que desliza atrás do mouse ou da caneta. -
BackdropExclusivo
.mv-backdropFundos de hero e de seção com uma única classe e zero JavaScript: presets glow, mesh, aurora-still, grid-fade, dots-fade, rays, topo e grain, combináveis (data-backdrop="mesh grain") e construídos com os tokens da marca, então acompanham o modo claro, o escuro, as subárvores [data-theme] e o tom de destaque do app. -
Beams
<mv-beams>Feixes de luz em um único canvas: cometas com caudas que se apagam correm ao longo de curvas que convergem para o canto superior direito, ou raios caem cada vez mais rápido e explodem em faíscas sobre um piso brilhante. -
Dot Matrix
<mv-dot-matrix>Grade WebGL de pontos quadrados: ao carregar, eles se acendem do centro para fora com uma breve faísca, depois cada ponto sorteia de novo o seu brilho em momentos aleatórios próprios, para uma cintilação calma, alguns pontos de destaque respiram mais forte e uma zona mais viva se abre em torno do ponteiro. -
Dot Pattern
<mv-dot-pattern>Padrão de pontos em CSS puro (esmaecido, escalonado) e uma versão viva em canvas: halos cintilantes com brilho ao passar o mouse, ou uma onda concêntrica que o cursor empurra com um retorno elástico. -
Grid Pattern
<mv-grid-pattern>Grade de fundo em CSS puro (linhas contínuas ou tracejadas, células destacadas, esmaecimento radial) e um elemento animado: cintilação, células que se acendem sob o cursor com um rastro e uma ondulação ao clicar, e um piso retrô em perspectiva. -
Light Rays
.mv-light-raysRaios de luz divina caindo do alto, em CSS puro: dois leques de gradientes cônicos desfocados que balançam e pulsam lentamente, com um brilho na origem. -
Mesh Gradient
<mv-mesh-gradient>Gradiente em malha WebGL animado: três fitas suaves de cor vagueiam sobre uma cor de base num plano inclinado que se dobra, misturadas em Oklab para que tons de marca contrastantes nunca se encontrem numa mancha turva; opcionalmente, o plano se inclina na direção do ponteiro. -
Meteoros
<mv-meteors>Chuva de meteoros na diagonal com rastros brilhantes: animação 100% CSS; o JS só distribui as estrelas cadentes e muda a faixa delas a cada passagem. -
Particles
<mv-particles>Partículas em canvas que flutuam e cintilam, repelidas ou atraídas pelo cursor com um retorno elástico; um modo constelação opcional liga as vizinhas e o ponteiro. -
Still TimeExclusivo
<mv-still-time>Regulador de movimento ambiente: envolva qualquer região e cada animação dentro dela (keyframes CSS, transições CSS, Web Animations, vídeos sem som) só avança tão rápido quanto o usuário age.
Cursores 9
-
Busy CursorExclusivo
<mv-busy-cursor>“Aguarde, por favor” local para uma região (uma tabela recarregando, um gráfico sendo recalculado, um painel salvando): enquanto ela está ocupada, um anel minúsculo acompanha o cursor do sistema com progresso indeterminado ou real, a região recebe cursor: progress e aria-busy, e os cliques podem ser retidos e depois repetidos uma vez ou descartados com um tremor. -
Cursor Follower
<mv-cursor>Cursor personalizado: um ponto preciso e um anel que o segue com uma mola, se estica com a velocidade, cresce sobre os elementos interativos e mostra um rótulo (data-cursor="View"), com uma variante em modo de mesclagem difference; limitado a uma área ou à página inteira. -
Cursor SnapExclusivo
<mv-cursor-snap>Efeito de ponteiro premium que mantém o cursor do sistema: uma placa suave se molda ao link ou botão sob o mouse (sua caixa e seu raio de canto), entra suavemente, se inclina levemente na direção do ponteiro e desliza entre os alvos. -
Cursor Type
<mv-cursor-type>Uma palavra grande (um 404, uma palavra-chave) cujas letras respondem a um ponteiro preciso, cada uma com a própria mola: um peso variável que incha, um estiramento elástico a partir da linha de base, letras empurradas para o lado que se inclinam ao se mover ou uma lupa estilo dock que afasta as vizinhas. -
ForeseeExclusivo
<mv-foresee>Prevê, pela trajetória do ponteiro, qual controle o usuário está prestes a clicar, antes do clique, e mantém o placar dos próprios acertos. -
Image Trail
<mv-image-trail>Rastro de imagens para mouse e caneta: a cada poucas dezenas de pixels ao longo do caminho do ponteiro, a próxima imagem filha cai exatamente sobre o caminho, é levada um pouco pelo impulso do gesto e depois encolhe até sumir, então gestos rápidos deixam marcas espaçadas por igual; variantes rotate e fall. -
Magnetic
<mv-magnetic>Wrapper magnético: o filho se inclina na direção do mouse próximo com uma atenuação suave, o acompanha um pouco enquanto está por cima e depois volta com efeito de mola. -
Reading RulerExclusivo
<mv-reading-ruler>Guia de leitura para textos longos (termos, artigos, documentação) que ajuda leitores com dislexia, TDAH ou baixa visão a não perder a linha: uma faixa com exatamente uma linha de altura se encaixa nas caixas de linha reais do texto sob o ponteiro, com o resto levemente escurecido (faixa, máscara ou sublinhado). -
Reveal Mask
<mv-reveal-mask>Círculo suave que segue um ponteiro preciso e revela uma segunda camada, com um rastro opcional que se apaga; toques na tela, o foco do teclado e revealed o abrem como uma íris, e com movimento reduzido ele aparece com um fade.
Rolagem 11
-
Back to TopExclusivo
<mv-back-to-top>Botão flutuante de voltar ao topo que só aparece quando o leitor já desceu bastante na página e sobe ou para, nunca enquanto lê para baixo, com um anel de progresso opcional. -
Container Scroll
<mv-container-scroll>A tela de um dispositivo que se inclina para trás com um reflexo no vidro e depois se endireita, se assenta e perde o reflexo ao entrar no campo de visão com a rolagem, enquanto o título sobe até o seu lugar. -
Drag ScrollExclusivo
<mv-drag-scroll>Envolve qualquer tabela, trilho de cards, linha do tempo ou quadro que transborde na horizontal para que quem usa mouse o veja e o use: esmaecimento nas bordas e uma dica “More” só nos lados ocultos, arrastar para pegar com inércia, a roda comum convertida em rolagem lateral, botões de paginação opcionais. -
Parallax
<mv-parallax>Profundidade em camadas na rolagem sem configuração: marque qualquer descendente com data-speed e ele se desloca no próprio ritmo enquanto a seção atravessa o contêiner de rolagem, movido por uma view timeline nativa fora da thread principal, com um fallback leve em JS que só atua no que está visível. -
Reading MapExclusivo
<mv-reading-map>Um minimapa ao vivo de um artigo, construído a partir do DOM e não de uma captura de tela: cada linha de texto (com o comprimento real), título, marcador, imagem, tabela e linha de código vira uma forma abstrata. -
Scroll Progress
<mv-scroll-progress>Indicador de progresso de leitura: uma barra em CSS puro no topo da página (scroll timeline), ou um elemento de barra / anel com uma porcentagem que acompanha qualquer contêiner com rolagem, com suavização de mola opcional. -
Scroll Reveal
<mv-reveal>Revelação na rolagem: os filhos entram com fade, desfoque, deslize ou zoom de forma escalonada, uma vez ou todas as vezes; uma variante em CSS puro é controlada por uma view timeline. -
Scroll Stack
<mv-scroll-stack>Cards fixos que se empilham conforme você rola: cada card que chega se acomoda no lugar enquanto os de baixo recuam um degrau (menores, mais apagados), controlado pela rolagem onde há suporte; o foco revela os cards cobertos, e com movimento reduzido vira uma lista simples. -
Scroll Velocity
<mv-scroll-velocity>Faixas de texto grande que rolam infinitamente; a velocidade e a direção acompanham a velocidade da rolagem (suavizada com mola), e o texto se inclina nas rolagens rápidas. -
Sticky Scroll
<mv-sticky-scroll>Seção de scrollytelling: as etapas pendem de um trilho de progresso que se preenche continuamente com a rolagem (nós concluídos / ativo / próximos), enquanto o painel fixo passa de um visual a outro por uma única linha de corte que leva em conta a direção e um medidor segmentado acompanha a etapa atual; empilha no celular. -
Tracing Beam
<mv-tracing-beam>Trilho de linha do tempo ao lado de um artigo ou changelog: o rastro se preenche com o progresso da leitura e cada nó de seção se acende quando o feixe passa por ele, controlado por uma view timeline nativa com um fallback leve em JS.
Mídia 9
-
Blur UpExclusivo
<mv-blur-up>Envolve um <img> nativo (lazy loading, srcset, sizes, alt e <picture> intactos): mantém a proporção para que nada se desloque, mostra uma imagem minúscula desfocada, a cor dominante ou um gradiente, e faz uma transição cruzada para a foto quando ela é decodificada. -
Device Mockup
.mv-deviceMolduras de dispositivo em CSS puro em volta de qualquer conteúdo: iPhone (Dynamic Island, botões), Android (câmera furo), iPad retrato/paisagem, MacBook (notch, base de alumínio) e uma janela de navegador (semáforos, barra de endereço via data-url); bordas escuras ou claras, tudo dimensionado a partir de uma única largura. -
Image Compare
<mv-image-compare>Comparação antes/depois em que o quadro inteiro é a trilha do slider: um cursor em cápsula role=slider com suporte completo a teclado, um chip de valor ao vivo, badges cortados de forma limpa pela linha, toque que distingue toques, deslizes e rolagens da página, horizontal ou vertical, arraste ou acompanhamento do mouse, uma varredura opcional e uma variante com brilho. -
Invite InExclusivo
<mv-invite-in>Embed que prioriza a privacidade e não faz nenhuma requisição a terceiros até que o usuário o convide a entrar: vídeos do YouTube e do Vimeo, mapas, publicações de redes sociais, widgets de chat, iframes cheios de analytics, folhas de estilo de fontes de terceiros. -
Lens
<mv-lens>Lupa que segue o cursor sobre uma imagem ou qualquer conteúdo: uma cópia ampliada recortada num círculo (ou quadrado) ancorada no ponteiro, borda de vidro, abertura animada, posição fixa opcional e movimento pelo teclado. -
Mosaic Gallery
<mv-mosaic>Mosaico de imagens que se reorganiza sozinho: a foto escolhida vira o bloco grande e cada bloco se transforma até o novo lugar em uma única View Transition, recortado em vez de esticado. -
Product Gallery
<mv-product-gallery>Galeria de página de produto: imagem principal em scroll-snap nativo (deslizar no toque), miniaturas sincronizadas em coluna ou em linha (troca opcional ao passar o mouse), zoom ao passar o mouse que segue o ponteiro, setas e contador, uma barra segmentada em contêineres pequenos, e tela cheia em um <dialog> com zoom ao clicar e movimentação da imagem. -
Step ZoomExclusivo
<mv-step-zoom>Inspetor de imagens com zoom profundo baseado em passos discretos e endereçáveis em vez de pinça e rolagem livres. -
World Map
<mv-world-map>Mapa-múndi SVG pontilhado construído com dados de terras de domínio público do Natural Earth, com rotas ortodrômicas reais que se desenham e levam pequenos pacotes, sinalizadores nas cidades-polo, rótulos HTML nítidos e uma lista para leitores de tela com cada lugar e cada conexão.
3D 5
-
Card Stack
<mv-card-stack>Pilha de cards para deslizar: os cards repousam cada um com a própria leve inclinação e se endireitam quando o de cima é puxado; o card do topo gira em torno do ponto em que você o pegou, um badge de veredito e uma cor na borda crescem com o puxão enquanto o botão correspondente se preenche, os arremessos mantêm a inércia do gesto e next() coloca o card embaixo da pilha; botões, teclas de seta, desfazer, loop ou fim da pilha, e reprodução automática. -
Exploded ViewExclusivo
<mv-exploded>Uma vista explodida em 3D de qualquer interface ao vivo: cada caixa vira um plano elevado conforme a profundidade visual (wrappers invisíveis não acrescentam um andar), o conjunto inteiro se inclina numa pose isométrica, gira ao arrastar ou pelo teclado, isola uma camada ao passar o mouse (tag, classes, tamanho), rotula as camadas com linhas de chamada e depois se remonta com molas por andar e restaura os estilos originais byte a byte. -
Flip Card
.mv-flip-cardCard de duas faces que gira em 3D ao passar o mouse, com o foco do teclado, com um toque ou um clique, se erguendo na direção de quem olha no meio do giro, com a luz se apagando na face que se afasta; só a face visível fica ativa para Tab, ponteiros e leitores de tela. -
Gallery 3D
<mv-gallery-3d>Galeria 3D em CSS com três disposições: ring (um cilindro que você gira, que desliza por inércia e para em um item), dome (blocos que revestem o interior de uma esfera que você percorre com o olhar) e circular (uma faixa infinita disposta ao longo de um arco, controlada por arraste ou pela roda do mouse). -
Globe
<mv-globe>Globo pontilhado interativo em canvas 2D (projeção ortográfica de uma máscara de terras embutida, zero dependências): rotação automática, arraste com inércia, marcadores pulsantes, arcos de círculo máximo animados como cometas, e um halo e uma borda atmosférica nas cores dos seus tokens.
Transições 6
-
Expandable Card
<mv-expandable>Grade ou lista de cards em que um card cresce até uma visualização de detalhe modal acessível: a caixa, a imagem, o título e a descrição viajam numa única mola interrompível, texto e imagens nunca se deformam, e com movimento reduzido ele abre na hora. -
GrinExclusivo
<mv-grin>“Dispensar deixando um resíduo” para banners de avisos, widgets de chat, painéis de upload, players de vídeo e painéis de filtros: em vez de desaparecer, um painel dispensado, minimizado, ocioso ou que já ficou para trás na rolagem some aos poucos e deixa um resíduo minúsculo e persistente que mantém o seu único dado essencial, ao vivo (“New · 2”, a contagem de não lidas, um anel de progresso, “4 filters”). -
Morph Panel
<mv-morph-panel>Um contêiner que anima a largura e a altura medidas ao trocar de visualização, com uma transição cruzada desfocada do conteúdo: drawers de várias etapas, popovers e uma variante “Dynamic Island” que cresce de uma pílula até um painel. -
Page Transition
.mv-page-transitionTransições de página nativas com a View Transitions API: fade, deslize tipo push, zoom em profundidade e uma revelação circular a partir do clique, cada uma com uma versão de volta, para sites de várias páginas e SPAs, levando o foco para a nova visualização. -
Pixel Transition
<mv-pixel-transition>Alterna entre duas faces por meio de uma grade de pixels: pixels quadrados crescem sobre a primeira face em ordem aleatória, radial (a partir do ponteiro), diagonal ou por linhas, as faces se trocam sob uma cobertura completa e depois os pixels encolhem até sumir. -
Twin DropExclusivo
<mv-twin-drop>Zonas de soltar vinculadas que movem itens pela página num único gesto: duas zonas <mv-twin-drop> são pareadas, e qualquer [data-twin-drop-item] arrastado para uma desliza pela abertura dela e sai pela gêmea em outro ponto da página, lançado na orientação da gêmea com uma velocidade proporcional à de entrada (com limite), desacelerando até se acomodar no contêiner de destino da gêmea, ou deslizando e quicando até parar numa tela livre quando não há destino.
Microinterações 12
-
Click Spark
<mv-click-spark>Wrapper que lança rastros de faíscas a partir do ponto do clique: cada rastro se estica, se curva levemente com a gravidade e encolhe até virar um ponto em volta de um clarão suave, desenhados numa única sobreposição compartilhada da página para que as faíscas nunca sejam cortadas nem bloqueiem os cliques; teclado incluído, e uma função spark() funciona sem o elemento. -
Confetti
<mv-confetti-button>Confete em canvas baseado em física (gravidade, arrasto, giro 3D, oscilação): uma função confetti() independente, presets de canhões / fogos de artifício / estrelas / emoji, um botão de disparo e um modo “cool” de manter pressionado. -
Copy Button
<mv-copy-button>Botão de copiar com feedback de odômetro: o ícone e o rótulo sobem até uma marca de seleção (ou descem até um alerta em caso de falha) dentro de janelas fixas, enquanto um preenchimento colorido enche o botão e se esvazia durante o tempo limite como uma contagem regressiva; os botões só com ícone recebem uma etiqueta de status. -
Count BumpExclusivo
<mv-count-bump>Envolva um contador de carrinho, badge de notificação, contador de não lidas ou de curtidas e cada mudança fica perceptível: um pequeno salto direcional (para cima quando aumenta, para baixo quando diminui), só os dígitos que mudam rolam, um “+2” opcional sai flutuando e max="99" mostra “99+”. -
Hold Button
<mv-hold-button>Botão “Segure para confirmar” para ações destrutivas: enquanto ele é pressionado, um líquido sobe por dentro (ou entra pela lateral) e inverte o rótulo onde o cobre, soltar antes da hora o esvazia, e segurar até o fim termina com uma marca de seleção, um rótulo de concluído e mv-confirm. -
Icon Morph
.mv-icon-morphÍcones em CSS puro que se transformam conforme o estado ARIA do pai: hambúrguer ↔ fechar, mais ↔ menos, play ↔ pause, chevron V ↔ Λ, chevron giratório, seta → marca de seleção. -
Like Button
<mv-like>Botão de curtir ou favoritar com um clique tátil: o glifo afunda sob o ponteiro e depois passa do tamanho cheio ao se preencher, enquanto um anel e uma coroa de faíscas se irradiam uma vez; os dígitos do contador que mudam rolam para cima ou para baixo em posições fixas, formatados com Intl. -
Physics Stack
<mv-physics-stack>Uma lista cujos itens são corpos rígidos empilhados numa caixa: pegue um card por um canto (ele gira em torno do ponto de pega), jogue-o, a pilha volta a cair com a gravidade e a ordem do DOM acompanha a ordem visual. -
Ripple
<mv-pulse-ring>Ondulação de tinta no estilo Material a partir do ponto de clique em qualquer elemento (.mv-ripple / data-mv-ripple, cresce enquanto é segurado), além de <mv-pulse-ring>: anéis concêntricos que se irradiam ou respiram. -
Salvage StopExclusivo
<mv-salvage-stop>Um botão Stop para processos longos (agentes de IA, exportações, geração) que mostra o que você mantém antes de parar: ao passar o mouse ou com o foco, um painel ancorado abre duas bandejas, “You keep” (artefatos concluídos, em destaque, com o glifo do tipo) e “You lose” (itens em andamento, apagados, com o progresso), além de um título que informa o valor salvo (“You keep 7 of 9 items · 78% of the work”, ponderado por item). -
Share ButtonExclusivo
<mv-share-button>Botão de compartilhar que abre a folha de compartilhamento nativa num toque onde a Web Share API consegue compartilhar os dados (verificado com navigator.canShare) e, nos demais casos, um pequeno menu acessível por teclado com Copiar link, E-mail e as redes que você listar, construídos como links de intenção simples. -
Theme Toggle
<mv-theme-toggle>Alternância claro/escuro: o novo tema é revelado num círculo a partir do botão (View Transition + clip-path), um sol se transforma em lua, a escolha é lembrada e a preferência do sistema é respeitada.
Efeitos 11
-
Animated Beam
<mv-animated-beam>Feixe SVG curvo entre dois elementos de um contêiner, percorrido por um pulso em gradiente; acompanha os redimensionamentos (ideal para diagramas de integração). -
ASCII
<mv-ascii>Redesenha uma imagem, um vídeo, um canvas ou um texto como arte ASCII ao vivo: rampa de caracteres e tamanho de célula configuráveis, monocromático ou colorido, uma esteira do ponteiro que engrossa os caracteres por onde passa e esfria atrás dele, e uma revelação opcional que embaralha cada caractere antes de fixá-los da esquerda para a direita. -
Border Beam
<mv-border-beam>Luz animada que percorre a borda de qualquer caixa: um cometa em velocidade constante, reflexos cônicos, um gradiente em movimento, estrelas que deslizam ou uma borda elétrica. -
Glass
<mv-liquid-glass>Vidro fosco que continua legível sobre qualquer fundo: o fundo é desfocado, seu contraste é comprimido e depois coberto por um véu na cor do tema, em 5 presets para claro e escuro, além de um vidro líquido que ondula o fundo por meio de um filtro SVG. -
Glow
.mv-glowRetroiluminação em gradiente desfocado atrás de qualquer elemento, além de um card neon com borda em gradiente, estática ou girando lentamente. -
Gooey
.mv-gooeyUtilitário de metaballs: uma camada de fundo filtrada (blur + limiar alfa SVG) em que as formas se fundem umas nas outras como líquido, enquanto texto, ícones e foco continuam nítidos por cima. -
Noise
.mv-noiseGranulação de filme em CSS puro (textura SVG feTurbulence como data URI) sobre qualquer superfície: fina ou grossa, estática ou animada, por baixo ou por cima do conteúdo. -
Progressive Blur
.mv-progressive-blurDesfoque progressivo das bordas em CSS puro: camadas de backdrop-filter empilhadas e mascaradas em fatias, em qualquer lado, com um esmaecimento opcional para a cor de fundo. -
Spotlight Card
<mv-spotlight>Um holofote que segue o cursor dentro de um card e revela a borda dele; numa grade, a mesma luz se espalha pelas bordas dos cards vizinhos. -
SurfaceExclusivo
<mv-surface-layer>Um sistema de materiais na GPU para qualquer elemento: data-mv-surface="glass | chrome | jelly | velvet | holo". -
Tilt Card
<mv-tilt>Inclinação 3D sutil sob um ponteiro preciso, com um reflexo suave e parallax data-depth, plano e nítido em repouso, uma leve elevação com o foco do teclado e sem inclinação no toque nem com movimento reduzido.
Blocos 24
-
AI Chat
<mv-ai-chat>Interface de chat com IA: respostas em streaming com cursor, estado “pensando” com brilho, renderização segura de Markdown (listas, negrito, código com botão de copiar), editor de mensagens que cresce sozinho com anexos, seletor de modelo, sugestões, parar / regenerar e rolagem automática que cede ao usuário. -
App Shell
<mv-app-shell>Bloco de dashboard completo: barra lateral recolhível, cabeçalho fixo (breadcrumb, busca com Ctrl/⌘ + K, notificações não lidas, conta), blocos de KPI com sparklines, um gráfico de vendas por período e uma tabela de atividade. -
Auth
<mv-auth>Bloco de autenticação em quatro etapas (entrar, cadastrar-se, esqueci a senha, código OTP): layout dividido com visual e depoimento, botões sociais, mostrar senha, medidor de força, reenvio de código temporizado, validação nativa e envio assíncrono. -
Buy Box
<mv-buy-box>Bloco de compra da página de produto: marca, título, avaliação, preço (acompanha a variante selecionada), parcelamento em 3 vezes, cores e tamanhos (os esgotados riscados, “Notify me when it's back”), quantidade limitada ao estoque do tamanho, botão de adicionar ao carrinho com carregamento e depois confirmação, previsão de entrega calculada e contagem regressiva até o horário limite de envio, vantagens de confiança e um acordeão de detalhes; sincroniza com uma galeria. -
Cart
<mv-cart>Carrinho completo (drawer ou página): linhas de produto horizontais com quantidade e totais ao vivo, uma barra “Only $12.40 away from free shipping”, cupons validados com mensagens de erro (porcentagem, valor fixo ou frete grátis, hook de servidor assíncrono), economia em preços promocionais, frete, total com impostos incluídos, remoção com “Undo” por 5 segundos, um estado vazio e um botão de pagamento que mostra o total. -
Checkout
<mv-checkout>Pagamento em várias etapas (endereço → entrega → pagamento → revisão): validação por etapa com mensagens embutidas e foco no primeiro erro, formas de envio em cards com datas estimadas que atualizam o resumo do pedido, campo de cartão formatado (grupos de dígitos, MM/AA, detecção de Visa/Mastercard/Amex/CB, verificação de Luhn), PayPal e Apple Pay, endereço de cobrança recolhível, revisão com links “Edit”, termos de venda, um botão “Pay $157.32” com estado de carregamento, cartão recusado e confirmação. -
CTA
.mv-ctaChamada para ação editorial: uma faixa entre duas linhas finas com o título à esquerda e os detalhes à direita, um bloco de tinta sempre escuro ou um painel de newsletter com formulário embutido e feedback de status. -
Data table
<mv-data-table>Tabela de dados completa em torno de uma .mv-table: ordenação por coluna, busca que ignora acentos, filtros por valor, um menu de visibilidade de colunas, seleção de linhas (checkbox de cabeçalho indeterminado, Shift + clique para intervalos) com uma barra de ações em massa, paginação com linhas por página e um estado vazio. -
Facets
<mv-facets>Painel de filtros para listagem de produtos: grupos de checkboxes recolhíveis com contagens (“Show 2 more”), amostras de cor e de tamanho, uma faixa de preço com dois cursores sincronizada com dois campos, uma avaliação mínima que pode ser desmarcada, um switch “em estoque”, chips de filtros ativos removíveis com “Clear all” e um drawer para celular (<dialog> nativo) com um botão “Show 42 products”. -
FAQ
.mv-faqSeção de FAQ editorial: perguntas numeradas numa margem monoespaçada sobre linhas finas, uma versão organizada por tema com um índice fixo (guias pontilhadas, contagens) e uma nota de contato, ou uma grade aberta de respostas numeradas. -
Features
.mv-featuresSeção de recursos editorial: uma grade de índice numerada sobre linhas finas, painéis coloridos em que o bloco inteiro é o link, ou um livro-razão com uma introdução fixa e etapas numeradas. -
Footer
.mv-footerRodapé editorial: títulos de coluna numerados e monoespaçados sobre linhas finas, marca + newsletter, uma fileira de blocos de contato e uma faixa inferior de largura total; uma versão manifesto com um grande título e chamadas para ação; ou uma versão mínima em uma linha. -
Hero
.mv-heroAbertura editorial de landing page: uma linha de metadados monoespaçada traçada sobre um fio fino, um título enorme em dois tons, texto de abertura e ações, uma prancha de produto com legenda e uma faixa de dados com fios. -
Kanban
<mv-kanban>Quadro kanban em raias abertas divididas por linhas finas: arrastar e soltar com o ponteiro com uma cópia flutuante plana, um espaço reservado hachurado e cards que deslizam até o lugar (FLIP), um anel de encaixe ao soltar, rolagem automática, barras de carga WIP para colunas limitadas e movimentos completos pelo teclado (Space, teclas de seta, Escape) anunciados aos leitores de tela. -
Logo Cloud
<mv-logo-cloud>Seção de logos de clientes em registro editorial: uma tabela de logos com fios e legendas monoespaçadas ao lado de um número em destaque, uma faixa de marquee ao lado de uma estatística, ou colunas que trocam os logos um após o outro (pausável, respeita o movimento reduzido). -
Mega Menu
<mv-mega-menu>Navegação de e-commerce com megapainéis: abre ao passar o mouse com detecção de intenção (atraso, troca instantânea entre categorias) ou ao clicar, uma superfície compartilhada cuja altura se anima enquanto os painéis fazem transição cruzada, colunas de links com badges, blocos promocionais, um véu sobre a página; suporte completo a teclado; abaixo do breakpoint (largura do host, ResizeObserver), um menu hambúrguer num drawer <dialog> com telas de navegação em profundidade e um botão de voltar. -
Navbar
<mv-navbar>Barra de navegação editorial fixa que ganha desfoque ao rolar: rótulos e contadores monoespaçados, mega menus em popover com um fio de destaque na barra indicando o menu aberto, um viewport compartilhado opcional que se redimensiona entre os menus, um modo flutuante que se destaca em forma de card ao rolar e um layout empilhado de busca + seções; drawer para celular baseado em dialog com links numerados. -
Preços
<mv-pricing>Seção de preços com cara de ficha técnica: painéis de planos num mesmo quadro atenuado, um seletor segmentado mensal / anual sobre rádios nativos, um plano recomendado marcado com um anel, medidores de uso e uma economia explícita riscada nos preços anuais; em colunas, em linhas horizontais ou com um único plano. -
Review
<mv-reviews>Avaliações de clientes: resumo (nota média, estrelas, histograma de 5→1 em que cada barra filtra, medidor de caimento), ordenação (recentes, úteis, nota), filtro “With photos”, chips de filtros ativos, paginação “Show 4 more reviews”; card <mv-review> com “Verified purchase”, variante comprada, texto recolhido com “Read more”, lightbox de fotos, votos de “helpful” (um por visitante, pode ser desfeito), denúncia e resposta do lojista; formulário “Write a review” validado que adiciona a avaliação pendente de moderação. -
Settings
<mv-settings>Página de configurações: navegação por seções com acompanhamento da rolagem, perfil (prévia da foto, campos validados), switches de notificações, segurança, uma barra de “alterações não salvas” e uma zona de perigo com confirmação por digitação. -
Sidebar
<mv-sidebar>Barra lateral de app: trilho de ícones animado com tooltips, estado persistido, grupos, seções aninhadas recolhíveis, contadores, seletor de espaço de trabalho e menu do usuário, painel deslizante (dialog) quando o contêiner é estreito, atalho Ctrl/⌘ + B. -
Stats
.mv-statsSeção de números-chave com contadores animados (number-ticker): colunas com fios e rótulos monoespaçados, cards de KPI com espaço para a tendência e uma sparkline, ou um único número enorme em destaque ao lado de um livro-razão empilhado. -
Testimonials
.mv-testimonialsSeção de depoimentos com visual editorial de linhas finas: uma grade de livro-razão numerada com uma entrada de resultado em destaque, um ticker horizontal de notas compactas, ou um estudo de caso dividido que junta uma citação aos números-chave; um resumo de nota fica no cabeçalho. -
Wordmark Footer
<mv-wordmark-footer>Rodapé com colunas de links acima de um nome de marca gigante em traço fino ajustado à largura: o ponteiro, o foco do teclado ou um toque é projetado sobre as letras, onde um holofote as preenche com um gradiente ou uma cor sólida sobre um véu tênue em repouso.
Utilitários 5
-
Agent VisionExclusivo
<mv-agent-vision>Veja a sua página como um agente de IA (ou um leitor de tela) a vê: envolve qualquer região e a divide com uma linha de varredura que pode ser arrastada. -
Assist ModeExclusivo
<mv-assist-mode>Um painel de assistência sem julgamentos, para o site inteiro, para tudo o que depende de tempo ou de movimento, oferecido como ajuda opcional e não como um “modo de acessibilidade”. -
ComboExclusivo
<mv-combo>Motor de atalhos de teclado em sequência para apps de usuários avançados, com um buffer de entrada ao vivo. -
DrillExclusivo
<mv-drill>Treinador de atalhos de teclado que transforma os atalhos de um app em reflexos por meio de exercícios curtos e espaçados. -
Motion BudgetExclusivo
<mv-motion-budget>Um regulador de animações: envolve uma região (ou a página inteira) e dá a ela um orçamento de movimento, a fração da tela que pode se mover ao mesmo tempo (25% por padrão).
Nenhum componente corresponde a este filtro.