Skip to content

Floating Screenshot Cards B02

0.0s

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.

Your recipe starts here.

Add a style to begin building.