Text Reveal Card
Também chamada Spotlight Text Reveal
Mover o ponteiro sobre um card revela um texto oculto sob uma borda de máscara ou um holofote.
Onde usar
Cards de recursos
Variações
- horizontal wipe
- circular spotlight
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 "Text Reveal Card" (também chamado de spotlight text reveal) em [onde].
Conforme o ponteiro se move pelo card, uma borda vertical deve segui-lo de perto e revelar um texto oculto de um dos lados, de forma suave e direta, sem atraso.
Em telas de toque, onde não há ponteiro para seguir, deixe que arrastar ou tocar revele o texto oculto, e torne esse texto disponível para leitores de tela.Animações parecidas
A
Passe o mouse por cima
SVG Mask Reveal
Também chamada SVG Mask Effect, Clip-path Reveal, Spotlight Mask
Uma forma de máscara varre a área ou segue o ponteiro para revelar o conteúdo por baixo.
Onde usar
Revelação de imagens e conteúdo
Adicione um efeito de hover "SVG Mask Reveal" (também chamado clip-path reveal ou spotlight mask) em [onde].
Enquanto o ponteiro estiver por cima, uma máscara circular deve crescer a partir do centro e revelar o conteúdo por baixo, e fechar de novo quando o ponteiro sair: suave e bem rápido.
Mantenha as duas camadas exatamente do mesmo tamanho para nada se deslocar, e mostre a mesma revelação no foco do teclado e ao tocar.- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
Mova o ponteiro aqui
Cursor Spotlight
Também chamada Flashlight cursor, Spotlight effect
Um círculo de luz ao redor do ponteiro revela o conteúdo enquanto o resto fica escuro.
Onde usar
Seções hero, efeitos de revelação
Adicione um efeito "Cursor Spotlight" (também chamado flashlight cursor ou spotlight effect) em [onde].
Um círculo de luz suave deve seguir o ponteiro e revelar o conteúdo abaixo dele enquanto o resto da área fica escurecido.
Em dispositivos de toque, onde não há ponteiro para seguir, mostre o conteúdo totalmente iluminado.A
B
Arraste
Before-After Slider
Também chamada Image comparison slider, Compare slider
Um divisor arrastável revela uma imagem de um lado e outra do outro.
Onde usar
Retoque de fotos, comparações de produtos
Adicione um "Before-After Slider" (também chamado image comparison slider ou compare slider) em [onde].
Duas imagens ficam sobrepostas e, ao arrastar um divisor vertical, aparece mais de uma e menos da outra; o divisor segue o ponteiro diretamente, sem atraso.
Comece com o divisor no meio e faça funcionar com toque e com as setas do teclado.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.Mais em Text
A
Q
J
P
N
V
Y
HB
K
M
L
Z
W
T
XC
R
G
Q
J
P
N
VD
Y
H
K
M
L
Z
WE
T
X
R
G
Q
J
PF
N
V
Y
H
K
M
L
Passe o mouse por cima
Text Scramble
Também chamada ScrambleText, Text Decode, Encrypted Text, Text Unscramble, Hyper Text
O texto é substituído por caracteres aleatórios que se renovam e aos poucos se resolvem na palavra final.
Onde usar
Títulos hero com estilo tech, hover em links
Adicione um efeito de hover "Text Scramble" (também chamado de text decode ou encrypted text) em [onde].
Quando o ponteiro passar sobre o texto, cada letra deve piscar rapidamente entre caracteres aleatórios e parar na letra real, resolvendo uma após a outra da esquerda para a direita.
Evite que a largura do texto salte enquanto ele embaralha, mantenha os leitores de tela no texto real e mostre o mesmo efeito no foco do teclado.ABCDEF
Mova o ponteiro aqui
Text Tilt
Também chamada Perspective Text Tilt
O texto gira em perspectiva 3D acompanhando a posição do mouse.
Onde usar
Títulos hero
Adicione um efeito "Text Tilt" (também chamado de perspective text tilt) em [onde].
O texto deve se inclinar levemente em 3D na direção do ponteiro enquanto ele se move, acompanhando com suavidade, e voltar a ficar reto suavemente quando o ponteiro sair.
Mantenha a inclinação sutil para o texto continuar legível, e deixe o texto reto em telas de toque e se o usuário preferir movimento reduzido (prefers-reduced-motion).ABC DEFG
Typewriter (máquina de escrever)
Também chamada Typing Animation, Typewriter Effect, Typing Text
Os caracteres aparecem um de cada vez como se estivessem sendo digitados, geralmente seguidos de um cursor piscando.
Onde usar
Títulos hero, slogans
Adicione um efeito de máquina de escrever (Typewriter) em [onde], também chamado de typing animation ou typing text.
Os caracteres devem aparecer um de cada vez em um ritmo de digitação constante, com um cursor logo após o último caractere digitado que pisca algumas vezes quando a digitação termina.
Reproduza só uma vez em vez de em loop, deixe os leitores de tela lerem o texto completo desde o início e mostre o texto completo se o usuário preferir movimento reduzido (prefers-reduced-motion).