Bring your website to life with the Ocean Background. This stunning, high-performance Framer component creates an immersive seascape directly in your browser. Complete with drifting clouds, animated water ripples, and a glowing sun, it sets a relaxing and cinematic atmosphere for travel sites, wellness apps, or creative portfolios.
It comes packed with four professionally designed time-of-day presets: Day, Night, Sunset, and Sunrise. If you need to match your brand exactly, switch to Custom Mode to unlock granular controls over the sky, ocean depth, horizon line, and sun glare. You can even adjust the physics of the scene by tweaking the wave speed, cloud density, and sun positioning, ensuring the perfect lighting and mood for your content.
Functions (Key Features):
🌅 Time Presets: Instantly switch between Day, Night, Sunset, or Sunrise themes with perfectly calibrated colors.
🌊 Animated Water: Features procedural wave ripples that scale dynamically towards the horizon for realistic depth.
☀️ Dynamic Sun & Glare: Move the sun anywhere on the X/Y axis. If placed above the water, it generates a realistic, shimmering reflection on the ocean surface.
☁️ Drifting Clouds: Controls for cloud amount, opacity, speed, and wind direction (left/right).
🎨 Full Color Control: "Custom" mode allows you to pick exact hex codes for the Sky, Ocean surface, Ocean depth, and Horizon line.
How to Use:
Copy & Paste: Copy the component from the Layers panel and paste it directly into your Framer project.
Sizing: Set the container's Width and Height to "Fill" (100%) to use it as a full-page background, and ensure it is placed behind your content.
Theme: Choose a predefined Theme (e.g., Sunset) or select Custom to choose your own color palette.
The Sun: Adjust Sun X and Sun Y to position the sun. Notice how the reflection on the water updates automatically!
Weather: Tweak the Cloud Amount, Cloud Speed, and Wave Speed to make the scene calm and relaxing or breezy and energetic.
Alpheratz
