# Calmaria A calm sea at sunset, with moving waves, a golden reflection of the sun and a bobbing buoy. > Calmaria is an exclusive THM Componentes component that builds a calm 3D sea at sunset in Three.js: summed waves move the surface, the low sun leaves a golden path on the water and a buoy rises and falls with the swell. The camera follows the cursor slightly. It suits calm heroes for wellness, travel and sustainability brands. - Category: 3D and space - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Heavy: WebGL or simulation; one per page, loaded on demand - Technology: Vue 3, TypeScript, WebGL, Three.js - Interaction: Mouse - URL: https://vibecode.thmtecnologia.com/en/components/calmaria/ ## What it looks like It is like looking at the sea from the deck of a boat late in the afternoon. Teal-blue water rolls in several layers, with crests that pick up white foam, and the low peach-colored sun draws a golden band that shimmers up to a hazy horizon. The sky goes from light blue overhead to a warm tone near the waterline, with thin streaks of cloud. A coral buoy with a mast and a glowing light on top bobs in time with the waves. Moving the mouse shifts the camera gently, and anything you place inside sits on top of the scene. ## You may be looking for this if you asked for something like - “an animated sea at sunset for the top of my site” - “a calm 3D ocean background for a wellness brand” - “moving ocean waves with the sun reflecting on the water” - “a peaceful open sea scene for a travel page” - “something contemplative for our company manifesto page” - “3D water with a floating buoy and a late afternoon sky” ## Also known as 3D ocean, ocean shader, Gerstner waves, animated sea background, sunset ocean scene, WebGL ocean ## When to use - A calm hero for wellness, therapy or meditation brands - Travel agency, beach hotel or sailing pages - Manifesto or sustainability pages with a short headline - Campaign openers about calm, rest or nature ## When to avoid - Fast conversion pages, where the scene competes with the main button - Audiences on old phones: the water is computed in 3D every frame - Brands with no link to water, nature or rest ## How to ask your AI ```text Create a Three.js 3D ocean at sunset in the page hero, with Gerstner waves, sun reflections and a buoy that floats with the swell. Use my brand colors for the water and sky, pause it when off screen and freeze the sea for people who prefer reduced motion. ``` With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising. ## Questions about Calmaria ### Can I change the sea and sky colors in Calmaria? Yes. Calmaria has props for the deep water color, the top of the sky and the sun, which also tints the horizon and the haze, plus sun height, wave height and how sharp the crests get. The THM Componentes prompt tells your AI to use your project color tokens in those props. ### Does Calmaria respect reduced motion settings? Yes. When the reduced motion preference is on, Calmaria freezes the sea in a still frame: waves, foam and the buoy stop. The camera still follows the cursor slightly, and the component pauses by itself when it leaves the screen, so it costs nothing while people read other sections. ### Does Calmaria work on phones? It works on phones with WebGL2. Calmaria caps resolution at 2x and lowers quality if frames slow down; without a mouse the sea keeps moving, just without the camera drift. Because it is rated Heavy in THM Componentes, the prompt asks for on-demand loading, a static Nuxt fallback and an LCP and INP check. ## Related components - [Boreal](https://vibecode.thmtecnologia.com/en/components/boreal/): A night sky with green and cyan curtains of light rippling over stars and a mountain range. - [Tarrafa](https://vibecode.thmtecnologia.com/en/components/tarrafa/): Light patterns dancing like the bottom of a sunlit swimming pool, with faintly colored edges. - [Garoa](https://vibecode.thmtecnologia.com/en/components/garoa/): The photo sits under a sheet of water that ripples with the mouse, with clicks and with raindrops. - [Maré](https://vibecode.thmtecnologia.com/en/components/mare/): Five thick, blurred neon light waves rolling nonstop across the middle of a dark background. - [Lusco-fusco](https://vibecode.thmtecnologia.com/en/components/lusco-fusco/): Patches of indigo, cyan and lavender that blend and drift slowly, with a light film grain on top. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).