App UI Breakdown P10
0.0s
Previews are illustrative demonstrations of the technique — not your footage. Your real edit is produced later by Claude Code.
P10 · Proof · advanced · 2.5–8s
The camera zooms from a real full-screen capture into one interface element, dims the rest, and a callout line labels what that element actually does.
Starting from the real app screen, a smooth push-in travels to the single element being discussed — a button, toggle or panel. Everything else dims, a focus ring outlines the element and a leader-line callout explains its function in a few words. Viewers learn where the feature lives and what it does without hunting through a busy interface.
Try the parameters
Local path Claude Code can read. Never uploaded.
Best used for
- — Product tutorials
- — Feature announcements
- — SaaS onboarding videos
- — Reviewing an app's interface
Assets
- ● Screenshots required
- ○ Screen recording optional
- ○ Source video optional
- ○ Sound effects optional
Pairs well with
If assets are missing
Without a real capture of the interface, do not build a mock UI and present it as the product. Ask for a screenshot or recording; until then, explain the feature with V07 Callout Bubble on the speaker, clearly without showing an interface.
Accessibility
Keep the push-in ≥ 0.5s and avoid repeated zoom in/out cycles for motion-sensitive viewers. Callout text ≥ 3.5% of frame width with 4.5:1 contrast; the speaker should name the element aloud.
Individual prompt
updates with the parameters above# CES style instruction — P10 App UI Breakdown You are an experienced motion designer and video editor working in Claude Code. Apply the **P10 App UI Breakdown** 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 **Proof** — Starting from the real app screen, a smooth push-in travels to the single element being discussed — a button, toggle or panel. Everything else dims, a focus ring outlines the element and a leader-line callout explains its function in a few words. Viewers learn where the feature lives and what it does without hunting through a busy interface. ### P10 App UI Breakdown - **When:** ≈ 00:00.00 → 00:04.00 (≈ derived — adjust to the nearest natural beat in the footage) - **Layer / track:** V2+ (overlay above the picture) - **What it does:** The camera zooms from a real full-screen capture into one interface element, dims the rest, and a callout line labels what that element actually does. - **Parameters:** App screenshot or frame: (not set); UI element to focus: (not set); Callout text: (not set); Zoom factor: 2.4x; Callout side: Auto (most empty side); Dim other UI: 55%; Hold on element: 2 s; Accent colour: #D7FF5F - **Steps:** 1. Use the real interface capture from the project assets (the user's supplied app screenshot or screen-recording frame; if none is present, stop and ask for it — do not substitute a mock-up) at full frame from 00:00.00 to 00:04.00. If a screen recording is supplied, take the frame where the element is visible in its real state. Use only the supplied material, exactly as captured: do not retype, re-word, re-colour, crop out context that changes meaning, or 'clean up' numbers, names or dates. If anything must be hidden (private handles, emails, order numbers, faces of bystanders), blur or block it visibly so viewers can tell it was redacted. 2. The focus element is not set. Use the element the speaker names in the transcript at this moment; if unclear, ask. 3. Push in over 21 frames to 2.4x, centering the element (offset to leave room for the callout), with a smooth ease-in-out curve (cubic-bezier(0.65, 0, 0.35, 1)). Resample from the native-resolution capture; if 2.4x would exceed 150% of native pixels, cap the zoom so text stays crisp. 4. During the push, dim everything outside the element's padded box by 55% and draw a #D7FF5F focus ring (0.4% of frame width, 1.2% radius, 1.5% padding) around it. 5. Add a callout on the side with the most empty space with a short label (≤ 8 words) describing the element's function — taken from the UI's own label or the speaker's explanation, never an invented capability. 6. Hold on the element 2.0s (≥ 3 words/second for the callout), then pull back out to 1x over 15 frames while the ring and callout fade. - **Assets:** Screenshots (⚠ MISSING) · optional: Screen recording, Source video, Sound effects - **Fallback:** Without a real capture of the interface, do not build a mock UI and present it as the product. Ask for a screenshot or recording; until then, explain the feature with V07 Callout Bubble on the speaker, clearly without showing an interface. **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 proof styles
Use proof whenever you make a claim. Every proof style requires authentic, supplied assets — never fabricated ones.
- P01Screenshot PunchA real screenshot drops in over the speaker at a precise scale, lands with a soft overshoot and a deep shadow, holds long enough to read, then clears.
- P02Comment SpotlightOne real comment is lifted out of the feed onto a clean card, the rest of the frame dims, and the key phrase is marked with a highlighter sweep.
- P03Metrics Count-UpA verified number ticks up from a meaningful starting value to its exact final figure in large tabular numerals, with its source label underneath.
- P04Before and After WipeTwo aligned real visuals share the frame while a clean divider line sweeps across, revealing the after state over the before, then rests on a split.
- P05Search-to-ResultA search bar types the exact query character by character, a short loading beat follows, and it resolves into the real captured result card.
- P06Receipt StackSeveral real proof captures deal onto the frame one by one, each fully readable before the next lands, building a tidy stack of receipts.
- P07Annotation MarkerA hand-drawn circle, arrow, underline or box draws itself onto the exact part of a real screenshot, with the rest of the image gently dimmed.
- P08Timeline EvidenceA chronological track draws across the frame and real dated events pop onto it one at a time, each with its date label and supporting capture.
- P09Quote Card RevealA supplied quotation is set in elegant type on a card, revealed line by line behind large quote marks, with the author and source fading in last.