# Gaita Texto em fonte variável em que as letras engrossam e afinam uma após a outra, como se a palavra respirasse. > Gaita é um componente do THM Componentes que anima os eixos de uma fonte variável letra por letra, num vaivém contínuo: cada letra vai de um estado a outro, como de fina a grossa, e volta, com um pequeno atraso entre elas. O resultado é uma palavra que parece respirar, boa para heros tipográficos de marca. - Categoria: Texto e tipografia - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, Motion for Vue - Interação: Nenhuma: o efeito roda sozinho - URL: https://vibecode.thmtecnologia.com/componentes/gaita/ ## Como ele é Parece uma palavra respirando. Na demo, com a fonte Roboto Flex, cada letra passa devagar de traço fino e em pé para traço grosso e levemente inclinado, e depois volta, num vaivém que nunca para. As letras não mudam juntas: a onda começa na primeira e corre até a última, com um pequeno atraso entre elas, então a palavra parece inflar e esvaziar como um pulmão. Cada ida ou volta leva cerca de um segundo e meio. A origem da onda pode ser o início, o fim, o centro ou qualquer letra, e a cor é a do texto ao redor. ## Você pode estar procurando isto se pediu algo assim - “texto em que as letras engordam e emagrecem uma depois da outra” - “palavra que parece respirar no topo do site” - “efeito de fonte variável pulsando sozinho, sem precisar do mouse” - “título com as letras ficando grossas em onda, de um lado para o outro” - “aquele efeito de tipografia viva que fica pulsando devagar” - “animação sutil para o nome da marca que não pare nunca” - “letras que mudam de peso e inclinação em sequência” ## Também chamado de tipografia viva, texto que respira, variable font animation, fonte variável animada, staggered font weight, texto pulsante, font variation settings ## Quando usar - Hero tipográfico de marca com uma palavra ou um nome curto - Página de estúdio de design, de tipografia ou de agência criativa - Tela de abertura ou de espera que pede movimento calmo - Destaque de uma palavra num título que, fora isso, fica parado ## Quando evitar - Projetos sem fonte variável carregada, em que as letras não mudam - Textos longos, em que o movimento contínuo atrapalha a leitura - Páginas com vários elementos animados em volta, que disputam a atenção ## Como pedir para a sua IA ```text Crie um efeito de texto que respira no título da marca: as letras de uma fonte variável mudam de peso em sequência, num vaivém contínuo e suave, com versão estática para quem prefere menos movimento, texto completo para leitores de tela e as cores e a fonte do meu projeto. ``` Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Gaita ### Preciso de uma fonte especial para Gaita? Sim, de uma fonte variável. Gaita anima os eixos que você informa, como peso e largura, então a fonte do projeto precisa ter esses eixos; a demo usa Roboto Flex com peso e inclinação. Com uma fonte comum, sem eixos variáveis, as letras ficam paradas. ### Gaita respeita quem prefere menos movimento? O componente original anima sempre, em loop. O prompt do THM Componentes pede à IA uma versão estática para quem ativa a redução de movimento no sistema, o que em Gaita é simples: fixar as letras num único estado da fonte, sem o vaivém. ### Gaita atrapalha leitores de tela? Não. Gaita divide a palavra em letras animadas que ficam escondidas dos leitores de tela e mantém, ao lado, o texto inteiro numa camada só para eles. Assim, quem usa leitor ouve a palavra normal, sem soletrar letra por letra. ## Componentes relacionados - [Vaivém](https://vibecode.thmtecnologia.com/componentes/vaivem/): Um título em que cada letra fica mais fina ou mais grossa numa onda contínua e engrossa perto do mouse. - [Chumbo](https://vibecode.thmtecnologia.com/componentes/chumbo/): As letras perto do mouse engrossam e as mais distantes continuam finas, numa mancha de negrito que segue o cursor. - [Arpejo](https://vibecode.thmtecnologia.com/componentes/arpejo/): Ao passar o mouse, as letras ficam mais grossas uma de cada vez, numa onda que percorre a palavra. - [Lustro](https://vibecode.thmtecnologia.com/componentes/lustro/): Texto em cinza suave com uma faixa de brilho que atravessa as letras de tempos em tempos. - [Parafina](https://vibecode.thmtecnologia.com/componentes/parafina/): Palavras que se revezam no título, derretendo uma na outra como gotas que se juntam antes de ficarem nítidas. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.