Hero made by @ybouane.

@crazygl/hero-chrome-waves

An undulating ocean of liquid chrome. Six dispersive waves displace a mirror surface; a procedural studio HDRI stretches and warps across every crest.

Demo

Liquid Chrome Waves

Install

npm install @crazygl/hero-chrome-waves

Usage

import ChromeWaves from '@crazygl/hero-chrome-waves';

export default function Page() {
  return (
    <ChromeWaves
      heading="Liquid chrome."
      environmentImage="https://crazygl.com/samples/hdri1.avif"
      waveAmplitude={0.5}
      horizonTilt={0.55}
    />
  );
}

Customise

• Studio HDRI — environmentImage (equirectangular 2:1 reflection map; leave empty for a procedural studio built from envTopColor, envBottomColor, sunColor, rimColor).
• Surface — metalTint (chrome colour), waveAmplitude, waveScale, speed, envRotation, horizonTilt (face-on vs flat).
• Content — heading / subheading, or two-columns / custom content modes, plus heading font.

Best for

• Luxury product launches and premium SaaS landing pages.
• Fintech, crypto and high-end agency brands wanting a tactile, expensive centerpiece.
• Design-studio sites that need a reflective, cinematic hero.

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.