Hero made by @ybouane.

@crazygl/hero-caustic-pool

Light dancing at the bottom of a swimming pool — animated caustic networks refracted through gentle surface waves, FBM-warped so the pattern never repeats.

Demo

Caustic Pool Light

Install

npm install @crazygl/hero-caustic-pool

Usage

import CausticPool from '@crazygl/hero-caustic-pool';

export default function Hero() {
	return (
		<CausticPool
			heading="Submerged."
			shallowColor="#28a4d8"
			intensity={1}
			warp={1}
		/>
	);
}

Customise

• Pool — deepColor, shallowColor (depth gradient) and causticColor (the bright network).
• Caustic — intensity (brightness), scale (mesh frequency / tightness), speed (flicker rate), warp (how much FBM deforms the lattice).
• Content — contentType (heading / two-columns / custom) with heading + subheading, plus headingFontFamily.

Best for

• Travel, hospitality and resort landing pages.
• Swimwear, wellness and summer-campaign brands.
• Calm product backgrounds where you want moving light without hard geometry.

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.