Ocean Swell
Ocean Swell is an interactive background in the UI HUB interactive backgrounds collection. A ray-marched procedural ocean on a fullscreen THREE shader quad.
The component is driven by 18 documented props (deep, shallow, scatter, foam, zenith, horizon and 12 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: THREE.WebGLRenderer; ShaderMaterial; 68-step ray march.
Preview the interactive background in the browser above, copy the source, and paste it into your project. Interactive Backgrounds components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Ocean Swell?
Ray-marched procedural ocean with sun glitter, foam crests, and drag-to-orbit camera.
Ocean Swell at a glance
- Category
- Interactive Backgrounds
- Pricing
- Free to use
- Libraries
- React and Three.js
- Styling
- Tailwind CSS
- Configurable props
- 18
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Ocean Swell works
A ray-marched procedural ocean on a fullscreen THREE shader quad. 4 gerstner-style waves drive a 68-step crest trace with adaptive stepping; 7 waves produce analytic normals for fresnel reflections of a value-noise-cloud sky, sharp glitter speculars, subsurface scattering near crests, and value-noise foam on steep slopes, closed with haze fog and a filmic tonemap. The camera auto-drifts and orbits on drag with inertia decay, clamped to a max pitch. DPR-capped at 1.25.
Technical information for Ocean Swell
| Category | Interactive Backgrounds |
|---|---|
| Libraries | React and Three.js |
| Styling | Tailwind CSS |
| Rendering | WebGL shaders |
| State change | calm open ocean with sun glints to drag-orbit camera sweeping over lit swell |
| Props | 18 configurable |
| Usage example | Included on this page |
What Ocean Swell requires
- THREE.WebGLRenderer
- ShaderMaterial
- 68-step ray march
- 4-wave crest + 7-wave detail traces
- gerstner displacement
- fresnel + sky reflection
- glitter specular
- subsurface + foam
- drag inertia camera
- devicePixelRatio cap
How to use Ocean Swell
- Install the dependencies: npm install three.
- Copy the usage example from the Source section of this page. It shows the import path and the props the component expects.
- Render <OceanSwell /> in your page using that import path.
- Pass any of the 18 documented props to change colours, density, speed or behaviour.
Ocean Swell questions
What is Ocean Swell?
Ray-marched procedural ocean with sun glitter, foam crests, and drag-to-orbit camera.
How does Ocean Swell work?
A ray-marched procedural ocean on a fullscreen THREE shader quad. 4 gerstner-style waves drive a 68-step crest trace with adaptive stepping; 7 waves produce analytic normals for fresnel reflections of a value-noise-cloud sky, sharp glitter speculars, subsurface scattering near crests, and value-noise foam on steep slopes, closed with haze fog and a filmic tonemap. The camera auto-drifts and orbits on drag with inertia decay, clamped to a max pitch. DPR-capped at 1.25.
Which category does Ocean Swell belong to?
Ocean Swell is listed under Interactive Backgrounds in the UI HUB catalog. Interactive backgrounds react to cursor movement, scroll and pointer position, so the page feels alive instead of static. Every background here is built as a real React component with configurable props, so you can tune colours, density and speed rather than shipping a black box. Preview one in the browser, read the props, then copy the code straight into your project.
What does the deep prop do in Ocean Swell?
Deep water colour. It defaults to "#04222E".
What does the shallow prop do in Ocean Swell?
Shallow/crest water colour. It defaults to "#1E7F86".
Is Ocean Swell free to use?
Ocean Swell is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Ocean Swell use?
Ocean Swell uses React and Three.js and is styled with Tailwind CSS.
What does Ocean Swell need to run?
Ocean Swell needs THREE.WebGLRenderer, ShaderMaterial, 68-step ray march and 4-wave crest + 7-wave detail traces.