npm package: @spark-apps/quickpeak
Description: Auto-generate demo videos for your web app with AI
Latest version: 1.2.1
Deprecated: This package has been renamed to @spark-apps/quickpeek

[license-link]: ./LICENSE
[privacy-link]: ./PRIVACY.md
[discord-link]: https://discord.gg/5skXfKRytR
[stars-link]: ../../stargazers
[issues-link]: ../../issues

<div align="center">

<img src=imgs/logo.png>

**Demo videos for your web app with AI**

[![npm](https://img.shields.io/npm/v/@spark-apps/quickpeak?style=flat-square&logo=npm&logoColor=white&color=crimson)](https://www.npmjs.com/package/@spark-apps/quickpeak)
[![MIT](https://img.shields.io/badge/License-MIT-blueviolet?style=flat-square)][license-link]
[![Discord](https://img.shields.io/badge/Discord-Join-5865F2?style=flat-square&logo=discord&logoColor=white)][discord-link]
[![GitHub Stars](https://img.shields.io/github/stars/muammar-yacoob/quickpeak?style=flat-square)][stars-link]

</div>

---

## Quick Start

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

**Requirements:** [ffmpeg](https://ffmpeg.org/download.html), [Groq API key](https://console.groq.com/keys) (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 |

## Examples

### Basic

```bash
qp localhost:3000
```

### With Options

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

| Option | Description |
|--------|-------------|
| `lang` | Voice language (en, es, ar, zh...) |
| `video.width/height` | Resolution (default: 1080x1920) |
| `video.quality` | Quality 0-1 (default: 0.5) |
| `music.path` | Background music file |
| `music.volume` | Music volume 0-1 (default: 0.3) |
| `intro.enabled` | Enable voice intro |
| `output.dir` | Output directory (default: ./demo) |

Config is auto-generated on first run. Edit `quickpeak.config.json` to customize.

<details>
<summary><strong>Supported Languages</strong></summary>

| Code | Language | Code | Language |
|------|----------|------|----------|
| `en` | English | `ar` | Arabic |
| `es` | Spanish | `fr` | French |
| `de` | German | `zh` | Chinese |
| `ja` | Japanese | `ko` | Korean |
| `pt` | Portuguese | `hi` | Hindi |
| `it` | Italian | `ru` | Russian |

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

</details>

<details>
<summary><strong>Caption Style</strong></summary>

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

![Classic Yellow](imgs/caption-classic.png)

```css
.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;
}
```

</details>

## Output

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

## 🌱 Support & Contributions

⭐ **Star the repo** & I power up like Mario 🍄  
☕ **Devs run on coffee** - [Buy me one?][coffee-link]  
💖 **Sponsor** [Your support][stars-link] helps maintain and improve the tool<br>
💰 **Crypto tips welcome** - [Tip in crypto](https://tip.md/muammar-yacoob)  
🤝 **Contributions are welcome** - [🍴 Fork][fork-link], improve, PR!  
🎥 **Need help?** <img src="https://img.icons8.com/color/20/youtube-play.png" alt="YouTube" width="20" height="20" style="vertical-align: middle;"> [Setup Tutorial][vid-link] • <img src="https://img.icons8.com/color/20/discord--v2.png" alt="Discord" width="20" height="20" style="vertical-align: middle;"> [Join Discord][discord-link]

<div align="center">

---

MIT License - Made with ☕ by [Spark Apps](https://github.com/muammar-yacoob)

</div>