# 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. > Florada é um componente do THM Componentes que faz o conteúdo aparecer saindo do desfoque: cada bloco colocado dentro do componente surge embaçado e transparente, sobe alguns pixels e fica nítido, um depois do outro, quando entra na tela. É leve e serve para a entrada de títulos, subtítulos e parágrafos em landing pages e seções institucionais. - 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/florada/ ## Como ele é É como ajustar o foco de uma câmera. Cada elemento colocado dentro do componente, seja um título, um subtítulo ou um botão, começa invisível, bem borrado e um pouco abaixo da posição final. Quando a seção entra na tela, ele sobe suavemente, ganha opacidade e o desfoque vai sumindo até a imagem ficar nítida, em cerca de um segundo. Os elementos seguintes repetem o movimento em sequência, com um intervalo ajustável entre eles, o que cria uma leitura em cascata. As cores e fontes são as do seu próprio conteúdo. ## Você pode estar procurando isto se pediu algo assim - “texto que aparece saindo do borrão quando rolo a página” - “título que surge embaçado e vai ficando nítido” - “efeito de entrada suave para os textos da landing page” - “fazer o título e o subtítulo aparecerem um depois do outro” - “aquele efeito de foco de câmera nos textos do site” - “deixar a entrada da seção mais elegante sem nada exagerado” - “animação de aparecer com desfoque igual ao site da Apple” ## Também chamado de texto saindo do desfoque, blur fade in, revelação com desfoque, entrada com blur, fade in on scroll, efeito de desfoque ao rolar, stagger reveal ## Quando usar - Entrada de título e subtítulo no hero de uma landing page - Seções institucionais em que o texto deve aparecer com calma - Listas de benefícios ou passos que surgem um a um ao rolar - Cartas, manifestos e textos curtos com tom editorial ## Quando evitar - Título principal de páginas que dependem de SEO no Nuxt, porque o conteúdo só é montado no navegador - Textos longos divididos em muitos blocos, em que a espera cansa quem quer ler logo ## Como pedir para a sua IA ```text Crie uma entrada com efeito de foco para a seção: título, subtítulo e botão surgem do desfoque, subindo de leve, um depois do outro quando entram na tela, com o conteúdo já presente no HTML do servidor e versão estática para quem prefere menos movimento. ``` 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 Florada ### Florada funciona no Nuxt com SSR? Funciona, mas Florada monta os elementos filhos só no navegador, depois que a página carrega, então esse conteúdo não vem no HTML do servidor. Para o título principal ou textos importantes para a busca, vale pedir à IA uma versão que renderize no servidor e anime só a aparência. ### Florada 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 Florada é simples: mostrar o conteúdo já nítido e no lugar, sem desfoque nem deslocamento. ### Dá para ajustar a velocidade e o desfoque de Florada? Sim. Florada tem props para a duração de cada entrada, o intervalo entre um elemento e o próximo, a quantidade de desfoque inicial e a distância que o conteúdo sobe. Cada filho direto do componente entra na sua vez, então a ordem do HTML define a sequência. ## Componentes relacionados - [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. - [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. - [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. - [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. - [Recado](https://vibecode.thmtecnologia.com/componentes/recado/): Avisos que surgem um de cada vez no topo da lista e empurram os anteriores para baixo, como um feed ao vivo. --- 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.