Como ele é
Lembra os créditos de abertura de um filme, em que cada linha sobe de trás de uma borda invisível. O componente mede como o texto quebrou naquela largura de tela e trata cada linha como uma faixa com recorte próprio. Quando ele é montado, a primeira linha sobe de baixo e ganha opacidade em 0,6 segundo, depois de um atraso de 0,2 segundo, e as seguintes vêm a cada 0,1 segundo. O movimento começa rápido e freia devagar no fim, o que dá um ar de site editorial. Fonte, tamanho e cor são os do seu texto.
Você pode estar procurando isto se pediu algo assim
- texto que vai subindo linha por linha quando a página abre
- efeito de entrada de título igual site de marca de luxo
- parágrafo que aparece de baixo para cima em sequência
- animação de texto com GSAP para o manifesto da empresa
- frase que surge de trás de uma linha invisível, tipo créditos de filme
- deixar a entrada do texto com cara de site premium
Também chamado de
- line reveal
- split text animation
- GSAP SplitText
- texto linha a linha
- revelação de texto
- line mask animation
- entrada de texto em linhas
Quando usar
- Títulos e manifestos no topo de sites institucionais e de marcas premium
- Páginas de portfólio e de agência com tipografia grande
- Telas de abertura de apresentações e estudos de caso
- Parágrafos curtos de missão, visão ou propósito
Quando evitar
- Projetos que não querem adicionar o GSAP só para um efeito de texto
- Blocos longe do topo, porque a entrada roda ao montar e não ao rolar até eles
Como pedir para a sua IA
Crie uma revelação de texto linha a linha com GSAP SplitText no manifesto da página: cada linha sobe de uma máscara em sequência, disparada quando o bloco entra na tela, carregada sob demanda, com ClientOnly no Nuxt e versão estática para movimento reduzido.
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 Entrelinha
Entrelinha precisa do GSAP?
Sim. Entrelinha usa o GSAP e o plugin SplitText, que dividem o texto em palavras e linhas e cuidam da animação, por isso o efeito é classificado como Médio no THM Componentes. O prompt pede à IA para instalar o gsap, carregar o componente sob demanda e, no Nuxt, colocar o componente dentro de ClientOnly com uma versão estática de reserva.
Entrelinha anima quando a pessoa rola até o texto?
Não por padrão. Entrelinha roda a entrada assim que o componente é montado, depois de um pequeno atraso. Para usar em storytelling de rolagem, peça à IA para disparar a animação quando o bloco entrar na tela, com IntersectionObserver ou com o ScrollTrigger do próprio GSAP.
Entrelinha se ajusta ao celular?
Sim. Entrelinha divide o texto pelas linhas que realmente aparecem na largura da tela, então no celular cada linha mais curta entra no seu tempo. O código liga a opção autoSplit do SplitText, que refaz a divisão quando a largura muda ou quando as fontes terminam de carregar.
