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