New: Earn 20% as an AgentAlley affiliate. Share your link and earn on every sale you refer. Join now New: Earn 20% as an affiliate. Join now

Generate B-roll environment and product shots with Kling 3

B-Roll (Kling 3)

by TheMattBerman · MIT license · ★ 71 on GitHub · updated Mar 27

B-Roll (Kling 3) cover

Generate B-roll environment and product shots with Kling 3 via fal.ai. Environment matching, cut timing, and visual-only clips that play under continuous voice.

---
name: scrollclaw-broll
description: "Generate B-roll environment and product shots with Kling 3 via fal.ai. Environment matching, cut timing, and visual-only clips that play under continuous voice."
metadata:
  openclaw:
    emoji: "🎞️"
    user-invocable: true
    triggers:
      - "b-roll"
      - "kling video"
      - "environment shot"
      - "product shot"
      - "broll"
      - "b roll"
---

# B-Roll (Kling 3)

Overview

Kling 3 generates B-roll — environment shots, product close-ups, lifestyle moments. These are visual-only clips that play under the continuous voice track. Voice never cuts. B-roll swaps visuals only.

What you get

  • Producesone visual-only B-roll clip per segment plus append-only generation logs
  • FormatMP4 files in workspace/campaigns/<slug>/clips/ and rows in output-log.md
  • Default behavioruse Kling with an environment-matched start frame; for app demos, use real screenshots or recordings instead of AI UI generation
  • Downstream use/assemble
Manual install (npx, ZIP)
Claude Codenpx skills add TheMattBerman/scrollclaw --skill scrollclaw-broll -g -a claude-code
Claude Code (manual)mkdir -p ~/.claude/skills && curl -sL https://codeload.github.com/TheMattBerman/scrollclaw/tar.gz/ea175d4b62fd \ | tar -xz -C ~/.claude/skills --strip-components=1 scrollclaw-ea175d4b62fd/b-roll
Windows (PowerShell)New-Item -ItemType Directory -Force "$HOME\.claude\skills" | Out-Null; Invoke-WebRequest "https://m.agentalley.io/zip/3586f1f9048bf0baeff4/b-roll.zip" -OutFile "$env:TEMP\b-roll.zip"; Expand-Archive "$env:TEMP\b-roll.zip" -DestinationPath "$HOME\.claude\skills" -Force
Claude.ai / desktopDownload the ZIP and upload it under Settings → Capabilities → Skills.
Codex, Cursor, other agentsPoint them at SKILL.md. The other files are plain text.

Connects with Agent Alley MCP · agentalley.io/mcp

Files included

  • SKILL.md5.1 KB
  • references/2 files · 17.1 KB
Read the files here
TheMattBerman/ea175d43 files
Shared references1SKILL.md reads these from elsewhere in the repo. Not in the ZIP.Get them on GitHub ↗
SKILL.md
Show the full text128 lines

B-Roll (Kling 3)

Kling 3 generates B-roll — environment shots, product close-ups, lifestyle moments. These are visual-only clips that play under the continuous voice track. Voice never cuts. B-roll swaps visuals only.

Prerequisites

  • Script with [B-ROLL] segments tagged (from /persona)
  • A-roll clips generated (from /animate) — needed for environment matching

Environment Matching

Extract a frame from the A-roll and use it as Kling's start image. This ensures B-roll looks like the same room — same floor, same lighting, same vibe. See references/orchestrator.md.

Generate context-specific first frames per scene. Don't use the podcast frame (headphones) for gym B-roll.

Cut Timing

Cut from A-roll to B-roll at a script BEAT point — not mid-sentence. The viewer should see the face deliver the setup, then cut to B-roll for the payoff visual.

Example: If Sarah says "she finishes the whole bowl" → cut to dog finishing the bowl. Match the visual to the words. Leave 0.5-1s buffer before the cut so the face isn't visible in a non-talking state.

Generation

USE scripts/generate-broll.sh — do NOT construct Kling API calls manually.

# B-roll with environment-matched start frame (RECOMMENDED)
bash scripts/generate-broll.sh \
  --provider fal \
  --image workspace/campaigns/<slug>/frames/environment-frame.png \
  --prompt-file workspace/campaigns/<slug>/broll-prompt.txt \
  --output workspace/campaigns/<slug>/clips/b-roll-01.mp4 \
  --log-file workspace/campaigns/<slug>/output-log.md \
  --label b-roll-01 \
  --seconds 5

