@spark-apps/quickpeek-cli

QuickPeek CLI

Auto-generate demo videos for your web app with AI

Quick Start

npx @spark-apps/quickpeek-cli localhost:3000

Or install globally:

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

Requirements: ffmpeg, Groq API key (free)

Features

Feature	Description
AI Planning	Groq AI analyzes your app and generates demo steps
Voice Over	Free Edge 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
Media Steps	Insert custom images/videos as intro slides
Show Downloads	Display downloaded files in the demo

Examples

Basic

qp localhost:3000

With Options

qp localhost:3000 lang=es -d "A todo app for managing daily tasks"

Option	Description
lang	Voice language (en, es, ar, zh...)
-d, --description	App description to guide AI
--skip-voice	Reuse existing voiceover

Configuration

Config is auto-generated on first run. Edit quickpeek.config.json to customize:

Option	Description	Default
plan.maxSteps	Max demo steps	8
video.width/height	Resolution	1080x1920
video.quality	Quality 0-1	0.5
video.cursor	Show mouse cursor	true
video.fadeIn/fadeOut	Fade duration	0.3s
music.path	Background music file	-
music.volume	Music volume 0-1	0.3
output.dir	Output directory	./demo

Output

File	Description
demo/demo.mp4	Final video
demo/plan.json	Editable script (re-run to apply changes)

Plan Actions

Edit plan.json to customize the demo steps:

Action	Description	Example
click	Click an element	{ "action": "click", "target": "button:has-text(\"Submit\")" }
type	Type text into input	{ "action": "type", "target": "input[name='email']", "value": "[e-mail]" }
upload	Upload a file	{ "action": "upload", "target": "input[type='file']", "value": "/path/to/file.png" }
scroll	Scroll the page	{ "action": "scroll", "value": "80%" }
drag	Drag a slider	{ "action": "drag", "target": "input[type='range']", "value": "50" }
wait	Pause (no caption needed)	{ "action": "wait" }
media	Show image/video slide	{ "action": "media", "target": "scale", "value": "./cover.png" }
showDownload	Display last download	{ "action": "showDownload" }

Media Step

Insert custom images or videos as intro/outro slides:

{
  "action": "media",
  "target": "scale",
  "value": "./my-intro.png",
  "caption": "Welcome to our app demo!"
}

• target: "scale" (fill viewport) or "center" (original size)
• value: Path to image (png, jpg, gif, webp) or video (mp4, webm, mov)
• Displays with dark background (#1a1a2e)

Show Download

Display the last downloaded file in the demo:

{
  "action": "showDownload",
  "caption": "Here's your generated file!"
}

Automatically captures files downloaded during previous steps.

Supported Languages

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

60+ languages supported via Edge TTS.

Caption Styling

Edit captions.css (auto-generated) to customize:

.caption {
  font-family: Arial, sans-serif;
  -webkit-text-stroke: 3px #000000;
}
.caption .regular {
  font-size: 56px;
  color: #FFFFFF;
}
.caption .highlight {
  font-size: 64px;
  color: #FFFF00;
}

MIT License - Made with ☕ by Spark Apps