Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Exploded View

A camera lens comes apart into its glass elements, aperture blades and rings, each part labelled, then clicks back together. Loops perfectly.

Motion, D1 Motion3DSeamless loop, verified778 lines of codev1.0.0

In Light, glass & shine, Art & illustration styles

Next: Chrome Material & Studio LightSurprise me

Exploded View preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source at reduced resolution.

Open in the title maker

Your current settings go with it. Combine several clips and hand them over together from your sequence.

Effect controls

Presets

1

How far the parts travel from their places. 1 is the normal layout.

0.07

Seconds between one part starting to move and the next.

1

How much each part pulls in before it moves and settles when it lands. 0 is perfectly smooth.

A small heading at the top left. Leave empty for none.

The ring on the lens (or the speaker's frame), the label dots and the title rule.

The preview runs the same code your AI receives. These settings travel with the hand-off.

View code Sample video (default settings, 1.0 MB)
Info

What it is

The "how it works" shot from this autumn's explainer videos. A real-looking object floats in a studio, then slides apart along its axis: the parts that travel furthest leave first, each one pulls in slightly before it moves and settles when it arrives. A thin leader line and a numbered label grow out to every part, the camera pulls back to show the whole layout, and the parts slide home in reverse with a small settle. In the camera lens the glass has the green and violet sheen of coated optics, the nine aperture blades close as the lens opens up and the focus ring turns. You can switch to a loudspeaker driver, change how far apart the parts go, how quickly they follow each other and how much they snap, turn the labels and title on or off, and pick the backdrop, label and accent colours and the camera angle. The animation code takes any list of parts, so you can explode your own product with it.

Reuse it in your own idea

  • Explode your own product: give createExplodedView your meshes, how far each should travel and a name, and keep the label overlay.
  • Camera or photography channel: the default with the title set to your channel, then cut to Kinetic Title Reveal for the name.
  • Audio product: Speaker teardown on your brand colour, with labels off and Camera drift on as a loop behind a voice-over.
  • Clean product page loop: White product shot, no labels, on your page background.

Which part is reusable

src/exploded-view.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses chrome-material only for the demo.

Good to know

  • Parts move along one straight axis only; objects whose parts come apart sideways (a phone, a shoe) need their own offsets in several directions.
  • Part names are fixed in the two built-in objects; change them in the code or pass your own parts.
  • Labels are drawn flat over the picture, so a part can never hide its label.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/exploded-view.js
Exports
  • createExplodedView({ parts, axis?, spread?, duration?, stagger?, overshoot? }) => { group, parts, amount, update(time), labelLayout(camera, width, height, rows?), dispose() }
  • createCameraLens({ accent?, engraving? }) => { parts, length, radius, dispose() }
  • createSpeakerDriver({ accent? }) => { parts, length, radius, dispose() }
  • createLabelOverlay(width, height) => { canvas, ctx, draw(layout, { ink?, accent?, title?, fontFamily?, scale? }), render(renderer), dispose() }
  • revolve(profile, segments?) => THREE.BufferGeometry
Dependencies (exact)
  • three@0.185.1 (source) — Renderer, geometry and physical materials (transmissive, coated glass).
  • chrome-material@1.1.0 (demo) — Studio environment light, backdrop, floor and contact shadow.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: Parts travel along the group's local axis (default +Y). The lens and speaker are 1 unit = 1 cm, axis +Y, front towards +Y, centred on the origin.

Lighting: Physical materials: needs scene.environment for the glass coating, the chrome mount and the anodised metal; any key and rim light helps the edges.

Timing: update(time) is a pure function of time; frames render in any order.

Output
1080×1080, 30 fps, 8 s · procedural (computed from the frame number) · seamless loop — One loop is closed → apart → hold → closed: every part's travel, spin and the aperture are functions of the loop phase that return exactly to zero (the settle ends at rest before the loop ends), and the camera drift is a sine of the loop, so the last frame meets the first.
Tested
Rendered 240 frames on 2026-10-10 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (WebGL 2 via SwiftShader (software)). Same frame twice from fresh pages: identical. Loop: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.
Performance
About sixty meshes made once; each frame moves them and redraws one 2D label canvas. Transmissive glass costs an extra render pass. Smooth at 1080p on laptop GPUs. Software WebGL (no GPU) renders slowly, about a second a frame at 1080p.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- exploded-view/1.0.0 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add --params my-settings.json (from Copy settings) for your own settings.
Version
1.0.0 · sha256:2b88ce0b79b093a0…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. Third-party: three.js 0.185.1 (MIT). License details
Provenance
Original code written for AI Pixel Wizard on 2026-10-06 by an automated agent (the daily trend routine), inspired by the exploded-view and cutaway explainers made with Claude Opus 5.5 in late September and early October 2026, among them an exploded camera lens lab by @RyanSael and a turbofan cutaway by @techartist_, as listed in the Claude Video index (https://claudevideo.org/videos/interactive-lab-explains-focus-with-an-exploded-camera-lens, https://claudevideo.org/videos/turbofan-jet-engine-opens-into-an-interactive-3d-cutaway). No code, models, images or fonts were copied, and no technique was taken from those videos. The lens and the speaker are modelled in code from general knowledge of how they are built.
BinMore like this

More like this

Play these full screen

Resin Pour

3D object3DSeamless loop14 seconds

Snow Globe

3D object3DSeamless loop12 seconds