Floating Device Frame L04

Pairs well with

# CES style instruction — L04 Floating Device Frame

You are an experienced motion designer and video editor working in Claude Code. Apply the **L04 Floating Device Frame** 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** — Raw screen captures look flat and unfinished. Here the recording is placed inside a clean device frame that rises into view, settles at a slight perspective tilt and floats with a subtle drift and glass reflection, over a blurred version of the source footage or a brand gradient. The product moment instantly looks like a launch video rather than a screen share.

### L04 Floating Device Frame

- **When:** ≈ 00:00.00 → 00:08.00 (≈ derived — adjust to the nearest natural beat in the footage)
- **Layer / track:** V1 (main picture)
- **What it does:** A screen recording plays inside a polished phone, tablet or browser mockup that floats in with a gentle 3D tilt over a soft background.
- **Parameters:** Device: Phone; 3D tilt: 10 deg; Float amplitude: 1.2%; Background: Blurred source footage; Device width: 62%; Glass reflection: on; Background accent: #779CFF
- **Steps:**
  1. Between from 00:00.00 to 00:08.00, place the supplied screen recording inside a phone frame (thin bezel, 13% corner radius, centred camera pill) 670px wide (62% of frame width), screen aspect 9:19.5. Fit the recording to the screen with object-fit: cover from the top; Scale every source uniformly (object-fit: cover for crops, contain for fits) — never stretch footage, screenshots or recordings to a region's aspect ratio.
  2. Background: the source footage scaled 115%, Gaussian blur ≈ 4% of width, brightness 55%; add a soft contact shadow under the device (ellipse, black 40%, blur 3% of width).
  3. Entrance: rise from +40% of frame height with rotateX 25° → 6.0° and opacity 0 → 1 over 21 frames using a fast expo-out curve (cubic-bezier(0.16, 1, 0.3, 1)); use CSS perspective ≈ 2.5× the device width.
  4. Idle float: oscillate translateY by ±1.2% of frame height and rotateY between −10° and +10° on a slow sine (period 4s); keep motion subtle enough that UI text stays readable. Add a diagonal glass reflection (white 0% → 10% → 0% gradient) that sweeps across the screen once on entry.
  5. Exit with the reverse of the entrance over 12 frames. Implement in Remotion with a perspective container and a transformed device <div>; the recording plays via <OffthreadVideo> inside the screen mask.
  6. Verify that the smallest UI text in the recording renders ≥ 2.2% of frame width inside the frame; if not, crop the recording to the relevant region or increase device size.
- **Assets:** Screen recording (⚠ MISSING) · optional: Source video, Screenshots, Brand logo
- **Fallback:** If only screenshots are supplied, use them as stills inside the device with a slow scroll; never mock up UI that isn't in the supplied material. Without any screen material, ask for it.

**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.