Start here

Your first video, step by step

From nothing installed to a finished video. You need a terminal and a product that runs in a browser.

0:00 / 0:00

Watch first

A tour of the whole site

See the landing page, the docs, this guide, the themes and the theme studio before you start. The tour was made with Showcase itself: one script, filmed on this site while it ran.

5 min 31 s 36 scenes lavender theme

Its script and theme are in the repo, in examples/website-tour.

step 1 of 10

Step 1

Install the tools

Three free tools. Bun or Node runs the kit, FFmpeg builds the video, and Python is needed once, to install the voice.

Draft renders work without Python. You only need it for the voice.

All ten steps on one page

1. Install the tools
Three free tools. Bun or Node runs the kit, FFmpeg builds the video, and Python is needed once, to install the voice.
Check each one
```
bun --version
ffmpeg -version
python --version
```
You need
```
Bun 1.2 or later, or Node 22.18 or later
FFmpeg on your PATH, with ffprobe
Python 3.10 to 3.13
```
Tip. Draft renders work without Python. You only need it for the voice.
2. Get the kit
Install it from npm, in your own project folder. One line, and nothing to clone.
You type, in your project
```
bun add -d kwartz-showcase
```
Or, with npm
```
npm install --save-dev kwartz-showcase
```
Tip. This guide writes bunx. With Node, write npx in its place: npx showcase doctor.
3. Set up the voice
doctor lists what is there and what is missing. setup installs Chromium, creates a Python environment for the voice and downloads the Kokoro model.
You type
```
bunx showcase doctor
bunx showcase setup
```
What setup installs
```
Chromium, for Playwright
A Python environment for the voice
The Kokoro voice model, about 350 MB
```
Tip. It all goes into one cache shared by every project (~/.cache/kwartz-showcase), so it happens once.
4. Start a video
In your project folder, one command adds the config, a starter scenes file and the skill for Claude Code.
You type
```
bunx showcase init --config
```
It adds
```
showcase.config.json
video.ts
.claude/skills/kwartz-showcase/
```
Tip. Add out/ and .showcase/ to your .gitignore. Frames, takes and the videos are written there.
5. Describe the video
Open showcase.config.json. Say what to film, how long it should be, and where it will be posted.
showcase.config.json
```
{
  "name": "demo",
  "url": "http://localhost:3000",
  "length": 30,
  "platforms": ["youtube", "instagram-reel"],
  "theme": "clay"
}
```
Good to know
```
Only "url" is required.
A mistake stops the run with a list, for example:
"lenght" is not a setting
```
Tip. Start your product first, so the address answers. To film a folder of static files, use "serve" in place of "url".
6. Explore the product
The kit opens your product, visits its pages, and writes a map with a screenshot of each screen and a selector for each control.
You type
```
bunx showcase explore
```
You see
```
4 screen(s) mapped. Read .showcase/explore/map.md and the screenshots beside it.
the product's own font: Inter; main button colour: #2fa8e0
```
Tip. After this, captions use the product's own font and the highlight uses its button colour.
7. Get the work order
plan prints what the video needs: the number of scenes, the words for each, the shapes, and the safety rules.
You type
```
bunx showcase plan
```
Why words are counted
```
The voice reads about 3 words a second,
so 30 words is roughly ten seconds.
A scene lasts as long as its line.
```
Tip. Write each line first, one idea per scene, in plain words. The clicks come after.
8. Write the scenes
Write video.ts yourself, or let Claude Code do it. The skill makes the agent work like an editor: script first, draft, render, verify.
In Claude Code
```
/kwartz-showcase a 30 second video for new users, show how to find what changed
```
The agent then
```
runs showcase explore and reads the map
runs showcase plan and follows the word budget
writes video.ts
runs showcase make --draft until every scene works
runs showcase make and reports each check
```
Tip. No API key is needed in Claude Code. If the product needs a sign-in, run showcase login yourself: the agent must never be given a password.

9. Draft, then render

A draft has no voice, music or effects. Use it to get every step working. Then render the real thing, and the checks print after it.

You type

bunx showcase make --draft
bunx showcase make

The checks

ok    picture      h264 1920x1080 at 30/1 fps
ok    length       31.4 s (target 30 to 60 s)
ok    loudness     -16.2 LUFS, peak -1.4 dBTP (target -16)
ok    captions     8 cues, longest 89 characters
ok    fonts        all loaded

Tip. If a draft stops, the message names the scene, and out/failed.png shows the page at that moment.

10. Watch and share
The videos are in the out folder: one file per shape, and a named copy for each platform.
In out/
```
demo.landscape.mp4      demo.youtube.mp4
demo.vertical.mp4       demo.instagram-reel.mp4
```
Before sharing
```
not checked: how the voice, music and effects sound.
Listen once before sharing.
```
Tip. To change what is said, edit a line and render again. Only changed lines are voiced again.

Search the docs

A tour of the whole site

Install the tools

All ten steps on one page

1. Install the tools

2. Get the kit

3. Set up the voice

4. Start a video

5. Describe the video

6. Explore the product

7. Get the work order

8. Write the scenes

9. Draft, then render

10. Watch and share