# Faceless B-roll (no start frame needed)
bash scripts/generate-broll.sh \
  --provider fal \
  --prompt-file workspace/campaigns/<slug>/broll-prompt.txt \
  --output workspace/campaigns/<slug>/clips/b-roll-02.mp4 \
  --log-file workspace/campaigns/<slug>/output-log.md \
  --label b-roll-02 \
  --seconds 5

API Reference

Read references/kling-api.md for Kling 3 endpoint details, field names, and queue workflow on fal.ai.

Key Findings

  • Kling generates in ~100s vs Sora's 5-10 min. Use Kling for ALL B-roll.
  • Same character face image feeds both engines for identity consistency
  • AI cannot generate realistic app screens or UI text. For product/app demos: use real screenshots or screen recordings.
  • The orchestrator doc (references/orchestrator.md) has the full A/B-roll split methodology

Brand Memory Integration

Reads
File Purpose
workspace/campaigns/<slug>/frames/environment-frame.png Environment-matched start frame for Kling i2v
workspace/campaigns/<slug>/clips/a-roll-*.mp4 Source clips to extract environment frames from
workspace/campaigns/<slug>/scripts/<format>-script.md B-roll segments and visual cues
Writes
File Notes
workspace/campaigns/<slug>/clips/b-roll-01.mp4 One file per B-roll segment
workspace/campaigns/<slug>/output-log.md Kling prompt, duration, provider (append-only)
Context loading
🎞️ B-Roll context loaded:
  ✓ Environment frame: workspace/campaigns/ridge-q1/frames/environment-frame.png
  ✓ A-roll clips: 3 found (workspace/campaigns/ridge-q1/clips/)
  ✓ Script: talking-head (B-roll segments: 2)
  ✓ Campaign: ridge-q1

Contract

Input
  • Required: [B-ROLL] script segments plus either an environment frame or usable A-roll clips for extraction
  • Optional: product screenshots, faceless B-roll prompts, campaign brief for scene grounding
  • Format: workspace image/video files plus B-roll prompt text
  • Source: /animate, /persona, and references/orchestrator.md
Output
  • Produces: one visual-only B-roll clip per segment plus append-only generation logs
  • Format: MP4 files in workspace/campaigns/<slug>/clips/ and rows in output-log.md
  • Default behavior: use Kling with an environment-matched start frame; for app demos, use real screenshots or recordings instead of AI UI generation
  • Downstream use: /assemble
Validation
  • Pre-conditions: the cut point is clear in the script and there is enough scene context to match the A-roll environment
  • Post-conditions: clip visually fits the voice beat, feels like the same world as the A-roll, and saves locally
  • Failure checks: do not accept stock-looking B-roll, mismatched rooms, or fake app UI when the product needs a real screen

Output

  • B-roll clips (MP4) in workspace/campaigns/<slug>/clips/
  • Each clip named b-roll-<segment>.mp4 corresponding to a [B-ROLL] script segment
  • Clips are visual-only — no dialogue
  • Generation params logged to workspace/campaigns/<slug>/output-log.md

Next Step

B-roll done → run /assemble to stitch everything together with unified audio.

