voxels

morph="voxels" — pixelate and rebuild (match-morph-voxels.ts).

Read the rig's notes

Both snapshots are voxelised on one lattice anchored at each element's centre.
Cells in both elements travel as one block (hopping toward the lens, blending
colour); outgoing-only cubes tumble out and fall away; incoming-only cubes drop
in bottom row first and land with a bounce. Front faces carry each cell's exact
snapshot colour, so both hand-offs are a clean pixelate / de-pixelate.

  gap 1   defaults: 30 cells · drop 1 · stagger 0.38
  gap 2   morph-count=14 (chunky) · morph-spread=1.5 · morph-stagger=0.2

Ten matched pairs per gap (match keys m1–m10); scene 2 swaps the grid's rows,
so every pair also travels while it morphs:
  gap 1   ui3d→ui3d · ui3d→shape · shape→ui3d · iphone→ipad · ui3d→laptop ·
          chrome→ui3d · text→shape · shape→shape · text→text · shape→text
  gap 2   ui3d→iphone · shape→ui3d · ui3d→shape · ipad→ui3d · laptop→chrome ·
          ui3d→ui3d · shape→text · shape→ui3d · text→shape · text→ipad
Scene 1 carries the defaults (`morph=<mode>` only), scene 2 the tuned knobs —
a scene's `morph-*` params shape ITS way out.

Preview: http://localhost:4444/runtime?project=promos/primitives/morphs/voxels.promo

Topic: morphs
Scenes: 3
Kind: reference rig

//
    morph="voxels" — pixelate and rebuild (match-morph-voxels.ts).

    Both snapshots are voxelised on one lattice anchored at each element's centre.
    Cells in both elements travel as one block (hopping toward the lens, blending
    colour); outgoing-only cubes tumble out and fall away; incoming-only cubes drop
    in bottom row first and land with a bounce. Front faces carry each cell's exact
    snapshot colour, so both hand-offs are a clean pixelate / de-pixelate.

      gap 1   defaults: 30 cells · drop 1 · stagger 0.38
      gap 2   morph-count=14 (chunky) · morph-spread=1.5 · morph-stagger=0.2

    Ten matched pairs per gap (match keys m1–m10); scene 2 swaps the grid's rows,
    so every pair also travels while it morphs:
      gap 1   ui3d→ui3d · ui3d→shape · shape→ui3d · iphone→ipad · ui3d→laptop ·
              chrome→ui3d · text→shape · shape→shape · text→text · shape→text
      gap 2   ui3d→iphone · shape→ui3d · ui3d→shape · ipad→ui3d · laptop→chrome ·
              ui3d→ui3d · shape→text · shape→ui3d · text→shape · text→ipad
    Scene 1 carries the defaults (`morph=<mode>` only), scene 2 the tuned knobs —
    a scene's `morph-*` params shape ITS way out.

    Preview: http://localhost:4444/runtime?project=promos/primitives/morphs/voxels.promo
promo#morph-voxels
  scene#s1(duration=2.6 transition=match transition-duration=2.0)
    camera(type=perspective fov=42 near=8.5 far=17000 position="0 0 1250" look_at="0 0 0")
    background(top=#101626 bottom=#05070d)
    environment(hdr="studio_small_04_2k" as_background=false background_color=#05070d exposure=1.0 blurriness=0.5 intensity=0.6)
    lights
      light#amb(type=ambient color=#9fb4ff intensity=0.8)
      light#key(type=directional color=#ffffff intensity=2 position="340 680 510")
      light#fill(type=directional color=#7aa2ff intensity=0.6 position="-510 170 340")
    haze#hz0(match=hz0 blend=add opacity=0.4 position="-900 400 -1600" color=#3b5bff size="120000 100000" pulse=0 decay=0)
    text#s1-title(text="voxels" kind=layer font="Roboto" size=200 worldHeight=40 color=#e8eefc weight=700 align=center position="0 420 0")
    text#s1-sub(text="shared cells ride · leftovers tumble · new cells drop in row by row" kind=layer font="Roboto" size=110 worldHeight=18 color=#8ea3c8 weight=500 align=center position="0 378 0")
    ui3d#s1-m1(match=m1 morph=voxels width=600 height=440 world_width=240 position="-640 150 0" rotation="0 -8 0")
      card(x=0 y=0 w=600 h=440 r=34 fill=#0b1622 stroke=#35e0ff stroke_width=3 shadow=true layout=column align=start padding="36 0 0 36" gap=16)
        card(w=hug h=hug fill=transparent shadow=false layout=row align=center gap=14)
          icon(set=tabler name=activity size=40 color=#35e0ff stroke_width=2.4)
          text(text=Pulse size=32 weight=900 color=#f2fbff align=left)
        text(text="Active users" size=22 weight=600 color=#8fb4c6 align=left)
        text(text="24,881" size=76 weight=900 color=#f2fbff align=left)
        progress-bar(margin="12 0 0 0" w=528 h=16 fill=0.72 color=#35e0ff track=#123041)
    ui3d#s1-m2(match=m2 morph=voxels width=600 height=440 world_width=240 position="-320 150 0" rotation="0 -8 0")
      card(x=0 y=0 w=600 h=440 r=34 fill=#181226 stroke=#3a2a5e stroke_width=2 shadow=true layout=column align=center justify=center gap=16)
        card(w=150 h=150 r=75 fill=#a36bff shadow=false layout=row align=center justify=center)
          icon(set=tabler name=user size=84 color=#ffffff stroke_width=2)
        text(text="Maya Chen" size=40 weight=900 color=#f7f2ff align=center)
        text(text="Product designer" size=22 weight=600 color=#a898c8 align=center)
        card(w=200 h=56 r=28 fill=#a36bff shadow=false layout=row align=center justify=center)
          text(text=Follow size=24 weight=800 color=#ffffff align=center)
    primitive#s1-m3(match=m3 morph=voxels position="0 150 0" rotation="0 -14 0")
      path(d="M 0 116 L -100.5 58 L -100.5 -58 L 0 -116 L 100.5 -58 L 100.5 58 Z" depth=34 bevel=