Skip to content

Headless media capture: screenshots/video of the app + skill#64

Merged
kipavy merged 1 commit into
devfrom
headless-media-capture
Jul 24, 2026
Merged

Headless media capture: screenshots/video of the app + skill#64
kipavy merged 1 commit into
devfrom
headless-media-capture

Conversation

@kipavy

@kipavy kipavy commented Jul 24, 2026

Copy link
Copy Markdown
Contributor

What

Enables faithful screenshot/video capture from the headless dev stack, and documents the workflow as a skill.

  • compose.headless.yml: WEBKIT_DISABLE_COMPOSITING_MODE=1. WebKitGTK renders CSS opacity/transform animations on GPU compositor layers that Xvfb's software path never flushes to the X framebuffer — so screen-grabbed captures silently drop every transition/animation. Forcing compositing off paints into the readable window buffer.
  • Dockerfile.tauri-headless: add ffmpeg (x11grab recording) + python3-pil (brand-gradient framing).
  • .claude/skills/capturing-voltius-media: new skill — stills (existing docs pipeline), video (record via ffmpeg x11grab, drive via tauri-driver, edit via ffmpeg zoompan), and brand-gradient framing that reuses ../docs/tools/screenshots/frame.py.

Testing

Drove the live headless app: recorded a language-switch demo with animations intact (verified via signalstats luminance ramp), and a fresh agent using only the skill successfully recorded the command-palette open animation.

🤖 Generated with Claude Code

https://claude.ai/code/session_01HKUYb6g8PZNPSususpTGPg

Enable faithful media capture from the headless dev stack and document it as a skill:

- compose.headless.yml: set WEBKIT_DISABLE_COMPOSITING_MODE=1. WebKitGTK renders CSS
  opacity/transform animations on GPU compositor layers that Xvfb's software path never
  flushes to the X framebuffer, so screen-grabbed captures silently drop every transition.
  Forcing compositing off paints into the readable window buffer.
- Dockerfile.tauri-headless: add ffmpeg (x11grab recording) and python3-pil (brand framing).
- .claude/skills/capturing-voltius-media: new skill covering stills (existing docs pipeline),
  video (record via ffmpeg x11grab, drive via tauri-driver, edit via ffmpeg zoompan), and
  brand-gradient framing that reuses docs/tools/screenshots/frame.py.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HKUYb6g8PZNPSususpTGPg
@kipavy
kipavy merged commit 08e9c0e into dev Jul 24, 2026
2 checks passed
@kipavy
kipavy deleted the headless-media-capture branch July 24, 2026 11:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant