Subchapter 30.2
references/cut-catalog.mdMarkdown12 KBView on GitHub
A worker build-recipe (Step 5) — the sibling of
../hyperframes-animation/rules/, not a second motion doc. These are within-frame cuts the frame worker builds INSIDE its own composition (Z-scale + blur + opacity tweens, or per-word x-staggers, all on the frame’s own paused GSAP timeline). They are the between-frame transition: story owns that via , which the harness’s injector stamps from a ( / / / / ) — the catalog names here () are valid values. Use this catalog when a frame’s shot sequence has an internal seam — a within-scene text/element swap, a cut (a is a time window WITHIN one frame, a frame-to-frame boundary), or a text-to-text line change — and you want it to read as one continuous move instead of a hard slideshow cut. ( lives in both worlds: a whole-frame wrapper transition in the registry, an element-level Z-cut here — same idea, different scope.)
transition_incrossfadeblur-crossfadepush-slidezoom-throughsqueezetransition_inScenezoom-throughFour techniques that create depth and continuity:
All four are the same underlying principle: cut at peak velocity, match direction and speed on both sides of the cut. The differences are axis, scope, and granularity.
Choosing which at a seam: for an UNFINISHED phrase (building one larger idea across several visually distinct scenes that still approach the same point — multi-line text, a run of consecutive cards) use cut-the-curve / waterfall. For a STATE CHANGE (turning to a NEW part of the video — most often hook → context, between two distinct chapters) use zoom-through, and inverse zoom-through for an arrival / payoff beat. Chain these so the frame’s internal seams feel like one camera moving through the content.
Blur sells the speed at the cut, but it must scale with the SUBJECT SIZE:
| Subject | Peak blur | Why |
|---|---|---|
| Text-scale (headline, line, word group) | 10px | At 20px text smears into illegibility — the eye loses the word it was tracking and the cut reads as a glitch, not speed. At 20px letterforms go mushy mid-cut; 10px keeps them readable. |
| Full-frame surface (terminal window, card, screenshot) | 18–20px | Big surfaces have edges and texture that survive heavy blur; lighter blur on a full-frame move reads as a rendering hiccup instead of motion. |
Both sides of a cut use the SAME peak blur — the value must match at the swap frame. Apply blur to the WRAPPER, never to individual children.
Text enters, holds, exits. Then next text enters, holds, exits. Each text block is independent — no depth, no continuity. The video feels like a slideshow.
A velocity-matched cut on the Z-axis. You never see both texts at the same time. The outgoing text scales toward the viewer (accelerating), blur and opacity peak at the cut point hiding a hard swap, and the incoming text continues scaling up from behind (decelerating into the focal plane). One continuous forward motion, two different texts.
Phase 1: Exit — text accelerates forward (toward viewer)
1.0 -> 1.2, Blur: 0px -> 10px (text-scale; see Blur Logic), Opacity: 1.0 -> 0.15power3.in (steep acceleration)none (linear — even dimming, separated from scale)Phase 2: Hard cut at peak velocity + peak blur
opacity: 0 (instant via tl.set)opacity: 0.15, scale: 0.75, blur: 10px (instant via tl.set)Phase 3: Entry — text continues forward (growing into focal plane)
0.75 -> 1.0, Blur: 10px -> 0px, Opacity: 0.15 -> 1.0expo.out (steep initial burst matching exit velocity, long settle)Scale uses power3.in but that keeps opacity near 1.0 for most of the tween. Splitting
opacity to its own tween with linear ease makes the dimming even. On entry, all properties
can share expo.out.
The mirror: the camera “pulls back” instead of pushing through. The outgoing element RECEDES away from the viewer; the incoming element arrives OVERSIZED (as if it had been just behind the camera) and retracts into the focal plane. Both move in the shrinking direction — same-direction rule preserved, just reversed.
When to use over the forward variant: arrival beats. The incoming element lands with presence because it comes from larger-than-frame — right for a payoff line (“That changes today.”), a giant reply, or a held end-state. Forward zoom-through reads as progressing through content; inverse reads as arriving at content.
Phase 1: Exit — element recedes (away from viewer)
1.0 -> 0.8, Blur: 0px -> 10px (text-scale)power3.in; Opacity: 1.0 -> 0.15 on none (separate tween)Phase 2: Hard cut
opacity: 0 via tl.setopacity: 0.15, scale: 1.25, blur: 10px via tl.setPhase 3: Entry — incoming retracts into place
1.25 -> 1.0, Blur: 10px -> 0px, Opacity: 0.15 -> 1.0expo.out, Duration: 0.5sUse cut-the-curve for all scene-to-scene transitions on x and y axes. The outgoing scene’s hero element accelerates in one direction, the cut lands mid-motion, and the incoming scene’s hero element continues moving in the same direction and decelerates. Nothing exits fully off-screen and nothing enters from fully off-screen — speed plus opacity fading trick the eye; the partial moves are enough.
If Scene A’s hero slides left, Scene B’s hero enters from the right and continues sliding left. Both move leftward. One continuous motion.
| Direction | Scene A exit | Scene B entry start | Scene B entry end |
|---|---|---|---|
| Leftward | x: 0 -> -230 | x: +230 | x: 0 |
| Rightward | x: 0 -> +230 | x: -230 | x: 0 |
| Upward | y: 0 -> -230 | y: +230 | y: 0 |
| Downward | y: 0 -> +230 | y: -230 | y: 0 |
The cleanest match: exit power4.in and entry power4.out with the SAME distance and
duration — mathematically the two halves of one power4.inOut composite, so the entering
element picks up at exactly the 50% point of the notional path at identical velocity
(e.g. 230px / 0.3s ≈ 3,070 px/s at the cut on both sides).
The fade trick: the exit’s opacity completes at ~25–30% of its travel (fade duration ≈ 0.18–0.3s vs motion 0.3–0.34s) — the element vanishes while still visibly accelerating, and nothing has to reach the frame edge. Entry fades IN fast from ~0.35 under its deceleration. Time the LAST fading element to die right at the hard cut — gaps where nothing is moving read as awkward dead air.
.in/.out eases, same distance + durationCut-the-curve at WORD granularity — the strongest version of the leftward cut for text-to-text seams. Each word of the outgoing line ramps out on its own pronounced curve; each word of the incoming line cascades in mid-flight. The stagger turns the cut into a wave the eye rides across the seam.
x: 0 -> -230 over 0.34s on power4.in — a much more pronounced ramp than
the usual power2: the word barely creeps, then RIPSopacity -> 0 over 0.18s (separate tween, power1.in) — completes when the word
is only ~25–30% into its travelfromTo x: +230 -> 0, opacity: 0.35 -> 1 over 0.3s on power4.out — the mirrored
back half of the composite; every word ignites already moving at matched velocityx: +230, opacity: 0 at build time — immediateRender: false
alone leaves un-started words sitting visible at rest during the stagger windowA single-line beat (e.g. a big intro line) exits as one group with the same pronounced ramp, but stretch its fade to ~0.3s ending ~0.02s before the cut — a lone element that fades early leaves dead air that a word cascade would have covered.
| Zoom-Through | Inverse Zoom | Cut the Curve | Waterfall Cut | |
|---|---|---|---|---|
| Scope | Within-scene text swap | Arrival/payoff beat | Between scenes | Text-to-text seam |
| Axis | Z, toward viewer | Z, away from viewer | X / Y | X, per-word |
| Peak blur | 10px text / 20px full-frame | 10px text / 20px full-frame | none required | none (fade does the work) |
| Opacity at cut | 0.15 | 0.15 | exit faded by cut | last word dies at cut |
| Feel | progressing through | arriving at | carried sideways | a wave across the seam |
| Don’t | Why | Instead |
|---|---|---|
| Two texts visible during a zoom-through | Overlapping text breaks the Z-axis illusion | Hard cut at blur peak, one text at a time |
| 20px blur on text-scale subjects | Letterforms smear; reads as a glitch | 10px for text, 18–20px only full-frame |
| Elements on different paths across a cut | Eye tracks one direction, cut goes another | Same property, same direction |
| Mismatched blur/opacity at the swap | Visible flash or brightness jump | Identical values at the cut frame |
Gentle easing on entry (power2.out) | Entry velocity feels slower than exit | Mirror the exit: power4.out / expo.out |
| Full off-screen exits / entries | Wastes time and breaks the speed illusion | Partial travel + early fade |
| Lone element fading long before its cut | Dead air at the seam | Fade ends ~0.02s before the cut, or use a word cascade |
| Zoom-through on body text | Small text at 0.75 scale is unreadable | Only headlines and short phrases |
| Scene cuts without cut-the-curve | Static cuts feel like a slideshow | Cut-the-curve is the default |