Floating Screenshot Cards B02
Previews are illustrative demonstrations of the technique — not your footage. Your real edit is produced later by Claude Code.
B02 · Animated B-Roll · intermediate · 3–10s
Supplied screenshots float as tilted cards at different depths; the camera brings one card forward at a time while the others soften behind.
Several screenshots are arranged like a loose stack in space, tilted on a shared angle with real depth separation. On each beat one card glides forward, straightens and sharpens while the rest drift back and blur, so viewers always know which image matters. It turns a folder of static screenshots into a guided, cinematic tour.
Try the parameters
Distance between card layers, relative to card width.
Best used for
- — App feature tours
- — Portfolio highlights
- — Before-launch teasers
- — Multi-screen tutorials
Assets
- ● Screenshots required
- ○ Screen recording optional
Pairs well with
If assets are missing
With only one screenshot use P01 Screenshot Punch instead. If the renderer cannot do 3D transforms, fake the depth in 2D with per-layer scale (0.8–1.0), diagonal offset, brightness and blur.
Accessibility
Hold each focused card ≥ 1s per line of text it contains. Keep the idle drift slow (< 2°/s) and avoid blurring text the viewer is meant to read.
Individual prompt
updates with the parameters above# CES style instruction — B02 Floating Screenshot Cards You are an experienced motion designer and video editor working in Claude Code. Apply the **B02 Floating Screenshot Cards** 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 **Animated B-Roll** — Several screenshots are arranged like a loose stack in space, tilted on a shared angle with real depth separation. On each beat one card glides forward, straightens and sharpens while the rest drift back and blur, so viewers always know which image matters. It turns a folder of static screenshots into a guided, cinematic tour. ### B02 Floating Screenshot Cards - **When:** ≈ 00:00.00 → 00:06.00 (≈ derived — adjust to the nearest natural beat in the footage) - **Layer / track:** V1 (main picture) - **What it does:** Supplied screenshots float as tilted cards at different depths; the camera brings one card forward at a time while the others soften behind. - **Parameters:** Cards: 4 cards; Stack tilt: 14 deg; Depth spread: 40%; Hold per focused card: 1.2 s; Depth-of-field blur: on; Accent colour: #D7FF5F; Easing: Expo out (snappy) - **Steps:** 1. Cut to a 3D card cutaway from 00:00.00 to 00:06.00. Lay out 4 supplied screenshots as cards in one shared 3D space: CSS perspective ≈ 1728px, every card rotated 14° on Y and 7° on X, spaced 40% of card width apart in Z and offset diagonally so each card stays partly visible. 2. Use the screenshots exactly as supplied (native resolution, original crop): 2.5% corner radius, 1px light inner border, soft long shadow (blur ≈ 6% of frame width at 40% opacity). Build only from the supplied assets — do not invent details, text, UI, numbers or features that are not present in them. If a card is missing, use fewer cards rather than fabricating a screen. 3. Advance the focus in the order the speaker mentions each screen: the focused card moves forward in Z, rotates to 0°, and scales to ≈ 78% of frame width over 14 frames with a fast expo-out curve (cubic-bezier(0.16, 1, 0.3, 1)), then holds 1.2s (36 frames). 4. Non-focused cards drift back, dim to 55% brightness and blur by depth (≈ 0.4% of frame width per layer behind the focus). The focused card is always perfectly sharp. 5. Outline the focused card with a 0.4%-wide #D7FF5F hairline that fades in after it lands. Let the whole stack drift continuously (±1.5° Y rotation, ±2% translation) so it never looks frozen. 6. Timing check: 4 cards × (1.2s hold + ~0.5s move) ≈ 6.8s against a 6.0s range — too long, so drop the least-referenced cards or shorten the hold. - **Assets:** Screenshots (⚠ MISSING) · optional: Screen recording - **Fallback:** With only one screenshot use P01 Screenshot Punch instead. If the renderer cannot do 3D transforms, fake the depth in 2D with per-layer scale (0.8–1.0), diagonal offset, brightness and blur. **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 animated b-roll styles
Cut away from the speaker when you mention something visual. Built only from assets you supply.
- B01Browser FlythroughA supplied full-page website capture glides inside a browser frame, pausing on chosen sections with smooth scroll moves and gentle push-ins.
- B03Device ShowcaseA supplied app capture plays inside a neutral phone, tablet or laptop that turns, rises and catches a soft glass reflection on a clean set.
- B04Explainer Icon FlowAn icon for each step pops in one by one and animated connectors draw between them, mapping the process the speaker describes as they say it.
- B05Parallax Photo DepthA still photo gains gentle depth: supplied foreground, subject and background layers drift at different speeds, or a careful 2D push is used instead.
- B06Product Cutout RevealA supplied product cutout rises onto a clean graphic backdrop with soft directional motion, a light sweep across its surface and a grounded shadow.
- B07Animated Map JourneyA route line draws between the supplied locations on a clean map while the camera follows it, and each stop's pin and name pop in on arrival.
- B08Abstract Motion CanvasCircles, grids, lines and simple geometry animate in sync to visualise an abstract idea — growth, connection, balance or flow — without literal imagery.
- B09Document FlyoverA supplied document page tilts into view, then a guided crop glides between the exact lines that matter while a marker highlights each one.
- B10Interface Component BreakdownA supplied UI screen separates into labelled layers — background, containers, content, controls — that hover apart in 3D, then snap back together.