index

Morph index — every morph mode side by side (match-morph-modes.ts, plus the particle swarm in match-morph-particles.ts).

Read the rig's notes

Each block of the 7×2 grid is ONE mode, named under it. All fourteen blocks show the
same kind of element in a scene, and every scene switches kind, so each block
carries its element through the whole walk with its own mode:

  ui3d stat → heart → ui3d profile → iphone → ipad → "Aa" → laptop → chrome →
  ui3d music → bolt

i.e. ui3d→shape · shape→ui3d · ui3d→device · device→device · device→text ·
text→device · device→device · device→ui3d · ui3d→shape, one gap each. Every
block is its own match pair (key = the mode) and the labels are plain matched
pairs, so they hold still — every cut mixes fourteen different hand-offs.

Each true-3D mode (liquid3d, voxels3d, shatter3d, slices3d) sits right after
its snapshot twin, and every element turns ±25° between scenes: the snapshot
modes morph the camera's flat view of the element, the 3D ones its real
geometry — sides, back and depth.

Defaults everywhere except particles (bigger motes at this distance) and the
voxels (22 / 18 cells, readable at block size); per-mode knobs are in each
mode's own reel.
Preview: http://localhost:4444/runtime?project=promos/primitives/morphs/index.promo

Topic: morphs
Scenes: 10
Kind: reference rig

//
    Morph index — every morph mode side by side (match-morph-modes.ts, plus the
    particle swarm in match-morph-particles.ts).

    Each block of the 7×2 grid is ONE mode, named under it. All fourteen blocks show the
    same kind of element in a scene, and every scene switches kind, so each block
    carries its element through the whole walk with its own mode:

      ui3d stat → heart → ui3d profile → iphone → ipad → "Aa" → laptop → chrome →
      ui3d music → bolt

    i.e. ui3d→shape · shape→ui3d · ui3d→device · device→device · device→text ·
    text→device · device→device · device→ui3d · ui3d→shape, one gap each. Every
    block is its own match pair (key = the mode) and the labels are plain matched
    pairs, so they hold still — every cut mixes fourteen different hand-offs.

    Each true-3D mode (liquid3d, voxels3d, shatter3d, slices3d) sits right after
    its snapshot twin, and every element turns ±25° between scenes: the snapshot
    modes morph the camera's flat view of the element, the 3D ones its real
    geometry — sides, back and depth.

    Defaults everywhere except particles (bigger motes at this distance) and the
    voxels (22 / 18 cells, readable at block size); per-mode knobs are in each
    mode's own reel.
    Preview: http://localhost:4444/runtime?project=promos/primitives/morphs/index.promo
promo#morph-index
  scene#s01(duration=1.4 transition=match transition-duration=1.8)
    camera(type=perspective fov=42 near=8.5 far=17000 position="0 0 1700" 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#s01-title(text="morph index" kind=layer font="Roboto" size=200 worldHeight=40 color=#e8eefc weight=700 align=center position="0 580 0")
    text#s01-sub(text="1 / 10 · every block is now: ui3d · stat card" kind=layer font="Roboto" size=110 worldHeight=18 color=#8ea3c8 weight=500 align=center position="0 535 0")
    ui3d#s01-particles(match=particles morph=particles morph-size=3.2 morph-count=3000 width=600 height=440 world_width=240 position="-900 250 0" rotation="0 -25 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)
    text#label-particles(match=label-particles text="particles" kind=layer font="Roboto" size=140 worldHeight=26 color=#e8eefc weight=700 align=center position="-900 105 0")
    ui3d#s01-liquid(match=liquid morph=liquid width=600 height=440 world_width=240 position="-600 250 0" rotation="0 -25 0")
      card(x=0 y=0 w=600 h=440 r=34 fill=#0b1622 stroke=#ff5f8a 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=#ff5f8a 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)