CrazyGLProduct Inside a Glass Capsule
A product floats inside a transmissive glass capsule, like a luxury museum object or futuristic sample container — refraction through the shell, a frosted inner layer, a band of condensation, slow rotation and a soft pedestal glow.
Usage
import GlassCapsuleProduct from '@crazygl/hero-glass-capsule-product';
export default function Page() {
return (
<GlassCapsuleProduct
heading={'Sealed\nto perfection.'}
productModel="https://crazygl.com/samples/nokia-phone.glb"
layout="content-left"
/>
);
}Customise
- Product —
productModel(GLB/GLTF) auto-fits to the capsule interior and keeps its authored PBR by default;productScale,productLift, plus a tinted-studio override (useGlbMaterials,productColor,productMetalness,productRoughness). - Capsule glass —
capsuleTint,glassRoughness,glassThickness,glassIOR,dispersion,frostAmount, andcondensationshape the refraction, frost, and fogged base. - Motion —
rotationSpeed,floatAmount(bob), andparallaxStrength(pointer orbit). - Lighting & stage —
accentColor,glowStrength,exposure, optionalenvironmentImageHDRI override, andbgTopColor/bgBottomColorbackdrop.
Best for
- Beauty, supplement, and wellness brands
- Premium tech-device and gadget launches
- Collectibles and limited editions
- Any "scientific / clinical / precious" product story
One command, zero config.
npm install @crazygl/hero-glass-capsule-productImport 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 ProductInsideAGlassCapsule from '@crazygl/hero-glass-capsule-product';
export default function Landing() {
return (
<ProductInsideAGlassCapsule />
);
}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 ProductInsideAGlassCapsule from '@crazygl/hero-glass-capsule-product';
export default function Page() {
return (
<section>
<ProductInsideAGlassCapsule
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
