Vertical Split Screen L01
0.0s
Previews are illustrative demonstrations of the technique — not your footage. Your real edit is produced later by Claude Code.
L01 · Layouts · intermediate · 3–60s
The frame divides into two regions — speaker in one, a screen recording or second shot in the other — split by a divider at an adjustable ratio.
The full-frame shot slides apart into two regions separated by a crisp divider: typically the speaker on top and the thing they're talking about below. The split ratio is adjustable and can shift mid-section when the second region needs more room. Viewers get the face and the evidence at once, which is the most reliable way to keep reaction and context on screen together in vertical video.
Try the parameters
Share of the frame given to region A (top or left).
Best used for
- — Reaction videos
- — Tutorials over a screen recording
- — Gameplay or app commentary
- — Comparisons
Assets
- ● Source video required
- ○ Screen recording optional
- ○ B-roll footage optional
- ○ Second shot optional
Pairs well with
If assets are missing
If no second source is supplied, ask for one — do not fill region B with invented UI or stock footage. A screen recording can be replaced by a sequence of supplied screenshots with slow pans.
Accessibility
Keep text inside either region ≥ 4% of frame width after cropping; screen recordings with small UI text may need a zoom-in crop to stay legible on phones.
Individual prompt
updates with the parameters above# CES style instruction — L01 Vertical Split Screen
You are an experienced motion designer and video editor working in Claude Code. Apply the **L01 Vertical Split Screen** technique to the supplied footage as specified below.
**B. Project configuration:** 1080×1920, 9:16, 30 fps · Source video: not provided — ask the user for the path before starting · Video language (on-screen text & captions): English
**Layouts** — The full-frame shot slides apart into two regions separated by a crisp divider: typically the speaker on top and the thing they're talking about below. The split ratio is adjustable and can shift mid-section when the second region needs more room. Viewers get the face and the evidence at once, which is the most reliable way to keep reaction and context on screen together in vertical video.
### L01 Vertical Split Screen
- **When:** ≈ 00:00.00 → 00:10.00 (≈ derived — adjust to the nearest natural beat in the footage)
- **Layer / track:** V1 (main picture)
- **What it does:** The frame divides into two regions — speaker in one, a screen recording or second shot in the other — split by a divider at an adjustable ratio.
- **Parameters:** Split orientation: Stacked (top / bottom); Split ratio: 55%; Speaker region: Region A (top / left); Second region source: Screen recording; Divider thickness: 0.5%; Divider colour: #D7FF5F; Split-in duration: 0.5 s; Easing: Expo out (snappy)
- **Steps:**
1. Between from 00:00.00 to 00:10.00, split the 1080×1920 frame horizontally into a top region A and a bottom region B: A = 55% (1056px), B = 45% (864px).
2. Region A: the speaker, re-cropped (not squeezed) so the eyes sit on the region's upper third; region B: the supplied screen recording, cropped to fill. Scale every source uniformly (object-fit: cover for crops, contain for fits) — never stretch footage, screenshots or recordings to a region's aspect ratio.
3. Transition in: starting from the full-frame speaker shot, animate the split line from the frame edge to 55% over 15 frames using a fast expo-out curve (cubic-bezier(0.16, 1, 0.3, 1)), re-cropping the speaker in sync so the face never leaves its region; reverse the move when the section ends.
4. Divider: a #D7FF5F bar 0.5% of the frame height thick (10px) centred on the split, with a subtle 0 0 1.5% glow of the same colour.
5. If the script calls for it, let the ratio shift by up to ±12% mid-section (e.g. give region B more room while a detail is being explained), using the same easing over 12 frames — never more than once every 3 seconds.
6. Implement in Remotion as two absolutely-positioned <AbsoluteFill> regions with overflow:hidden and <OffthreadVideo style={{objectFit:'cover'}}>; or in FFmpeg with crop + vstack/hstack after scaling each input to its region size. Keep captions on top of both regions, centred on the divider or inside the speaker region.
- **Assets:** Source video (⚠ MISSING) · optional: Screen recording, B-roll footage, Second shot
- **Fallback:** If no second source is supplied, ask for one — do not fill region B with invented UI or stock footage. A screen recording can be replaced by a sequence of supplied screenshots with slow pans.
**G. Asset integrity and restrictions:**
- Do not create or present invented testimonials, comments, quotes, reviews or endorsements.
- Do not fabricate numbers, metrics, charts or results. Data visualisations use only the supplied data.
- Do not create fake screenshots or UI and present them as real. Illustrative graphics must be clearly illustrative.
- Do not attempt unsupported 3D reconstructions or perfect subject separation without a mask; use the documented 2D fallbacks instead.
**I. Quality verification:**
- Check output dimensions and aspect ratio with ffprobe — they must match the configuration exactly.
- Check the output frame rate and that the duration is within ±0.5 s of the target.
- Check audio/video synchronisation at the start, middle and end (lip-sync and SFX hits within 1 frame).
- Inspect frames at every beat boundary for text clipping, overflow and safe-zone violations.
- Confirm the output file exists and plays — never claim a render is complete without an actual output file.
- Report any missing asset or unimplemented effect explicitly.
More layouts styles
Use a layout when two things must be seen at once. Only one full-frame layout can be active at a time.
- L02Picture-in-Picture FocusThe source media fills the frame while the speaker sits in a rounded window in one corner that glides to another corner when detail appears beneath it.
- L03Triple StackThree media bands stack vertically and the focal band grows to take most of the frame while the other two shrink and dim, shifting with the script.
- L04Floating Device FrameA screen recording plays inside a polished phone, tablet or browser mockup that floats in with a gentle 3D tilt over a soft background.
- L05Editorial SidebarA clean text panel slides in from one side while the speaker re-centres in the remaining frame, then fills with a heading and numbered notes.
- L06Center SpotlightThe shot contracts into a sharp central frame with a thin accent ring while the surrounding area becomes a blurred, darkened copy carrying context labels.
- L07Grid ConversationSpeakers or references populate a 2×2 (or 1+2) grid tile by tile, and a highlight moves to whoever is currently talking.
- L08Cinematic LetterboxBlack bars close in from top and bottom to a true 2.39:1, 2:1 or 1.85:1 band, cropping (never stretching) the shot into a cinematic frame.
- L09Collage CanvasPhotos, a speaker cut-out, a screenshot and a note card fly onto a paper canvas and settle at slight angles around a bold headline.
- L10Adaptive Proof PanelWhen evidence appears the speaker's shot shrinks into a band and a proof panel takes the rest, resizing as more evidence arrives, then hands the frame back.