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