# Calmaria

Mar calmo ao pôr do sol, com ondas em movimento, reflexo dourado do sol e uma boia balançando.

> Calmaria é um componente exclusivo do THM Componentes que cria, em Three.js, um mar 3D calmo ao entardecer: ondas somadas deslocam a superfície, o sol baixo deixa um caminho dourado na água e uma boia sobe e desce com as ondas. A câmera acompanha o cursor de leve. Serve para heros contemplativos de bem-estar, viagem e sustentabilidade.

- Categoria: 3D e espaço
- Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo
- Peso no carregamento: Pesado: WebGL ou simulação; um por página, carregado sob demanda
- Tecnologia: Vue 3, TypeScript, WebGL, Three.js
- Interação: Mouse
- URL: https://vibecode.thmtecnologia.com/componentes/calmaria/

## 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

```text
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.

## Componentes relacionados

- [Boreal](https://vibecode.thmtecnologia.com/componentes/boreal/): Céu noturno com cortinas de luz verde e ciano que ondulam sobre estrelas e uma cadeia de montanhas.
- [Tarrafa](https://vibecode.thmtecnologia.com/componentes/tarrafa/): Reflexos de luz dançando como no fundo de uma piscina ao sol, com bordas levemente coloridas.
- [Garoa](https://vibecode.thmtecnologia.com/componentes/garoa/): A foto fica debaixo de uma lâmina d'água que ondula com o mouse, com os cliques e com gotas de chuva.
- [Maré](https://vibecode.thmtecnologia.com/componentes/mare/): Cinco ondas de luz neon, grossas e desfocadas, ondulando sem parar no meio de um fundo escuro.
- [Lusco-fusco](https://vibecode.thmtecnologia.com/componentes/lusco-fusco/): Manchas de índigo, ciano e lavanda que se misturam e derivam devagar, com um grão leve de filme.

---
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.