# Florada Headlines and paragraphs that appear one after another, rising slightly out of a blur until they turn sharp. > Florada is a THM Componentes component that makes content appear out of a blur: each block you place inside starts blurred and transparent, rises a few pixels and turns sharp, one after another, as it enters the screen. It is lightweight and suits headline, subtitle and paragraph entrances on landing pages and company sections. - Category: Text and typography - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript, Tailwind CSS v4, Motion for Vue - Interaction: Scroll - URL: https://vibecode.thmtecnologia.com/en/components/florada/ ## What it looks like It works like pulling a camera into focus. Each element you place inside the component, whether a headline, a subtitle or a button, starts invisible, heavily blurred and slightly below its final position. When the section enters the screen, it rises smoothly, gains opacity and the blur fades until it is sharp, in about a second. The following elements repeat the movement in sequence, with an adjustable gap between them, which creates a cascading read. Colors and fonts come from your own content. ## You may be looking for this if you asked for something like - “text that fades in from a blur as I scroll down the page” - “a headline that appears blurry and then comes into focus” - “a smooth entrance effect for the text on my landing page” - “make the title and subtitle appear one after the other” - “that camera focus effect on the site text” - “a more elegant section entrance without anything flashy” - “a blur fade-in animation like the Apple website” ## Also known as focus-in text effect, blur fade in, fade in on scroll, staggered reveal, blur in animation, blur entrance animation ## When to use - Headline and subtitle entrance in a landing page hero - Company sections where text should appear calmly - Lists of benefits or steps that show up one by one on scroll - Letters, manifestos and short text with an editorial tone ## When to avoid - The main headline of SEO-dependent pages in Nuxt, since the content is only mounted in the browser - Long text split into many blocks, where the waiting tires readers who want to read right away ## How to ask your AI ```text Create a blur-in entrance effect for the section: headline, subtitle and button come out of a blur, rising slightly, one after another as they enter the screen, with the content already in the server HTML and a static version for people who prefer reduced motion. ``` With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising. ## Questions about Florada ### Does Florada work in Nuxt with SSR? It works, but Florada mounts its child elements only in the browser, after the page loads, so its content is not part of the server HTML. For the main headline or text that matters for search, ask your AI for a version that renders on the server and animates only the appearance. ### Does Florada respect reduced motion settings? The original component always animates. The THM Componentes prompt asks your AI for a static version for people who turn on reduced motion in their system settings, which is simple with Florada: show the content already sharp and in place, with no blur or offset. ### Can I adjust the speed and blur in Florada? Yes. Florada has props for the duration of each entrance, the gap between one element and the next, the starting blur amount and how far the content rises. Each direct child of the component enters in turn, so the HTML order sets the sequence. ## Related components - [Cadência](https://vibecode.thmtecnologia.com/en/components/cadencia/): A large block of text where each word comes out of a blur and turns sharp as you scroll, at reading pace. - [Ditado](https://vibecode.thmtecnologia.com/en/components/ditado/): Words come out of a blur and appear one after another, as if the text were being generated live. - [Tapume](https://vibecode.thmtecnologia.com/en/components/tapume/): A solid block of color covers the headline and pulls away to the side, letting the text rise gently into view. - [Levante](https://vibecode.thmtecnologia.com/en/components/levante/): A headline that enters the page with each letter rising from below, one after another, like a wave. - [Recado](https://vibecode.thmtecnologia.com/en/components/recado/): Notices that pop in one at a time at the top of the list and push the older ones down, like a live feed. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).