Como ele é
Lembra as letras de um letreiro sendo puxadas de baixo para cima, uma de cada vez. Ao carregar a página, cada letra do título sobe cerca de 100 pixels, vinda de baixo, enquanto passa do transparente para o sólido, 50 milissegundos depois da anterior, o que cria uma onda da esquerda para a direita. O texto padrão é grande, em negrito, com letras bem próximas, uma sombra leve e alinhamento ao centro. A cor padrão é preto; a demo acrescenta branco para o modo escuro. Depois que todas as letras chegam, o título fica parado.
Você pode estar procurando isto se pediu algo assim
- título em que as letras sobem uma por uma ao abrir a página
- letras aparecendo de baixo para cima em sequência
- animação de entrada para o nome da marca no topo
- efeito de onda nas letras do título quando o site carrega
- título curto que surge letra a letra, subindo
- aquela entrada de texto estilo apresentação de produto, letra por letra
Também chamado de
- letras subindo
- entrada letra a letra
- animação escalonada de letras
- título letra por letra
- staggered text animation
- letras surgindo ao carregar
Quando usar
- Nome da marca ou palavra-chave no topo da página inicial
- Títulos curtos de lançamento, evento ou campanha
- Tela de boas-vindas ou de abertura de um app
- Splash ou tela de carregamento com o nome do produto
Quando evitar
- Títulos longos no celular, porque as letras ficam numa linha só e não quebram
- Títulos no meio da página, porque a animação roda ao carregar e já terminou quando a pessoa chega lá
Como pedir para a sua IA
Crie uma animação de entrada letra por letra no título do hero: cada letra sobe de baixo com fade em sequência, usando um único h1 acessível, quebra de linha no celular, as cores da minha marca 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 Levante
Levante funciona bem com SEO e leitores de tela?
Do jeito original, não é o ideal: Levante cria um elemento h1 para cada letra, o que fragmenta o título para buscadores e leitores de tela. Ao adaptar, peça à IA um único h1 com as letras em spans e o texto completo acessível; o efeito visual pode continuar igual.
Levante funciona bem no celular?
Funciona com títulos curtos. Levante coloca as letras numa linha flexível sem quebra, então frases longas passam da largura da tela em aparelhos estreitos. Use uma ou duas palavras, reduza a fonte no celular ou peça à IA para agrupar as letras por palavra e permitir a quebra de linha.
Quando a animação de Levante acontece?
Levante anima assim que o componente é montado, normalmente ao carregar a página, e não espera o título entrar na tela. Por isso combina mais com o topo da página. Para títulos mais abaixo, peça à IA para disparar a animação quando o elemento ficar visível; a prop delay controla o intervalo entre letras, 0,05 segundo no padrão.
