CrazyGLProduct Turntable Studio
A 3D product model rotates on a premium polished turntable disc beside the hero copy. Studio HDRI lighting, warm key and cool fill softboxes, drag to free-spin, and pointer hover-zoom — a high-end product launch in code.
Usage
import ProductTurntableStudio from '@crazygl/hero-product-turntable-studio';
export default function Hero() {
return (
<ProductTurntableStudio
heading={"Shot in the studio.\nSpun in your browser."}
productModel="/my-product.glb"
productSide="right"
turntableSpeed={0.22}
/>
);
}react, react-dom and @crazygl/core are peer dependencies; three is bundled as a regular dependency.
Customise
- Product —
productModel(GLB/GLTF),productScale,modelLift,turntableSpeed,useGlbMaterials(off →productColor/productMetallic/productRoughness). - Layout —
productSide,productX,productY. - Camera —
stageTilt,cameraDistance,zoomAmount(hover-zoom),parallaxStrength,dragInertia. - Turntable —
discColor,discRadius,discThickness,discMetallic,discRoughness,discRimColor,rimGlow. - Lighting —
environmentImage(HDRI),envIntensity,exposure,keyColor/keyIntensity,fillColor/fillIntensity;floorColor;bgTopColor/bgBottomColor.
Best for
- Consumer-electronics and hardware launches
- Beauty, fragrance, and cosmetics
- Fashion accessories and jewellery
- Premium e-commerce product splashes
One command, zero config.
npm install @crazygl/hero-product-turntable-studioImport 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 ProductTurntableStudio from '@crazygl/hero-product-turntable-studio';
export default function Landing() {
return (
<ProductTurntableStudio />
);
}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 ProductTurntableStudio from '@crazygl/hero-product-turntable-studio';
export default function Page() {
return (
<section>
<ProductTurntableStudio
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
