# Entardecer Hundreds of 3D bubbles drift slowly up and down over a sky that shifts from blue to orange. > Entardecer is a THM Componentes component that builds a 3D scene with Three.js: 250 spheres of different sizes float up and down, and the scene palette slowly shifts between blue, aqua and orange. A blur prop adds a frosted glass layer behind your text. It suits kids products, health and wellness pages. - Category: Backgrounds and atmospheres - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Heavy: WebGL or simulation; one per page, loaded on demand - Technology: Vue 3, TypeScript, Tailwind CSS v4, WebGL, Three.js - Interaction: None: the effect runs on its own - URL: https://vibecode.thmtecnologia.com/en/components/entardecer/ ## What it looks like It looks like colorful soap bubbles hanging in the air, bobbing gently. Over a gradient backdrop of sky blue and aqua, hundreds of spheres, mostly small with a few large ones, rise and sink slowly, each one out of step with the others. The spheres have no glossy highlights: they are filled with soft gradients of blue, green, yellow and orange. Every few seconds the whole scene warms up to orange and amber and then cools back to blue, like a sky between daytime and sunset. With the blur prop, a frosted glass layer softens the bubbles behind your content. ## You may be looking for this if you asked for something like - “a background with colorful floating bubbles for a kids website” - “3D bubbles drifting up and down behind the headline” - “a cheerful blue and orange background that changes color by itself” - “those floating bubbles with frosted glass over the text” - “something playful and light for a wellness app page” - “colorful spheres like balloons for a product landing page” - “a simple 3D bubble scene for the top of a pediatric clinic site” ## Also known as soap bubble backdrop, floating spheres, 3D bubbles, Three.js bubbles, floating balls background, playful animated background ## When to use - Kids products, schools and toys with a cheerful tone - Pediatric clinics, health and wellness brands that want a light feel - A hero with a short headline over frosted glass, using the blur prop - Summer campaigns or colorful launches ## When to avoid - Serious or corporate sites, where the bubbles feel too playful - Pages with other 3D effects, since it loads Three.js and 250 spheres - Brands with their own palette, unless your AI replaces the colors fixed in the code ## How to ask your AI ```text Create a 3D scene of bubbles with Three.js for the kids page hero: spheres in my brand colors floating slowly, frosted glass behind the headline, paused when off screen, a static version for reduced motion and on-demand loading in Nuxt. ``` 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 Entardecer ### Will Entardecer slow down my site? It is rated Heavy in THM Componentes: Entardecer uses Three.js to draw 250 spheres, and in the original the animation neither pauses off screen nor stops when the component leaves the page. The prompt tells your AI to pause it outside the viewport, load it on demand and use ClientOnly in Nuxt; it is worth also asking for the loop to stop on unmount. ### Can I change the colors of Entardecer? Yes, but not through props. Entardecer keeps the backdrop and sphere colors fixed in the code, cycling between blue and orange. The THM Componentes prompt tells your AI to replace them with your project tokens, with no fixed colors inside the component. The only prop is blur, which softens the bubbles behind your content. ### Does Entardecer respect reduced motion settings? The original component always animates: the bubbles keep floating and the colors keep shifting. The THM Componentes prompt asks your AI for a static version for people who turn on reduced motion, which for Entardecer can be the scene rendered once, with the colors frozen. ## Related components - [Orvalho](https://vibecode.thmtecnologia.com/en/components/orvalho/): Glossy indigo drops that join and split like liquid, with one of them following the cursor. - [Réstia](https://vibecode.thmtecnologia.com/en/components/restia/): Tiny dots that float slowly across the background and drift gently toward the mouse, like dust in the air. - [Pipoca](https://vibecode.thmtecnologia.com/en/components/pipoca/): A pile of matte balls and cubes that huddle in the center and part when the mouse passes through. - [Lusco-fusco](https://vibecode.thmtecnologia.com/en/components/lusco-fusco/): Patches of indigo, cyan and lavender that blend and drift slowly, with a light film grain on top. - [Paina](https://vibecode.thmtecnologia.com/en/components/paina/): Snowflakes falling gently across the page background, drifting slightly sideways, for winter and holiday campaigns. --- 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).