Skip to content
Docs
Open Promoeyes
ink

ink

morph="ink" — ink into water (match-morph-ink.ts).

Read the rig's notes
One sheet, larger than the frame, samples both snapshots through a curl-noise
streamline trace whose length ramps up and back down: the outgoing element
bleeds into curling dye plumes — its coloured accents stay dense, its dark
bulk thins to a haze, billows carry thin wisps at their edges — the plumes
drift and mix, a noise front hands the dye over, and the incoming element's
dye condenses back into place (same field, reverse time). Exact at both ends.

ONE scene, no cuts — the in-scene `morph-to` links, so every mid frame can be
shot. The hero in the middle, 1.8 s per hand-off:

  1.6 → 3.4   stat card  → iphone        defaults (morph=ink)
  4.4 → 6.2   iphone     → music card    morph-spread=1.3 · morph-color=#1b6fa8 (water veil)
  7.2 → 9.0   music card → stat card     morph-spread=0.7 · morph-seed=11

Content is deliberately saturated (magenta / cyan / yellow) — the dye's colours
come from the picture itself, so a vivid picture makes vivid ink.

Camera never stops (linear kfs, r 760 about the origin): each hand-off swings
across the subject — −20°→+16°, +36°→−24°, −16°→+22° azimuth, 8% closer mid-window
(1 and 3 kept narrow: the ink sheet is baked through the start camera and jumps at the swap).

Preview: http://localhost:4444/runtime?project=promos/primitives/morphs/ink.promo
Topic
morphs
Scenes
1
Kind
reference rig
//
    morph="ink" — ink into water (match-morph-ink.ts).

    One sheet, larger than the frame, samples both snapshots through a curl-noise
    streamline trace whose length ramps up and back down: the outgoing element
    bleeds into curling dye plumes — its coloured accents stay dense, its dark
    bulk thins to a haze, billows carry thin wisps at their edges — the plumes
    drift and mix, a noise front hands the dye over, and the incoming element's
    dye condenses back into place (same field, reverse time). Exact at both ends.

    ONE scene, no cuts — the in-scene `morph-to` links, so every mid frame can be
    shot. The hero in the middle, 1.8 s per hand-off:

      1.6 → 3.4   stat card  → iphone        defaults (morph=ink)
      4.4 → 6.2   iphone     → music card    morph-spread=1.3 · morph-color=#1b6fa8 (water veil)
      7.2 → 9.0   music card → stat card     morph-spread=0.7 · morph-seed=11

    Content is deliberately saturated (magenta / cyan / yellow) — the dye's colours
    come from the picture itself, so a vivid picture makes vivid ink.

    Camera never stops (linear kfs, r 760 about the origin): each hand-off swings
    across the subject — −20°→+16°, +36°→−24°, −16°→+22° azimuth, 8% closer mid-window
    (1 and 3 kept narrow: the ink sheet is baked through the start camera and jumps at the swap).

    Preview: http://localhost:4444/runtime?project=promos/primitives/morphs/ink.promo
promo#morph-ink
  scene#one(duration=10)
    camera(type=perspective fov=42 near=8.5 far=17000 position="-304 132 684" look_at="0 0 0")
      properties
        frame
          keyframes
            kf(time=0 easing=linear position="-304 132 684" look_at="0 0 0")
            kf(time=1.6 easing=linear position="-257 106 707" look_at="0 0 0")
            kf(time=2.5 easing=linear position="0 24 699" look_at="0 0 0")
            kf(time=3.4 easing=linear position="208 -79 727" look_at="0 0 0")
            kf(time=4.4 easing=linear position="433 184 597" look_at="0 0 0")
            kf(time=5.3 easing=linear position="24 61 696" look_at="0 0 0")
            kf(time=6.2 easing=linear position="-308 -53 693" look_at="0 0 0")
            kf(time=7.2 easing=linear position="-209 -53 729" look_at="0 0 0")
            kf(time=8.1 easing=linear position="-12 37 698" look_at="0 0 0")
            kf(time=9 easing=linear position="282 106 698" look_at="0 0 0")
            kf(time=10 easing=linear position="329 119 675" look_at="0 0 0")
    background(top=#0d121c bottom=#030509)
    environment(hdr="studio_small_04_2k" as_background=false background_color=#030509 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.14 position="-500 300 -1600" color=#2b4bd8 size="120000 100000" pulse=0 decay=0)
    haze#hz1(blend=add opacity=0.1 position="600 -300 -1700" color=#b02b8f size="110000 90000" pulse=0 decay=0)
    text#title(text="ink" kind=layer font="Roboto" size=200 worldHeight=30 color=#e8eefc weight=700 align=center position="0 232 0")
    text#sub(text="bleeds into dye · plumes mix · condenses into the next element" kind=layer font="Roboto" size=110 worldHeight=12 color=#8ea3c8 weight=500 align=center position="0 205 0")

    // 1.6 → 3.4 · stat card → iphone · defaults
    ui3d#card(morph=ink morph-to=phone morph-at=1.6 morph-dur=1.8 width=600 height=440 world_width=240 position="0 -10 0" rotation="0 -12 0")
      card(x=0 y=0 w=600 h=440 r=34 fill=#0d1020 stroke=#ff2e9a 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=droplet size=40 color=#ff2e9a stroke_width=2.4)
          text(text=Spectra size=32 weight=900 color=#fff3fa align=lef