Desenha efeitos interativos com desfocagem progressiva e gradientes suaves

HanaPrincipiante9 min

Neste tutorial, exploramos vários estilos e técnicas para criar designs suaves e sofisticados com gradientes suaves e desfocagem progressiva, e como transformá-los em experiências interativas no Hana.

Começamos por explicar como adicionar gradientes e efeitos de desfocagem a formas e passamos depois à criação de elementos interativos, como animações ao passar o cursor, efeitos que seguem o cursor, animações em loop e efeitos de desfocagem em camadas. Tudo pronto para ser incorporado no teu projeto web, sem código! 👌

Cenas de demonstração: https://app.spline.design/ui/f7cc3864-707e-492a-8148-0e1ea37be1d3

O que vais aprender

  1. 0:00Introdução
  2. 0:15Design simples com gradientes
  3. 2:57Adicionar desfocagem da camada
  4. 3:41Criar uma interação ao passar o cursor
  5. 5:28Criar um efeito de desfocagem interativo no texto
  6. 6:44Criar uma animação em loop de gradiente radial
  7. 7:43Criar um efeito de gradiente e desfocagem que segue o cursor

Recursos relacionados

Tutoriais relacionados

Todos os tutoriais