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": "[email protected]" } | | 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