@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

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

Voice: Uses Microsoft Edge TTS (free, no API key needed).

Features

Feature	Description
AI Planning	Groq AI (Llama 3.3) analyzes your app and generates demo steps
Voice Over	Free Edge TTS narration in 60+ languages (no API key)
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
plan.maxSteps	8	Maximum demo steps
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.quality	0.5	Video quality 0-1 (1 = best)
video.preset	fast	Encoding speed (see table below)
video.cursor	true	Show mouse cursor
video.highlight	false	Highlight active element
video.fadeIn/Out	0.3	Fade duration 0-1 (seconds)
video.contrast	0.65	Contrast boost 0-1
music.path	-	Background music file
music.volume	0.3	Music volume 0-1
intro.enabled	false	Enable voice intro before demo
intro.text	-	Custom intro text (defaults to AI description)
output.dir	./demo	Output directory

Preset Values (encoding speed vs file size):

Preset	Speed	File Size
ultrafast	Fastest	Largest
superfast	↓	↓
veryfast
faster
fast	Default
medium
slow
slower
veryslow	Slowest	Smallest

API Keys

Service	Required	Purpose	Get Key
Groq	Yes	AI planning (Llama 3.3)	console.groq.com/keys
Edge TTS	No	Voice narration (free)	No key needed

QuickPeak will prompt you to set up your Groq API key on first run, or add it manually:

# .env
GROQ_API_KEY=gsk_...

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 all 60+ 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