Animated Gradient

Vários pontos de cor se misturam e flutuam suavemente, formando um fundo orgânico de muitos tons.

Adicione um fundo "Mesh Gradient" (também chamado animated mesh gradient) em [onde].
Várias manchas de cor suaves devem se misturar umas às outras e flutuar devagar pela área, para que o fundo mude o tempo todo de forma orgânica: muito lento e fluido.
Mantenha o conteúdo por cima legível em todas as misturas e pare o movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

Faixas de cor suaves e desfocadas flutuam como uma aurora atrás do conteúdo.

Adicione um "Aurora Background" (também chamado northern lights gradient) em [onde].
Faixas de cor suaves e desfocadas devem flutuar e balançar devagar atrás do conteúdo, sobrepondo-se e misturando-se como uma aurora boreal: bem lento e sonhador.
Mantenha o texto por cima legível, evite refazer o desfoque das faixas a cada quadro para manter a fluidez, e pare o movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

Texto preenchido com um degradê cujas cores mudam ou fluem sem parar.

Adicione um efeito "Animated Gradient Text" (também chamado de aurora text ou rainbow text sweep) em [onde].
As letras devem ser preenchidas com um degradê cujas cores fluem devagar e suavemente pelo texto, em um loop infinito e contínuo.
Mantenha o texto legível sobre o fundo o tempo todo e deixe as cores paradas se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma grade de linhas ou quadrados cujas células aparecem, esmaecem ou piscam.

Adicione um fundo "Animated Grid Pattern" (também chamado flickering grid ou grid background) em [onde].
Uma grade suave de linhas deve ficar parada enquanto algumas células espalhadas aparecem e esmaecem devagar em momentos diferentes: discreto e sutil, nunca todas ao mesmo tempo.
Mantenha-o atrás do conteúdo sem capturar cliques, e pare a cintilação se o usuário preferir movimento reduzido (prefers-reduced-motion).

Linhas finas e luminosas percorrem trajetos e às vezes explodem ao atingir uma superfície.

Adicione um efeito "Background Beams" (também chamado light beams ou background lines) em [onde].
Trajetos curvos e suaves devem ficar no fundo enquanto rastros curtos e luminosos os percorrem um após o outro, em um ritmo calmo e constante.
Escalone os feixes para que nunca se movam em sincronia, mantenha-os atrás do conteúdo e pare-os se o usuário preferir movimento reduzido (prefers-reduced-motion).