Como ele é
Lembra faixas de luz neon refletidas na água, ou fumaça colorida atravessando a tela. Cinco ondas grossas e desfocadas, em azul-celeste, anil, roxo, fúcsia e ciano, cruzam a área de ponta a ponta na altura do meio e ondulam sem parar, cada uma num desenho diferente, deixando um leve rastro ao se mover. O fundo é preto por padrão, e as ondas são semitransparentes, então as cores se misturam onde se cruzam. Há duas velocidades, lenta e rápida. Por padrão, a seção ocupa a altura da tela, e o conteúdo fica centralizado por cima das ondas.
Você pode estar procurando isto se pediu algo assim
- ondas coloridas se mexendo atrás do título do site
- fundo preto com faixas neon ondulando no meio da tela
- efeito de onda de luz para o hero de clínica ou de app de saúde
- linhas onduladas desfocadas tipo fumaça colorida
- fundo animado com ondas azuis e roxas com cara de tecnologia
- algo que lembre água em movimento no topo da página
- aquele fundo de ondas neon que aparece em landing de startup
Também chamado de
- fundo de ondas
- ondas animadas
- ondas neon
- fundo ondulado
- ondas de luz desfocadas
- animated waves
- neon waves
Quando usar
- Hero de marca ligada a água, saúde, bem-estar ou fluidez
- Topo de SaaS ou de app com identidade azul e roxa
- Abertura de evento, podcast ou lançamento com fundo escuro
- Seção de chamada para ação com título curto e centralizado
Quando evitar
- Sites de fundo claro, sem trocar o preenchimento preto e as cores neon
- Páginas com texto longo no meio da tela, onde as ondas passam por trás das letras
Como pedir para a sua IA
Crie um fundo de ondas neon desfocadas em canvas no hero: cinco faixas onduladas nas cores da minha marca cruzando o meio da tela, velocidade lenta, pausa fora da tela, versão estática para movimento reduzido e bom contraste para o título por cima.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Maré
Como trocar as cores das ondas de Maré?
A prop colors de Maré recebe uma lista de cores que as cinco ondas usam em sequência, e backgroundFill define o fundo, preto por padrão. Também dá para ajustar a espessura em waveWidth, o desfoque em blur e a transparência em waveOpacity. O prompt do THM Componentes pede à IA para trocar o azul, o roxo e o fúcsia padrão pelos tokens de cor do projeto.
Maré funciona no Safari e no celular?
Funciona. Maré desenha em canvas 2D e já trata o Safari, que não aceita filtro no canvas: nele, o desfoque é aplicado por CSS. A animação roda sem parar, inclusive fora da tela, e o canvas segue o tamanho do contêiner, que por padrão ocupa a altura da tela. O prompt do THM Componentes pede carregamento sob demanda e teste em mobile.
Maré respeita quem prefere menos movimento?
Não por conta própria: Maré anima o tempo todo enquanto está na página. O prompt do THM Componentes pede à IA uma versão estática para quem ativa a redução de movimento no sistema. Um quadro parado das ondas, com o mesmo desfoque, mantém o visual, e a velocidade slow deixa o movimento mais calmo para todos.
