SVG Mask Reveal

Um círculo de luz ao redor do ponteiro revela o conteúdo enquanto o resto fica escuro.

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.

Mover o ponteiro sobre um card revela um texto oculto sob uma borda de máscara ou um holofote.

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.

Um clip-path ou máscara cresce a partir de uma borda ou ponto e vai revelando a imagem ou o texto.

Adicione um efeito de entrada "Clip Reveal" (também chamado mask reveal, wipe reveal ou image reveal) em [onde].
Uma borda de recorte deve varrer da esquerda para a direita, revelando o conteúdo aos poucos enquanto ele fica parado: fluido, com início e fim suaves.
Reserve o espaço do elemento desde o início para nada se deslocar, e mostre tudo revelado se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma imagem é revelada por uma cobertura que encolhe ou pela borda de uma máscara que se expande.

Adicione um "Image Reveal Wipe" (também chamado mask reveal ou clip-path reveal) em [onde].
Quando a imagem entrar na tela ao rolar, uma cobertura deve se retirar a partir de um lado e revelá-la suavemente no ritmo da rolagem, para que fique totalmente visível bem antes de sair da tela.
Reserve o espaço da imagem para o layout não pular e mostre a imagem totalmente revelada se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma bolha orgânica muda seu contorno continuamente.

Adicione uma animação em loop "Blob Morph" (também chamada morphing blob ou animated blob) em [onde].
Uma bolha orgânica deve mudar o contorno devagar e sem parar enquanto gira de leve, fluida e suave, sem cantos marcados.
Faça o loop ser contínuo para a forma nunca pular, e deixe-a parada se o usuário preferir movimento reduzido (prefers-reduced-motion).

Formas próximas se fundem como gotas líquidas por meio de um filtro de desfoque e contraste.

Adicione um "Gooey Effect" (também chamado goo effect ou metaballs) em [onde].
Com o ponteiro por cima, pequenas gotas devem se afastar da forma principal, esticando como líquido antes de se soltar, e voltar fluindo para se fundir suavemente quando o ponteiro sair.
Aplique o filtro de desfoque e contraste só ao pequeno grupo de formas, não à página inteira, e mostre o mesmo efeito no foco do teclado e ao tocar.

Um ícone, como o menu hambúrguer, se transforma em outro (X) com barras que giram e se movem.

Adicione um "Icon Morph" (também chamado hamburger to X ou menu icon morph) em [onde].
A cada toque, as barras de cima e de baixo devem primeiro deslizar juntas até o meio e depois girar formando um X enquanto a barra do meio some; tocar de novo inverte o movimento: rápido e ágil.
Faça dele um botão de alternância de verdade, com rótulo acessível e estado expandido que mudem junto, e mantenha o tamanho do ícone fixo para nada ao redor se deslocar.