lab
Interações que eu fiquei lapidando até ficarem do jeito que eu queria. Pode mexer à vontade.
pilha de toasts
os avisos se empilham com profundidade (escala e deslocamento). passe o mouse ou foque com o teclado pra abrir a pilha e pausar os timers; arraste de lado pra dispensar (distância > 96 px ou velocidade > 0,11 px/ms).
paleta de comandos
essa já tá no site inteiro: aperte ⌘K (ctrl+k no windows e linux) em qualquer página pra buscar páginas, posts e ações. setas navegam, enter abre, esc fecha e o foco volta pra onde estava.
gaveta com arraste
arraste pra baixo pra fechar. um peteleco rápido fecha mesmo com pouca distância (velocidade > 0,11 px/ms); puxar pra cima resiste, em vez de bater numa parede.
lista com FLIP
o layout muda de uma vez; o transform anima a diferença de posição (First, Last, Invert, Play) em 250ms. nada de animar top ou altura.
- 1revisar o PR
- 2escrever os testes
- 3ajustar o motion
- 4fazer o deploy
antes e depois
o mesmo card cru (estilos padrão) e polido (tokens, espaçamento, sombra), o de cima recortado por clip-path. arraste a alça ou use as setas (shift anda mais).
segurar pra confirmar
ação destrutiva tem que ter intenção: enche em 1,6 s enquanto você segura e volta em 200 ms quando solta. funciona no espaço ou no enter também.
copiar com troca de ícone
o ícone troca com um leve desfoque, que junta os dois estados num movimento só em vez de dois ícones se sobrepondo.
https://github.com/di0rioabas com recorte
uma cópia da lista em cor invertida fica por cima, recortada só na aba ativa. a cor troca sem nenhuma aba piscar no meio do caminho.