@spark-apps/quickpeak

QuickPeak

Auto-generate demo videos for your web app with AI.

Quick Start

npm install -g @spark-apps/quickpeak

qp http://localhost:3000

Setup

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

Add GOOGLE_API_KEY to your .env — get one free at aistudio.google.com/apikey

Usage

qp <url> [lang=xx]

Command	Description
qp http://localhost:3000	Record demo (English)
qp http://localhost:3000 lang=ar	Record demo (Arabic)
qp http://localhost:3000 lang=es	Record demo (Spanish)
qp --help	Show help

Workflow

qp http://localhost:3000

• AI analyzes the page and generates demo/plan.json
• Pause to review/edit the plan
• Press Enter to record
• Output: demo/demo.mp4

Config

Optionally create quickpeak.config.json (YouTube Shorts example):

{
  "lang": "en",
  "video": {
    "width": 1080,
    "height": 1920,
    "fps": 30,
    "cursor": true,
    "highlight": false,
    "fadeIn": 0.5,
    "fadeOut": 0.5,
    "transition": "none",
    "format": "mp4",
    "preset": "fast",
    "quality": 23
  },
  "timing": {
    "minStepDuration": 1500,
    "audioPadding": 500
  },
  "output": {
    "dir": "./demo"
  }
}

Option	Default	Description
lang	en	Language code (auto-selects voice)
video.width	1080	Video width in pixels
video.height	1920	Video height in pixels
video.fps	30	Frames per second
video.cursor	true	Show mouse cursor
video.highlight	false	Dim background, highlight active element
video.fadeIn	0.5	Fade in duration at video start (seconds, 0 to disable)
video.fadeOut	0.5	Fade out duration at video end (seconds, 0 to disable)
video.transition	none	Step transition effect (none or fade)
video.format	mp4	Output format
video.preset	fast	FFmpeg preset (fast/medium/slow)
video.quality	23	CRF (18=best, 28=smallest, 23=balanced)
music.path	-	Path to background music MP3
music.volume	0.3	Music volume (0.0-1.0)
music.fadeIn	2	Music fade in duration (seconds)
music.fadeOut	2	Music fade out duration (seconds)

Languages

Set lang in config to auto-select the best voice for that language:

Code	Language	Voice
en	English	en-US-AvaMultilingualNeural
ar	Arabic	ar-LB-LaylaNeural
es	Spanish	es-ES-ElviraNeural
fr	French	fr-FR-DeniseNeural
de	German	de-DE-KatjaNeural
zh	Chinese	zh-CN-XiaoxiaoNeural
ja	Japanese	ja-JP-NanamiNeural
ko	Korean	ko-KR-SunHiNeural
pt	Portuguese	pt-BR-FranciscaNeural
ru	Russian	ru-RU-SvetlanaNeural
hi	Hindi	hi-IN-SwaraNeural
tr	Turkish	tr-TR-EmelNeural

See src/voices.ts for all 60+ supported languages.

Uses Microsoft Edge TTS (free, no API key). Full voice list

Option	Default	Description
timing.minStepDuration	1500	Minimum step duration (ms)
timing.audioPadding	500	Padding after audio (ms)
output.dir	./demo	Output directory

Captions

Style captions by creating captions.css in your project root:

.caption {
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 64px;
  font-weight: bold;
  color: #FFFF00;
  -qp-highlight: #FFFFFF;
  -webkit-text-stroke: 2px rgba(0, 0, 0, 0.5);
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
  margin-bottom: 100px;
}

Property	Description
font-family	Font face
font-size	Size in pixels
font-weight	bold or normal
color	Text color (hex)
-qp-highlight	Karaoke highlight color
-webkit-text-stroke	Outline width and color
text-shadow	Shadow offset
margin-bottom	Distance from bottom

Plan File

Edit demo/plan.json before recording to customize steps:

{
  "steps": [
    {
      "id": 1,
      "action": "click",
      "target": "#submit-btn",
      "caption": "Click submit to save",
      "duration": 2000,
      "zoom": 1.2
    }
  ]
}

Step Property	Description
action	navigate, click, type, select, check, wait, scroll
target	CSS selector (prefer [data-testid="..."])
value	Text to type or option to select
caption	Voiceover narration
duration	Step duration in ms (auto-calculated from audio)
zoom	Zoom factor for this step (e.g., 1.2 = 20% zoom in)

Output

File	Description
demo/demo.mp4	Final video
demo/plan.json	Editable script
captions.css	Caption styling (project root)

License

MIT