Como ele é
É como olhar o mar do convés de um barco no fim da tarde. A água azul-petróleo ondula em várias camadas, com cristas que ganham espuma branca, e o sol baixo, cor de pêssego, desenha uma faixa dourada que brilha até o horizonte enevoado. O céu vai do azul-claro no alto a um tom quente perto da linha d'água, com nuvens finas. Uma boia coral, com mastro e uma luz acesa no topo, balança no ritmo das ondas. Mover o mouse desloca a câmera devagar, e o conteúdo colocado dentro fica por cima da cena.
Você pode estar procurando isto se pediu algo assim
- um mar animado ao pôr do sol para o topo do site
- fundo de oceano 3D calmo para uma marca de bem-estar
- ondas do mar se mexendo com o sol refletido na água
- cena tranquila de mar aberto para a página de viagens
- algo contemplativo para a página de manifesto da empresa
- água em 3D com uma boia boiando e céu de fim de tarde
Também chamado de
- oceano 3D
- mar animado
- ocean shader
- ondas de Gerstner
- Gerstner waves
- sunset ocean scene
- fundo de pôr do sol
Quando usar
- Hero contemplativo de marca de bem-estar, terapia ou meditação
- Página de agência de viagens, hotel de praia ou turismo náutico
- Página de manifesto ou de sustentabilidade com título curto
- Abertura de campanha sobre calma, pausa ou natureza
Quando evitar
- Páginas de conversão rápida, em que a cena compete com o botão principal
- Público que usa celulares antigos: a água é calculada em 3D a cada quadro
- Marcas sem relação com água, natureza ou descanso
Como pedir para a sua IA
Crie um oceano 3D em Three.js ao entardecer no hero da página, com ondas de Gerstner, reflexo do sol e uma boia que flutua junto com as ondas. Use as cores da minha marca na água e no céu, pause fora da tela e congele o mar para quem prefere menos movimento.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Calmaria
Dá para mudar a cor do mar e do céu em Calmaria?
Sim. Calmaria tem props para a cor da água profunda, do topo do céu e do sol, que também tinge o horizonte e a névoa, além da altura do sol, da altura das ondas e de quão pontudas ficam as cristas. O prompt do THM Componentes orienta a IA a usar os tokens de cor do projeto nessas props.
Calmaria respeita quem prefere menos movimento?
Sim. Com a preferência de reduzir movimento ativa, Calmaria congela o mar num quadro parado: as ondas, a espuma e a boia param. A câmera ainda acompanha o cursor de leve, e o componente pausa sozinho quando sai da tela, então não pesa enquanto a pessoa lê outras seções.
Calmaria funciona no celular?
Funciona em celulares com WebGL2. Calmaria limita a resolução a 2x e reduz a qualidade se os quadros caírem; sem mouse, o mar segue animado, só sem o movimento de câmera. Como é um componente Pesado no THM Componentes, o prompt pede carregamento sob demanda, fallback estático no Nuxt e comparação de LCP e INP.
