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
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.
