CrazyGLProduct in Liquid
A product floats suspended inside a thick, slowly churning liquid blob that genuinely refracts it. Tinted glass, chromatic dispersion, drifting bubbles and crawling caustics give a sensual, premium feel.
Usage
import ProductInLiquid from '@crazygl/hero-product-in-liquid';
export default function Hero() {
return (
<ProductInLiquid
productModel="https://example.com/bottle.glb"
liquidColor="#00c2d6"
liquidIOR={1.33}
/>
);
}Customise
- Subject placement —
layout(centered / content-left / content-right),positionX/Y,parallaxStrength. - Product —
productModel(GLB/GLTF),useGlbMaterials,productScale,productYaw,productPitch, and override colour/metalness/roughness. - Liquid —
liquidColor,liquidIOR,liquidThickness,liquidRoughness,liquidDispersion,absorptionDistance,blobSize. - Motion & surface —
turbulence,turbulenceScale,surfaceSpeed,bubbleCount/Speed/Size. - Lighting —
environmentImage(HDRI),envIntensity,exposure, key/fill light colour + intensity. - Scene —
causticIntensity,causticColor,bgTopColor,bgBottomColor.
Best for
- Beauty, skincare, and fragrance product pages.
- Premium drinks, bottled water, and supplement launches.
- Luxury food and wellness brands.
- Editorial product reveals where the object is the hero.
One command, zero config.
npm install @crazygl/hero-product-in-liquidImport 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 ProductInLiquid from '@crazygl/hero-product-in-liquid';
export default function Landing() {
return (
<ProductInLiquid />
);
}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 ProductInLiquid from '@crazygl/hero-product-in-liquid';
export default function Page() {
return (
<section>
<ProductInLiquid
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