1---
2name: scrollclaw-broll
3description: "Generate B-roll environment and product shots with Kling 3 via fal.ai. Environment matching, cut timing, and visual-only clips that play under continuous voice."
4metadata:
5 openclaw:
6 emoji: "🎞️"
7 user-invocable: true
8 triggers:
9 - "b-roll"
10 - "kling video"
11 - "environment shot"
12 - "product shot"
13 - "broll"
14 - "b roll"
15---
16 
17# B-Roll (Kling 3)
18 
19Kling 3 generates B-roll — environment shots, product close-ups, lifestyle moments. These are visual-only clips that play under the continuous voice track. Voice never cuts. B-roll swaps visuals only.
20 
21## Prerequisites
22 
23- Script with `[B-ROLL]` segments tagged (from `/persona`)
24- A-roll clips generated (from `/animate`) — needed for environment matching
25 
26## Environment Matching
27 
28Extract a frame from the A-roll and use it as Kling's start image. This ensures B-roll looks like the same room — same floor, same lighting, same vibe. See `references/orchestrator.md`.
29 
30Generate **context-specific first frames** per scene. Don't use the podcast frame (headphones) for gym B-roll.
31 
32## Cut Timing
33 
34Cut from A-roll to B-roll at a script BEAT point — not mid-sentence. The viewer should see the face deliver the setup, then cut to B-roll for the payoff visual.
35 
36Example: If Sarah says "she finishes the whole bowl" → cut to dog finishing the bowl. Match the visual to the words. Leave 0.5-1s buffer before the cut so the face isn't visible in a non-talking state.
37 
38## Generation
39 
40**USE `scripts/generate-broll.sh` — do NOT construct Kling API calls manually.**
41 
42```bash
43# B-roll with environment-matched start frame (RECOMMENDED)
44bash scripts/generate-broll.sh \
45 --provider fal \
46 --image workspace/campaigns/<slug>/frames/environment-frame.png \
47 --prompt-file workspace/campaigns/<slug>/broll-prompt.txt \
48 --output workspace/campaigns/<slug>/clips/b-roll-01.mp4 \
49 --log-file workspace/campaigns/<slug>/output-log.md \
50 --label b-roll-01 \
51 --seconds 5
52 
53# Faceless B-roll (no start frame needed)
54bash scripts/generate-broll.sh \
55 --provider fal \
56 --prompt-file workspace/campaigns/<slug>/broll-prompt.txt \
57 --output workspace/campaigns/<slug>/clips/b-roll-02.mp4 \
58 --log-file workspace/campaigns/<slug>/output-log.md \
59 --label b-roll-02 \
60 --seconds 5
61```
62 
63## API Reference
64 
65Read `references/kling-api.md` for Kling 3 endpoint details, field names, and queue workflow on fal.ai.
66 
67## Key Findings
68 
69- Kling generates in ~100s vs Sora's 5-10 min. Use Kling for ALL B-roll.
70- Same character face image feeds both engines for identity consistency
71- **AI cannot generate realistic app screens or UI text.** For product/app demos: use real screenshots or screen recordings.
72- The orchestrator doc (`references/orchestrator.md`) has the full A/B-roll split methodology
73 
74## Brand Memory Integration
75 
76### Reads
77| File | Purpose |
78|------|---------|
79| `workspace/campaigns/<slug>/frames/environment-frame.png` | Environment-matched start frame for Kling i2v |
80| `workspace/campaigns/<slug>/clips/a-roll-*.mp4` | Source clips to extract environment frames from |
81| `workspace/campaigns/<slug>/scripts/<format>-script.md` | B-roll segments and visual cues |
82 
83### Writes
84| File | Notes |
85|------|-------|
86| `workspace/campaigns/<slug>/clips/b-roll-01.mp4` | One file per B-roll segment |
87| `workspace/campaigns/<slug>/output-log.md` | Kling prompt, duration, provider (append-only) |
88 
89### Context loading
90 
91```
92🎞️ B-Roll context loaded:
93 ✓ Environment frame: workspace/campaigns/ridge-q1/frames/environment-frame.png
94 ✓ A-roll clips: 3 found (workspace/campaigns/ridge-q1/clips/)
95 ✓ Script: talking-head (B-roll segments: 2)
96 ✓ Campaign: ridge-q1
97```
98 
99## Contract
100 
101### Input
102- Required: `[B-ROLL]` script segments plus either an environment frame or usable A-roll clips for extraction
103- Optional: product screenshots, faceless B-roll prompts, campaign brief for scene grounding
104- Format: workspace image/video files plus B-roll prompt text
105- Source: `/animate`, `/persona`, and `references/orchestrator.md`
106 
107### Output
108- Produces: one visual-only B-roll clip per segment plus append-only generation logs
109- Format: MP4 files in `workspace/campaigns/<slug>/clips/` and rows in `output-log.md`
110- Default behavior: use Kling with an environment-matched start frame; for app demos, use real screenshots or recordings instead of AI UI generation
111- Downstream use: `/assemble`
112 
113### Validation
114- Pre-conditions: the cut point is clear in the script and there is enough scene context to match the A-roll environment
115- Post-conditions: clip visually fits the voice beat, feels like the same world as the A-roll, and saves locally
116- Failure checks: do not accept stock-looking B-roll, mismatched rooms, or fake app UI when the product needs a real screen
117 
118## Output
119 
120- B-roll clips (MP4) in `workspace/campaigns/<slug>/clips/`
121- Each clip named `b-roll-<segment>.mp4` corresponding to a `[B-ROLL]` script segment
122- Clips are visual-only — no dialogue
123- Generation params logged to `workspace/campaigns/<slug>/output-log.md`
124 
125## Next Step
126 
127B-roll done → run `/assemble` to stitch everything together with unified audio.
128 
View all files on GitHub →

