@visant

O tema do kit de áudio, o contraponto escuro aos temas de marca.

A fundação do kit: variáveis de painel, texturas e as regras em @layer.

O gesto de arrastar um knob isolado do desenho: pointer capture, trava de curso e passo fino com shift.

Media query como estado de React, via useSyncExternalStore: leitura síncrona no primeiro render, sem piscar, e segura em SSR.

Botão de painel que afunda no clique.

Fader de console com curso e trilho gravados.

VU analógico com balística de ponteiro.

Potenciômetro com arraste vertical e trava de curso.

O irmão grande: marcação de escala e leitura de valor.

Chave de duas posições com estalo visual.

Banco de faders com curva desenhada.

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.

LED de painel com halo. Quatro cores, estado on/off.

Paleta de comandos no vocabulário do painel.

Moldura de tubo com curvatura e brilho de varredura.

Pad de disparo com estado aceso e retorno tátil.

Campo de dois eixos para controlar dois parâmetros num gesto só.

Traço de osciloscópio alimentado por um buffer de amostras.

Faixa infinita em GSAP com três modos de scroll: empurrar o ritmo, virar esteira do scroll ou amarrar a posição à rolagem.

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…

Trilho horizontal com snap: anda por arrasto, Shift + roda, setas e teclado; as setas somem nas pontas.

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.

A placa onde a foto de catálogo senta. Resolve o recorte branco sobre fundo colorido.

Pastilha de filtro com contagem; a faceta sem resultado apaga em vez de mostrar zero.

Barra de filtro que gruda abaixo do cabeçalho sem medir altura na mão e sem pular no scroll.

Aberto/fechado calculado no fuso da loja, não no do visitante. Quem está do outro lado do mundo vê a resposta certa.

Escolher por medida e receber a recomendação. A faixa traduz o número em produto.

O ciclo de scroll do editor Shopify em GSAP/ScrollTrigger, com limpeza de instância.

Board com drag-and-drop, seleção por marquee sobre o vazio e multi-seleção com shift/ctrl.

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.

Alternador de poucas opções. Substitui um select quando as opções cabem na tela.

Editar onde se lê. Enter salva, Esc cancela, o valor só troca depois que a promessa resolve.

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.

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.

Linha do tempo com progresso amarrado ao scroll.

Pilha de responsáveis com excedente contado. Iniciais quando não há avatar.

O elemento foge do cursor com mola. Gesto de hero, fora de formulário.

Lenis + GSAP num relógio só, com bail-out em prefers-reduced-motion. A instância sai por callback.

Caracteres que trocam sozinhos, em cinco sotaques (símbolos, blocos, braille, binário, hex), ou decodificando até virar uma palavra.

O texto que segura a pessoa durante uma espera longa, em quatro desenhos: linha com cronômetro, barra que varre, etapas e pulso.

Ruído animado em SVG para dar vida a uma superfície parada.

Ícone que trabalha enquanto o sistema trabalha: picareta, martelo, engrenagem, pincel ou faísca, e o brilho corre só no traço.

Progresso com narrativa de papel passando pela máquina.

Mosaico por round-robin: anexar página nova não reordena o que já estava na tela.

Número que se arrasta na horizontal, como nos editores gráficos. Teclado continua funcionando.

Malha de pontos de fundo, o papel milimetrado que dá profundidade sem competir.

A camada que aparece quando um arquivo está sendo arrastado sobre a área.

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.

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.

Abertura de dobra: rótulo, título grande e linha de contexto, com duas medidas de linha em vez de uma.

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.

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.

Como funciona, em passos numerados. Sai como lista ordenada no HTML, e a arte de cada passo entra por slot.

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…

O depoimento único, em tamanho de dobra: a citação vem primeiro e em corpo de manchete, a atribuição entra depois como assinatura.

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.

Malha de pontos com mola: o ponteiro empurra, o atrito segura, e quem sai de casa acende na cor da marca.

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…

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.

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…

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.

Hierarquia de entradas por dobra: rise, drift, mask, settle, climax, invert e mist em vez de trinta entradas iguais. O esconderijo é aplicado pelo componente, …

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…

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á.

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,…

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.

Esqueletos com as medidas do que substituem (trilho, card, lista, texto, mídia), em quatro movimentos: pulse, shimmer, wave ou parado.

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.

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…

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…

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…

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…

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…

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…

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…

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…

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.

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…

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…

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…

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.

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…

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.

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…

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…

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 …

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…

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 …

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…

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/…

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 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…

