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