CrazyGLFloating Product
A 3D product model drifts and slowly turns in a quiet studio atmosphere. The model wears its own PBR textures; soft dust particles drift through the air around it.
Usage
import FloatingProduct from '@crazygl/hero-floating-product';
export default function Hero() {
return (
<FloatingProduct
heading="Made to be admired."
productModel="/models/camera.glb"
environmentImage="/hdri/studio.avif"
layout="content-left"
/>
);
}Customise
- Layout —
layout(centered / content-left / content-right),positionX,positionY,dragInertia. - Product —
productModel(GLB/GLTF),productScale,spinSpeed,hoverAmp,parallaxAzimuth,parallaxElevation. - Dust —
dustCount,dustSize,dustSpeed,dustSway,dustOpacity,dustColor,windStrength. - Lighting —
environmentImage(HDRI),envIntensity,exposure, key/fill light colours and intensities. - Background —
transparent,bgTopColor,bgBottomColor.
Best for
- Premium hardware launches and e-commerce hero pages.
- Jewellery, watch and audio-gear brands where the product is the story.
- Studio / showroom product showcases.
One command, zero config.
npm install @crazygl/hero-floating-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 FloatingProduct from '@crazygl/hero-floating-product';
export default function Landing() {
return (
<FloatingProduct />
);
}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 FloatingProduct from '@crazygl/hero-floating-product';
export default function Page() {
return (
<section>
<FloatingProduct
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
