# Batuta Thousands of tiny dots that fly apart and regroup as a sphere, a ring, a cube and a word you choose. > Batuta is an exclusive THM Componentes component where tens of thousands of particles morph between a sphere, a ring, a cube and a text of up to 8 characters, with a swirl halfway through each change. It switches shapes on its own every 4.5 seconds or on click, Enter and Space. It fits brand heroes and presentation openers. - Category: 3D and space - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Heavy: WebGL or simulation; one per page, loaded on demand - Technology: Vue 3, TypeScript, WebGL, Three.js - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/batuta/ ## What it looks like Picture a cloud of colored dust following a conductor. About 24,000 tiny dots form a slowly turning sphere; after a few seconds they let go a little at a time, swirl midway and land as a ring, then a cube and finally the letters of your chosen text. Colors run from indigo to cyan depending on position, with a few navy dots, over an off-white background. Moving the mouse tilts the shape slightly. A pill at the bottom lists the four shapes and marks the current one. ## You may be looking for this if you asked for something like - “particles that form my brand name” - “dots that change shape from a ball to a cube to text” - “that dust effect that turns into a logo, for the site opener” - “a hero with thousands of points transforming on their own” - “a particle animation that changes when I click” - “something futuristic for the first slide of a product demo” ## Also known as particles forming shapes, particle morphing, particle cloud, point cloud morph, particles to text, shape morphing particles ## When to use - A brand hero that should end the animation on the brand name - Presentation, event or launch openers - Tech product pages with a strong visual signature - Welcome screens for an app or dashboard ## When to avoid - Weak phones, unless you lower the particle count - Text-heavy sections, where constant motion distracts - Pages that already run another heavy WebGL effect ## How to ask your AI ```text Create a Three.js particle cloud in the hero that morphs between a sphere, a ring, a cube and my brand name, with smooth transitions and shape changes on click or keyboard. Use my brand colors, pause it off screen and show the text at rest for people who prefer reduced motion. ``` With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising. ## Questions about Batuta ### Can I put my brand name in Batuta? Yes. The text prop in Batuta sets the fourth shape: the component draws up to 8 characters in a bold font on a canvas and spreads the particles over the letters. Short names are easier to read; colors, dot size, the interval between shapes and the particle count are props too. ### Does Batuta work with a keyboard and screen readers? Yes. Batuta behaves like a button: it takes focus, Enter or Space moves to the next shape, and a polite live region announces the current one. A tap on a phone also changes the shape. Its labels are written in Portuguese, so ask your AI to translate them for an English site. ### Does Batuta respect reduced motion settings? Yes. When the reduced motion preference is on, Batuta opens straight on the text, with no automatic cycle, no rotation and no cursor tilt. Click, Enter or Space still change the shape, but instantly, without the animated transition. ## Related components - [Miçanga](https://vibecode.thmtecnologia.com/en/components/micanga/): A word drawn with thousands of tiny colored dots that scatter when the mouse passes and drift back into place. - [Limalha](https://vibecode.thmtecnologia.com/en/components/limalha/): Hundreds of thousands of fine grains run in filaments, like ink spreading on paper, and swirl around the cursor. - [Arquibancada](https://vibecode.thmtecnologia.com/en/components/arquibancada/): The image is made of thousands of colored dots that move away from the cursor and drift back. - [Cordel](https://vibecode.thmtecnologia.com/en/components/cordel/): A repeating phrase runs endlessly over a 3D knot that turns slowly and tilts with the mouse. - [Quimera](https://vibecode.thmtecnologia.com/en/components/quimera/): A glossy liquid 3D shape that ripples, merges with a ring and two capsules and turns with your mouse. --- 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).