Skip to content
Docs
Open Promoeyes
3d-explode

3d-explode

3D-EXPLODE — five product teardowns built from primitives, in the look of a hardware launch film: take a thing apart in depth and put it back. Every part is its own node driven by hand-written position / rotation / scale keyframes, staggered so the eye can follow each piece out and back. 1 unit = 1 mm. WebGPU. The pure-UI explodes (layer stacks, screen sandwiches, dashboard bursts, recompose) live in ../ui-disassemble/ui-disassemble.promo — scene numbering here continues from there (s06–s10). Preview: http://localhost:4444/runtime?project=promos/primitives/animations-transitions/3d-explode/3d-explode.promo Concept frames (FLUX.2 [flex]) the scenes were agreed from: concepts/contact-sheet.jpg

Read the rig's notes
UI SOURCE — every app screen, callout and display is Tailwind HTML in 3d-explode.screens.html,
converted by `npx tsx scripts/html-screens.mts 3d-explode.screens.html 3d-explode.sections.json
3d-explode.screens.json` and dropped in below as templates (t-…). The s09 watch-face layers
are TRANSPARENT sections carrying only their own content + a cyan hairline, so stacked flush
they compose the face, and pulled apart each one reads on its own.

THE RECIPES
  · axial teardown         s06 s07 s10 — the product's axis is world x; parts slide along it
    to fixed exploded stations, front parts out to +x, rear parts out to −x.
  · vertical teardown      s08 — parts rise out of the speaker body to stations on y while
    the camera orbits.
  · stack along a normal   s09 — every layer is a node at its own rest offset; one track per
    layer adds k × gap along the normal. EXPLODE top-first, COMPRESS bottom-first: with that
    stagger no layer ever overtakes its neighbour, so nothing z-fights on landing.
  · rails that stretch     s09 — a unit cylinder (height 1, base at y=0 inside a g) whose g
    scale.y track rides the top layer's offset; corner dots ride each layer.

SCENE MAP
  s06 axial-teardown  massage gun explodes along its barrel; the app turns intensity up to level 4
  s07 spec-walk       camera tracks the exploded gun; callouts pin to parts, fold into one card
  s08 vertical-stack  a smart speaker comes apart upward; its touch display plays a track
  s09 watch-hybrid    a watch: hardware and watch-face UI layers in one stack
  s10 snap-together   scattered gun parts align, then lock one by one; the app says Connected

AUDIO — music:3d-explode-bed (procedural, D dorian 120 BPM, shared with ui-disassemble)
  + designed SFX media:xp-*.wav (procedural): whoosh-out on every explode, whoosh-in ending on
  every landing, snaps/ticks/clunks on contact frames, and s10's seven locks climbing D minor
  pentatonic into the "Connected" chime. Built-in UI sfx for the app taps.

LOOK — every scene: renderer tone_mapping=None + film_grain output_transform=2 (the sRGB
  encode), bloom, SSAA ×2 last, dof_pass=three. Navy-to-black backdrop, cyan #35e0ff / teal
  #2ee6c8 accents. Each scene stands on a studio set: a glossy floor with a faint grid, a lit
  plinth or pedestal, and standing light bars behind.
Scenes
5
Kind
reference rig
//
    3D-EXPLODE — five product teardowns built from primitives, in the look of a hardware launch
    film: take a thing apart in depth and put it back. Every part is its own node driven by
    hand-written position / rotation / scale keyframes, staggered so the eye can follow each
    piece out and back. 1 unit = 1 mm. WebGPU. The pure-UI explodes (layer stacks, screen
    sandwiches, dashboard bursts, recompose) live in
    ../ui-disassemble/ui-disassemble.promo — scene numbering here continues
    from there (s06–s10).
    Preview: http://localhost:4444/runtime?project=promos/primitives/animations-transitions/3d-explode/3d-explode.promo
    Concept frames (FLUX.2 [flex]) the scenes were agreed from: concepts/contact-sheet.jpg

    UI SOURCE — every app screen, callout and display is Tailwind HTML in 3d-explode.screens.html,
    converted by `npx tsx scripts/html-screens.mts 3d-explode.screens.html 3d-explode.sections.json
    3d-explode.screens.json` and dropped in below as templates (t-…). The s09 watch-face layers
    are TRANSPARENT sections carrying only their own content + a cyan hairline, so stacked flush
    they compose the face, and pulled apart each one reads on its own.

    THE RECIPES
      · axial teardown         s06 s07 s10 — the product's axis is world x; parts slide along it
        to fixed exploded stations, front parts out to +x, rear parts out to −x.
      · vertical teardown      s08 — parts rise out of the speaker body to stations on y while
        the camera orbits.
      · stack along a normal   s09 — every layer is a node at its own rest offset; one track per
        layer adds k × gap along the normal. EXPLODE top-first, COMPRESS bottom-first: with that
        stagger no layer ever overtakes its neighbour, so nothing z-fights on landing.
      · rails that stretch     s09 — a unit cylinder (height 1, base at y=0 inside a g) whose g
        scale.y track rides the top layer's offset; corner dots ride each layer.

    SCENE MAP
      s06 axial-teardown  massage gun explodes along its barrel; the app turns intensity up to level 4
      s07 spec-walk       camera tracks the exploded gun; callouts pin to parts, fold into one card
      s08 vertical-stack  a smart speaker comes apart upward; its touch display plays a track
      s09 watch-hybrid    a watch: hardware and watch-face UI layers in one stack
      s10 snap-together   scattered gun parts align, then lock one by one; the app says Connected

    AUDIO — music:3d-explode-bed (procedural, D dorian 120 BPM, shared with ui-disassemble)
      + designed SFX media:xp-*.wav (procedural): whoosh-out on every explode, whoosh-in ending on
      every landing, snaps/ticks/clunks on contact frames, and s10's seven locks climbing D minor
      pentatonic into the "Connected" chime. Built-in UI sfx for the app taps.

    LOOK — every scene: renderer tone_mapping=None + film_grain output_transform=2 (the sRGB
      encode), bloom, SSAA ×2 last, dof_pass=three. Navy-to-black backdrop, cyan #35e0ff / teal
      #2ee6c8 accents. Each scene stands on a studio set: a glossy floor with a faint grid, a lit
      plinth or pedestal, and standing light bars behind.
promo#3d-explode(width=1920 height=1080 fps=30)
  audio
    tracks
      // music — music:3d-explode-bed: D dorian, 120 BPM (every cut lands on a beat), −16 LUFS.
      // The bed was scored for the original 83 s cut that opened with the five UI explodes; a track
      // has no source offset, so this 42 s cut plays the bed's opening (intro, pulse from 16 s, groove
      // from 32 s) and its s10 riser (at 80 s in the bed) no longer lands on "Connected" — re-score
      // with the procedural-music skill to bring the riser back onto 39.0.
      track#music(asset="music:3d-explode-bed" start=0 volume=0.55)
      // designed SFX (media/xp-*.wav, procedural): whoosh-out = layers parting (peak 0.74 s in);
      // whoosh-in = a reversed swell that stops dead on the landing (1.04 s long → starts 1.04 before)