Details

Updated
Mar 27, 2026
License
MIT
Stars on the repo
★ 71
Checked
Source
TheMattBerman/scrollclaw ↗
Creator
TheMattBerman · 6 listings
View creator

Similar skills

See all →
SkillMake a polished video of an app or a featureMake a demo video with OpenScreengetopenscreen/openscreen · by getopenscreenMake a polished video of an app or a feature with OpenScreen's MCP tools, from storyboard to recording, editing and export, then either attach it to a pull request or draft a post on X. Use when the user asks for a demo, a demo video, a screen recording, a product video, a launch clip, a video for X/Twitter, LinkedIn or a README, or to show a change in a pull request ("add a video to the PR", "show the feature to reviewers"). Also use to set OpenScreen up for an agent, and to continue an OpenScreen demo in a new session.★ 4.5k GitHub starsSkillVideo and audio processing with FFmpegFFmpeg for Video Productiondigitalsamba/claude-code-video-toolkit · by digitalsambaVideo and audio processing with FFmpeg. Use for format conversion, resizing, compression, audio extraction, and preparing assets for Remotion. Triggers include converting GIF to MP4, resizing video, extracting audio, compressing files, or any media transformation task.★ 2.1k GitHub starsSkillTurn static SCREENSHOTS into a simulated screen recordingfake-screencast — screenshots → simulated screen recordinghassancs91/claude-youtube-editor · by hassancs91Turn static SCREENSHOTS into a simulated screen recording (TSX) — a fake screencast with an animated cursor that eases to targets and clicks, a browser URL bar that updates per page, hard-cut navigations, in-page filter crossfades, smooth scroll, and a ken-burns zoom onto the payoff. Use when a beat needs to show a walkthrough of a web app / dashboard / settings page and you'd rather build it from screenshots than get (or ask for) a real screen recording — "fake a screen recording", "turn these screenshots into a screencast", "simulate clicking through the dashboard", "animate this UI walkthrough", "cursor moving through the app". Built on remotion/src/lib/screencast.tsx. This is a technique WITHIN step 2 (make-tsx): defer timeline/render/bake orchestration to make-tsx and raw crash-free TSX rules to vidtsx-2d-generator. Not for a single static page clone (use WebBrowserFrame directly) and not when the point is genuine proof of real speed/output (use a real recording).★ 330 GitHub starsSkillA Khan Academy style explainer videoKhan explainerhaiderfarooq3/khan-explainer · by haiderfarooq3Use when the user wants a Khan Academy style explainer video, a blackboard or whiteboard lesson, a hand-drawn chalk-talk animation, a short narrated video that teaches a concept ("explain X in a video", "explainer video", "teach X in 30 seconds"), or a tutorial that draws hand-written arrows, circles and captions over product screenshots ("draw over the UI", "annotated walkthrough"), or clips cut from a YouTube video or podcast where the speaker's real audio plays under a blackboard drawn to it ("khanify this video", "clip this with the Khan visual"), especially when it must be free, local, and use no paid APIs or keys. macOS only.★ 113 GitHub starsSkillPick the output format that makes an explanation easiestUnderstanding ladderChangWenC/understanding-ladder · by ChangWenCPick the output format that makes an explanation easiest to understand, following Karpathy's understanding ladder — (1) plain controlled text, (2) diagram, (3) interactive HTML page, (4) 3Blue1Brown-style explainer video. Classify the content (definition/steps, process/causality, parameter→outcome, unfolding derivation), recommend the lowest rung that fully answers, then produce it. Works in English and Chinese. Use when the user says "explain this clearly", "help me understand", "draw a diagram", "make it interactive", "make an explainer video", "what's the best way to explain X", "understanding ladder", "Karpathy ladder", or 「讲清楚」「帮我理解」「画个图」「做个交互页」「做个讲解视频」「用哪种方式讲最好懂」「理解阶梯」; also when explaining a non-trivial concept, mechanism, algorithm, or an AI agent's output.★ 108 GitHub starsSkillAnimate first frames into A-roll talking head clipsAnimate (A-Roll)TheMattBerman/scrollclaw · by TheMattBermanAnimate first frames into A-roll talking head clips. Uses Sora 2 via fal.ai (primary) with Kling 3 auto-fallback when Sora is unavailable or sunset.★ 71 GitHub stars

More from TheMattBerman