CrazyGLCaustic Pool Light
Light dancing at the bottom of a swimming pool — animated caustic networks refracted through gentle surface waves, FBM-warped so the pattern never repeats.
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) andcausticColor(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) withheading+subheading, plusheadingFontFamily.
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.
One command, zero config.
npm install @crazygl/hero-caustic-poolImport once, drop it in.
The component takes the same props you see in the live customizer on the right — every default ships poster-quality.
import CausticPoolLight from '@crazygl/hero-caustic-pool';
export default function Landing() {
return (
<CausticPoolLight />
);
}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.
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';
import CausticPoolLight from '@crazygl/hero-caustic-pool';
export default function Page() {
return (
<section>
<CausticPoolLight
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
