Hero made by @ybouane.

@crazygl/hero-depth-wave-field

A perspective grid of small glowing dots forms an undulating 3D wave terrain that recedes into the distance and fades to black — the look of a topographic depth-sensing point cloud. Smooth traveling waves ripple through the field; crests glow electric violet, troughs and far rows sink into deep indigo. The pointer pushes a ripple toward the cursor.

Demo

Depth Wave Field

Install

npm install @crazygl/hero-depth-wave-field

Usage

import DepthWaveField from '@crazygl/hero-depth-wave-field';

export default function Landing() {
  return (
    <DepthWaveField
      heading="Powerful 3D depth sensing."
      cameraTilt={38}
      pointerRipple={0.6}
    />
  );
}

Customise

• Grid — gridResolution (points per side), gridSize (world extent), pointSize.
• Waves — waveHeight, waveSpeed, waveScale (wavelength).
• Color — crestColor, troughColor, backgroundColor.
• Camera — cameraTilt (framing), fogDensity (depth fade).
• Interaction — pointerRipple (cursor bulge strength).
• Backdrop — transparent to composite over your own page.

Best for

• 3D-sensing / LiDAR / spatial-computing products
• AI and data-infrastructure landing pages
• Hardware launches and instrument-like technical brands
• Any premium hero that wants a precise depth-scan backdrop

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.