Installed via npx skills add iart-ai/motion-design-skills. Kept the project's existing remotion-video skill unchanged. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01E35uEC1pGu95tUpM4b815L
6.3 KiB
Editing Techniques — Detailed Cookbook
Concrete recipes for rhythm, transitions, and retiming, with the math to make cuts frame-accurate.
BPM → frame math
frames_per_beat = (60 / BPM) * fps
seconds_per_beat = 60 / BPM
Reference (frames per beat):
| BPM | 24 fps | 25 fps | 30 fps | 60 fps |
|---|---|---|---|---|
| 90 | 16.0 | 16.7 | 20.0 | 40.0 |
| 100 | 14.4 | 15.0 | 18.0 | 36.0 |
| 120 | 12.0 | 12.5 | 15.0 | 30.0 |
| 128 | 11.25 | 11.7 | 14.06 | 28.13 |
| 140 | 10.3 | 10.7 | 12.86 | 25.7 |
When frames_per_beat is fractional (e.g. 128 BPM at 30 fps = 14.06), round each cumulative beat to avoid accumulating drift:
const cut = (i) => Math.round(i * (60 / bpm) * fps); // round at the end, not per-step
Cut on phrases, not beats:
| Energy | Cut every |
|---|---|
| Frantic / climax | 1–2 beats |
| Energetic | 4 beats (1 bar in 4/4) |
| Moderate | 8 beats (2 bars) |
| Calm / establishing | 16 beats (4 bars) |
Detect BPM offline (aubio, web-audio-beat-detector, or tap-tempo) and also capture the offset of beat 1 — the grid rarely starts at 0:00.
Cut on action / cut on motion
The eye tracks moving subjects; a cut placed mid-motion is masked by that movement.
- Identify a continuous action spanning two shots (door opening, head turn, object thrown).
- Place the cut roughly one-third into the action, and continue the same action and direction in the next shot.
- Match screen direction (subject moving left exits left, enters from right) and velocity.
- In motion graphics: cut while a shape is mid-travel (transform velocity high), not when it has settled — the motion blur and momentum hide the splice.
Match cut, step by step
A match cut equates two shots via a shared visual so the cut reads as a transformation.
- Find or design a shape/position/motion shared by the end of shot A and the start of shot B (a round clock → a round wheel; an arm wiping frame → next scene revealed).
- Align them in screen space: same size, same position, same orientation at the cut frame.
- Match motion vector and speed across the cut so momentum carries through.
- Cut on the exact frame where the two forms register; a 1–2 frame mismatch breaks the illusion.
- Optionally add a 1–3 frame motion-blur bridge to fuse them.
Common forms: graphic match (shape), motion match (direction/velocity), audio match (a sound bridges the cut), and the "invisible wipe" where a foreground object wipes the frame and the next shot is revealed behind it.
J-cut and L-cut
Audio and picture do not have to cut at the same frame.
J-CUT (audio of B leads its picture — pulls forward)
Picture: AAAAAAAA | BBBBBBBB
Audio: AAAAA BBBBBBBBBBBBB
^ B's audio starts ~6–12 frames early
L-CUT (audio of A trails under B's picture — smooths)
Picture: AAAAAAAA | BBBBBBBB
Audio: AAAAAAAAAAAA BBBBBB
^ A's audio continues ~6–18 frames past the picture cut
Typical offsets: dialogue J-cuts 4–12 frames; ambient L-cuts 12–24 frames. In an NLE, unlink audio/video and trim only the audio edge. In a code timeline, place the <Audio> for shot B with a from earlier than B's picture sequence.
Speed ramp recipe (with motion blur)
Impact ramp, 30 fps, drop on frame 28:
Frame Speed Note
0–20 100% run-up, normal motion blur
20–28 100%→25% ease-OUT deceleration into the hit
28 25% IMPACT, lands on the downbeat
28–34 25%→100% ease-IN re-acceleration
34+ 100% release
Settings:
- Use smooth (Bezier) interpolation on time-remap keyframes; linear ramps look mechanical.
- Enable optical flow (or frame-blending) for sub-100% speeds so slow-mo isn't strobed; optical flow generates intermediate frames.
- Keep motion-blur shutter consistent across the ramp — if the source has motion blur, the slow section keeps it; if synthetic, hold a constant shutter angle (e.g. 180°).
- Land the slowest frame on the beat; the ramp is felt, the impact is heard.
In AE: enable time remapping, keyframe the source time, ease the keyframes, set frame blending to Pixel Motion. In Remotion: drive a remapped source time via eased interpolate and keep effects deterministic.
Sequence arc templates
30s social spot (≈ 900 frames @30fps):
Establish 0–120 2 shots, ~2s each (longer holds)
Develop 120–540 shots shortening 1.5s → 0.8s, rising energy
Climax 540–720 fastest cuts 0.3–0.5s, the drop at ~600
Resolve 720–900 one long hold, logo/CTA breathes
Plot average shot length as a curve: high at the start, descending to the climax, then a single long shot to release. Energy is the derivative of cut frequency — accelerate cuts to build, decelerate to land.
NLE timeline vs code timeline
| Concept | NLE | Remotion | After Effects |
|---|---|---|---|
| Clip placement | drag to track at TC | <Sequence from durationInFrames> |
layer in/out points |
| Back-to-back shots | adjacent clips | <Series> |
trimmed layers |
| Crossfade | overlap + dissolve | overlap Series + opacity interp |
opacity keyframes / overlap |
| Speed ramp | time-remap keyframes | eased source-time interpolate |
time remap + frame blending |
| J/L cut | unlink + trim audio | <Audio from> ≠ picture seq |
offset audio layer |
| Beat marker | timeline markers | beat array frame/fps |
comp markers / expression |
To port an edit plan: express each cut as a frame number (from the BPM math), each clip as from/duration, each transition as an overlap, and each retime as an eased time-remap. The plan is renderer-agnostic; only the placement syntax differs.
Example edit plan (portable)
Track: 128 BPM, 30fps → 14.06 f/beat, drop at beat 32 (frame 450)
Cut on 4-beat phrases (≈56 frames):
f0 ShotA establish, hold
f56 ShotB cut on action (subject turns)
f112 ShotC match cut from B (shared circle)
f168 ... cuts shorten toward climax
f450 DROP biggest visual; speed ramp 100→25→100 around f450
f700 CTA long hold, L-cut audio trails in
Cut on the beat and ramp with purpose and the edit moves with the music. Built by iart.ai — the AI motion agent for editable, on-brand motion graphics.