Skip to content
Docs
Open Promoeyes
clipping

clipping

Clipping primitives — the `clip` channel, one idea per scene.

Read the rig's notes
A `<clip>` block is ONE oriented cutting plane on a node. Everything the
plane's normal points at is KEPT; everything behind it is cut away. The
keyframed value is the plane's OFFSET in mm, so animating it sweeps the
plane through the node and wipes whatever is attached — a primitive, a
text, a whole device, a group of devices — in or out.

  iphone#hero(scale=1.4)
    clip(axis="-y" feather=6 edge=#ff7a3d)
      0.6 -140                  <- plane below the phone: nothing shows
      2.6 easeOutCubic 140      <- plane past its top: fully revealed

  axis    x | y | z, negatable (-y). The normal — the side that SURVIVES.
          `axis=y` keeps what is ABOVE the plane, `axis=-y` what is BELOW.
  normal  "x y z" for anything off-axis (a diagonal slice). Same rule.
  invert  flips which side survives without renaming the axis.
  offset  the keyframed value: a coordinate on that axis, in mm, measured
          in the node's own local frame (or the world's, see `space`).
  space   local (default) — the plane rides the node's transform, so a
          spinning object keeps its cut. world — the plane is a fixed blade
          in the scene and objects travel through it.
  feather mm of softness. The hard cut stays put; the last `feather` mm
          INSIDE it fade out, so cut and fade can never disagree.
  edge    tint the feather band (`edge-width` sizes it separately) — a hot
          line riding the cut.

Several `<clip>` blocks on one node INTERSECT: two make a travelling band,
four make a window. Six is the ceiling (three bakes the plane count into
every shader program).

A clip binds to the node's WHOLE subtree, which is why it works on a device
(its GLB body is a child node) and on a flow container (the row is cut, not
each child separately). Feathering forces those materials transparent, so
reach for it on the subject, not on a wall of scenery.

SCENES
  01 wipe        one plane, in and back out — the whole vocabulary
  02 feather     the same wipe at feather 0 / 14 / 44, side by side
  03 edge        a hot cutting line riding the band
  04 band        two planes = a 70mm slit scanning a laptop
  05 window      four world planes = a portal a phone rises through
  06 space       local vs world on two identical spinning knots
  07 diagonal    one `normal`, two nodes, opposite `invert` → a clean split
  08 group       one plane across a ROW of devices — cut as one object
  09 text        staggered per-line wipes (what `reveal-clip` used to do)
  10 blade       a fixed world plane objects dissolve through
  11 family      four devices, four planes, one sequenced entrance
  12 reference   every attribute form, called out on one subject

Preview: /packages/runtime/index.html?project=promos/primitives/clipping/clipping.promo
Topic
effects
Scenes
12
Kind
reference rig
//
    Clipping primitives — the `clip` channel, one idea per scene.

    A `<clip>` block is ONE oriented cutting plane on a node. Everything the
    plane's normal points at is KEPT; everything behind it is cut away. The
    keyframed value is the plane's OFFSET in mm, so animating it sweeps the
    plane through the node and wipes whatever is attached — a primitive, a
    text, a whole device, a group of devices — in or out.

      iphone#hero(scale=1.4)
        clip(axis="-y" feather=6 edge=#ff7a3d)
          0.6 -140                  <- plane below the phone: nothing shows
          2.6 easeOutCubic 140      <- plane past its top: fully revealed

      axis    x | y | z, negatable (-y). The normal — the side that SURVIVES.
              `axis=y` keeps what is ABOVE the plane, `axis=-y` what is BELOW.
      normal  "x y z" for anything off-axis (a diagonal slice). Same rule.
      invert  flips which side survives without renaming the axis.
      offset  the keyframed value: a coordinate on that axis, in mm, measured
              in the node's own local frame (or the world's, see `space`).
      space   local (default) — the plane rides the node's transform, so a
              spinning object keeps its cut. world — the plane is a fixed blade
              in the scene and objects travel through it.
      feather mm of softness. The hard cut stays put; the last `feather` mm
              INSIDE it fade out, so cut and fade can never disagree.
      edge    tint the feather band (`edge-width` sizes it separately) — a hot
              line riding the cut.

    Several `<clip>` blocks on one node INTERSECT: two make a travelling band,
    four make a window. Six is the ceiling (three bakes the plane count into
    every shader program).

    A clip binds to the node's WHOLE subtree, which is why it works on a device
    (its GLB body is a child node) and on a flow container (the row is cut, not
    each child separately). Feathering forces those materials transparent, so
    reach for it on the subject, not on a wall of scenery.

    SCENES
      01 wipe        one plane, in and back out — the whole vocabulary
      02 feather     the same wipe at feather 0 / 14 / 44, side by side
      03 edge        a hot cutting line riding the band
      04 band        two planes = a 70mm slit scanning a laptop
      05 window      four world planes = a portal a phone rises through
      06 space       local vs world on two identical spinning knots
      07 diagonal    one `normal`, two nodes, opposite `invert` → a clean split
      08 group       one plane across a ROW of devices — cut as one object
      09 text        staggered per-line wipes (what `reveal-clip` used to do)
      10 blade       a fixed world plane objects dissolve through
      11 family      four devices, four planes, one sequenced entrance
      12 reference   every attribute form, called out on one subject

    Preview: /packages/runtime/index.html?project=promos/primitives/clipping/clipping.promo
promo#clipping

  // =======================================================================
  // SCENE 01 · THE WIPE — one plane, one track, in and back out
  // =======================================================================
  scene#s01-wipe(duration=7 transition=match-move transition-duration=0.8)

    camera(type=perspective fov=42 near=8.5 far=17000 position="0 0 700" look_at="0 0 0")
      position
        0 0 0 740
        7 easeInOutCubic 0 0 670
    background(top=#0b1020 bottom=#05070f)
    lights
      light#s01-amb(type=ambient color=#8fb2ff intensity=0.6)
      light#s01-key(type=directional color=#ffffff intensity=2.2 position="340 680 510")
      light#s01-fill(type=directional color=#7aa2ff intensity=0.9 position="-510 170 340")
    environment(hdr="studio_small_04_2k" as_background=false exposure=1.0 blurriness=0.5 intensity=0.5)
    postprocessing
      step(name=render)
      step(name=unreal_bloom strength=0.16 radius=0.4 threshold=0.86)

    h