CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/water-ripple-headline

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.

ReactWebGLInteractiveFont#water#ripple#headline#moonlight#reflection#interactive#webgl#premium#typography

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.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-water-ripple-headline
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

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

export default function Landing() {
  return (
    <WaterRippleHeadline />
  );
}
03 · Use it in a page

SSR-safe by default.

The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

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

export default function Page() {
  return (
    <section>
      <WaterRippleHeadline
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

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.

Logo Reflected in Water

A glowing brand mark floats above a real 3D water plane. Perspective foreshortening, fog-attenuated distant reflection, and Schlick Fresnel sell the scene as photographic. Stacked Gerstner waves drive the surface; pointer wake rings and a continuous finger-press depression carve into the mirror.

Waving Flag Headline

Your headline printed on a slow-waving cloth flag. The fabric ripples in 3D with soft cinematic lighting; the cursor pushes the cloth like a gust of wind.

Typographic Fluid Simulation

A bold headline acts as a mask for a real-time colorful fluid. Domain-warped FBM noise advected over time + a pointer-driven velocity grid swirl two color fields inside the type while the background stays minimal. Move the cursor to inject velocity and color into the letters.

Extruded 3D Headline Sculpture

Your headline as a thick, bevelled 3D sculpture floating under three-point studio lighting. Each letter has glossy bevelled edges, the camera parallaxes with your pointer so the depth reads from every angle, a soft contact shadow + AO strip ground it, and a real mirrored reflection fades into the glossy floor. A CTA button hover sends a sweep of light across the letters.

Typography In Portal

Your headline rendered inside a glowing circular portal — text drifts across the opening, the rim glows and ripples with noise, and the pointer bends the portal in real time. Built as a single fullscreen WebGL shader that samples a canvas-rendered text texture with chromatic aberration.Live customizer

Water Ripple Headline

Wave amplitude0.04Wave speed1Surface detail1SurfaceWater tintSpecular intensity1.5MoonlightText colorText opacity0.9Text scale1Ripple strength0.7Ripple decay1Sky topSky bottomHorizon Y0.55Star density0.04Star brightness1Camera tilt16.5°Surface Y-0.25worldSurface Z0worldHeading fontHeading weight800InteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.