@spark-apps/quickpeak

<img src=imgs/logo.png>

Demo videos for your web app with AI

🚀 Quick Start

npm install -g @spark-apps/quickpeak
qp localhost:3000

Prerequisites

npx playwright install chromium
apt install ffmpeg   # Linux
brew install ffmpeg  # macOS

On first run, QuickPeak will prompt you to set up your free API key interactively.

✨ Features

Feature	Description
🤖 AI Planning	Automatically analyzes your app and generates demo steps
🎙️ Voice Over	Natural TTS narration in 60+ languages
🎬 Karaoke Captions	Word-by-word highlighted subtitles
🎵 Background Music	Optional music with fade in/out
🔍 Smart Zoom	Per-step zoom for focused demos

📖 Usage

qp <url> [options]

Command	Description
qp localhost:3000	Record demo (auto-adds http://)
qp example.com	Record demo (auto-adds https://)
qp myapp.com lang=ar	Arabic narration
qp myapp.com -d "A todo app"	Describe app to focus AI on core features
qp init	Create config file
qp config lang es	Set config option

Options:

• lang=xx — Language for narration (en, es, ar, zh...)
• -d, --description "..." — Help AI understand your app's core purpose

⚙️ Config

Run qp init to create quickpeak.config.json:

{
  "lang": "en",
  "video": { "width": 1080, "height": 1920, "fps": 30 },
  "music": { "path": "./music.mp3", "volume": 0.3 }
}

All Options

Option	Default	Description
lang	en	Language code (60+ supported)
video.width	1080	Video width (px)
video.height	1920	Video height (px)
video.fps	30	Frames per second
video.cursor	true	Show mouse cursor
video.highlight	false	Highlight active element
video.fadeIn/Out	0.3	Fade duration (seconds)
video.quality	23	CRF (18=best, 28=smallest)
music.path	-	Background music file
music.volume	0.3	Music volume (0-1)
output.dir	./demo	Output directory

🌍 Languages

Set lang to auto-select the best voice:

Code	Language	Code	Language
en	English	ar	Arabic
es	Spanish	fr	French
de	German	zh	Chinese
ja	Japanese	ko	Korean
pt	Portuguese	hi	Hindi

See src/voices.ts for supported languages.

🎨 Caption Styling

Create captions.css in your project root:

.caption {
  font-family: "Arial Black", sans-serif;
  font-size: 64px;
  color: #FFFF00;
  -qp-highlight: #FFFFFF;
  -webkit-text-stroke: 2px rgba(0,0,0,0.5);
}

📄 Output

File	Description
demo/demo.mp4	Final video
demo/plan.json	Editable script

Report Bug · Discord · Privacy

MIT License - Made with ☕ by Spark Apps