broll_screenshot_websource
Generates animated background clips from web screenshots. It takes screenshots of relevant web pages, then renders them as video clips with motion effects (zoom, blur, pixelate) and an optional source attribution card overlay.
When to use
Use when you want web-sourced imagery (article screenshots, product pages, documentation) as animated broll. By default (auto_find: true) the processor uses AI web search to find and screenshot relevant pages based on the transcript context.
In the editor
Add it from the Library (B-Roll group), or with + add step and a search for broll_screenshot_websource.
Under Inputs, add transcript as a step input pointing at your transcript step, not at the step that placed the footage. With auto_find left on, that transcript is what it searches from: it finds pages related to what you are talking about and photographs them. max_clips is the budget, min_gap_sec decides which gaps are worth filling, and min_duration_sec with max_duration_sec bound how long each shot is held.
The look is set by animation_style, zoom_factor and blur_type: a slow push with a little blur reads as a background, a sharp still reads as a screenshot you are asking people to read. source_label and the card settings put a small attribution card on screen. dont_use_domains keeps named sites out of your video, which is worth setting before the first run rather than after seeing a competitor's page in your cut.
The clips appear on the b-roll level in the run timeline. Only public pages can be photographed; anything behind a login is skipped and the step moves on to the next candidate, so a gap left empty here usually means it could not get in.
YAML Example
- id: web_broll
processor: broll_screenshot_websource
input:
- id: transcript
step: transcribe_main
params:
backbone_step: ai_cut
min_gap_sec: 5
blur_type: blur
animation_style: zoom_blur
output:
timeline: broll
cache: true
Inputs
| ID | Source | Description |
|---|---|---|
transcript |
step (optional) | Transcript for context when auto-finding web sources. Point it at a generate_transcript step, not at the step that produced the footage |
tags |
step (optional) | Tagged transcript for context when auto-finding web sources |
Params
| Param | Type | Default | Description |
|---|---|---|---|
min_gap_sec |
duration (s) | 5 |
Minimum gap to fill |
min_duration_sec |
duration (s) | 4 |
Minimum clip duration |
max_duration_sec |
duration (s) | 10 |
Maximum clip duration |
max_clips |
number | 5 |
Max clips to generate (0 = unlimited) |
animation_style |
select: zoom_blur, zoom_in, zoom_out, pan, none |
"zoom_blur" |
"zoom_blur", "pulse", "noise", "both", "none" |
animation_speed |
number | 1 |
Pulse cycle duration in seconds |
zoom_factor |
number | 0.08 |
Fractional zoom applied over the full clip (e.g. 0.08 = 8% zoom) |
blur_type |
select: none, gaussian, pixelate |
"none" |
"none", "pixelate", "blur", "both" |
blur_sigma |
number | 10 |
Gaussian blur sigma |
pixelate_block_size |
number | 20 |
Pixel block size for pixelate effect |
zoom_blur_max |
number | 5 |
Max box-blur radius at the end of a zoom_blur clip |
source_label |
string | none | Label text above the URL |
source_label_font_size |
number | 24 |
Font size for the label |
url_font_size |
number | 18 |
Font size for the URL |
line_gap |
number | 6 |
Vertical gap between card lines |
card_bg_color |
color | "#FFFFFF" |
Card background color (supports alpha) |
card_accent_color |
color | "#0066CC" |
Card accent bar color |
card_accent_width |
number | 4 |
Card accent bar width in pixels |
card_position_y_frac |
number | 0.85 |
Vertical position of the card as a fraction of frame height (0 = top, 1 = bottom) |
card_padding |
number | 16 |
Internal padding of the card in pixels |
edge_padding_px |
number | 24 |
Minimum distance from left/right edges (safe zone) |
screenshot_width |
number | 1280 |
Screenshot capture width |
screenshot_height |
number | 720 |
Screenshot capture height |
screenshot_timeout_sec |
duration (s) | 15 |
Screenshot capture timeout |
screenshot_selector_priority |
list | none | CSS selectors tried in order to find main content |
screenshot_hide_selectors |
list | none | CSS selectors to hide before screenshotting |
output_level |
level | "broll" |
Output timeline level |
favicon_fallback |
bool | true |
Fall back to a tiled favicon image when a screenshot is blank or gated |
dont_use_domains |
list | none | Domains to exclude from web search |
auto_find |
bool | true |
Use AI web search to discover URLs from transcript context |
backbone_step |
string | none | Step ID to read backbone timeline from |
Output
EditDecisions on the configured output_level.
Notes
- Uses Puffin Ship's built-in AI for the agent loop and screenshot content validation (no API key required).
auto_find: true(default) uses the transcript to search for and screenshot relevant pages. Setauto_find: falseand provide URLs via the transcript or prompt to control which pages are used.zoom_factoris fractional (0.08 = 8% zoom), not a multiplier:1.05would mean 105% zoom, which is excessive.- Only public web pages can be screenshotted, over
httporhttpson the standard web ports. A URL pointing at a private or internal address is skipped and the step moves on to the next candidate. Usedont_use_domainsto exclude public sites you don't want appearing in your video.