Um quadrado por dia mostra o ritmo de meses de trabalho, com bolha que desliza entre os dias e teclado de calendário.

Interruptor mensal e anual com o selo de desconto que vira recibo quando o anual é escolhido, e o preço rolando junto.

Pilha de cards em que o de cima vai pro fundo quando você arrasta e solta, como baralho de verdade.

Botão de apagar que vira a pergunta no próprio lugar, depois o andamento e o resultado com desfazer.

Slider que estica feito elástico quando você puxa além do limite e volta com a velocidade da soltura.

Card de resumo que cresce pros lados e pra baixo ao abrir, e rola só a palavra que mudou no resumo.

Busca que fica guardada num ícone de lupa e só abre o campo quando alguém vai mesmo buscar.

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.

Botão que só confirma se você segurar, com o preenchimento enchendo e voltando se soltar antes.

Ícone de dois estados que vira o outro em vez de trocar, como menu e fechar ou copiar e copiado.

Select em que o próprio gatilho cresce e vira a lista, sem uma segunda caixa aparecendo embaixo.

Número ou palavra que gira como rolo de caça-níquel e assenta da esquerda pra direita, sem passar do alvo.

Lista em que a linha arrasta pro lado e mostra as ações, com o mesmo menu pra quem usa teclado.

Rótulo que vira a próxima palavra letra por letra, com as letras em comum deslizando e a largura indo junto numa mola.

Avisos que se empilham no canto e abrem em leque quando o ponteiro chega, com o carregando que vira feito no lugar.

A pílula que mostra a atividade em curso e cresce no lugar com os controles quando alguém toca nela.

Uma conta que dobra em três como papel e abre quando você puxa ou toca, com o total sempre à vista no cabeçalho.

Uma grade de gotas ou uma palavra que derrete num mapa de calor por onde o cursor passa, pintada com as cores da marca.

Um interruptor cuja bolinha escorre como gota de um lado pro outro, esticando no caminho e se recolhendo ao chegar.

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.

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.

Um slider em que o preenchimento tem peso: arrastou rápido, a tinta passa do polegar, balança e assenta.

O card que inclina em 3D seguindo o mouse, com um brilho que corre pela superfície.

Chave de tema claro e escuro em que a lua cobre o sol num eclipse, sem mexer na página por conta própria.

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.

Contagem regressiva em que cada dígito gira pelo caminho curto e vira o aviso de ao vivo quando chega a zero.

Uma prateleira de capas em perspectiva: a da vez fica de frente, as vizinhas giram de lado e você arrasta ou joga pra trocar.

Seletor de data em rolos de dia, mês e ano que encaixam sozinhos, como no telefone.

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…

Botão que abre as ações em arco ao redor dele, com mola, pra escolher arrastando o dedo ou clicando.

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.

Painel que estica quando você puxa pra baixo, conta os pontos até a marca e gira enquanto atualiza.

Barra de reações em que a contagem rola pro lado que andou e o ícone dá um pulinho quando você reage.

Campo de assinatura com tinta que engrossa e afina como caneta de verdade, com desfazer e limpar.

Trilho que só confirma quando você arrasta o polegar até o fim, e volta com mola se soltar antes.

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.

Gráfico de fluxo empilhado que mostra como a mistura de várias partes muda no tempo, com camadas que ligam e desligam.

Mostrador de 24 horas que você gira com o dedo ou com as setas, com a faixa do expediente desenhada no aro.

Nota de voz de chat com forma de onda, play e pausa, e busca clicando ou arrastando na onda.

Carteira de cartões empilhados em que um sobe pra mostrar saldo e movimento e os outros se recolhem no pé.

Uma imagem redesenhada em caracteres, com seis jogos de glifo e as células mais cheias na cor da marca.

Retícula de uma tinta só sobre uma imagem, em pontos, quadrados ou linhas, com uma lupa que amplia debaixo do cursor.

Fios de luz que ondulam num campo liso na cor da marca e engrossam quando o ponteiro passa rápido.

Uma imagem impressa em duas tintas de risografia, com grão, ângulo próprio por tinta e registro fora do lugar.

Túnel de anéis em espiral que corre pro centro na cor da marca e acelera com o ponteiro.

Mosaico de células que derivam devagar com um núcleo aceso na cor da marca, empurradas pelo ponteiro.

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…

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.

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…

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…

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.

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.

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.

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.

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.