React Ocean Background
Perspective ocean surface with rolling Gerstner waves and sun glitter for React and Next.js — a solid sea stretching to a warm horizon, painted scanline by scanline at 60fps with zero dependencies.
React Ocean Background preview
A calm blue sea that actually recedes — not a flat gradient, not a wireframe mesh. Each horizontal scanline is sampled from a stack of Gerstner-style sinusoids so the foreground crests tower and the distant swells compress into a shimmering horizon. Sun glitter sparkles along the peaks where the light catches them, and a soft sunset haze warms the skyline. Perfect for travel sites, meditation apps, marine SaaS dashboards, and any hero that wants the reader's shoulders to drop an inch.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this background for you — no copy-paste, no CLI:
use shadcnio to install the ocean background into my projectRelated Components
Wave Grid
Animated 3D wireframe wave mesh
Wavy
Stacked flowing wave lines
Underwater
Caustic light patterns seen from below
Light Waves
Ambient vertical color washes
Fog
Soft drifting volumetric fog
Aurora
Emerald northern-lights sheets
FAQ
Was this page helpful?
Sign in to leave feedback.