Hero made by @ybouane.

@crazygl/hero-water-ripple-headline

A bold headline printed on a moonlit pool. Stacked Gerstner waves and pointer-driven Gaussian wakes bend the letters in real time, and the CTA fires a circular wavefront across the surface. Reflective night water with soft moon highlights and a low cinematic camera.

Demo

Water Ripple Headline

Install

npm install @crazygl/hero-water-ripple-headline

Usage

import WaterRippleHeadline from '@crazygl/hero-water-ripple-headline';

export default function Hero() {
  return (
    <WaterRippleHeadline
      heading="Still as moonlight."
      subheading="Touch the surface. The letters bend."
      ctaLabel="Make a wave"
      onCTAClick="/get-started"
    />
  );
}

onCTAClick accepts a URL string OR a function — same prop name, type-detected at runtime.

Customise

• Content — heading (printed on the water), subheading, ctaLabel, onCTAClick.
• Water — waveAmplitude, waveSpeed, surfaceDetail (fine moon-sparkle chop), surfaceColor, waterTint, specularIntensity, moonlightColor.
• Text on water — textColor, textOpacity, textScale.
• Pointer — rippleStrength, rippleDecay.
• Background — skyTop, skyBottom, horizonY, starDensity, starBrightness.
• Camera — cameraTilt, surfaceY, surfaceZ.
• Typography — headingFontFamily, headingFontWeight.

Best for

• Premium product launches and flagship landing pages.
• Editorial, publishing, and fashion brands that want bold typography to feel alive.
• Calm, focus-led apps with a "touch this and it responds" interaction.

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.