Skip to content
Docs
Open Promoeyes
index-single-scene

index-single-scene

Morph index — every mode, ONE scene, no cuts (engine/scene-morph.ts).

Read the rig's notes
The morph modes were transition-only: an element could only BECOME another
element across a match cut. Now the same bakes run inside a scene. An element
names the element it turns into, and when:

  attribute form   ui3d#card(morph=fold morph-to=phone morph-at=2 morph-dur=1.4 …)
  nested form      iphone#phone(…)
                     morph(to=word mode=fold at=4.6 dur=1.4 [count= seed= size= spread= stagger= color=])

The target is parked invisible until its morph delivers it; the source is gone
once it has handed off. Chains and round trips just work — every block here is
a loop: stat card → iphone → "Aa" → shape → the same stat card again.

Same 7×2 grid as index.promo, one mode per block, named under it; every *3d
mode sits right after its snapshot twin. Row 1 is written in the attribute
form and turns -25°; row 2 in the nested form, turns +25°, and fires 0.35 s
later so the two rows read as two beats. Four hand-offs of 1.4 s each:

  row 1   2.00 → 3.40   card → iphone
          4.60 → 6.00   iphone → "Aa"
          7.20 → 8.60   "Aa" → shape (heart / bolt)
          9.80 → 11.20  shape → card      (round trip)
  row 2   +0.35 s

Defaults everywhere except particles (bigger motes at this distance) and the
voxels (22 / 18 cells, readable at block size). The mode and the knobs always
come from the SOURCE of each hand-off, so each block repeats its mode on all
four elements.

Preview: http://localhost:4444/runtime?project=promos/primitives/morphs/index-single-scene.promo
Topic
morphs
Scenes
1
Kind
reference rig
//
    Morph index — every mode, ONE scene, no cuts (engine/scene-morph.ts).

    The morph modes were transition-only: an element could only BECOME another
    element across a match cut. Now the same bakes run inside a scene. An element
    names the element it turns into, and when:

      attribute form   ui3d#card(morph=fold morph-to=phone morph-at=2 morph-dur=1.4 …)
      nested form      iphone#phone(…)
                         morph(to=word mode=fold at=4.6 dur=1.4 [count= seed= size= spread= stagger= color=])

    The target is parked invisible until its morph delivers it; the source is gone
    once it has handed off. Chains and round trips just work — every block here is
    a loop: stat card → iphone → "Aa" → shape → the same stat card again.

    Same 7×2 grid as index.promo, one mode per block, named under it; every *3d
    mode sits right after its snapshot twin. Row 1 is written in the attribute
    form and turns -25°; row 2 in the nested form, turns +25°, and fires 0.35 s
    later so the two rows read as two beats. Four hand-offs of 1.4 s each:

      row 1   2.00 → 3.40   card → iphone
              4.60 → 6.00   iphone → "Aa"
              7.20 → 8.60   "Aa" → shape (heart / bolt)
              9.80 → 11.20  shape → card      (round trip)
      row 2   +0.35 s

    Defaults everywhere except particles (bigger motes at this distance) and the
    voxels (22 / 18 cells, readable at block size). The mode and the knobs always
    come from the SOURCE of each hand-off, so each block repeats its mode on all
    four elements.

    Preview: http://localhost:4444/runtime?project=promos/primitives/morphs/index-single-scene.promo
promo#morph-index-single-scene
  scene#one(duration=13)
    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(blend=add opacity=0.4 position="-900 400 -1600" color=#3b5bff size="120000 100000" pulse=0 decay=0)
    haze#hz1(blend=add opacity=0.3 position="900 -500 -1700" color=#9b3bff size="110000 90000" pulse=0 decay=0)
    text#title(text="morph index · one scene" kind=layer font="Roboto" size=200 worldHeight=40 color=#e8eefc weight=700 align=center position="0 580 0")
    text#sub(text="card → iphone → Aa → shape → card · hand-offs at 2.0 · 4.6 · 7.2 · 9.8 s (row 2 +0.35 s) · no cuts" kind=layer font="Roboto" size=110 worldHeight=18 color=#8ea3c8 weight=500 align=center position="0 535 0")

    // ── row 1 · attribute form · -25° ──────────────────────────────────────────

    // particles
    ui3d#particles-card(morph=particles morph-size=3.2 morph-count=3000 morph-to=particles-phone morph-at=2 morph-dur=1.4 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)
    iphone#particles-phone(morph=particles morph-size=3.2 morph-count=3000 morph-to=particles-word morph-at=4.6 morph-dur=1.4 body=graphite scale=1.45 rotation="0 -25 0" position="-900 250 0")
      ui3d(overlay=screen width=71 height=154)