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