# Pirueta On hover, each letter turns like a small cube, one after another, in a 3D wave. > Pirueta is a THM Componentes component that turns each letter into a small 3D cube: on hover, the letters rotate a quarter turn in sequence and show the next face. It uses CSS 3D transforms with no WebGL, keeps the text accessible to screen readers and works well in headlines, links and project names. - 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: Mouse - URL: https://vibecode.thmtecnologia.com/en/components/pirueta/ ## What it looks like Imagine each letter printed on a small cube, like the blocks of a desk calendar. On hover, the cubes turn a quarter turn, one after another, 50 milliseconds apart, and show the neighboring face, which carries the same letter; the result is a 3D wave that runs across the word with a springy motion. When the mouse leaves, the letters return to their starting position in 0.3 seconds. The turn can go up, down or sideways, and the wave can start from the first letter, the last, the center or in random order. Each face takes its own styling, so the word can change color as it turns. ## You may be looking for this if you asked for something like - “letters that spin in 3D when I hover” - “text that flips like a cube on hover” - “a headline with letters turning one after another” - “a link effect with letters rotating sideways, agency site style” - “a word that changes color by spinning its letters on hover” - “that effect with letters on cubes that rotate under the cursor” - “a 3D effect on menu text without using WebGL” ## Also known as staggered letter flip, 3D flip on hover, rotating letters hover, cube text effect, 3D letter rotation, flip text 3D ## When to use - Section titles and callouts on agency, studio and portfolio sites - Navigation links and text buttons that call for a strong hover - Project names in portfolio lists - A highlighted word that changes color as it turns, with different styling on each face ## When to avoid - Long text, because every letter becomes a 3D layer and the effect gets heavier - Sites used mostly on phones, since the turn depends on hovering ## How to ask your AI ```text Create a 3D spinning letters hover effect for my section titles: each letter turns like a cube in sequence and shows the next face in my brand highlight color, with text accessible to screen readers and a static version for 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 Pirueta ### Does Pirueta work with screen readers? Yes. Pirueta puts the full sentence in an element visible only to screen readers and hides the animated letters with aria-hidden, so the text is read once, in full. The root element is a paragraph by default; the as prop changes the tag, for example to h2 for a section title. ### Can the word change color as it turns in Pirueta? Yes. Pirueta accepts separate classes for the front face and for the face revealed after the turn, through the frontFaceClass and secondFaceClass props. With different colors on each, the word changes color letter by letter when the mouse passes over it and switches back when it leaves. ### Does Pirueta work on phones? The text shows normally and wraps by word, but the rotation in Pirueta fires when the mouse enters the element, which touch screens only simulate in some browsers. In mobile-first projects, treat the effect as a desktop detail or ask your AI for a version triggered by tap. ## Related components - [Cambalhota](https://vibecode.thmtecnologia.com/en/components/cambalhota/): On hover, each letter slides vertically and gives way to a copy, in a wave that runs across the word. - [Anagrama](https://vibecode.thmtecnologia.com/en/components/anagrama/): An uppercase word that scrambles its letters on hover and settles back in under a second. - [Onomatopeia](https://vibecode.thmtecnologia.com/en/components/onomatopeia/): White letters with a thick black outline and an offset yellow shadow, wobbling slightly like a cartoon title. - [Roseta](https://vibecode.thmtecnologia.com/en/components/roseta/): A short phrase wraps around a circle and keeps turning, like a stamped badge next to a button. - [Arpejo](https://vibecode.thmtecnologia.com/en/components/arpejo/): On hover, the letters turn bolder one at a time, in a wave that runs through the word. --- 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).