Hero made by @ybouane.

@crazygl/hero-product-exploded-view

A 3D model splits into several floating layers on load, then slowly reassembles. Hovering separates the parts again — connector lines hint at the assembly path. Cinematic three-point studio lighting with HDRI reflections.

Demo

Product Exploded View

Install

npm install @crazygl/hero-product-exploded-view

Usage

import ProductExplodedView from '@crazygl/hero-product-exploded-view';

export default function Page() {
  return (
    <ProductExplodedView
      heading="Engineered, layer by layer."
      productModel="https://crazygl.com/samples/camera.glb"
      explodeAmount={2.6}
      layout="content-left"
    />
  );
}

Customise

• Content & Layout — contentType, heading/subheading, layout (centered / content-left / content-right), positionX / positionY.
• Model — productModel (GLB/GLTF URL), modelScale, spinSpeed ambient turntable.
• Explosion — explodeAmount, loopExplode plus holdExploded / assembleDuration / holdAssembled / explodeDuration, fallbackBands (single-mesh slicing), showConnectorLines, dragInertia.
• Camera & parallax — cameraDistance, parallaxAzimuth, parallaxElevation.
• Lighting — environmentImage (HDRI), envIntensity, exposure, plus key/fill/rim light colours and intensities.
• Background & Typography — transparent, bgTopColor / bgBottomColor, headingFontFamily.

Best for

• Consumer electronics and gadget launches
• Industrial design portfolios
• Engineering / hardware startups
• B2B product and spec pages

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.