---
name: "@visant"
slug: "visant"
description: "Brand-aware React components, blocks and app kits from Visant Labs: tokens, motion and analog-sound feedback that dress in your brand."
category: "Animated components"
tags: ["3d", "animation", "audio", "auth", "blocks", "buttons", "cards", "charts", "forms", "glassmorphism", "hooks", "icons", "loaders", "maps", "marketing", "media", "navigation", "overlays", "payments", "retro", "tables", "theming"]
framework: "react"
license: null
author: null
website: "https://ui.visantlabs.com"
github: null
registry: "https://ui.visantlabs.com/r/registry.json"
pro: false
pro_url: null
github_stars: null
component_count: 147
generated_at: "2026-10-27T06:34:08.542Z"
---

# @visant

Brand-aware React components, blocks and app kits from Visant Labs: tokens, motion and analog-sound feedback that dress in your brand.

## Links

- Website: https://ui.visantlabs.com
- Registry JSON: https://ui.visantlabs.com/r/registry.json
- Directory page: https://sh4dcn.netlify.app/registry/visant
- This file: https://sh4dcn.netlify.app/md/visant.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://ui.visantlabs.com/r/registry.json
pnpm dlx shadcn@latest add https://ui.visantlabs.com/r/registry.json
bunx shadcn@latest add https://ui.visantlabs.com/r/registry.json
# fetch the raw registry index
curl -s https://ui.visantlabs.com/r/registry.json
```

## Components (147)

| name | type | description | install |
| --- | --- | --- | --- |
| vintage-theme | registry:theme | O tema do kit de áudio, o contraponto escuro aos temas de marca. | `npx shadcn@latest add https://ui.visantlabs.com/r/vintage-theme.json` |
| vintage-base | registry:base | A fundação do kit: variáveis de painel, texturas e as regras em @layer. | `npx shadcn@latest add https://ui.visantlabs.com/r/vintage-base.json` |
| use-knob-drag | registry:hook | O gesto de arrastar um knob isolado do desenho: pointer capture, trava de curso e passo fino com shift. | `npx shadcn@latest add https://ui.visantlabs.com/r/use-knob-drag.json` |
| use-media-query | registry:hook | Media query como estado de React, via useSyncExternalStore: leitura síncrona no primeiro render, sem piscar, e segura em SSR. | `npx shadcn@latest add https://ui.visantlabs.com/r/use-media-query.json` |
| vintage-button | registry:ui | Botão de painel que afunda no clique. | `npx shadcn@latest add https://ui.visantlabs.com/r/vintage-button.json` |
| vintage-slider | registry:ui | Fader de console com curso e trilho gravados. | `npx shadcn@latest add https://ui.visantlabs.com/r/vintage-slider.json` |
| vintage-meter | registry:ui | VU analógico com balística de ponteiro. | `npx shadcn@latest add https://ui.visantlabs.com/r/vintage-meter.json` |
| vintage-knob | registry:ui | Potenciômetro com arraste vertical e trava de curso. | `npx shadcn@latest add https://ui.visantlabs.com/r/vintage-knob.json` |
| vintage-large-knob | registry:ui | O irmão grande: marcação de escala e leitura de valor. | `npx shadcn@latest add https://ui.visantlabs.com/r/vintage-large-knob.json` |
| vintage-toggle | registry:ui | Chave de duas posições com estalo visual. | `npx shadcn@latest add https://ui.visantlabs.com/r/vintage-toggle.json` |
| vintage-eq | registry:ui | Banco de faders com curva desenhada. | `npx shadcn@latest add https://ui.visantlabs.com/r/vintage-eq.json` |
| vintage-parametric-eq | registry:ui | O EQ paramétrico: cada banda é um sino, e a curva grossa é a soma em dB. Arraste um ponto, roda muda o Q, e o BYPASS achata sem perder os valores. | `npx shadcn@latest add https://ui.visantlabs.com/r/vintage-parametric-eq.json` |
| vintage-led | registry:ui | LED de painel com halo. Quatro cores, estado on/off. | `npx shadcn@latest add https://ui.visantlabs.com/r/vintage-led.json` |
| vintage-command-palette | registry:ui | Paleta de comandos no vocabulário do painel. | `npx shadcn@latest add https://ui.visantlabs.com/r/vintage-command-palette.json` |
| vintage-tv-frame | registry:ui | Moldura de tubo com curvatura e brilho de varredura. | `npx shadcn@latest add https://ui.visantlabs.com/r/vintage-tv-frame.json` |
| vintage-soundboard-pad | registry:ui | Pad de disparo com estado aceso e retorno tátil. | `npx shadcn@latest add https://ui.visantlabs.com/r/vintage-soundboard-pad.json` |
| vintage-xy-pad | registry:ui | Campo de dois eixos para controlar dois parâmetros num gesto só. | `npx shadcn@latest add https://ui.visantlabs.com/r/vintage-xy-pad.json` |
| vintage-oscilloscope | registry:ui | Traço de osciloscópio alimentado por um buffer de amostras. | `npx shadcn@latest add https://ui.visantlabs.com/r/vintage-oscilloscope.json` |
| marquee | registry:ui | Faixa infinita em GSAP com três modos de scroll: empurrar o ritmo, virar esteira do scroll ou amarrar a posição à rolagem. | `npx shadcn@latest add https://ui.visantlabs.com/r/marquee.json` |
| logo-wall | registry:ui | 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 n… | `npx shadcn@latest add https://ui.visantlabs.com/r/logo-wall.json` |
| rail | registry:ui | Trilho horizontal com snap: anda por arrasto, Shift + roda, setas e teclado; as setas somem nas pontas. | `npx shadcn@latest add https://ui.visantlabs.com/r/rail.json` |
| reels-rail | registry:ui | O trilho de vídeo vertical: cartões 9:16 com encaixe, tocando o do meio ou o que está sob o cursor. Som opcional, um card por vez, e fora da tela pausa tudo. | `npx shadcn@latest add https://ui.visantlabs.com/r/reels-rail.json` |
| plate | registry:ui | A placa onde a foto de catálogo senta. Resolve o recorte branco sobre fundo colorido. | `npx shadcn@latest add https://ui.visantlabs.com/r/plate.json` |
| chip | registry:ui | Pastilha de filtro com contagem; a faceta sem resultado apaga em vez de mostrar zero. | `npx shadcn@latest add https://ui.visantlabs.com/r/chip.json` |
| sticky-filterbar | registry:ui | Barra de filtro que gruda abaixo do cabeçalho sem medir altura na mão e sem pular no scroll. | `npx shadcn@latest add https://ui.visantlabs.com/r/sticky-filterbar.json` |
| store-status | registry:ui | Aberto/fechado calculado no fuso da loja, não no do visitante. Quem está do outro lado do mundo vê a resposta certa. | `npx shadcn@latest add https://ui.visantlabs.com/r/store-status.json` |
| measure-picker | registry:ui | Escolher por medida e receber a recomendação. A faixa traduz o número em produto. | `npx shadcn@latest add https://ui.visantlabs.com/r/measure-picker.json` |
| motion-layer | registry:lib | O ciclo de scroll do editor Shopify em GSAP/ScrollTrigger, com limpeza de instância. | `npx shadcn@latest add https://ui.visantlabs.com/r/motion-layer.json` |
| kanban | registry:block | Board com drag-and-drop, seleção por marquee sobre o vazio e multi-seleção com shift/ctrl. | `npx shadcn@latest add https://ui.visantlabs.com/r/kanban.json` |
| data-table | registry:ui | Tabela densa: ordenação, seleção, edição inline e menu de contexto. Hoje acoplada a Next (next-auth + next/navigation) — roda em app Next, não nesta vitrine. | `npx shadcn@latest add https://ui.visantlabs.com/r/data-table.json` |
| segmented-control | registry:ui | Alternador de poucas opções. Substitui um select quando as opções cabem na tela. | `npx shadcn@latest add https://ui.visantlabs.com/r/segmented-control.json` |
| inline-edit | registry:ui | Editar onde se lê. Enter salva, Esc cancela, o valor só troca depois que a promessa resolve. | `npx shadcn@latest add https://ui.visantlabs.com/r/inline-edit.json` |
| auth-button | registry:ui | O canto da conta nos três estados. Enquanto a sessão não responde ele não escreve “Entrar” — e não muda de tamanho quando ela chega. | `npx shadcn@latest add https://ui.visantlabs.com/r/auth-button.json` |
| profile-form | registry:ui | Editar o perfil com foto, nome e e-mail verificado. Quando não dá pra salvar, o motivo aparece no campo — não num toast. | `npx shadcn@latest add https://ui.visantlabs.com/r/profile-form.json` |
| timeline | registry:ui | Linha do tempo com progresso amarrado ao scroll. | `npx shadcn@latest add https://ui.visantlabs.com/r/timeline.json` |
| assignee-stack | registry:ui | Pilha de responsáveis com excedente contado. Iniciais quando não há avatar. | `npx shadcn@latest add https://ui.visantlabs.com/r/assignee-stack.json` |
| repulsive-hover | registry:ui | O elemento foge do cursor com mola. Gesto de hero, fora de formulário. | `npx shadcn@latest add https://ui.visantlabs.com/r/repulsive-hover.json` |
| smooth-scroll-provider | registry:lib | Lenis + GSAP num relógio só, com bail-out em prefers-reduced-motion. A instância sai por callback. | `npx shadcn@latest add https://ui.visantlabs.com/r/smooth-scroll-provider.json` |
| glitch-chars | registry:ui | Caracteres que trocam sozinhos, em cinco sotaques (símbolos, blocos, braille, binário, hex), ou decodificando até virar uma palavra. | `npx shadcn@latest add https://ui.visantlabs.com/r/glitch-chars.json` |
| status-ticker | registry:ui | O texto que segura a pessoa durante uma espera longa, em quatro desenhos: linha com cronômetro, barra que varre, etapas e pulso. | `npx shadcn@latest add https://ui.visantlabs.com/r/status-ticker.json` |
| turbulence-field | registry:ui | Ruído animado em SVG para dar vida a uma superfície parada. | `npx shadcn@latest add https://ui.visantlabs.com/r/turbulence-field.json` |
| working-glyph | registry:ui | Ícone que trabalha enquanto o sistema trabalha: picareta, martelo, engrenagem, pincel ou faísca, e o brilho corre só no traço. | `npx shadcn@latest add https://ui.visantlabs.com/r/working-glyph.json` |
| paper-shuttle | registry:ui | Progresso com narrativa de papel passando pela máquina. | `npx shadcn@latest add https://ui.visantlabs.com/r/paper-shuttle.json` |
| masonry-gallery | registry:ui | Mosaico por round-robin: anexar página nova não reordena o que já estava na tela. | `npx shadcn@latest add https://ui.visantlabs.com/r/masonry-gallery.json` |
| scrub-input | registry:ui | Número que se arrasta na horizontal, como nos editores gráficos. Teclado continua funcionando. | `npx shadcn@latest add https://ui.visantlabs.com/r/scrub-input.json` |
| grid-dots | registry:ui | Malha de pontos de fundo, o papel milimetrado que dá profundidade sem competir. | `npx shadcn@latest add https://ui.visantlabs.com/r/grid-dots.json` |
| drop-overlay | registry:ui | A camada que aparece quando um arquivo está sendo arrastado sobre a área. | `npx shadcn@latest add https://ui.visantlabs.com/r/drop-overlay.json` |
| brand-theme | registry:lib | Provider e hook que aplicam em runtime o tema compilado de uma brand guideline. Uma folha de estilo só, trocada sem recarregar a página. | `npx shadcn@latest add https://ui.visantlabs.com/r/brand-theme.json` |
| brand-selector | registry:ui | Seletor de marca com prévia ao percorrer: paleta, par tipográfico e completude do vault na linha. Aplica o tema da marca escolhida ao app inteiro. | `npx shadcn@latest add https://ui.visantlabs.com/r/brand-selector.json` |
| section-intro | registry:ui | Abertura de dobra: rótulo, título grande e linha de contexto, com duas medidas de linha em vez de uma. | `npx shadcn@latest add https://ui.visantlabs.com/r/section-intro.json` |
| cta-surface | registry:ui | A superfície de conversão em três proporções (barra, painel, card). O botão herda o contraste do tom em vez de receber cor. | `npx shadcn@latest add https://ui.visantlabs.com/r/cta-surface.json` |
| showcase-card | registry:ui | 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. | `npx shadcn@latest add https://ui.visantlabs.com/r/showcase-card.json` |
| step-cards | registry:block | Como funciona, em passos numerados. Sai como lista ordenada no HTML, e a arte de cada passo entra por slot. | `npx shadcn@latest add https://ui.visantlabs.com/r/step-cards.json` |
| testimonial-wall | registry:block | 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 faix… | `npx shadcn@latest add https://ui.visantlabs.com/r/testimonial-wall.json` |
| quote-block | registry:ui | O depoimento único, em tamanho de dobra: a citação vem primeiro e em corpo de manchete, a atribuição entra depois como assinatura. | `npx shadcn@latest add https://ui.visantlabs.com/r/quote-block.json` |
| erase-field | registry:ui | 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. | `npx shadcn@latest add https://ui.visantlabs.com/r/erase-field.json` |
| spring-dots | registry:ui | Malha de pontos com mola: o ponteiro empurra, o atrito segura, e quem sai de casa acende na cor da marca. | `npx shadcn@latest add https://ui.visantlabs.com/r/spring-dots.json` |
| sfx-bus | registry:lib | 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 primeir… | `npx shadcn@latest add https://ui.visantlabs.com/r/sfx-bus.json` |
| sfx-toggle | registry:ui | 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. | `npx shadcn@latest add https://ui.visantlabs.com/r/sfx-toggle.json` |
| count-up | registry:ui | 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 parse… | `npx shadcn@latest add https://ui.visantlabs.com/r/count-up.json` |
| use-pointer-parallax | registry:hook | Escreve --px e --py uma vez por quadro e deixa o CSS decidir a profundidade de cada objeto. Só em ponteiro fino, volta ao repouso ao sair da janela. | `npx shadcn@latest add https://ui.visantlabs.com/r/use-pointer-parallax.json` |
| fold-motion | registry:lib | Hierarquia de entradas por dobra: rise, drift, mask, settle, climax, invert e mist em vez de trinta entradas iguais. O esconderijo é aplicado pelo componente, … | `npx shadcn@latest add https://ui.visantlabs.com/r/fold-motion.json` |
| measure-bar | registry:ui | Nenhum número sem régua: valor, qualificador, evidência e rótulo nessa ordem. Sem denominador a barra não desenha, e o estado desconhecido fica tracejado em ve… | `npx shadcn@latest add https://ui.visantlabs.com/r/measure-bar.json` |
| spine-card | registry:ui | 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á. | `npx shadcn@latest add https://ui.visantlabs.com/r/spine-card.json` |
| cover-art | registry:ui | 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. Zero byte de imagem,… | `npx shadcn@latest add https://ui.visantlabs.com/r/cover-art.json` |
| empty-state | registry:ui | 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. | `npx shadcn@latest add https://ui.visantlabs.com/r/empty-state.json` |
| skeleton-rail | registry:ui | Esqueletos com as medidas do que substituem (trilho, card, lista, texto, mídia), em quatro movimentos: pulse, shimmer, wave ou parado. | `npx shadcn@latest add https://ui.visantlabs.com/r/skeleton-rail.json` |
| use-local-search | registry:hook | 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. | `npx shadcn@latest add https://ui.visantlabs.com/r/use-local-search.json` |
| line-reveal | registry:ui | 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 pr… | `npx shadcn@latest add https://ui.visantlabs.com/r/line-reveal.json` |
| gleam | registry:ui | 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. Quatro números por quadro no JS, o desenho in… | `npx shadcn@latest add https://ui.visantlabs.com/r/gleam.json` |
| sim-slider | registry:ui | 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 premis… | `npx shadcn@latest add https://ui.visantlabs.com/r/sim-slider.json` |
| magnetic-cta | registry:ui | 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. No toque e sob reduced-moti… | `npx shadcn@latest add https://ui.visantlabs.com/r/magnetic-cta.json` |
| nav-drawer | registry:ui | O menu mobile feito uma vez direito, em dois desenhos: gaveta lateral ou página inteira brutalista com imagem. Foco preso, Escape, retorno do foco e trava de r… | `npx shadcn@latest add https://ui.visantlabs.com/r/nav-drawer.json` |
| side-nav | registry:ui | A navegação lateral de aplicação: colapsa por clique ou por ⌘/Ctrl+B, agrupa, marca a rota ativa e lembra o estado. O rótulo vira sr-only quando fecha, nunca s… | `npx shadcn@latest add https://ui.visantlabs.com/r/side-nav.json` |
| pinned-scene | registry:ui | A dobra que prende a arte e avança em passos. O pin é position:sticky, não ScrollTrigger.pin — o GSAP entra só pra relatar progresso em --p, --sp e --near, sem… | `npx shadcn@latest add https://ui.visantlabs.com/r/pinned-scene.json` |
| photo-frame | registry:ui | A moldura que revela a foto: a máscara abre, a foto assenta mais devagar que a máscara, e opcionalmente deriva na rolagem. Proporção declarada pra não haver sa… | `npx shadcn@latest add https://ui.visantlabs.com/r/photo-frame.json` |
| photo-split | registry:ui | 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. | `npx shadcn@latest add https://ui.visantlabs.com/r/photo-split.json` |
| photo-flip | registry:ui | A foto atravessa da grade para a tela cheia — mesmo nó do DOM, reparentado e animado por GSAP Flip com ease-in-out. A vaga segura a proporção pra grade não des… | `npx shadcn@latest add https://ui.visantlabs.com/r/photo-flip.json` |
| photo-compare | registry:ui | A cortina entre o antes e o depois: a camada de cima é RECORTADA, nunca redimensionada, então as duas fotos ficam na mesma escala. O arrasto, o teclado e o lei… | `npx shadcn@latest add https://ui.visantlabs.com/r/photo-compare.json` |
| book-3d | registry:ui | O item de catálogo como objeto: capa dura em WebGL com lombada curva, espessura vinda da contagem de páginas e praça. Cor derivada dos tokens da marca e do mat… | `npx shadcn@latest add https://ui.visantlabs.com/r/book-3d.json` |
| book-shelf | registry:ui | 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. | `npx shadcn@latest add https://ui.visantlabs.com/r/book-shelf.json` |
| carousel-3d | registry:ui | 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. Aposentado da listagem… | `npx shadcn@latest add https://ui.visantlabs.com/r/carousel-3d.json` |
| css-color | registry:lib | 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. | `npx shadcn@latest add https://ui.visantlabs.com/r/css-color.json` |
| ink-wordmark | registry:ui | 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 es… | `npx shadcn@latest add https://ui.visantlabs.com/r/ink-wordmark.json` |
| fog-hero | registry:block | 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 do… | `npx shadcn@latest add https://ui.visantlabs.com/r/fog-hero.json` |
| lathe-object | registry:ui | 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 … | `npx shadcn@latest add https://ui.visantlabs.com/r/lathe-object.json` |
| mist-text | registry:ui | 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… | `npx shadcn@latest add https://ui.visantlabs.com/r/mist-text.json` |
| mist-swap | registry:ui | 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 … | `npx shadcn@latest add https://ui.visantlabs.com/r/mist-swap.json` |
| dot-cursor | registry:ui | 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… | `npx shadcn@latest add https://ui.visantlabs.com/r/dot-cursor.json` |
| mist-dialog | registry:ui | 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/… | `npx shadcn@latest add https://ui.visantlabs.com/r/mist-dialog.json` |
| fog-tree | registry:ui | 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… | `npx shadcn@latest add https://ui.visantlabs.com/r/fog-tree.json` |
| fog-garden | registry:block | 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 d… | `npx shadcn@latest add https://ui.visantlabs.com/r/fog-garden.json` |
| activity-heatmap | registry:ui | Um quadrado por dia mostra o ritmo de meses de trabalho, com bolha que desliza entre os dias e teclado de calendário. | `npx shadcn@latest add https://ui.visantlabs.com/r/activity-heatmap.json` |
| billing-toggle | registry:ui | Interruptor mensal e anual com o selo de desconto que vira recibo quando o anual é escolhido, e o preço rolando junto. | `npx shadcn@latest add https://ui.visantlabs.com/r/billing-toggle.json` |
| card-stack | registry:ui | Pilha de cards em que o de cima vai pro fundo quando você arrasta e solta, como baralho de verdade. | `npx shadcn@latest add https://ui.visantlabs.com/r/card-stack.json` |
| confirm-morph | registry:ui | Botão de apagar que vira a pergunta no próprio lugar, depois o andamento e o resultado com desfazer. | `npx shadcn@latest add https://ui.visantlabs.com/r/confirm-morph.json` |
| elastic-slider | registry:ui | Slider que estica feito elástico quando você puxa além do limite e volta com a velocidade da soltura. | `npx shadcn@latest add https://ui.visantlabs.com/r/elastic-slider.json` |
| expandable-card | registry:ui | Card de resumo que cresce pros lados e pra baixo ao abrir, e rola só a palavra que mudou no resumo. | `npx shadcn@latest add https://ui.visantlabs.com/r/expandable-card.json` |
| expanding-search | registry:ui | Busca que fica guardada num ícone de lupa e só abre o campo quando alguém vai mesmo buscar. | `npx shadcn@latest add https://ui.visantlabs.com/r/expanding-search.json` |
| gauge | registry:ui | 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. | `npx shadcn@latest add https://ui.visantlabs.com/r/gauge.json` |
| hold-to-confirm | registry:ui | Botão que só confirma se você segurar, com o preenchimento enchendo e voltando se soltar antes. | `npx shadcn@latest add https://ui.visantlabs.com/r/hold-to-confirm.json` |
| icon-morph | registry:ui | Ícone de dois estados que vira o outro em vez de trocar, como menu e fechar ou copiar e copiado. | `npx shadcn@latest add https://ui.visantlabs.com/r/icon-morph.json` |
| morph-select | registry:ui | Select em que o próprio gatilho cresce e vira a lista, sem uma segunda caixa aparecendo embaixo. | `npx shadcn@latest add https://ui.visantlabs.com/r/morph-select.json` |
| slot-text | registry:ui | Número ou palavra que gira como rolo de caça-níquel e assenta da esquerda pra direita, sem passar do alvo. | `npx shadcn@latest add https://ui.visantlabs.com/r/slot-text.json` |
| swipe-actions | registry:ui | Lista em que a linha arrasta pro lado e mostra as ações, com o mesmo menu pra quem usa teclado. | `npx shadcn@latest add https://ui.visantlabs.com/r/swipe-actions.json` |
| text-morph | registry:ui | Rótulo que vira a próxima palavra letra por letra, com as letras em comum deslizando e a largura indo junto numa mola. | `npx shadcn@latest add https://ui.visantlabs.com/r/text-morph.json` |
| toast-stack | registry:ui | Avisos que se empilham no canto e abrem em leque quando o ponteiro chega, com o carregando que vira feito no lugar. | `npx shadcn@latest add https://ui.visantlabs.com/r/toast-stack.json` |
| dynamic-island | registry:ui | A pílula que mostra a atividade em curso e cresce no lugar com os controles quando alguém toca nela. | `npx shadcn@latest add https://ui.visantlabs.com/r/dynamic-island.json` |
| folding-bill | registry:ui | Uma conta que dobra em três como papel e abre quando você puxa ou toca, com o total sempre à vista no cabeçalho. | `npx shadcn@latest add https://ui.visantlabs.com/r/folding-bill.json` |
| heat-word | registry:ui | Uma grade de gotas ou uma palavra que derrete num mapa de calor por onde o cursor passa, pintada com as cores da marca. | `npx shadcn@latest add https://ui.visantlabs.com/r/heat-word.json` |
| liquid-toggle | registry:ui | Um interruptor cuja bolinha escorre como gota de um lado pro outro, esticando no caminho e se recolhendo ao chegar. | `npx shadcn@latest add https://ui.visantlabs.com/r/liquid-toggle.json` |
| magnetic-select | registry:ui | 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. | `npx shadcn@latest add https://ui.visantlabs.com/r/magnetic-select.json` |
| magnify-dock | registry:ui | 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. | `npx shadcn@latest add https://ui.visantlabs.com/r/magnify-dock.json` |
| slosh-slider | registry:ui | Um slider em que o preenchimento tem peso: arrastou rápido, a tinta passa do polegar, balança e assenta. | `npx shadcn@latest add https://ui.visantlabs.com/r/slosh-slider.json` |
| tilt-card | registry:ui | O card que inclina em 3D seguindo o mouse, com um brilho que corre pela superfície. | `npx shadcn@latest add https://ui.visantlabs.com/r/tilt-card.json` |
| eclipse-switch | registry:ui | Chave de tema claro e escuro em que a lua cobre o sol num eclipse, sem mexer na página por conta própria. | `npx shadcn@latest add https://ui.visantlabs.com/r/eclipse-switch.json` |
| black-hole | registry:ui | 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. | `npx shadcn@latest add https://ui.visantlabs.com/r/black-hole.json` |
| countdown | registry:ui | Contagem regressiva em que cada dígito gira pelo caminho curto e vira o aviso de ao vivo quando chega a zero. | `npx shadcn@latest add https://ui.visantlabs.com/r/countdown.json` |
| cover-flow | registry:ui | Uma prateleira de capas em perspectiva: a da vez fica de frente, as vizinhas giram de lado e você arrasta ou joga pra trocar. | `npx shadcn@latest add https://ui.visantlabs.com/r/cover-flow.json` |
| date-reel | registry:ui | Seletor de data em rolos de dia, mês e ano que encaixam sozinhos, como no telefone. | `npx shadcn@latest add https://ui.visantlabs.com/r/date-reel.json` |
| eye-tracker | registry:ui | 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 cli… | `npx shadcn@latest add https://ui.visantlabs.com/r/eye-tracker.json` |
| orbit-menu | registry:ui | Botão que abre as ações em arco ao redor dele, com mola, pra escolher arrastando o dedo ou clicando. | `npx shadcn@latest add https://ui.visantlabs.com/r/orbit-menu.json` |
| page-curl | registry:ui | 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. | `npx shadcn@latest add https://ui.visantlabs.com/r/page-curl.json` |
| pull-to-refresh | registry:ui | Painel que estica quando você puxa pra baixo, conta os pontos até a marca e gira enquanto atualiza. | `npx shadcn@latest add https://ui.visantlabs.com/r/pull-to-refresh.json` |
| reactions | registry:ui | Barra de reações em que a contagem rola pro lado que andou e o ícone dá um pulinho quando você reage. | `npx shadcn@latest add https://ui.visantlabs.com/r/reactions.json` |
| signature-pad | registry:ui | Campo de assinatura com tinta que engrossa e afina como caneta de verdade, com desfazer e limpar. | `npx shadcn@latest add https://ui.visantlabs.com/r/signature-pad.json` |
| slide-to-confirm | registry:ui | Trilho que só confirma quando você arrasta o polegar até o fim, e volta com mola se soltar antes. | `npx shadcn@latest add https://ui.visantlabs.com/r/slide-to-confirm.json` |
| sticker-peel | registry:ui | 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. | `npx shadcn@latest add https://ui.visantlabs.com/r/sticker-peel.json` |
| streamgraph | registry:ui | Gráfico de fluxo empilhado que mostra como a mistura de várias partes muda no tempo, com camadas que ligam e desligam. | `npx shadcn@latest add https://ui.visantlabs.com/r/streamgraph.json` |
| time-dial | registry:ui | Mostrador de 24 horas que você gira com o dedo ou com as setas, com a faixa do expediente desenhada no aro. | `npx shadcn@latest add https://ui.visantlabs.com/r/time-dial.json` |
| voice-note | registry:ui | Nota de voz de chat com forma de onda, play e pausa, e busca clicando ou arrastando na onda. | `npx shadcn@latest add https://ui.visantlabs.com/r/voice-note.json` |
| wallet-stack | registry:ui | Carteira de cartões empilhados em que um sobe pra mostrar saldo e movimento e os outros se recolhem no pé. | `npx shadcn@latest add https://ui.visantlabs.com/r/wallet-stack.json` |
| shader-ascii | registry:ui | Uma imagem redesenhada em caracteres, com seis jogos de glifo e as células mais cheias na cor da marca. | `npx shadcn@latest add https://ui.visantlabs.com/r/shader-ascii.json` |
| shader-halftone | registry:ui | Retícula de uma tinta só sobre uma imagem, em pontos, quadrados ou linhas, com uma lupa que amplia debaixo do cursor. | `npx shadcn@latest add https://ui.visantlabs.com/r/shader-halftone.json` |
| shader-neon | registry:ui | Fios de luz que ondulam num campo liso na cor da marca e engrossam quando o ponteiro passa rápido. | `npx shadcn@latest add https://ui.visantlabs.com/r/shader-neon.json` |
| shader-riso | registry:ui | Uma imagem impressa em duas tintas de risografia, com grão, ângulo próprio por tinta e registro fora do lugar. | `npx shadcn@latest add https://ui.visantlabs.com/r/shader-riso.json` |
| shader-tunnel | registry:ui | Túnel de anéis em espiral que corre pro centro na cor da marca e acelera com o ponteiro. | `npx shadcn@latest add https://ui.visantlabs.com/r/shader-tunnel.json` |
| shader-voronoi | registry:ui | Mosaico de células que derivam devagar com um núcleo aceso na cor da marca, empurradas pelo ponteiro. | `npx shadcn@latest add https://ui.visantlabs.com/r/shader-voronoi.json` |
| anatomia | registry:ui | 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. A figu… | `npx shadcn@latest add https://ui.visantlabs.com/r/anatomia.json` |
| anatomia-como-sobe | registry:lib | 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. | `npx shadcn@latest add https://ui.visantlabs.com/r/anatomia-como-sobe.json` |
| anatomia-tomadas | registry:lib | 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… | `npx shadcn@latest add https://ui.visantlabs.com/r/anatomia-tomadas.json` |
| anatomia-fichario | registry:lib | 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… | `npx shadcn@latest add https://ui.visantlabs.com/r/anatomia-fichario.json` |
| anatomia-memoria | registry:lib | 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. | `npx shadcn@latest add https://ui.visantlabs.com/r/anatomia-memoria.json` |
| anatomia-tokens | registry:lib | 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. | `npx shadcn@latest add https://ui.visantlabs.com/r/anatomia-tokens.json` |
| anatomia-script | registry:lib | 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. | `npx shadcn@latest add https://ui.visantlabs.com/r/anatomia-script.json` |
| anatomia-permissao | registry:lib | 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. | `npx shadcn@latest add https://ui.visantlabs.com/r/anatomia-permissao.json` |
| agent-rules | registry:item | 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. | `npx shadcn@latest add https://ui.visantlabs.com/r/agent-rules.json` |

## For AI agents

```text
You are adding components from @visant to a shadcn-compatible project.
1. Read this file (https://sh4dcn.netlify.app/md/visant.md) for the component list.
2. Fetch the machine-readable index: https://ui.visantlabs.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.netlify.app/json (library slug: visant).
```