Stroke Text Draw
Também chamada Draw In Text, Animated Stroke Text
Os contornos das letras são desenhados como um traço antes de o preenchimento aparecer.
Onde usar
Logos e palavras do hero
Variações
- stroke then fill
- outline only
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 "Stroke Text Draw" (também chamado draw in text ou animated stroke text) em [onde].
Os contornos das letras devem se desenhar sozinhos com suavidade e, quando estiverem completos, o preenchimento deve aparecer com um fade.
Reproduza só uma vez ao carregar, mantenha a palavra acessível como texto real e mostre o texto já preenchido se o usuário preferir movimento reduzido (prefers-reduced-motion).Animações parecidas
Line Drawing
Também chamada Path Drawing, Stroke Dash Animation, Self-Drawing SVG, DrawSVG, Line Draw, SVG Path Draw, Stroke draw, Checkmark draw
Um traço SVG parece ser desenhado ao longo do caminho conforme o deslocamento do tracejado é animado.
Onde usar
Ícones, logos e ilustrações
Adicione uma animação "Line Drawing" (também chamada path drawing ou self-drawing SVG) em [onde].
Cada traço deve parecer se desenhar sozinho, suavemente, ao longo do caminho do início ao fim, e um segundo traço, como um sinal de visto, deve vir logo depois do primeiro.
Reproduza só uma vez ao entrar na tela, sem repetir, e mostre as linhas já desenhadas se o usuário preferir movimento reduzido (prefers-reduced-motion).ABCDABCD
Passe o mouse por cima
Text Hover Effect
Também chamada Gradient Outline Text Hover, Text Fill on Hover
Uma palavra em contorno é preenchida ou iluminada por um degradê que segue o ponteiro ou passa por ela.
Onde usar
Palavras grandes de destaque, rodapés
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.Liquid Fill Text
Também chamada Water Fill Text
As letras se enchem de um líquido que sobe e ondula.
Onde usar
Indicadores de carregamento e títulos divertidos
Adicione um efeito "Liquid Fill Text" (também chamado de water fill text) em [onde].
As letras contornadas devem se encher de um líquido cuja superfície ondulada rola para o lado enquanto o nível sobe e desce devagar, em um loop suave e contínuo.
Mantenha a palavra disponível como texto real para leitores de tela e deixe o líquido em um nível parado se o usuário preferir movimento reduzido (prefers-reduced-motion).Mais em Text
AGBHCIDJEKFL
Passe o mouse por cima
Text 3D Flip
Também chamada 3D Flip Text Reveal
Letras ou palavras giram em 3D em torno de um eixo para mostrar o próximo texto no verso.
Onde usar
Links com hover e títulos
Adicione um efeito de hover "Text 3D Flip" (também chamado 3D flip text reveal) em [onde].
Quando o ponteiro estiver sobre o texto, cada letra deve girar em 3D no eixo horizontal para mostrar uma letra nova no outro lado, uma após a outra em uma varredura rápida e suave, e voltar quando o ponteiro sair.
Mantenha a caixa de texto do mesmo tamanho durante o giro e mostre o mesmo efeito no foco do teclado.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).ABCDEFGHIJKLMNOPQRSTUVWX
Text Generate
Também chamada Text Generate Effect
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.
Onde usar
Textos de introdução com estilo de IA
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).