# Filete Uma linha fina surge embaixo da palavra quando o mouse passa, crescendo do centro ou atravessando de um lado ao outro. > Filete é um componente do THM Componentes que anima o sublinhado de links e chamadas quando o mouse passa por cima. A linha pode crescer do centro, atravessar a palavra de um lado ao outro ou sair e voltar, sempre na cor do texto. É leve e serve bem a menus, rodapés e listas de contato. - 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: Mouse - URL: https://vibecode.thmtecnologia.com/componentes/filete/ ## Como ele é Em repouso, o texto parece comum. Quando o mouse entra, uma linha fina, com espessura de um décimo do tamanho da fonte, se desenha logo abaixo das letras. No estilo padrão ela nasce no meio e se abre para as duas pontas em um quarto de segundo, e recolhe quando o mouse sai. Nos outros dois estilos, a linha entra por um lado e sai pelo outro, como uma régua que passa sob a palavra, ou já fica visível, sai por um lado e volta pelo outro. A cor é sempre a do próprio texto, então acompanha o modo claro e o escuro sem ajuste. ## Você pode estar procurando isto se pediu algo assim - “linha que aparece embaixo do link quando passo o mouse” - “sublinhado que cresce do meio para os lados no menu” - “efeito de traço passando por baixo da palavra no hover” - “deixar os links do rodapé com cara de site de agência” - “menu de navegação com sublinhado animado e elegante” - “aquele efeito de link sublinhado de portfólio de designer” - “underline animado que entra por um lado e sai pelo outro” ## Também chamado de sublinhado animado, animated underline, hover underline, link underline animation, sublinhado no hover, underline hover effect ## Quando usar - Links do menu principal e do rodapé de sites institucionais - Listas de contato e de redes sociais em portfólios - Chamadas dentro do texto que precisam parecer clicáveis - Sites editoriais com tipografia grande e em caixa alta ## Quando evitar - Apps usados principalmente no celular, onde não existe hover - Links no meio de parágrafos, que precisam de sublinhado visível sem hover para serem reconhecidos ## Como pedir para a sua IA ```text Adicione um sublinhado animado no hover aos links do menu e do rodapé: a linha cresce do centro na cor do texto, também aparece no foco pelo teclado e fica estática para quem prefere menos movimento. ``` 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 Filete ### Filete funciona no celular? Filete reage à entrada do mouse, e telas de toque não têm hover, então no celular a animação não serve de pista. Se o link precisa se destacar também ali, use o estilo que mantém a linha visível em repouso e só a faz sair e voltar no hover. O prompt do THM Componentes também pede teste em mobile. ### Dá para usar Filete com navegação por teclado? Filete anima quando o mouse entra no texto, não quando o link recebe foco pela tecla Tab. O link continua acessível, porque o componente é só um invólucro e a linha fica oculta para leitores de tela, mas vale pedir à IA que dispare a mesma animação no foco. ### Como trocar a cor e a espessura do sublinhado? A linha de Filete usa a cor atual do texto, então basta mudar a cor do link com os tokens do seu projeto, como o prompt do THM Componentes orienta. A espessura e a distância das letras são proporcionais ao tamanho da fonte e se ajustam pelas props de proporção. ## Componentes relacionados - [Cambalhota](https://vibecode.thmtecnologia.com/componentes/cambalhota/): Ao passar o mouse, cada letra desliza na vertical e dá lugar a uma cópia, numa onda que atravessa a palavra. - [Anagrama](https://vibecode.thmtecnologia.com/componentes/anagrama/): Palavra em maiúsculas que embaralha as letras ao passar o mouse e se forma de novo em menos de um segundo. - [Ênfase](https://vibecode.thmtecnologia.com/componentes/enfase/): Uma faixa de cor cresce atrás de um trecho do texto, como um marca-texto passando sobre a frase. - [Pincelada](https://vibecode.thmtecnologia.com/componentes/pincelada/): Uma faixa de cor preenche o fundo da palavra da esquerda para a direita, como uma caneta marca-texto. - [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. --- 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.