CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/product-exploded-view

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.

ReactWebGL3DImageInteractiveFont#3d#product#exploded#assembly#engineering#studio#premium#three

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
01 · Install the package

One command, zero config.

npm install @crazygl/hero-product-exploded-view
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

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

export default function Landing() {
  return (
    <ProductExplodedView />
  );
}
03 · Use it in a page

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.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

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

export default function Page() {
  return (
    <section>
      <ProductExplodedView
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Scroll-to-Assemble Product

A 3D product begins disassembled and clicks together as you scroll the page. Once whole, the camera eases in and benefit labels fade in around it. Cinematic three-point studio lighting with HDRI reflections.

Floating 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.

Product Pedestal

A 3D product model rests on a minimal floating pedestal under studio HDRI lighting. Slow turntable rotation, soft contact shadow, drifting dust, subtle mouse parallax, and press-and-drag to free-spin the product.

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.

Product in Liquid

A product floats suspended inside a thick, slowly churning liquid blob that genuinely refracts it. Tinted glass, chromatic dispersion, drifting bubbles and crawling caustics give a sensual, premium feel.

White Infinity Studio

A 3D product GLB floats in a bright seamless infinity studio — the floor sweeps continuously up into the back wall with no visible seam. Three-point softbox lighting, a soft floor reflection, and a very subtle camera dolly sell the look of a premium catalogue photoshoot.Live customizer

Product Exploded View

Product Model (GLB/GLTF)Multi-mesh GLBs explode per mesh (best result). Single-mesh GLBs fall back to horizontal Y-band slicing.Model size1Spin speed0.25Slow ambient turntable once reassembled.Max explode distance2.6How far parts spread at peak separation.Loop explode/assembleWhen on, the model continuously cycles: hold-exploded → assemble (ease-in-out) → hold-assembled → explode (ease-out-back). The hold phases respect their durations exactly.Hold (exploded)3.8sAssemble duration1.8sTime for the parts to come together. Eases in/out for a smooth landing on rest position.Hold (assembled)2.5sExplode duration1.5sTime for the parts to fly apart. Ease-out-back gives a slight mechanical overshoot at the end.Ambient breath0Tiny perpetual sine oscillation. 0 = perfectly still during hold phases (default).Single-mesh band count5When the GLB has a single big mesh, the geometry is sliced into this many bands along its longest axis.Drag inertia0.6How long the model coasts after you release a drag. Higher = longer coast.Show connector linesFaint emissive lines from each part to its target rest position. Off by default for a clean exploded shot.Camera distance6Parallax azimuth6Degrees of horizontal pointer-driven camera orbit.Parallax elevation3.5Studio HDRIEquirectangular JPG drives the PBR reflections on metallic parts.Env intensity1Exposure1.05Key lightWarm key from upper-right.Key intensity1.5Fill lightCool fill from lower-left.Fill intensity0.55Rim lightBacklight rim for silhouette separation.Rim intensity0.85Transparent backgroundBG topBG bottomHeading FontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.