Como ele é
Pense numa fileira de teclas de piano apertadas da esquerda para a direita. Quando o mouse entra no título, a primeira letra engrossa, depois a segunda, com três centésimos de segundo entre elas, até a palavra inteira ficar em negrito pesado. O movimento tem a suavidade de uma mola. Ao tirar o mouse, as letras voltam ao peso normal na mesma ordem. A onda também pode partir da última letra ou do meio da palavra, e outros eixos da fonte variável, como a largura, podem entrar no efeito. A cor e a fonte são as do seu projeto.
Você pode estar procurando isto se pediu algo assim
- letras que vão ficando em negrito uma por uma quando passo o mouse
- título que engrossa em onda no hover
- lista de vagas com efeito tipográfico ao passar o mouse
- efeito de fonte variável letra a letra para o menu
- deixar os títulos do portfólio com cara de estúdio de design
- texto que muda de peso em sequência, tipo animação de tipografia
Também chamado de
- fonte variável animada
- variable font hover
- letter stagger animation
- animação letra a letra
- font weight animation
- efeito de peso da fonte
Quando usar
- Listas de vagas, serviços ou projetos em sites de estúdio
- Títulos de seção em portfólios com a tipografia como protagonista
- Menus em tela cheia com itens grandes
- Páginas de agência que usam fonte variável na identidade
Quando evitar
- Projetos sem fonte variável, em que o efeito não aparece
- Telas de toque, já que a animação depende do hover
- Parágrafos e textos longos: o efeito foi pensado para rótulos curtos
Como pedir para a sua IA
Crie um efeito de fonte variável letra a letra nos itens da lista de serviços: no hover, cada letra ganha peso em sequência com mola, usando a fonte variável do projeto, leitura correta por leitores de tela e versão estática para movimento reduzido.
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 Arpejo
Preciso de uma fonte especial para Arpejo?
Sim. Arpejo anima as variações da fonte, então precisa de uma fonte variável, como a Roboto Flex usada na demo. Com uma fonte comum, as letras não mudam. O peso vai de 400 a 900 por padrão, e você pode trocar ou somar outros eixos que a fonte tenha, como a largura.
Leitores de tela leem a palavra picada em letras?
Não. Arpejo guarda o texto completo numa cópia visível só para leitores de tela e esconde deles as letras animadas, então a palavra é lida inteira. A animação depende do mouse, e o prompt do THM Componentes pede à IA uma versão estática para quem prefere menos movimento.
Dá para mudar a ordem da onda de letras?
Dá. Arpejo deixa a sequência começar pela primeira letra, pela última, pelo centro ou por uma posição escolhida, e o intervalo entre as letras é ajustável. Com intervalo zero, a palavra inteira muda de peso de uma vez, como numa das linhas da demo.
