Como ele é
Parece um punhado de etiquetas de borracha jogado dentro de uma caixa. Quando um quarto da área aparece na tela, as pílulas começam a cair do alto, uma a cada fração de segundo, inclinadas e girando; quicam de leve, escorregam umas sobre as outras e se acomodam no chão, sobre um fundo quase branco. Cinco estilos se alternam: azul-marinho com texto branco, índigo, gradiente de índigo para ciano, branco com borda fina e branco com um ponto ciano. Ao agarrar uma pílula, ela vem para a frente com sombra maior; solta em movimento, ela voa e derruba as outras.
Você pode estar procurando isto se pediu algo assim
- coisas que caem e dá para arrastar com o mouse
- lista de serviços em formato de etiquetas caindo na tela
- tags com física que empilham no fundo da seção
- mostrar a stack de tecnologias de um jeito divertido
- palavras em pílulas que a pessoa pode jogar para cima
- seção de competências com efeito de gravidade
- aquele efeito de etiquetas caindo que aparece em sites de agência
Também chamado de
- etiquetas que caem e empilham
- etiquetas com física
- falling tags
- physics pills
- tags com gravidade
- drag and throw
- física de corpo rígido
Quando usar
- Seção de serviços de agência, estúdio ou consultoria
- Lista de competências ou de ferramentas num portfólio pessoal
- Stack de tecnologias de um produto ou de uma vaga de emprego
- Momento lúdico no meio de uma página institucional mais séria
Quando evitar
- Listas longas: com dezenas de pílulas, a área fica lotada e difícil de ler
- Informação que precisa ser lida em ordem, já que as pílulas caem embaralhadas
Como pedir para a sua IA
Crie uma seção de serviços com etiquetas em pílula que caem com física quando a seção aparece, colidem, empilham e podem ser arrastadas e arremessadas com mouse ou dedo, nas cores da minha marca, com atalho de teclado para sacudir e etiquetas já empilhadas para movimento reduzido.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Tombo
Como troco as palavras de Tombo?
Passe a sua lista na prop tags: Tombo mede cada texto e cria pílulas do tamanho certo, e fontSize muda o tamanho de todas. Gravidade, atrito, quique e as quatro cores também são props, e o prompt orienta a IA a usar os tokens de cor do projeto.
Tombo funciona no celular e pelo teclado?
Sim. Em Tombo, o dedo agarra e arremessa as pílulas, porque a área desativa a rolagem do navegador ao ser tocada; por isso, deixe espaço livre ao redor para a pessoa rolar a página no celular. Pelo teclado, a área recebe foco, e Espaço ou Enter sacode todas as pílulas; o rótulo para leitores de tela lista todas as palavras.
Tombo respeita quem prefere menos movimento?
Sim. Com movimento reduzido ativo, Tombo pula a queda: a simulação é calculada de uma vez e as pílulas já aparecem empilhadas no chão. Sacudir também assenta tudo na hora. Arrastar uma pílula continua possível, porque esse movimento só acontece por ação da pessoa.
