Brand-aware React components, blocks and app kits from Visant Labs: tokens, motion and analog-sound feedback that dress in your brand.
A dobra alternada de foto e 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 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 tocar no DOM.
A placa onde a foto de catálogo senta. Resolve o recorte branco sobre fundo colorido.
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.
Painel que estica quando você puxa pra baixo, conta os pontos até a marca e gira enquanto atualiza.
O depoimento único, em tamanho de dobra: a citação vem primeiro e em corpo de manchete, a atribuição entra depois como assinatura.
Trilho horizontal com snap: anda por arrasto, Shift + roda, setas e teclado. As setas somem nas pontas.
Relevo seco em papel com fibra: a palavra só existe na sombra e no brilho de uma lâmpada baixa.
Catraca de aço: o gesto dá corda numa roda que só gira para um lado, com a lingueta caindo a cada dente.
Barra de reações em que a contagem rola pro lado que andou e o Ãcone dá um pulinho quando você reage.
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.
O elemento foge do cursor com mola. Gesto de hero, fora de formulário.
Perfil de terreno que se lê arrastando: a altitude e a rampa sob o cursor, e um clinômetro cuja agulha balança com a inclinação.
Número que se arrasta na horizontal, como nos editores gráficos. Teclado continua funcionando.
Combobox com busca em rótulo e keywords ocultos, grupos, e criação no lugar que sobrevive à falha. Digita dentro de Dialog.
Campo de busca com debounce que não se limpa sozinho: negocia o texto local com o valor de fora por referência acordada.
Abertura de dobra: rótulo, tÃtulo grande e linha de contexto, com duas medidas de linha em vez de uma.
Alternador de poucas opções. Substitui um select quando as opções cabem na tela.
Mira de pareamento: gire o feixe até o alvo, e o disco cresce conforme chega perto. Em repouso, o feixe procura sozinho.
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.
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.
Uma imagem redesenhada em caracteres, com seis jogos de glifo e as células mais cheias na cor da marca.
Os canais de cor de uma imagem fora do registro, com a separação apontando para o cursor e crescendo longe do centro.
Uma imagem num monitor de tubo, com linhas de varredura, vinheta, tela abaulada e uma faixa de luz que desce devagar.
Uma imagem pixelada em poucos tons da rampa da marca, com o dither de Bayer fazendo a passagem entre um tom e outro.
Uma imagem refeita em duas cores do tema, a mais escura nas sombras e a outra nas luzes, sem sair em negativo no escuro.
Só os contornos de uma imagem, traçados pelo filtro de Sobel na cor da marca, sozinhos ou por cima da foto.
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.
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.
RetÃcula de uma tinta só sobre uma imagem, em pontos, quadrados ou linhas, com uma lupa que amplia debaixo do cursor.
Uma imagem em 1 bit pelo dither de Bayer, só papel e tinta da marca, numa trama 2×2, 4×4 ou 8×8.
Fios de luz que ondulam num campo liso na cor da marca e engrossam quando o ponteiro passa rápido.
Uma imagem em blocos de cor chapada, com uma janela redonda que mostra a foto nÃtida debaixo do cursor.
Uma imagem reduzida a poucos tons por canal, com as transições suaves virando degraus chapados de serigrafia.
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.
Uma imagem pequena ampliada em bicúbico com nitidez, e uma linha que segue o cursor mostrando o antes em blocos.
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.
Mosaico de células que derivam devagar com um núcleo aceso na cor da marca, empurradas pelo ponteiro.
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.
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 some do DOM.
Campo de assinatura com tinta que engrossa e afina como caneta, com desfazer e limpar.
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.
Esqueleto medido do próprio conteúdo, sem escrever as medidas à mão. Experimental: usa o Skullet 0.0.x.
Esqueletos com as medidas do que substituem (trilho, card, lista, texto, mÃdia), em quatro movimentos: pulse, shimmer, wave ou parado.
Trilho que só confirma quando você arrasta o polegar até o fim, e volta com mola se soltar antes.
Um slider em que o preenchimento tem peso: arrastou rápido, a tinta passa do polegar, balança e assenta.
Número ou palavra que gira como rolo de caça-nÃquel e assenta da esquerda pra direita, sem passar do alvo.