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