Annotation Marker P07
0.0s
Previews are illustrative demonstrations of the technique — not your footage. Your real edit is produced later by Claude Code.
P07 · Proof · intermediate · 1.2–6s
A 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.
Over a real screenshot, a marker stroke draws itself around the one detail that matters — a number, a button, a sentence. The stroke animates along its path like a pen, often overshooting slightly like a human mark, while the rest of the image dims so the target is unmistakable. It answers the viewer's question 'where am I supposed to look?' in under a second.
Try the parameters
Local path Claude Code can read. Never uploaded.
As % of frame width.
Best used for
- — Pointing at a specific number
- — Calling out a UI button
- — Highlighting a sentence in a document
- — Explaining a chart detail
Assets
- ● Screenshots required
- ○ Source video optional
- ○ Screen recording optional
Pairs well with
If assets are missing
Without a supplied screenshot there is nothing to annotate — do not draw onto a recreated interface. If the target cannot be located confidently, ask the user for coordinates or a marked-up reference image.
Accessibility
Use a marker colour with ≥ 3:1 contrast against the screenshot and pair it with dimming or a verbal cue so colour-blind viewers can still find the target. Keep draw-on speed ≥ 0.2s.
Individual prompt
updates with the parameters above# CES style instruction — P07 Annotation Marker You are an experienced motion designer and video editor working in Claude Code. Apply the **P07 Annotation Marker** 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** — Over a real screenshot, a marker stroke draws itself around the one detail that matters — a number, a button, a sentence. The stroke animates along its path like a pen, often overshooting slightly like a human mark, while the rest of the image dims so the target is unmistakable. It answers the viewer's question 'where am I supposed to look?' in under a second. ### P07 Annotation Marker - **When:** ≈ 00:00.00 → 00:02.50 (≈ derived — adjust to the nearest natural beat in the footage) - **Layer / track:** V2+ (overlay above the picture) - **What it does:** A 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. - **Parameters:** Screenshot to annotate: (not set); Target to mark: (not set); Annotation shape: Hand-drawn circle; Marker colour: #FF7A6B; Stroke width: 0.8%; Draw-on duration: 0.6 s; Dim everything else: on; Hand-drawn roughness: on - **Steps:** 1. Use the real screenshot from the project assets (the user's supplied screenshot; if none is present, stop and ask for it — do not substitute a mock-up) from 00:00.00 to 00:02.50. Annotations are added on top; the capture itself stays unaltered. 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 target is not set. Mark the region the speaker refers to at this moment (from the transcript); if it is ambiguous, ask the user rather than guessing. 3. Draw an ellipse ≈ 18% larger than the target's bounding box, drawn clockwise from the top-left and overshooting ~25° past its start with slight radius wobble (±3%) in #FF7A6B, stroke width 0.8% of frame width (9px), round caps. Implement as an SVG path animated with stroke-dasharray = path length and stroke-dashoffset length → 0 over 0.60s (18 frames), ease-out. 4. As the stroke starts, dim everything outside the target's padded box to 55% brightness (a mask with a 1% feather) over 8 frames; keep the target at 100%. 5. Start the stroke on the word where the speaker names the detail; hold the finished annotation ≥ 1.2s and remove it with a 6-frame fade before the screenshot exits. - **Assets:** Screenshots (⚠ MISSING) · optional: Source video, Screen recording - **Fallback:** Without a supplied screenshot there is nothing to annotate — do not draw onto a recreated interface. If the target cannot be located confidently, ask the user for coordinates or a marked-up reference image. **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.
- 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.
- P10App UI BreakdownThe 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.