What it looks like
It looks like a word breathing. In the demo, set in Roboto Flex, each letter slowly goes from a thin, upright stroke to a heavy, slightly slanted one and then back, in a loop that never stops. The letters do not change together: the wave starts at the first one and runs to the last, with a small delay between them, so the word seems to inflate and deflate like a lung. Each way takes about a second and a half. The wave can start at the beginning, the end, the center or any letter, and the color comes from the surrounding text.
You may be looking for this if you asked for something like
- text where letters get bolder and thinner one after another
- a word that seems to breathe at the top of my site
- a variable font effect that pulses on its own, no mouse needed
- a headline with letters getting bold in a wave from side to side
- that living typography effect that keeps pulsing slowly
- a subtle, never-ending animation for the brand name
- letters that change weight and slant in sequence
Also known as
- living typography
- variable font animation
- staggered font weight
- pulsing text
- font variation animation
- animated font axes
When to use
- A typographic brand hero with one word or a short name
- A design studio, type foundry or creative agency page
- An opening or waiting screen that calls for calm motion
- Highlighting one word in a headline that otherwise stays still
When to avoid
- Projects without a variable font loaded, where the letters will not change
- Long text, where constant motion gets in the way of reading
- Pages with lots of other animated elements nearby competing for attention
How to ask your AI
Create a breathing effect on the brand headline: the letters of a variable font change weight in sequence in a smooth, continuous back-and-forth, with a static version for reduced motion, the full text for screen readers and my project colors and font.
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 Gaita
Do I need a special font for Gaita?
Yes, a variable font. Gaita animates the axes you pass, such as weight and width, so your project font needs those axes; the demo uses Roboto Flex with weight and slant. With a regular font that has no variable axes, the letters stay still.
Does Gaita respect reduced motion settings?
The original component always animates in a loop. The THM Componentes prompt asks your AI for a static version for people who turn on reduced motion in their system settings, which is simple with Gaita: hold the letters in a single font state, without the back-and-forth.
Does Gaita get in the way of screen readers?
No. Gaita splits the word into animated letters that are hidden from screen readers and keeps the whole text next to them in a layer meant only for assistive technology. People using a screen reader hear the normal word instead of a letter-by-letter spelling.
