Hero made by @ybouane.

@crazygl/hero-ocean-above

Top-down stylised ocean. Wave height-field via FBM, foam crests on the sharpest gradients, sun glints across the highest peaks. Pointer pushes the water.

Demo

Ocean Above

Install

npm install @crazygl/hero-ocean-above

Usage

import OceanAbove from '@crazygl/hero-ocean-above';

export default function Hero() {
	return (
		<OceanAbove
			heading="Open water."
			amplitude={0.35}
			foamAmount={0.5}
			sunStrength={1.1}
		/>
	);
}

Customise

• Water — deepColor / shallowColor, foamColor, sunColor, amplitude, scale, windSpeed, foamAmount, sunStrength.
• Content & typography — heading / subheading / two-column / custom content, plus heading font.

Best for

• Sailing and marine brands
• Ocean-conservation nonprofits
• Surfwear and watersports labels
• Coastal hospitality and travel sites

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.