Media Creation Tool

Playwright + ffmpeg toolkit for creating branded UI walkthroughs, storyboard-based explainer videos, and HTML/CSS presentation videos.

Suggested GitHub description: Playwright + ffmpeg toolkit for creating branded walkthroughs, presentation videos, narration sync, and 1080p exports with LLM-friendly workflows.

What It Can Do

• Record guided UI walkthrough videos in Chromium with Playwright.
• Render deterministic storyboard videos from captured UI stills for tight voice sync.
• Build presentation-style videos from custom HTML/CSS slide decks.
• Sync external narration tracks to visuals.
• Validate video/audio streams before delivery.
• Export review .webm files and Full HD .mp4 deliverables.

Tool Stack

• Node.js
• Playwright
• Chromium
• ffmpeg
• ffprobe
• HTML/CSS/JavaScript
• optional faster-whisper for local transcript generation and timing checks

Project Structure

• bitunix_walkthrough.js Spot walkthrough recorder for live interface capture.
• bitunix_walkthrough_voice_synced.js Deterministic storyboard renderer for voice-synced spot videos.
• valentines_campaign_video.js Presentation video recorder for the campaign flow.
• artifacts HTML/CSS presentation assets and reference copy.
• storyboard_assets Captured stills and storyboard metadata used by the spot renderer.
• docs Public documentation, workflows, and LLM usage guides.
• campaign Local-only campaign inputs and review outputs.
• videos Local-only raw review renders and temporary transcripts.
• exports Local-only delivery exports.

Quick Start

npm install
npm test

Render the live spot walkthrough:

npm run render:spot:live

Render the deterministic storyboard spot walkthrough:

npm run render:spot:storyboard

Render the campaign presentation video:

npm run render:campaign

Using It With an LLM

Use an LLM as the orchestration layer and let this repo provide the concrete render/export surface.

Recommended LLM tasks:

• update slide copy inside the HTML presentation
• retime storyboard cues against a transcript
• generate ffmpeg mux/export commands
• review stream metadata and diagnose missing or quiet audio
• adjust presentation styling while preserving the render flow

Prompt examples:

• Update the campaign presentation to match the target brand style, keep it as a presentation video, and re-render a raw review file.
• Transcribe my narration, compare it to the current slide timing, retime the visual flow, and only then mux the audio.
• Export the final review video to 1920x1080 at 30 fps and verify that audio is present and non-silent.

More detailed usage patterns are documented in LLM_USAGE.md.

Public Repo Safety

This public repo is intentionally kept free of personal working artifacts.

• committed media outputs are excluded from git
• local voice recordings are excluded from git
• generated transcripts are excluded from git
• local agent handoff files were removed
• local absolute paths and private workspace references were removed

Use your own local media files inside the ignored campaign, videos, and exports folders.

Documentation

• WORKFLOWS.md
• LLM_USAGE.md
• REPO_DESCRIPTION.md
• SECURITY.md