Hero made by @ybouane.

@crazygl/hero-product-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.

Demo

Product Turntable Studio

Install

npm install @crazygl/hero-product-turntable-studio

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

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.