Hero made by @ybouane.

@crazygl/hero-water-surface

A dark reflective water plane. Stacked Gerstner waves animate the surface and the cursor leaves a continuous wake of expanding Gaussian wavefronts plus a live finger-press depression directly under the pointer. Sky, sun, and horizon refract through every displaced normal.

Demo

Water Surface

Install

npm install @crazygl/hero-water-surface

Usage

import WaterSurface from '@crazygl/hero-water-surface';

export default function Hero() {
  return (
    <WaterSurface
      waterColor="#0a1830"
      skyColor="#5790c8"
      waveAmplitude={0.5}
      rippleStrength={1}
    />
  );
}

Customise

• Content — contentType (heading / two-columns / custom) with heading, subheading, optional media, or column1 / column2 / content.
• Style — waterColor, skyColor, sunColor, horizonColor; waveScale (swell frequency), waveAmplitude (swell height), rippleStrength (cursor wake visibility), speed.
• Typography — headingFontFamily.

Best for

• Travel, hospitality and resort landing pages.
• Premium product launches, fragrance and beauty brands.
• Contemplative editorial / brand sites that want a calm, tactile water surface.

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.