# Maré Cinco ondas de luz neon, grossas e desfocadas, ondulando sem parar no meio de um fundo escuro. > Maré é um fundo animado do THM Componentes com cinco ondas de luz neon, grossas e desfocadas, que cruzam o meio da tela e ondulam sem parar sobre um fundo escuro. Usa canvas 2D, tem cores, espessura, desfoque, transparência e duas velocidades ajustáveis e combina com heros de marcas ligadas a água, saúde e tecnologia. - Categoria: Fundos e atmosferas - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, Canvas 2D, simplex-noise - Interação: Nenhuma: o efeito roda sozinho - URL: https://vibecode.thmtecnologia.com/componentes/mare/ ## 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 ```text 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. ## Componentes relacionados - [Flâmula](https://vibecode.thmtecnologia.com/componentes/flamula/): Cinco fitas coloridas em camadas, com sombras suaves, ondulando devagar de um lado a outro da tela. - [Névoa](https://vibecode.thmtecnologia.com/componentes/nevoa/): Fundo animado em CSS com faixas de luz azul e violeta que deslizam devagar, como uma aurora boreal. - [Veludo](https://vibecode.thmtecnologia.com/componentes/veludo/): Tecido de cetim escuro com dobras diagonais que ondulam devagar, com brilho frio e textura de trama fina. - [Vaga-lume](https://vibecode.thmtecnologia.com/componentes/vaga-lume/): Centenas de pontinhos neon em azul, violeta e magenta fluindo em correntes curvas sobre um fundo escuro. - [Tarrafa](https://vibecode.thmtecnologia.com/componentes/tarrafa/): Reflexos de luz dançando como no fundo de uma piscina ao sol, com bordas levemente coloridas. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.