Headless Chrome Screenshot

CRITICAL: --window-size sets outer window — Chrome reserves ~140px on macOS.

Target	Window size
1920x1080	`1920x1220` → crop
1080x1080	`1080x1220` → crop

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --headless --screenshot="$PNG" --window-size=1920,1220 --hide-scrollbars --no-sandbox "file://$HTML"
ffmpeg -i "$PNG" -vf "crop=1920:1080:0:0" -y "$FINAL.png"

Explainer Slides

Font: Poppins (Google Fonts CDN). One idea per slide. Animation: fade-in from below, 0.5s ease-out, staggered 0.2s/0.6s/1.0s/1.4s.

Platform Banners

Platform	Dimensions	Safe Zone
YouTube	2560x1440	1546x423 centered
LinkedIn	1584x396	Full
Facebook	820x312	Full

Image → Video Clip

ffmpeg -loop 1 -i "$PNG" \
  -vf "scale=1920:1080,zoompan=z='min(zoom+0.001,1.3)':d=375:s=1920x1080" \
  -t 15 -r 25 -c:v libx264 -pix_fmt yuv420p -y "$OUT.mp4"

Remotion Rendering

MANDATORY: Use shared Chromium — NEVER download per-production (175MB):

export REMOTION_BROWSER_EXECUTABLE="${REMOTION_BROWSER_EXECUTABLE:-$(which chromium-browser 2>/dev/null || which chromium 2>/dev/null || which google-chrome 2>/dev/null)}"
npm ci --omit=optional
npx remotion render "$COMP_ID" "$OUT.mp4" --props='$JSON'

Output Paths

GFX PNGs: {production}/interim/broll/gfx/{id}-{desc}.png
GFX clips: {production}/interim/broll/gfx/{id}-{desc}.mp4
Banners: {brand_path}/creatives/brolls/gfx/{id}-{desc}.png

c-html-gfx

HTML GFX — Graphics for Video

GFX Types (1920x1080 Dark Studio Theme)

Color Palette

Mandatory Post-Render Check