slices3d

morph="slices3d" — split-flap slats cut from the REAL object (match-morph-slices.ts).

Read the rig's notes

The straightforward way to do slices in 3D: the element is copied
`morph-count` times and each copy is clipped to one horizontal band by two
world-space clipping planes — every slab is the actual geometry, materials and
all. Each slab turns 180° about the vertical axis (top first), travelling to
the same band of the incoming element; at 90° it is squeezed flat along its
depth and swaps for the incoming slab. Outgoing slabs draw in the outgoing
scene and incoming ones in the incoming scene, so each is lit like the element
it came from. Every element here is turned (−30° → +30° → −15°).

  gap 1   defaults: 10 slabs · stagger 0.55 · lift 1
  gap 2   morph-count=24 · morph-stagger=0.8 · morph-spread=0.4

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/slices3d.promo

Topic: morphs
Scenes: 3
Kind: reference rig

//
    morph="slices3d" — split-flap slats cut from the REAL object (match-morph-slices.ts).

    The straightforward way to do slices in 3D: the element is copied
    `morph-count` times and each copy is clipped to one horizontal band by two
    world-space clipping planes — every slab is the actual geometry, materials and
    all. Each slab turns 180° about the vertical axis (top first), travelling to
    the same band of the incoming element; at 90° it is squeezed flat along its
    depth and swaps for the incoming slab. Outgoing slabs draw in the outgoing
    scene and incoming ones in the incoming scene, so each is lit like the element
    it came from. Every element here is turned (−30° → +30° → −15°).

      gap 1   defaults: 10 slabs · stagger 0.55 · lift 1
      gap 2   morph-count=24 · morph-stagger=0.8 · morph-spread=0.4

    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/slices3d.promo
promo#morph-slices3d
  scene#s1(duration=2.6 transition=match transition-duration=1.8)
    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="slices3d" kind=layer font="Roboto" size=200 worldHeight=40 color=#e8eefc weight=700 align=center position="0 420 0")
    text#s1-sub(text="10 slabs of the real object turn — top first" kind=layer font="Roboto" size=110 worldHeight=18 color=#8ea3c8 weight=500 align=center position="0 378 0")
    ui3d#s1-m1(match=m1 morph=slices3d width=600 height=440 world_width=240 position="-640 150 0" rotation="0 -30 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=slices3d width=600 height=440 world_width=240 position="-320 150 0" rotation="0 -30 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=2