Topics/morphs/popup

popup

morph="popup" — pop-up book (match-morph-popup.ts).

Read the rig's notes

The element tips back to lie like an open book page; its picture rises off
the page in hinged paper layers — horizontal bands of the picture standing
on their folds at staggered depths, each a card with a white die-cut border,
paper thickness, two V-fold tabs and a soft shadow on the page. The diorama
holds, spreads and turns a little on the table, then the layers keep folding
over toward the lens and land face down: their backs are printed with the
incoming picture, and the page tips up into the incoming element.

  left    attribute form, defaults (6 layers · stagger 0.5 · spread 1 · paper #f3eee4)
          1.00 → 2.80   stat card → iphone
          4.20 → 6.00   iphone → music card
  right   nested form, tuned (9 layers · stagger 0.65 · spread 1.6 · cream #f6e7c8)
          1.30 → 3.10   chrome → profile card
          4.50 → 6.30   profile card → ipad

One scene, no cuts: each source names its target with morph-to / morph(to=…),
the target is parked until its morph delivers it. popup's layers are real
hinged cards, so the hand-offs hold up while the camera swings round them.
Camera never stops: linear kfs orbit r 1250 around 0 0 0 from above, each hand-off pair swings side to side (+26°→−35°, −24°→+33°) through a 0.92r dip at its midpoint.

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

Topic

morphs

Scenes

1

Kind

reference rig

//
    morph="popup" — pop-up book (match-morph-popup.ts).

    The element tips back to lie like an open book page; its picture rises off
    the page in hinged paper layers — horizontal bands of the picture standing
    on their folds at staggered depths, each a card with a white die-cut border,
    paper thickness, two V-fold tabs and a soft shadow on the page. The diorama
    holds, spreads and turns a little on the table, then the layers keep folding
    over toward the lens and land face down: their backs are printed with the
    incoming picture, and the page tips up into the incoming element.

      left    attribute form, defaults (6 layers · stagger 0.5 · spread 1 · paper #f3eee4)
              1.00 → 2.80   stat card → iphone
              4.20 → 6.00   iphone → music card
      right   nested form, tuned (9 layers · stagger 0.65 · spread 1.6 · cream #f6e7c8)
              1.30 → 3.10   chrome → profile card
              4.50 → 6.30   profile card → ipad

    One scene, no cuts: each source names its target with morph-to / morph(to=…),
    the target is parked until its morph delivers it. popup's layers are real
    hinged cards, so the hand-offs hold up while the camera swings round them.
    Camera never stops: linear kfs orbit r 1250 around 0 0 0 from above, each hand-off pair swings side to side (+26°→−35°, −24°→+33°) through a 0.92r dip at its midpoint.

    Preview: http://localhost:4444/runtime?project=promos/primitives/morphs/popup.promo
promo#morph-popup
  scene#one(duration=7.4)
    camera(type=perspective fov=42 near=8.5 far=17000 position="618.9 344.5 1030.0" look_at="0 0 0")
      properties
        frame
          keyframes
            kf(time=0 easing=linear position="618.9 344.5 1030.0" look_at="0 0 0")
            kf(time=1.0 easing=linear position="536.0 259.9 1098.9" look_at="0 0 0")
            kf(time=2.05 easing=linear position="-19.8 179.9 1135.7" look_at="0 0 0")
            kf(time=3.1 easing=linear position="-685.6 365.5 979.2" look_at="0 0 0")
            kf(time=4.2 easing=linear position="-505.6 130.7 1135.7" look_at="0 0 0")
            kf(time=5.25 easing=linear position="39.4 219.4 1128.2" look_at="0 0 0")
            kf(time=6.3 easing=linear position="660.6 302.4 1017.2" look_at="0 0 0")
            kf(time=7.4 easing=linear position="776.1 323.5 924.9" 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="popup" kind=layer font="Roboto" size=200 worldHeight=40 color=#e8eefc weight=700 align=center position="0 400 0")
    text#sub(text="tip back · layers rise · turn · fold over · tip up" kind=layer font="Roboto" size=110 worldHeight=18 color=#8ea3c8 weight=500 align=center position="0 358 0")

    // ── left · attribute form · defaults ──────────────────────────────────────
    ui3d#l-card(morph=popup morph-to=l-phone morph-at=1 morph-dur=1.8 width=600 height=440 world_width=280 position="-330 -10 0" rotation="0 -10 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)