# @visant/ui

Registry de componentes shadcn da Visant Labs. Todo item é instalável com
`npx shadcn@latest add @visant/<nome>` e vem com o código no projeto — não é
pacote npm, é arquivo copiado, e você pode editar depois.

183 peças. A ficha completa de cada uma está em `https://ui.visantlabs.com/r/<nome>.md`,
e o JSON que o `add` consome em `https://ui.visantlabs.com/r/<nome>.json`.

## Base de CSS (1)

- [vintage-base](https://ui.visantlabs.com/r/vintage-base.md): A fundação do kit: variáveis de painel, texturas e as regras em @layer. Use quando: Instalar qualquer peça vintage-*: traz as variáveis de painel, texturas e regras em @layer que elas leem

## Bloco (5)

- [fog-garden](https://ui.visantlabs.com/r/fog-garden.md): A caminhada por um jardim na névoa presa ao scroll: cada parada de texto sai da névoa e volta para ela, em mix-blend-difference sobre as copas, com clareiras derivadas das paradas e plantio semeado. Use quando: Storytelling longo de marca: caminhada 3D na névoa com paradas de texto presas ao scroll
- [fog-hero](https://ui.visantlabs.com/r/fog-hero.md): Hero de tela cheia que abre uma clareira na névoa, troca uma playlist de vídeo P&B pela própria fumaça e sai em desfoque no scroll, com papel e tinta vindos dos tokens. Use quando: Hero de tela cheia com névoa em shader, vídeo P&B e saída em desfoque, pra abertura de marca
- [kanban](https://ui.visantlabs.com/r/kanban.md): Board com drag-and-drop, seleção por marquee sobre o vazio e multi-seleção com shift/ctrl. Use quando: Board de tarefas ou pipeline com arrastar entre colunas e multi-seleção, em ferramenta interna
- [step-cards](https://ui.visantlabs.com/r/step-cards.md): Como funciona, em passos numerados. Use quando: Seção de como funciona em passos numerados com arte por passo, em landing ou onboarding
- [testimonial-wall](https://ui.visantlabs.com/r/testimonial-wall.md): Parede de prova social com tipos misturados: citação, número, retrato e depoimento em vídeo na mesma malha, em colunas ou em grade que ocupa a altura, com faixa de fechamento. Use quando: Parede de prova social com citação, número, retrato e vídeo misturados numa landing

## Hook (5)

- [use-debounce](https://ui.visantlabs.com/r/use-debounce.md): Atrasa um valor até ele parar de mudar.
- [use-knob-drag](https://ui.visantlabs.com/r/use-knob-drag.md): O gesto de arrastar um knob isolado do desenho: pointer capture, trava de curso e passo fino com shift. Use quando: Criar um controle giratório próprio com arraste vertical, trava de curso e passo fino no shift
- [use-local-search](https://ui.visantlabs.com/r/use-local-search.md): Busca em memória tolerante a acento: índice montado uma vez por lista, todos os termos batendo em qualquer ordem, e termo vazio devolvendo a lista inteira. Use quando: Filtrar lista em memória tolerando acento e termos em qualquer ordem, como catálogo ou menu
- [use-media-query](https://ui.visantlabs.com/r/use-media-query.md): Media query como estado de React, via useSyncExternalStore: leitura síncrona no primeiro render, sem piscar, e segura em SSR. Use quando: Trocar layout ou comportamento por breakpoint em React, sem piscar no primeiro render e seguro em SSR
- [use-pointer-parallax](https://ui.visantlabs.com/r/use-pointer-parallax.md): Escreve --px e --py uma vez por quadro e deixa o CSS decidir a profundidade de cada objeto. Use quando: Hero de colagem em que várias camadas se movem com o ponteiro, profundidade decidida no CSS

## Registry:item (1)

- [agent-rules](https://ui.visantlabs.com/r/agent-rules.md): Regras pro seu agente de IA (Cursor, Claude Code, Copilot): procurar no @visant antes de escrever UI do zero e escolher a peça certa pela situação. Use quando: Projeto em que um agente de IA escreve a UI: instala as regras que fazem ele buscar a peça @visant certa antes de criar

## Utilitário (16)

- [anatomia-como-sobe](https://ui.visantlabs.com/r/anatomia-como-sobe.md): Fig 1.4 do curso IA para Designers: o que sobe pro GitHub, o que o .gitignore segura no computador e quando a Vercel põe no ar. Use quando: Explicar em aula o que vai pro GitHub, o que o .gitignore segura e quando a Vercel publica
- [anatomia-fichario](https://ui.visantlabs.com/r/anatomia-fichario.md): Fig 2.6 do curso IA para Designers: o agente lê só as etiquetas das skills e abre a receita que casa com o pedido; a pasta references/ só sobe quando a receita pede. Use quando: Explicar como o agente lê só as etiquetas das skills e abre a receita que casa com o pedido
- [anatomia-memoria](https://ui.visantlabs.com/r/anatomia-memoria.md): Fig 2.7 do curso IA para Designers: o agente esquece a conversa quando a janela fecha e lembra o que está no CLAUDE.md, com regra parafusada e fato com data. Use quando: Explicar o que o agente esquece ao fechar a conversa e o que fica gravado no CLAUDE.md
- [anatomia-permissao](https://ui.visantlabs.com/r/anatomia-permissao.md): Fig 2.3b do curso IA para Designers: nada do agente entra na tua pasta sem Yes, Yes and don't ask again ou No, e só o don't ask again fica escrito. Use quando: Explicar a caixa de permissão do terminal e o que o don't ask again deixa gravado
- [anatomia-script](https://ui.visantlabs.com/r/anatomia-script.md): Fig B.8 do curso IA para Designers: o agente resolve o pedido novo e gasta uso; o que se repete vira script, que roda sem IA e para quando não entende. Use quando: Explicar quando um pedido que se repete deve virar script que roda sem IA
- [anatomia-tokens](https://ui.visantlabs.com/r/anatomia-tokens.md): Fig B.7 do curso IA para Designers: cada mensagem fica na conversa e o agente relê tudo a cada volta; um print resolve em uma volta o que o parágrafo leva três. Use quando: Explicar que o agente relê a conversa toda a cada volta e por que um print economiza
- [anatomia-tomadas](https://ui.visantlabs.com/r/anatomia-tomadas.md): Fig 2.2 do curso IA para Designers: os programas entram pelo conector do claude.ai, com a tua conta; o serviço pago entra pela chave de API, que mora no .env e conta cada chamada. Use quando: Explicar a diferença entre conector do claude.ai e chave de API no .env, em aula ou onboarding
- [brand-theme](https://ui.visantlabs.com/r/brand-theme.md): Provider e hook que aplicam em runtime o tema compilado de uma brand guideline. Use quando: App que troca de marca em runtime, como multi-cliente ou white-label, aplicando o tema compilado
- [css-color](https://ui.visantlabs.com/r/css-color.md): Resolve qualquer cor CSS ou token (var(--x), oklch, color-mix) para sRGB 0..1 e avisa na troca de tema, para shader e canvas pintarem com a cor da marca. Use quando: Pintar shader, canvas ou WebGL com a cor dos tokens da marca e reagir à troca de tema
- [fader](https://ui.visantlabs.com/r/fader.md): Slider de console em web component, sem framework: marca a cada 10%, tampa quadrada, arrastar o nome muda o valor e duplo clique volta pro padrão. Use quando: Coluna de parâmetros numa ferramenta (efeito, edição, áudio), em projeto vanilla ou React
- [fold-motion](https://ui.visantlabs.com/r/fold-motion.md): Hierarquia de entradas por dobra: rise, drift, mask, settle, climax, invert e mist em vez de trinta entradas iguais. Use quando: Dar hierarquia às entradas de uma landing, cada dobra com seu tipo de entrada ao rolar
- [motion-layer](https://ui.visantlabs.com/r/motion-layer.md): O ciclo de scroll do editor Shopify em GSAP/ScrollTrigger, com limpeza de instância. Use quando: Ligar reveal, parallax e magnético por data-attribute em tema Shopify ou página montada em builder
- [sfx-bus](https://ui.visantlabs.com/r/sfx-bus.md): Cliques de objeto analógico em WebAudio puro, sem arquivo: botão de câmera, dente de knob, alavanca e agulha pousando, com throttle, contexto armado no primeiro gesto e mudo sob prefers-reduced-motion. Use quando: Dar som de clique analógico a botões, knobs e alavancas sem arquivo de áudio, em site com tato
- [smooth-scroll-provider](https://ui.visantlabs.com/r/smooth-scroll-provider.md): Lenis + GSAP num relógio só, com bail-out em prefers-reduced-motion. Use quando: Landing ou editorial com rolagem suave Lenis sincronizada ao GSAP ScrollTrigger
- [tempo-bar](https://ui.visantlabs.com/r/tempo-bar.md): Controle de BPM em web component, sem framework: LED na batida, número que se arrasta, luzes de compasso, divisão e tap. Use quando: Ferramenta ou visual de festa em que o tempo da música manda: VJ, gerador de efeito, sequenciador
- [tempo-clock](https://ui.visantlabs.com/r/tempo-clock.md): Relógio de BPM sem interface: passo na divisão, envelope de bumbo, tap tempo e troca de BPM sem pular o compasso. Use quando: Visual, animação ou sequenciador que precisa andar no tempo de uma música, inclusive em export quadro a quadro

## Tema (1)

- [vintage-theme](https://ui.visantlabs.com/r/vintage-theme.md): O tema do kit de áudio, o contraponto escuro aos temas de marca. Use quando: Montar app ou ferramenta de áudio com o kit vintage: é o tema escuro de painel que as peças vintage-* pressupõem

## Componente (154)

- [activity-heatmap](https://ui.visantlabs.com/r/activity-heatmap.md): Um quadrado por dia mostra o ritmo de meses de trabalho, com bolha que desliza entre os dias e teclado de calendário. Use quando: Mostrar ritmo diário de atividade ao longo de meses, como entregas ou hábitos, em perfil ou dashboard
- [anatomia](https://ui.visantlabs.com/r/anatomia.md): O núcleo das figuras didáticas: o web component <visant-anatomia> (pinos, painel de peças, passo a passo, pausa, tela cheia, teclado) e o wrapper React. Use quando: Montar figura didática interativa com pinos e passo a passo; é a base de toda anatomia-*
- [assignee-stack](https://ui.visantlabs.com/r/assignee-stack.md): Pilha de responsáveis com excedente contado. Use quando: Mostrar responsáveis de tarefa ou projeto em pilha de avatares com excedente contado
- [auth-button](https://ui.visantlabs.com/r/auth-button.md): O canto da conta nos três estados. Use quando: Canto da conta no cabeçalho do app: entrar, carregando e avatar com menu, sem pular de tamanho
- [billing-toggle](https://ui.visantlabs.com/r/billing-toggle.md): Interruptor mensal e anual com o selo de desconto que vira recibo quando o anual é escolhido, e o preço rolando junto. Use quando: Alternar mensal e anual numa página de preços, com selo de desconto e preço rolando junto
- [black-hole](https://ui.visantlabs.com/r/black-hole.md): Apagar em lote com as linhas sugadas para um ponto só, a lista se inclinando em volta e o desfazer devolvendo tudo do mesmo lugar. Use quando: Apagar em lote numa lista ou inbox, com as linhas sugadas e o desfazer devolvendo tudo
- [book-3d](https://ui.visantlabs.com/r/book-3d.md): O item de catálogo como objeto: capa dura em WebGL com lombada curva, espessura vinda da contagem de páginas e praça. Use quando: Mostrar livro, revista ou catálogo como objeto 3D com capa, lombada e espessura reais
- [book-shelf](https://ui.visantlabs.com/r/book-shelf.md): Estante em vez de vitrine: os itens soltos, sem moldura, e o rótulo só no hover — porque o objeto já tem silhueta e a moldura passa a competir com ela. Use quando: Catálogo de livros ou produtos com silhueta, soltos como numa estante, rótulo só no hover
- [brand-selector](https://ui.visantlabs.com/r/brand-selector.md): Seletor de marca com prévia ao percorrer: paleta, par tipográfico e completude do vault na linha. Use quando: Ferramenta interna ou vitrine multi-marca em que a pessoa escolhe a marca e vê o tema aplicado
- [card-stack](https://ui.visantlabs.com/r/card-stack.md): Pilha de cards em que o de cima vai pro fundo quando você arrasta e solta, como baralho de verdade. Use quando: Pilha de cards arrastáveis pra passar depoimentos ou dicas um a um, em landing ou onboarding
- [carousel-3d](https://ui.visantlabs.com/r/carousel-3d.md): Capas num carrossel circular em WebGL: o card da frente cresce no hover, o botão central abre o item e o canvas só nasce perto da dobra. Use quando: Vitrine de poucas capas num carrossel circular em WebGL, como portfólio curto
- [chip](https://ui.visantlabs.com/r/chip.md): Pastilha de filtro com contagem; a faceta sem resultado apaga em vez de mostrar zero. Use quando: Filtro de loja ou catálogo com contagem por faceta, apagando a que não tem resultado
- [command-search](https://ui.visantlabs.com/r/command-search.md): Busca ⌘K que não sabe buscar nem navegar: onSearch entra por prop, e resposta fora de ordem não repovoa a lista.
- [confirm-morph](https://ui.visantlabs.com/r/confirm-morph.md): Botão de apagar que vira a pergunta no próprio lugar, depois o andamento e o resultado com desfazer. Use quando: Apagar item com confirmação no próprio botão, andamento e desfazer, quando a ação é reversível
- [count-up](https://ui.visantlabs.com/r/count-up.md): O número que se apura em vez de aparecer pronto: lê o valor final do próprio texto, trava a largura antes do primeiro quadro e não anima o que não dá pra parsear. Use quando: Estatística de landing que apura até o valor ao entrar na tela, como 120 projetos entregues
- [countdown](https://ui.visantlabs.com/r/countdown.md): Contagem regressiva em que cada dígito gira pelo caminho curto e vira o aviso de ao vivo quando chega a zero. Use quando: Contagem até lançamento, evento ou prazo que vira aviso de ao vivo quando chega a zero
- [cover-art](https://ui.visantlabs.com/r/cover-art.md): Capa determinística em CSS pra item sem arte: três famílias (livro, app, placa), monograma, e rampa tonal derivada da marca por color-mix. Use quando: Gerar capa de livro, app ou placa para item sem imagem, a partir do nome e da cor da marca
- [cover-flow](https://ui.visantlabs.com/r/cover-flow.md): Uma prateleira de capas em perspectiva: a da vez fica de frente, as vizinhas giram de lado e você arrasta ou joga pra trocar. Use quando: Galeria de capas em perspectiva com arrasto, pra portfólio, discos ou livros em destaque
- [cta-surface](https://ui.visantlabs.com/r/cta-surface.md): A superfície de conversão em três proporções (barra, painel, card). Use quando: Bloco de conversão no fim de dobra ou página: barra, painel ou card com a ação principal
- [data-table](https://ui.visantlabs.com/r/data-table.md): Tabela densa: ordenação, seleção, edição inline e menu de contexto. Use quando: Tabela densa de admin ou dashboard com ordenação, seleção e edição inline, em app Next
- [date-reel](https://ui.visantlabs.com/r/date-reel.md): Seletor de data em rolos de dia, mês e ano que encaixam sozinhos, como no telefone. Use quando: Escolher data em rolos de dia, mês e ano, como nascimento ou agendamento no celular
- [dot-cursor](https://ui.visantlabs.com/r/dot-cursor.md): Ponto de 6px que segue o ponteiro com mola calma e abre num anel vazado sobre link, botão ou [data-cursor], em mix-blend-difference; só existe em ponteiro fino e sem movimento reduzido. Use quando: Cursor customizado mínimo em site editorial ou portfólio, abrindo anel sobre links
- [drop-overlay](https://ui.visantlabs.com/r/drop-overlay.md): A camada que aparece quando um arquivo está sendo arrastado sobre a área. Use quando: Área de upload que mostra a camada de soltar quando um arquivo é arrastado por cima
- [dynamic-island](https://ui.visantlabs.com/r/dynamic-island.md): A pílula que mostra a atividade em curso e cresce no lugar com os controles quando alguém toca nela. Use quando: Pílula de atividade em curso, como timer, player ou chamada, que cresce com controles ao tocar
- [eclipse-switch](https://ui.visantlabs.com/r/eclipse-switch.md): Chave de tema claro e escuro em que a lua cobre o sol num eclipse, sem mexer na página por conta própria. Use quando: Chave de tema claro e escuro no cabeçalho, com a lua cobrindo o sol
- [elastic-slider](https://ui.visantlabs.com/r/elastic-slider.md): Slider que estica feito elástico quando você puxa além do limite e volta com a velocidade da soltura. Use quando: Slider de formulário ou configuração que estica além do limite e volta com mola
- [empty-state](https://ui.visantlabs.com/r/empty-state.md): O estado vazio canônico: arte por slot, frase do que vai aparecer ali e no máximo uma ação; com ou sem caixa. Use quando: Lista, painel ou busca sem conteúdo ainda: frase do que vai aparecer ali e no máximo uma ação
- [erase-field](https://ui.visantlabs.com/r/erase-field.md): Fundo em canvas que a mão raspa pra revelar a luz por baixo, com acabamento líquido, poeira que volta em deriva e passeio ocioso pra quem não mexe o ponteiro. Use quando: Hero ou CTA com fundo em canvas que a pessoa raspa pra revelar a luz, convidando a mexer
- [expandable-card](https://ui.visantlabs.com/r/expandable-card.md): Card de resumo que cresce pros lados e pra baixo ao abrir, e rola só a palavra que mudou no resumo. Use quando: Card de resumo que abre no lugar pra mostrar detalhe, como pedido, plano ou tarefa
- [expanding-search](https://ui.visantlabs.com/r/expanding-search.md): Busca que fica guardada num ícone de lupa e só abre o campo quando alguém vai mesmo buscar. Use quando: Busca no cabeçalho ou barra de ferramentas que fica num ícone até alguém ir buscar
- [eye-tracker](https://ui.visantlabs.com/r/eye-tracker.md): Avatar de bot ou agente de IA: a cabeça é um shader vivo na cor da marca, com visor e antena, e os olhos seguem o cursor e o foco, piscam e cumprimentam no clique. Use quando: Avatar de agente ou assistente de IA: cabeçalho e estado vazio de chat, onboarding guiado por bot, tela de espera enquanto o agente pensa
- [filter-bar](https://ui.visantlabs.com/r/filter-bar.md): Esqueleto da barra de filtro: controles por slot, chips aplicados embaixo, e a contagem que some quando nada foi filtrado.
- [filter-menu](https://ui.visantlabs.com/r/filter-menu.md): Menu de facetas que não conhece o domínio: grupos múltiplos ou excludentes, e o contador conta grupos, não opções.
- [fog-tree](https://ui.visantlabs.com/r/fog-tree.md): Uma árvore procedural sozinha na névoa, em duotone da marca: a cena é cinza e o último passe pinta com --background e --foreground, então o tema escuro inverte a foto sem segunda paleta. Use quando: Abertura ou dobra de marca com uma árvore 3D na névoa em duotone que acompanha o scroll
- [folding-bill](https://ui.visantlabs.com/r/folding-bill.md): Uma conta que dobra em três como papel e abre quando você puxa ou toca, com o total sempre à vista no cabeçalho. Use quando: Recibo ou resumo de pedido que dobra em três como papel, com o total sempre à vista
- [gauge](https://ui.visantlabs.com/r/gauge.md): Medidor em arco com ponteiro que enche quando entra em vista e troca o nome da faixa na hora em que a contagem cruza o limite. Use quando: Medidor de cota ou uso em dashboard, com o nome da faixa trocando ao cruzar o limite
- [gleam](https://ui.visantlabs.com/r/gleam.md): A superfície que sabe onde o cursor está: luz sob o ponteiro, borda acesa do lado da luz e inclinação de 5 graus. Use quando: Grade de cards em que cada um acende luz sob o cursor e inclina leve, em vitrine ou pricing
- [glitch-chars](https://ui.visantlabs.com/r/glitch-chars.md): Caracteres que trocam sozinhos, em cinco sotaques (símbolos, blocos, braille, binário, hex), ou decodificando até virar uma palavra. Use quando: Textura de caracteres trocando ou palavra decodificando, em hero tech, terminal ou espera curta
- [grid-dots](https://ui.visantlabs.com/r/grid-dots.md): Malha de pontos de fundo, o papel milimetrado que dá profundidade sem competir. Use quando: Fundo parado de malha de pontos que dá profundidade sem competir com o conteúdo
- [heat-word](https://ui.visantlabs.com/r/heat-word.md): Uma grade de gotas ou uma palavra que derrete num mapa de calor por onde o cursor passa, pintada com as cores da marca. Use quando: Palavra de destaque ou grade de gotas que derrete num mapa de calor sob o cursor, em hero
- [hold-to-confirm](https://ui.visantlabs.com/r/hold-to-confirm.md): Botão que só confirma se você segurar, com o preenchimento enchendo e voltando se soltar antes. Use quando: Ação irreversível e cara, como excluir conta ou projeto, exigindo segurar o botão
- [icon-morph](https://ui.visantlabs.com/r/icon-morph.md): Ícone de dois estados que vira o outro em vez de trocar, como menu e fechar ou copiar e copiado. Use quando: Botão de ícone com dois estados que viram um no outro, como menu e fechar ou copiar e copiado
- [ink-wordmark](https://ui.visantlabs.com/r/ink-wordmark.md): Assinatura de ponta a ponta que condensa da fumaça conforme entra na tela, respira como tinta e se agita com a velocidade do ponteiro, só com filtro SVG, ou escrita por prop, com fonte, peso, caixa e ®. Use quando: Assinatura grande de rodapé ou abertura que condensa da fumaça ao entrar na tela
- [inline-edit](https://ui.visantlabs.com/r/inline-edit.md): Editar onde se lê. Use quando: Editar nome ou campo curto onde ele aparece, em tabela, card ou cabeçalho de página
- [lathe-object](https://ui.visantlabs.com/r/lathe-object.md): Produto de revolução em WebGL a partir de um perfil de meia silhueta (frasco, vela, pote, difusor com varetas), com giro sozinho, arrasto para orbitar e vento no hover. Use quando: Mostrar produto de revolução, como frasco, vela ou pote, em 3D que gira e orbita no arrasto
- [lathe-riso](https://ui.visantlabs.com/r/lathe-riso.md): A peça 3D de revolução do lathe-object impressa ao vivo em duas tintas de risografia: gira, orbita no arrasto e sai do registro onde o cursor passa. Use quando: Hero com objeto 3D (fruta, frasco, pote) que precisa de cara de impresso, em duas tintas, arrastável
- [line-reveal](https://ui.visantlabs.com/r/line-reveal.md): O título que sobe de dentro do próprio corte de linha: mede a quebra depois da fonte carregar, re-quebra ao redimensionar, e o esconderijo é aplicado por JS pra página nunca sumir sem script. Use quando: Título de hero ou dobra que sobe linha por linha de dentro do próprio corte
- [liquid-toggle](https://ui.visantlabs.com/r/liquid-toggle.md): Um interruptor cuja bolinha escorre como gota de um lado pro outro, esticando no caminho e se recolhendo ao chegar. Use quando: Switch de liga e desliga em configuração ou formulário, com a bolinha escorrendo como gota
- [logo-wall](https://ui.visantlabs.com/r/logo-wall.md): A faixa de "confiam na gente" com os logos normalizados: altura óptica por item, teto de largura pro wordmark comprido e dessaturação em repouso que vira cor no hover. Use quando: Seção de clientes ou parceiros numa landing, com logos de proporções diferentes normalizados
- [magnetic-cta](https://ui.visantlabs.com/r/magnetic-cta.md): O botão principal que vem buscar o ponteiro: campo de atração com medida lida uma vez, rótulo com inércia própria e volta com mola. Use quando: Botão principal de landing que vem buscar o ponteiro, numa dobra de conversão com espaço em volta
- [magnetic-select](https://ui.visantlabs.com/r/magnetic-select.md): Um cacho de opções redondas em que a escolhida incha e empurra as outras, e o cursor puxa a opção que está debaixo dele. Use quando: Escolha única lúdica entre poucas opções redondas, como humor, cor ou objetivo no onboarding
- [magnify-dock](https://ui.visantlabs.com/r/magnify-dock.md): A barra de atalhos em que os ícones crescem em onda conforme o cursor chega perto, com o nome em cima do mais próximo. Use quando: Barra de atalhos de ícones que amplia em onda, em portfólio ou app de criação no desktop
- [marquee](https://ui.visantlabs.com/r/marquee.md): Faixa infinita em GSAP com três modos de scroll: empurrar o ritmo, virar esteira do scroll ou amarrar a posição à rolagem. Use quando: Faixa infinita de texto ou itens numa landing, com ritmo empurrado ou amarrado ao scroll
- [masonry-gallery](https://ui.visantlabs.com/r/masonry-gallery.md): Mosaico por round-robin: anexar página nova não reordena o que já estava na tela. Use quando: Galeria de fotos de alturas diferentes com rolagem infinita, sem reordenar o que já carregou
- [measure-bar](https://ui.visantlabs.com/r/measure-bar.md): Nenhum número sem régua: valor, qualificador, evidência e rótulo nessa ordem. Use quando: Mostrar métrica com régua, qualificador e evidência, em landing de prova ou relatório
- [measure-picker](https://ui.visantlabs.com/r/measure-picker.md): Escolher por medida e receber a recomendação. Use quando: Loja que recomenda tamanho ou modelo a partir de uma medida que o cliente sabe, como a altura
- [mist-dialog](https://ui.visantlabs.com/r/mist-dialog.md): Modal em <dialog> nativo que entra e sai em névoa só com CSS (@starting-style + allow-discrete), controlado, fecha no Esc e no clique fora, com ganchos onOpen/onClose para pausar o scroll suave; quatro entradas por variant: mist, rise, zoom e wipe. Use quando: Modal de vitrine ou editorial que entra em névoa, como detalhe de projeto ou contato
- [mist-swap](https://ui.visantlabs.com/r/mist-swap.md): Troca de slides em névoa: o que sai se desfaz no desfoque enquanto o próximo assenta no mesmo lugar, só gira em tela e para sob movimento reduzido; preenche o pai, que precisa ter tamanho. Use quando: Slideshow atmosférico de fotos que se trocam em névoa, em hero ou dobra editorial
- [mist-text](https://ui.visantlabs.com/r/mist-text.md): Texto que sai da névoa por palavra ou letra (desfoque, opacidade e subida mínima): entra uma vez ao chegar na tela, ou acompanha a rolagem ida e volta com mola que não erra a faixa dentro de sticky; cinco entradas por variant: mist, rise, mask, drift e settle. Use quando: Texto que sai da névoa por palavra ou letra, uma vez ou acompanhando a rolagem
- [morph-select](https://ui.visantlabs.com/r/morph-select.md): Select em que o próprio gatilho cresce e vira a lista, sem uma segunda caixa aparecendo embaixo. Use quando: Select de formulário em que o gatilho cresce e vira a lista, pra listas médias de opções
- [nav-drawer](https://ui.visantlabs.com/r/nav-drawer.md): O menu mobile feito uma vez direito, em dois desenhos: gaveta lateral ou página inteira brutalista com imagem. Use quando: Menu mobile de site ou landing, em gaveta lateral ou página inteira com imagem
- [orbit-menu](https://ui.visantlabs.com/r/orbit-menu.md): Botão que abre as ações em arco ao redor dele, com mola, pra escolher arrastando o dedo ou clicando. Use quando: Botão flutuante que abre poucas ações em arco, escolhidas arrastando o dedo, em app mobile
- [page-curl](https://ui.visantlabs.com/r/page-curl.md): Uma revistinha que você folheia puxando o canto da página, com a dobra, o verso do papel e a próxima página aparecendo por baixo. Use quando: Folhear revista, catálogo ou lookbook puxando o canto da página, em editorial
- [paper-shuttle](https://ui.visantlabs.com/r/paper-shuttle.md): Progresso com narrativa de papel passando pela máquina. Use quando: Espera de operação que move dados: importar, exportar, converter ou sincronizar
- [photo-compare](https://ui.visantlabs.com/r/photo-compare.md): A cortina entre o antes e o depois: a camada de cima é RECORTADA, nunca redimensionada, então as duas fotos ficam na mesma escala. Use quando: Comparar antes e depois de rebrand, retoque ou obra com cortina arrastável
- [photo-flip](https://ui.visantlabs.com/r/photo-flip.md): A foto atravessa da grade para a tela cheia — mesmo nó do DOM, reparentado e animado por GSAP Flip com ease-in-out. Use quando: Abrir foto da grade em tela cheia com transição contínua, como lightbox de portfólio
- [photo-frame](https://ui.visantlabs.com/r/photo-frame.md): A moldura que revela a foto: a máscara abre, a foto assenta mais devagar que a máscara, e opcionalmente deriva na rolagem. Use quando: Foto editorial ou de case que se revela por máscara ao entrar na tela, com proporção fixa
- [photo-split](https://ui.visantlabs.com/r/photo-split.md): A dobra alternada foto ↔ texto: a moldura revela a imagem, o texto entra deslizando da borda externa e o lado inverte a cada dobra sem ninguém escrever nada. Use quando: Seções alternadas de foto e texto em landing ou case, invertendo o lado a cada dobra
- [pinned-scene](https://ui.visantlabs.com/r/pinned-scene.md): A dobra que prende a arte e avança em passos. Use quando: Dobra de storytelling que prende a arte e avança em passos enquanto o texto rola
- [plate](https://ui.visantlabs.com/r/plate.md): A placa onde a foto de catálogo senta. Use quando: Assentar foto de produto recortada sobre branco num fundo colorido de loja, sem o retângulo branco
- [profile-form](https://ui.visantlabs.com/r/profile-form.md): Editar o perfil com foto, nome e e-mail verificado. Use quando: Página de configurações da conta com foto, nome e e-mail verificado, erro no próprio campo
- [pull-to-refresh](https://ui.visantlabs.com/r/pull-to-refresh.md): Painel que estica quando você puxa pra baixo, conta os pontos até a marca e gira enquanto atualiza. Use quando: Atualizar feed ou widget no celular puxando pra baixo, com a marca girando enquanto carrega
- [quote-block](https://ui.visantlabs.com/r/quote-block.md): O depoimento único, em tamanho de dobra: a citação vem primeiro e em corpo de manchete, a atribuição entra depois como assinatura. Use quando: Um depoimento só em tamanho de dobra, citação em corpo de manchete e assinatura depois
- [rail](https://ui.visantlabs.com/r/rail.md): Trilho horizontal com snap: anda por arrasto, Shift + roda, setas e teclado; as setas somem nas pontas. Use quando: Trilho horizontal de cards ou produtos com snap, arrasto e teclado, em loja ou catálogo
- [reactions](https://ui.visantlabs.com/r/reactions.md): Barra de reações em que a contagem rola pro lado que andou e o ícone dá um pulinho quando você reage. Use quando: Barra de reações em post, comentário ou mensagem, com a contagem rolando
- [reels-rail](https://ui.visantlabs.com/r/reels-rail.md): O trilho de vídeo vertical: cartões 9:16 com encaixe, tocando o do meio ou o que está sob o cursor. Use quando: Trilho de vídeos 9:16 em landing ou loja, tocando um por vez como reels
- [repulsive-hover](https://ui.visantlabs.com/r/repulsive-hover.md): O elemento foge do cursor com mola. Use quando: Decoração viva de hero que foge do cursor, como selo ou peça de colagem
- [scrub-input](https://ui.visantlabs.com/r/scrub-input.md): Número que se arrasta na horizontal, como nos editores gráficos. Use quando: Campo numérico arrastável em editor ou ferramenta de design, como tamanho, opacidade ou ângulo
- [search-field](https://ui.visantlabs.com/r/search-field.md): Campo de busca com debounce que não se limpa sozinho: negocia o texto local com o valor de fora por referência acordada.
- [searchable-select](https://ui.visantlabs.com/r/searchable-select.md): Combobox com busca em rótulo e keywords ocultos, grupos, e criação no lugar que sobrevive à falha.
- [section-intro](https://ui.visantlabs.com/r/section-intro.md): Abertura de dobra: rótulo, título grande e linha de contexto, com duas medidas de linha em vez de uma. Use quando: Abrir uma dobra de landing com rótulo, título grande e linha de contexto
- [segmented-control](https://ui.visantlabs.com/r/segmented-control.md): Alternador de poucas opções. Use quando: Alternar entre 2 a 5 opções que cabem na tela, como lista ou grade, ou o período de um gráfico
- [sfx-toggle](https://ui.visantlabs.com/r/sfx-toggle.md): Liga e desliga o som da casa em um ícone só: as ondas recolhem pro alto-falante, e o estado nulo antes da hidratação fica desenhado em vez de chutado. Use quando: Botão de ligar e desligar o som da interface, obrigatório quando o site usa sfx-bus
- [shader-ascii](https://ui.visantlabs.com/r/shader-ascii.md): Uma imagem redesenhada em caracteres, com seis jogos de glifo e as células mais cheias na cor da marca. Use quando: Redesenhar foto em caracteres na cor da marca, em hero tech ou capa de campanha
- [shader-chromatic-aberration](https://ui.visantlabs.com/r/shader-chromatic-aberration.md): Os canais de cor de uma imagem fora do registro, com a separação apontando para o cursor e crescendo longe do centro. Use quando: Foto com franja de cor de lente barata que reage ao cursor, em hero de música, moda ou tech
- [shader-crt](https://ui.visantlabs.com/r/shader-crt.md): Uma imagem num monitor de tubo, com linhas de varredura, vinheta, tela abaulada e uma faixa de luz que desce devagar. Use quando: Foto ou print dentro de um monitor de tubo, em landing de game, retrô ou produto tech
- [shader-dither](https://ui.visantlabs.com/r/shader-dither.md): Uma imagem pixelada em poucos tons da rampa da marca, com o dither de Bayer fazendo a passagem entre um tom e outro. Use quando: Foto com cara de jogo de 8 bits em poucos tons da marca, em landing de game, evento ou campanha retrô
- [shader-duotone](https://ui.visantlabs.com/r/shader-duotone.md): Uma imagem refeita em duas cores do tema, a mais escura nas sombras e a outra nas luzes, sem sair em negativo no escuro. Use quando: Foto de banco com a cara da marca em duas cores, em capa, hero ou card de campanha
- [shader-edge-detect](https://ui.visantlabs.com/r/shader-edge-detect.md): Só os contornos de uma imagem, traçados pelo filtro de Sobel na cor da marca, sozinhos ou por cima da foto. Use quando: Foto virando desenho a traço na cor da marca, em hero técnico, blueprint ou capa de manual
- [shader-film-grain](https://ui.visantlabs.com/r/shader-film-grain.md): Grão de película correndo sobre uma imagem a 24 quadros por segundo, em cinza ou com um grão por canal de cor. Use quando: Dar textura de filme a foto limpa de banco, em hero editorial, portfólio ou campanha
- [shader-glitch](https://ui.visantlabs.com/r/shader-glitch.md): Uma imagem que falha em faixas, com os canais de cor separados e linhas que pulam, e falha mais quando o mouse passa rápido. Use quando: Foto com falha digital que piora com o mouse rápido, em hero de música, evento ou tech
- [shader-halftone](https://ui.visantlabs.com/r/shader-halftone.md): Retícula de uma tinta só sobre uma imagem, em pontos, quadrados ou linhas, com uma lupa que amplia debaixo do cursor. Use quando: Foto com retícula de uma tinta e lupa sob o cursor, em editorial ou campanha com cara de jornal
- [shader-matrix-dither](https://ui.visantlabs.com/r/shader-matrix-dither.md): Uma imagem em 1 bit pelo dither de Bayer, só papel e tinta da marca, numa trama 2×2, 4×4 ou 8×8. Use quando: Foto em 1 bit com trama xadrez de Mac antigo, em hero tech, zine ou capa de produto
- [shader-neon](https://ui.visantlabs.com/r/shader-neon.md): Fios de luz que ondulam num campo liso na cor da marca e engrossam quando o ponteiro passa rápido. Use quando: Fundo abstrato de hero com fios de luz ondulando na cor da marca
- [shader-pixelate](https://ui.visantlabs.com/r/shader-pixelate.md): Uma imagem em blocos de cor chapada, com uma janela redonda que mostra a foto nítida debaixo do cursor. Use quando: Capa de lançamento a revelar ou teaser em que o cursor descobre a foto, em landing ou campanha
- [shader-posterize](https://ui.visantlabs.com/r/shader-posterize.md): Uma imagem reduzida a poucos tons por canal, com as transições suaves virando degraus chapados de serigrafia. Use quando: Foto em degraus chapados de cor com cara de cartaz serigrafado, em evento, música ou editorial
- [shader-riso](https://ui.visantlabs.com/r/shader-riso.md): Uma imagem impressa em duas tintas de risografia, com grão, ângulo próprio por tinta e registro fora do lugar. Use quando: Foto impressa em duas tintas de risografia com grão, em editorial, zine ou evento
- [shader-tunnel](https://ui.visantlabs.com/r/shader-tunnel.md): Túnel de anéis em espiral que corre pro centro na cor da marca e acelera com o ponteiro. Use quando: Fundo hipnótico de túnel em espiral pra abertura de evento, lançamento ou música
- [shader-upscale](https://ui.visantlabs.com/r/shader-upscale.md): Uma imagem pequena ampliada em bicúbico com nitidez, e uma linha que segue o cursor mostrando o antes em blocos. Use quando: Mostrar o ganho de uma ampliação lado a lado, em página de ferramenta de imagem ou de IA
- [shader-vhs](https://ui.visantlabs.com/r/shader-vhs.md): Uma imagem tocada de fita VHS, com a linha ondulando, um vinco que rasga, ruído no pé do quadro e a cor sangrando para o lado. Use quando: Foto com cara de fita VHS gasta, em clipe, capa de música ou campanha retrô anos 90
- [shader-voronoi](https://ui.visantlabs.com/r/shader-voronoi.md): Mosaico de células que derivam devagar com um núcleo aceso na cor da marca, empurradas pelo ponteiro. Use quando: Fundo de textura orgânica em células que derivam e reagem ao ponteiro, na cor da marca
- [showcase-card](https://ui.visantlabs.com/r/showcase-card.md): Card de serviço: mídia com selo de seta, título que cobre o card inteiro e a lista do que está incluso como texto, não como filtro. Use quando: Card de serviço ou pacote com mídia, título clicável e lista do que está incluso, em site de agência
- [side-nav](https://ui.visantlabs.com/r/side-nav.md): A navegação lateral de aplicação: colapsa por clique ou por ⌘/Ctrl+B, agrupa, marca a rota ativa e lembra o estado. Use quando: Navegação lateral de app ou dashboard, colapsável por atalho e com a rota ativa marcada
- [signature-pad](https://ui.visantlabs.com/r/signature-pad.md): Campo de assinatura com tinta que engrossa e afina como caneta de verdade, com desfazer e limpar. Use quando: Coletar assinatura à mão em contrato, aceite ou comprovante de entrega, com desfazer e limpar
- [sim-slider](https://ui.visantlabs.com/r/sim-slider.md): A dobra que deixa o visitante fazer a conta: controle acessível, projeção derivada do próprio valor, curva sem transição (pra não discordar do número) e premissa obrigatória por escrito. Use quando: Simulador de ROI ou economia numa landing: o visitante move o valor e vê a projeção com premissa
- [skeleton-rail](https://ui.visantlabs.com/r/skeleton-rail.md): Esqueletos com as medidas do que substituem (trilho, card, lista, texto, mídia), em quatro movimentos: pulse, shimmer, wave ou parado. Use quando: Placeholder com a medida exata de cards, listas ou mídia enquanto o conteúdo carrega
- [slide-to-confirm](https://ui.visantlabs.com/r/slide-to-confirm.md): Trilho que só confirma quando você arrasta o polegar até o fim, e volta com mola se soltar antes. Use quando: Confirmar pagamento, envio ou check-in no celular arrastando até o fim, sem toque acidental
- [slosh-slider](https://ui.visantlabs.com/r/slosh-slider.md): Um slider em que o preenchimento tem peso: arrastou rápido, a tinta passa do polegar, balança e assenta. Use quando: Slider de volume ou intensidade em que o preenchimento tem peso e balança ao soltar
- [slot-text](https://ui.visantlabs.com/r/slot-text.md): Número ou palavra que gira como rolo de caça-níquel e assenta da esquerda pra direita, sem passar do alvo. Use quando: Preço, placar ou contador que muda ao vivo girando como rolo de caça-níquel
- [spine-card](https://ui.visantlabs.com/r/spine-card.md): O retângulo que lê como objeto: lombada de luz na borda, tombo apoiado na base que endireita no hover, e capa em duotone que só ganha cor onde a atenção está. Use quando: Card de livro, disco ou produto que lê como objeto na estante, com lombada e tombo no hover
- [spring-dots](https://ui.visantlabs.com/r/spring-dots.md): Malha de pontos com mola: o ponteiro empurra, o atrito segura, e quem sai de casa acende na cor da marca. Use quando: Fundo de hero com malha de pontos que o ponteiro empurra e acende na cor da marca
- [status-ticker](https://ui.visantlabs.com/r/status-ticker.md): O texto que segura a pessoa durante uma espera longa, em quatro desenhos: linha com cronômetro, barra que varre, etapas e pulso. Use quando: Espera longa de IA ou processamento, segurando a pessoa com texto, etapas ou cronômetro
- [sticker-peel](https://ui.visantlabs.com/r/sticker-peel.md): Um adesivo que levanta o canto quando o mouse chega perto, arrasta pra mudar de lugar e, com um clique, descola inteiro da página. Use quando: Adesivo decorativo de marca que levanta o canto e descola, em landing ou página de campanha
- [sticky-filterbar](https://ui.visantlabs.com/r/sticky-filterbar.md): Barra de filtro que gruda abaixo do cabeçalho sem medir altura na mão e sem pular no scroll. Use quando: Barra de filtros que gruda sob o cabeçalho numa listagem longa de loja ou catálogo
- [store-status](https://ui.visantlabs.com/r/store-status.md): Aberto/fechado calculado no fuso da loja, não no do visitante. Use quando: Mostrar aberto ou fechado de loja física calculado no fuso dela, em site de varejo ou restaurante
- [streamgraph](https://ui.visantlabs.com/r/streamgraph.md): Gráfico de fluxo empilhado que mostra como a mistura de várias partes muda no tempo, com camadas que ligam e desligam. Use quando: Mostrar como a mistura de várias categorias muda no tempo, em dashboard ou relatório
- [swipe-actions](https://ui.visantlabs.com/r/swipe-actions.md): Lista em que a linha arrasta pro lado e mostra as ações, com o mesmo menu pra quem usa teclado. Use quando: Lista de triagem no celular, como inbox ou tarefas, arrastando a linha pra revelar ações
- [text-morph](https://ui.visantlabs.com/r/text-morph.md): Rótulo que vira a próxima palavra letra por letra, com as letras em comum deslizando e a largura indo junto numa mola. Use quando: Rótulo de botão ou status que vira outra palavra letra por letra, como Salvar pra Salvo
- [textura-beam](https://ui.visantlabs.com/r/textura-beam.md): Facho de luz que desce do alto com poeira boiando dentro e que mira o cursor. Use quando: Fundo de palco com um facho de luz e poeira que mira o cursor, em abertura de evento, lançamento ou música
- [textura-current](https://ui.visantlabs.com/r/textura-current.md): Linhas de correnteza com traços que descem pela água e abrem caminho em volta do cursor como de uma pedra. Use quando: Fundo de hero com linhas de correnteza que abrem caminho em volta do cursor, em landing de dados, clima ou viagem
- [textura-curtain](https://ui.visantlabs.com/r/textura-curtain.md): Cortina de dobras verticais que ondula onde o cursor passa, com a onda morrendo sozinha. Use quando: Fundo de cortina de dobras que ondula onde o cursor passa, em abertura de evento, teatro ou lançamento
- [textura-gaze](https://ui.visantlabs.com/r/textura-gaze.md): Grade de olhos cujas pupilas seguem o cursor e que piscam de vez em quando, cada um no seu tempo. Use quando: Fundo de hero com uma grade de olhos que seguem o cursor, em campanha, portfólio ou página de arte
- [textura-glow](https://ui.visantlabs.com/r/textura-glow.md): Brilho macio na cor da marca que segue o cursor sobre grão fino, esticando no rumo do movimento. Use quando: Fundo escuro de hero com um brilho da marca seguindo o cursor sobre grão fino, atrás de título curto
- [textura-magnet](https://ui.visantlabs.com/r/textura-magnet.md): Limalha de ferro em traços curtos que se alinham ao campo de um ímã preso ao cursor. Use quando: Fundo de hero com limalha de ferro que se alinha ao cursor, em landing tech, ciência ou portfólio
- [textura-pillars](https://ui.visantlabs.com/r/textura-pillars.md): Campo de pilares em pseudo-3D que sobem perto do cursor e descem ao sair. Use quando: Fundo de hero com um campo de pilares em pseudo-3D que sobem perto do cursor, em landing tech ou de arquitetura
- [textura-pinch](https://ui.visantlabs.com/r/textura-pinch.md): A imagem é sugada para o ponteiro como pele beliscada, e solta devagar quando ele sai. Use quando: Foto de produto ou retrato que a pessoa belisca com o cursor, em hero de moda, beleza ou campanha
- [textura-settle](https://ui.visantlabs.com/r/textura-settle.md): Areia rastelada que o cursor espalha e que assenta de volta devagar, com os sulcos reaparecendo. Use quando: Fundo calmo de areia rastelada que o cursor espalha e volta a assentar, em bem-estar, spa ou editorial
- [textura-sphere](https://ui.visantlabs.com/r/textura-sphere.md): Uma bolha de vidro passeia sob o ponteiro e amplia a imagem como olho de peixe. Use quando: Foto de produto com uma lupa de vidro sob o cursor, pra mostrar detalhe em hero ou página de produto
- [textura-tiles](https://ui.visantlabs.com/r/textura-tiles.md): A imagem em ladrilhos que encolhem, se afastam e se inclinam perto do ponteiro. Use quando: Foto quebrada em ladrilhos que se abrem perto do cursor, em portfólio, capa de projeto ou hero de arquitetura
- [textura-twist](https://ui.visantlabs.com/r/textura-twist.md): A imagem gira em redemoinho em volta do ponteiro e se desfaz devagar quando ele sai. Use quando: Foto que gira em redemoinho sob o cursor, em hero de música, evento ou campanha psicodélica
- [textura-warp](https://ui.visantlabs.com/r/textura-warp.md): A imagem escorre em ruído como reflexo na água, e o ponteiro rápido agita a superfície. Use quando: Foto que escorre como reflexo na água e agita com o mouse rápido, em hero editorial, música ou moda
- [textura-watch](https://ui.visantlabs.com/r/textura-watch.md): Grade de mostradores de relógio cujos ponteiros apontam para o cursor; o curto chega atrasado, como hora. Use quando: Fundo de hero lúdico com uma grade de relógios que apontam pro cursor, em landing de produto ou evento
- [tilt-card](https://ui.visantlabs.com/r/tilt-card.md): O card que inclina em 3D seguindo o mouse, com um brilho que corre pela superfície. Use quando: Card de foto, capa ou cartão de membro que inclina forte em 3D com brilho sob o mouse
- [time-dial](https://ui.visantlabs.com/r/time-dial.md): Mostrador de 24 horas que você gira com o dedo ou com as setas, com a faixa do expediente desenhada no aro. Use quando: Escolher hora num mostrador de 24h com o expediente marcado, em agenda ou conversão de fuso
- [timeline](https://ui.visantlabs.com/r/timeline.md): Linha do tempo com progresso amarrado ao scroll. Use quando: Changelog, história da empresa ou processo longo com progresso amarrado ao scroll
- [toast-stack](https://ui.visantlabs.com/r/toast-stack.md): Avisos que se empilham no canto e abrem em leque quando o ponteiro chega, com o carregando que vira feito no lugar. Use quando: Avisos passageiros empilhados no canto, com o carregando que vira feito no lugar
- [turbulence-field](https://ui.visantlabs.com/r/turbulence-field.md): Ruído animado em SVG para dar vida a uma superfície parada. Use quando: Fundo de névoa leve em tile de espera, inclusive vários na mesma grade, sem WebGL
- [vintage-button](https://ui.visantlabs.com/r/vintage-button.md): Botão de painel que afunda no clique. Use quando: Botão de painel que afunda no clique, em app de áudio, synth ou ferramenta com cara de hardware
- [vintage-command-palette](https://ui.visantlabs.com/r/vintage-command-palette.md): Paleta de comandos no vocabulário do painel. Use quando: Paleta de comandos por teclado dentro de app no kit vintage, como lista de efeitos ou presets
- [vintage-eq](https://ui.visantlabs.com/r/vintage-eq.md): Banco de faders com curva desenhada. Use quando: Equalizador gráfico de bandas fixas em app de áudio, cada banda um fader com a curva desenhada
- [vintage-knob](https://ui.visantlabs.com/r/vintage-knob.md): Potenciômetro com arraste vertical e trava de curso. Use quando: Ajustar parâmetro contínuo num painel de áudio onde vários knobs dividem pouco espaço
- [vintage-large-knob](https://ui.visantlabs.com/r/vintage-large-knob.md): O irmão grande: marcação de escala e leitura de valor. Use quando: Parâmetro principal do painel que pede escala marcada e leitura do valor, como ganho ou master
- [vintage-led](https://ui.visantlabs.com/r/vintage-led.md): LED de painel com halo. Use quando: Indicar estado on/off num painel do kit vintage, como clip, gravando ou ligado
- [vintage-meter](https://ui.visantlabs.com/r/vintage-meter.md): VU analógico com balística de ponteiro. Use quando: Mostrar nível de sinal ao vivo com ponteiro de VU num painel de áudio
- [vintage-oscilloscope](https://ui.visantlabs.com/r/vintage-oscilloscope.md): Traço de osciloscópio alimentado por um buffer de amostras. Use quando: Desenhar forma de onda ao vivo a partir de um buffer de áudio, em synth ou analisador
- [vintage-parametric-eq](https://ui.visantlabs.com/r/vintage-parametric-eq.md): O EQ paramétrico: cada banda é um sino, e a curva grossa é a soma em dB. Use quando: Editar curva de EQ com bandas móveis, Q na roda e bypass, em DAW ou plugin web
- [vintage-slider](https://ui.visantlabs.com/r/vintage-slider.md): Fader de console com curso e trilho gravados. Use quando: Fader de console pra volume ou mix em interface de áudio do kit vintage
- [vintage-soundboard-pad](https://ui.visantlabs.com/r/vintage-soundboard-pad.md): Pad de disparo com estado aceso e retorno tátil. Use quando: Disparar sample ou efeito sonoro com toque, numa grade de pads tipo MPC
- [vintage-toggle](https://ui.visantlabs.com/r/vintage-toggle.md): Chave de duas posições com estalo visual. Use quando: Ligar e desligar função num painel de áudio, como bypass ou phantom, com cara de chave física
- [vintage-tv-frame](https://ui.visantlabs.com/r/vintage-tv-frame.md): Moldura de tubo com curvatura e brilho de varredura. Use quando: Emoldurar vídeo, preview ou tela em interface retrô com cara de tubo CRT
- [vintage-xy-pad](https://ui.visantlabs.com/r/vintage-xy-pad.md): Campo de dois eixos para controlar dois parâmetros num gesto só. Use quando: Controlar dois parâmetros juntos num gesto só, como filtro e ressonância, em app de áudio
- [voice-note](https://ui.visantlabs.com/r/voice-note.md): Nota de voz de chat com forma de onda, play e pausa, e busca clicando ou arrastando na onda. Use quando: Player de nota de voz em chat ou mensagem, com onda, play e busca arrastando
- [wallet-stack](https://ui.visantlabs.com/r/wallet-stack.md): Carteira de cartões empilhados em que um sobe pra mostrar saldo e movimento e os outros se recolhem no pé. Use quando: Carteira de cartões em app fintech: um sobe com saldo e movimento, os outros recolhem
- [working-glyph](https://ui.visantlabs.com/r/working-glyph.md): Ícone que trabalha enquanto o sistema trabalha: picareta, martelo, engrenagem, pincel ou faísca, e o brilho corre só no traço. Use quando: Ícone pequeno mostrando que algo trabalha, ao lado de rótulo ou botão, numa espera curta