Brand-aware React components, blocks and app kits from Visant Labs: tokens, motion and analog-sound feedback that dress in your brand.
Lenis + GSAP num relógio só, com bail-out em prefers-reduced-motion. A instância sai por callback.
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á.
Malha de pontos com mola: o ponteiro empurra, o atrito segura, e quem sai de casa acende na cor da marca.
O texto que segura a pessoa durante uma espera longa, em quatro desenhos: linha com cronômetro, barra que varre, etapas e pulso.
Como funciona, em passos numerados. Sai como lista ordenada no HTML, e a arte de cada passo entra por slot.
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.
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.
Gráfico de várias partes no tempo em sete estilos: fluxo, empilhado, 100%, cristas, linhas, barras e centrado, com camadas que ligam e desligam.
Lista em que a linha arrasta pro lado e mostra as ações, com o mesmo menu pra quem usa teclado.
Controle de BPM em web component, sem framework: LED na batida, número que se arrasta, luzes de compasso, divisão e tap.
Relógio de BPM sem interface: passo na divisão, envelope de bumbo, tap tempo e troca de BPM sem pular o compasso.
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.
Rótulo que vira a próxima palavra letra por letra, com as letras em comum deslizando e a largura indo junto numa mola.
Facho de luz que desce do alto com poeira boiando dentro e que mira o cursor.
Linhas de correnteza com traços que descem pela água e abrem caminho em volta do cursor como de uma pedra.
Cortina de dobras verticais que ondula onde o cursor passa, com a onda morrendo sozinha.
Grade de olhos cujas pupilas seguem o cursor e que piscam de vez em quando, cada um no seu tempo.
Brilho macio na cor da marca que segue o cursor sobre grão fino, esticando no rumo do movimento.
Limalha de ferro em traços curtos que se alinham ao campo de um ímã preso ao cursor.
Campo de pilares em pseudo-3D que sobem perto do cursor e descem ao sair.
A imagem é sugada para o ponteiro como pele beliscada, e solta devagar quando ele sai.
Areia rastelada que o cursor espalha e que assenta de volta devagar, com os sulcos reaparecendo.
Uma bolha de vidro passeia sob o ponteiro e amplia a imagem como olho de peixe.
A imagem em ladrilhos que encolhem, se afastam e se inclinam perto do ponteiro.
A imagem gira em redemoinho em volta do ponteiro e se desfaz devagar quando ele sai.
A imagem escorre em ruído como reflexo na água, e o ponteiro rápido agita a superfície.
Grade de mostradores de relógio cujos ponteiros apontam para o cursor. O curto chega atrasado, como hora.
O card que inclina em 3D seguindo o mouse, com um brilho que corre pela superfície.
Mostrador de 24 horas que você gira com o dedo ou com as setas, com a faixa do expediente desenhada no aro.
Linha do tempo com progresso amarrado ao scroll.
Avisos que se empilham no canto e abrem em leque quando o ponteiro chega, com o carregando que vira feito no lugar.
Ruído animado em SVG para dar vida a uma superfície parada.
Atrasa um valor até ele parar de mudar. Só borda de saída, e o valor inicial passa sem atraso.
Chama uma função enquanto a peça está na tela e ninguém mexe nela, e cala com movimento reduzido. Vem com useInView.
O gesto de arrastar um knob isolado do desenho: pointer capture, trava de curso e passo fino com shift.
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.
Media query como estado de React, via useSyncExternalStore: leitura síncrona no primeiro render, sem piscar, e segura em SSR.
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.
A inclinação lateral do celular, com o pedido de permissão do iOS dentro do gesto. Sem sensor, nada acontece.
A fundação do kit: variáveis de painel, texturas e as regras em @layer.
Botão de painel que afunda no clique.
Paleta de comandos no vocabulário do painel.
Banco de faders com curva desenhada.
Potenciômetro com arraste vertical e trava de curso.
O irmão grande: marcação de escala e leitura de valor.
LED de painel com halo. Quatro cores, estado on/off.
VU analógico com balística de ponteiro.