# Levante Título que entra na página com cada letra subindo de baixo, uma depois da outra, como uma onda. > Levante é um componente do THM Componentes que anima a entrada de um título curto: cada letra sobe de baixo enquanto aparece, com 50 milissegundos de diferença entre uma e outra, formando uma onda da esquerda para a direita. É leve, sem WebGL, e serve para o nome da marca, telas de boas-vindas e títulos de lançamento. - 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: Nenhuma: o efeito roda sozinho - URL: https://vibecode.thmtecnologia.com/componentes/levante/ ## 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 ```text 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. ## Componentes relacionados - [Ditado](https://vibecode.thmtecnologia.com/componentes/ditado/): As palavras saem do desfoque e aparecem uma depois da outra, como se o texto estivesse sendo gerado na hora. - [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. - [Tapume](https://vibecode.thmtecnologia.com/componentes/tapume/): Um bloco de cor cobre o título e recolhe para o lado, deixando o texto aparecer subindo de leve. - [Entrelinha](https://vibecode.thmtecnologia.com/componentes/entrelinha/): Cada linha do parágrafo sobe de trás de uma borda invisível e aparece em sequência, com parada suave. - [Telegrama](https://vibecode.thmtecnologia.com/componentes/telegrama/): As letras aparecem uma a uma com um cursor piscando, somem e dão lugar à próxima palavra da lista. --- 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.