Melting Text
As letras escorrem e se esticam para baixo, como se estivessem derretendo.
Onde usar
Títulos de terror ou divertidos
Variações
- SVG filter melt
Prompt
Substitua [onde] pela parte da sua página e cole o prompt no seu agente de IA. Cada prompt traz o nome da animação, então da próxima vez basta pedir pelo nome.
Adicione um efeito "Melting Text" em [onde].
As letras devem afundar devagar enquanto gotas se esticam por baixo, como se estivessem derretendo, e parar em um visual derretido e imóvel.
Reproduza só uma vez quando o texto entrar na tela, mantenha a palavra legível no final e não anime se o usuário preferir movimento reduzido (prefers-reduced-motion).Animações parecidas
ABC
ABC
Passe o mouse por cima
SVG Displacement Distortion
Também chamada feTurbulence Distortion, Displacement Map Effect
Um filtro SVG distorce texto ou formas com ruído animado.
Onde usar
Hover líquido ou de ondulação
Adicione um efeito de hover "SVG Displacement Distortion" (também chamado displacement map effect) em [onde].
Enquanto o ponteiro estiver por cima, o texto ou a forma deve ondular e tremer como se visto através de água em movimento, surgindo suavemente, e voltar a ficar nítido quando o ponteiro sair.
Aplique o filtro de distorção só enquanto o efeito estiver ativo para não custar nada em repouso, e mostre o mesmo efeito no foco do teclado.ABCDEF
Squiggly Text
Também chamada Wobbly Text, Turbulence Text
As bordas das letras tremem como se fossem desenhadas à mão, usando um filtro de deslocamento SVG.
Onde usar
Títulos com cara de rascunho ou divertidos
Adicione um efeito "Squiggly Text" (também chamado wobbly text ou turbulence text) em [onde].
As bordas das letras devem tremer levemente, como se fossem desenhadas à mão e redesenhadas várias vezes por segundo: uma fervura sutil e nervosa, não uma onda suave.
Mantenha o texto legível e deixe-o parado se o usuário preferir movimento reduzido (prefers-reduced-motion).ABCDEFGHIJABCDEFGHIJ
Text Distortion
Também chamada Organic Text Distortion
O texto se deforma e ondula de forma orgânica, movido pela rolagem ou pelo movimento do ponteiro.
Onde usar
Portfólios experimentais
Adicione um efeito "Text Distortion" (também chamado organic text distortion) em [onde].
Uma linha de texto deve fluir para o lado sem parar e se deformar e ondular de forma orgânica enquanto se move, como vista através de água em movimento, com o fluxo movido pela rolagem do usuário.
Mantenha a distorção leve o bastante para o texto continuar legível, deixe-a fluida em dispositivos mais lentos e desative-a se o usuário preferir movimento reduzido (prefers-reduced-motion).Mais em Text
ABCDEFGHI
Morphing Text
Também chamada Text Morph
Uma palavra se desfoca e se funde na próxima no mesmo lugar.
Onde usar
Slogans do hero
Adicione um efeito "Morphing Text" (também chamado text morph) em [onde].
Uma palavra deve se desfocar e derreter na próxima no mesmo lugar, com uma fusão suave e pegajosa, e ficar parada por um instante antes da próxima troca.
Alterne as palavras sem cortes, deixe os leitores de tela lerem as palavras como texto normal e pare a alternância se o usuário preferir movimento reduzido (prefers-reduced-motion).ABCDEF
Neon Glow Text
Também chamada Neon Sign Flicker, Glowing Text
O texto brilha como um tubo de neon e pisca ou pulsa.
Onde usar
Temas de vida noturna e games
Adicione um efeito "Neon Glow Text" (também chamado neon sign flicker ou glowing text) em [onde].
O texto deve brilhar como um tubo de neon, com uma luz suave e constante, e de vez em quando apagar por um instante como um letreiro de verdade.
Deixe a piscada ocasional em vez de rápida, porque flashes rápidos podem fazer mal a alguns usuários, e mantenha o brilho fixo se o usuário preferir movimento reduzido (prefers-reduced-motion).A
E
I
MB
F
J
NC
G
K
OD
H
L
PQ
R
S
T
Role aqui dentro
Scrolling Letters
Também chamada On-Scroll Letter Animations
As letras de um título se embaralham ou se movem em sequência conforme o usuário rola pelas seções.
Onde usar
Indicadores de seção
Adicione "Scrolling Letters" (também chamado on-scroll letter animations) em [onde].
Conforme o usuário rola pelas seções, as letras do título devem rolar para o próximo caractere uma após a outra, da esquerda para a direita, ligadas diretamente à posição da rolagem.
Ao rolar de volta para cima, elas devem voltar, e os leitores de tela devem receber o título atual como texto normal.