Cores
toque numa cor para copiar o hex
componentes
Peças que respondem.
Botões, campos, cards e o movimento deste site, soltos para você testar. É o mesmo cuidado que levo para cada interface: retorno imediato, estados claros, teclado e toque funcionando, e nenhuma biblioteca.
componentes/tokens
O vocabulário antes das peças.
Cor, tipo e tempo definidos uma vez e usados em tudo. É o mesmo arquivo de tokens que pinta este site.
Tipo
Cascadia Code, uma família só
Aa título · 700
Seção subtítulo · 350
Texto corrido leitura · 400
meta e legenda apoio · 13px
Tempo
toque para ver cada duração com a curva do site
160msresposta
240msconteúdo
520mscapa → case
440msvolta
componentes/botões
Botões que respondem.
Cada toque tem retorno na hora: cor, um deslocamento curto, uma onda ou um estado novo. Nada fica parado sem avisar o que está acontecendo.
Primário, secundário e link
padrão · hover · foco · pressionado · desabilitado
Com carregamento
padrão → enviando → enviado · trava clique duplo
Onda no clique
nasce no ponto tocado e chega ao fundo da página
Magnético
aproxima do ponteiro · fica parado no toque e com movimento reduzido
Segmentado
escolha única · indicador desliza · setas trocam
mostrando: dia
Ícones e tamanhos
dica no hover, no foco e no toque · alvo de 44px
componentes/campos
Campos que ajudam a preencher.
O erro aparece quando faz sentido, explica o que falta e some quando o problema é resolvido. O teclado do celular abre no tipo certo.
Rótulo flutuante com validação
vazio · foco · preenchido · erro · válido
Valida quando você sai do campo.
Senha com força
oculta · visível · fraca → forte
Busca com resultados ao vivo
/ foca · setas navegam · enter abre · procura neste site
/
Caixa, opção, chave e lista
marcado · desmarcado · foco · ligado · desligado
avisos
Faixa e contador
valor ao vivo · aviso perto do limite · passou do limite
Código de verificação
avança sozinho · volta no apagar · aceita colar o código inteiro
Digite qualquer código de 6 números.
componentes/cards
Cards com profundidade.
Luz que acompanha o ponteiro, números que contam ao aparecer e o card que vira página: a mesma transição que abre os cases deste site.
Luz que segue o ponteiro
luz e borda acompanham o cursor ou o dedo · inclina 2° no desktop
Gestão de despesas
Saldo, crédito e carga no mesmo painel, com filtros que respondem na hora.
Mídia com varredura
linha de luz no hover, no foco ou ao entrar na tela
Métricas que contam
contam ao entrar na tela · linha desenha o semestre
crédito no semestreR$ 277.898,04
carga no semestreR$ 225.965,76
ficou na plataformaR$ 51.932,28
Dados fictícios, os mesmos da demonstração do Aly+.
Card que vira página
a capa viaja até o detalhe e volta ao lugar · esc fecha
app + site + dashboard
Aly+
Conta digital para gestão de cartões e pagamentos corporativos: incentivos e despesas, cartões virtuais para anúncios (AlyAds) e Pix em lote para fornecedores e colaboradores.
front-end + design system
El Mago
Loja de itens de Diablo 4: seleção de servidor, filtros por tipo de item, busca, quantidade e carrinho, além de uma área de afiliados. Do protótipo interativo ao front-end em Next.js.
low-code + back-end + seo
Agrolumina
Site de uma consultoria agropecuária credenciada ao Banco do Brasil, focada em crédito rural em Sertãozinho, Ribeirão Preto e região. Low-code no site, back-end para SEO.
componentes/feedback
Avisar sem atrapalhar.
Mensagens que se explicam e somem sozinhas, carregamento que mostra progresso de verdade e diálogos que devolvem o foco para onde você estava.
Avisos (toasts)
sucesso · erro · info · pausam no hover · fecham no × · leitor de tela anuncia
Carregamento
determinado · indeterminado · esqueleto
enviando arquivos0%
João Victor Cruz
designer e desenvolvedor fullstack
Diálogo de confirmação
abre com zoom curto · esc ou fundo fecham · foco volta ao botão
Selos de status e dica
ao vivo · atenção · erro · dica no hover, foco ou toque
em produçãoem revisãofalhourascunho
CLS: o quanto o layout pula
componentes/movimento
As animações deste site.
As assinaturas de movimento que você viu pelo caminho, isoladas. Todas começam por uma ação sua e respeitam quem prefere menos movimento.
Texto que se decifra
glifos assentam da esquerda para a direita · digite a sua palavra
jvcrz
Onda no fundo
o campo de glifos atrás da página, em canvas · nasce no botão
Mexa o mouse ou toque em qualquer lugar: o fundo inteiro é este componente.
Linha de varredura
passa sobre a capa no hover dos cards da home
Linha de terminal
digita só quando você pede · cursor em fósforo
jvcrz@jvcrz.dev:~$
Quer peças assim no seu produto?
Me chama no LinkedIn e me conta o que você está construindo.