# Tapume Um bloco de cor cobre o título e recolhe para o lado, deixando o texto aparecer subindo de leve. > Tapume é um componente do THM Componentes que revela textos com uma caixa colorida: um bloco sólido cobre o conteúdo e recolhe da esquerda para a direita, enquanto o texto aparece subindo alguns pixels. Dispara quando entra na tela e dá ritmo editorial a títulos de seção, apresentações e páginas de portfólio. - Categoria: Texto e tipografia - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, Motion for Vue - Interação: Rolagem - URL: https://vibecode.thmtecnologia.com/componentes/tapume/ ## 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 ```text 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. ## Componentes relacionados - [Ênfase](https://vibecode.thmtecnologia.com/componentes/enfase/): Uma faixa de cor cresce atrás de um trecho do texto, como um marca-texto passando sobre a frase. - [Florada](https://vibecode.thmtecnologia.com/componentes/florada/): Títulos e parágrafos que aparecem um depois do outro, saindo de um borrão e subindo de leve até ficarem nítidos. - [Pincelada](https://vibecode.thmtecnologia.com/componentes/pincelada/): Uma faixa de cor preenche o fundo da palavra da esquerda para a direita, como uma caneta marca-texto. - [Levante](https://vibecode.thmtecnologia.com/componentes/levante/): Título que entra na página com cada letra subindo de baixo, uma depois da outra, como uma onda. - [Cadência](https://vibecode.thmtecnologia.com/componentes/cadencia/): Um texto grande em que cada palavra sai do desfoque e fica nítida conforme você rola, no ritmo da leitura. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.