Como ele é
Lembra a abertura de um documentário ou uma revista que vira a página. No lugar do texto aparece primeiro um bloco sólido de cor, do tamanho exato do conteúdo, índigo por padrão. Logo depois, a borda esquerda desse bloco corre para a direita e ele encolhe até sumir, enquanto o título surge por trás, ganhando opacidade e subindo um pouco até a posição final. Tudo leva cerca de um segundo e começa quando o trecho entra na tela. Com vários blocos empilhados, como título, subtítulo e parágrafo, cada um ganha a sua própria caixa.
Você pode estar procurando isto se pediu algo assim
- texto que aparece por trás de uma faixa colorida que corre para o lado
- título revelado por um bloco de cor, estilo abertura de filme
- efeito de caixa que desliza e mostra o texto quando rolo a página
- animação editorial para os títulos das seções do portfólio
- aquele efeito de tarja colorida saindo de cima do texto
- jeito elegante de fazer o nome da empresa aparecer no topo
- subtítulo e parágrafo aparecendo com uma barra de cor na frente
Também chamado de
- bloco de cor que recolhe
- revelação com caixa
- color wipe text
- tarja de revelação
- reveal block animation
- efeito de cortina no texto
- mask reveal
Quando usar
- Títulos de seção em portfólios, agências e sites editoriais
- Apresentação de nome, cargo e frase curta numa página pessoal
- Abertura de case ou de projeto com tom de revista
- Landing pages que querem ritmo na leitura sem efeitos pesados
Quando evitar
- Textos longos ou muitos blocos seguidos, em que a sequência de caixas cansa
- Interfaces de sistema e painéis, em que o conteúdo precisa aparecer na hora
Como pedir para a sua IA
Crie um efeito de revelação nos títulos das seções: um bloco na cor de destaque da marca cobre o texto e recolhe para a direita enquanto o conteúdo aparece subindo de leve, ao entrar na tela, com versão estática para movimento reduzido e sem cores fixas no componente.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Tapume
Dá para trocar a cor da caixa de Tapume?
Sim. A cor da caixa de Tapume vem de uma prop, e o prompt do THM Componentes orienta a IA a usar os tokens de cor do projeto em vez de cores fixas. Uma boa prática é usar a cor de destaque da marca na caixa e repetir o mesmo tom numa palavra do título.
Tapume respeita quem prefere menos movimento?
O componente original anima sempre. O prompt do THM Componentes pede à IA uma versão estática para quem ativa a redução de movimento no sistema, o que em Tapume é simples: esconder a caixa e mostrar o texto já no lugar, sem deslocamento.
Posso usar Tapume em vários textos da mesma seção?
Pode. Cada instância de Tapume envolve um bloco e cria a sua própria caixa, do tamanho daquele conteúdo, então título, subtítulo e parágrafo podem ter caixas separadas. Ajuste a duração e o atraso de cada um para que apareçam em sequência, em vez de todos de uma vez.
