Small cut-out presenter over full B-roll
B-roll fills the frame while the cut-out presenter shrinks into the bottom-left corner, captions run across the lower band. Cutaway moments where the visual matters more than the face but the speaker should stay on screen.
Preview unavailable
Lay out my footage like this: "Small cut-out presenter over full B-roll" from the 24fps video editor library.
Preset JSON: https://24fps.dev/video-editor/layouts/layout-small-cutout-over-full-broll/preset.json (pass its "preset" to the engine).
Engine (MIT, no dependencies, ES module): https://24fps.dev/editor/engine.js. Download the engine next to your page (curl -O) rather than importing cross-origin, then import { mount } from "./engine.js" in a <script type="module"> served over http.
Wiring: root = a position:relative box at the video's size. media = { second, fg }: second = wrapper holding my other clip (often the background), fg = cut-out of the person (see below); the engine positions and crops them into the layout's slots. Then const fx = mount(root, { kind: "layout", preset, media }) and call fx.render(seconds) every frame. It is seek-safe: drive it from the GSAP timeline in HyperFrames or call render(frame / fps) in Remotion. Before capturing frames, await (fx.ready ?? document.fonts.ready).
This look needs a cut-out of the person: fg is a second copy of my video with the background removed (video with alpha, e.g. WebM VP9 or HEVC with alpha; e.g. npx hyperframes remove-background clip.mp4 -o clip.fg.webm, or any person-segmentation tool such as rembg or MediaPipe), stacked above the other clips.
Field reference: https://24fps.dev/video-editor/llms.txt. Keep sizes as fractions of the frame height so it works at any resolution. Credit: 24fps.dev/video-editor- Same idea
- Also called: Recess (AI Edit)
- Technique
- Presenter shrunk into the corner over full-frame B-roll.
- Footage
- Man talking and gesturing, Pexels