Text Distortion

Um filtro SVG distorce texto ou formas com ruído animado.

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.

As bordas das letras tremem como se fossem desenhadas à mão, usando um filtro de deslocamento SVG.

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

As letras escorrem e se esticam para baixo, como se estivessem derretendo.

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

As palavras aparecem uma após a outra ao carregar a página, muitas vezes com um desfoque que se dissipa, como se estivessem sendo geradas.

Adicione um efeito "Text Generate" em [onde].
As palavras devem aparecer uma após a outra enquanto um desfoque suave se dissipa em cada uma, como se o texto estivesse sendo gerado: constante e calmo.
Reproduza só uma vez ao carregar, deixe os leitores de tela lerem o texto completo desde o início e mostre sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma faixa colorida no estilo marca-texto é desenhada sobre uma frase para destacá-la.

Adicione um efeito marca-texto (Text Highlighter) em [onde], também chamado de highlight marker ou marker underline.
Uma faixa colorida no estilo marca-texto deve passar suavemente por trás da frase-chave, da esquerda para a direita, como se alguém a destacasse com uma caneta.
Reproduza só uma vez quando a frase entrar na tela ao rolar, mantenha o texto legível sobre a faixa e faça a faixa acompanhar a frase corretamente quando ela quebrar em duas linhas.

Uma palavra em contorno é preenchida ou iluminada por um degradê que segue o ponteiro ou passa por ela.

Adicione um "Text Hover Effect" (também chamado de text fill on hover ou gradient outline text hover) em [onde].
A palavra deve começar só com o contorno e, enquanto o ponteiro estiver sobre ela, um preenchimento sólido deve entrar suavemente da esquerda para a direita e recuar quando o ponteiro sair.
Mantenha a palavra em contorno legível antes do preenchimento e mostre o mesmo efeito no foco do teclado.