Everything, in reading order
Read these in order the first time. After that, search or jump to what you need.
Your first video
Ten steps, each with the command to type and what you should see.
User guide
The whole journey on one page, and how to use the skills with an AI agent.
Troubleshooting
What to do when a render stops, a check fails, or something looks or sounds wrong.
Start
- User guide: make a video of your product21 minThis guide takes you from nothing installed to a finished, narrated video of your own product, one step at a time. It has two parts:
- Getting started2 minFrom an empty folder to a first video of your own app.
- Writing a video8 minA video is one TypeScript file whose default export is defineVideo({ ... }).
- A video from a config13 minThere are two ways to make a video with the kit.
Feature guides
- 1. Start from a config1 minA small file, showcase.config.json, says what the video is: the address of the product, the length, where it will be posted. A second file, video.ts, says...
- 2. Set the length1 minYou say how long the video should be. The kit turns that into a number of scenes and a word budget, because a video's length comes from its narration: the...
- 3. Platforms and shapes2 minName the places the video will be posted. The kit renders the right shape for each, from one script, and gives every platform its own named file.
- 4. Your own script1 minYou write the narration in a plain text file. The kit reads it out word for word. Nothing rewrites it.
- 5. Fonts, colours and captions2 minThe video's cards, captions and labels use one set of colours and fonts. With nothing set, the kit uses its own. Set style to match your brand.
- 6. The rounded border3 minEvery video is set a little smaller on a soft backdrop, with rounded corners and a shadow under it. It makes a screen recording look presented, not raw....
- 7. Motion scenes3 minA scene that is a full-screen graphic, not the product: an opening that states the problem, a "how it works" card, an ending. It is drawn frame by frame,...
- 8. Sound effects2 minThree small sounds: a click, a highlight (when a spotlight appears) and a transition (when the screen changes). The kit picks a set for your project from...
- 9. A hosted product2 minFilming a live product, not one on your own machine. A live product may hold real data, so the kit adds three protections: names that must never show,...
- 10. Explore the product2 minBefore writing scenes you need to know what screens exist and how to point at each button. showcase explore opens the product, visits its pages, and...
- 11. With Claude Code2 minThe kit has no AI inside it. It ships a skill: a brief that tells an AI agent how to work as the video's editor. With Claude Code, you describe the video...
- 12. Node and npm2 minThe kit is written in TypeScript. Under Bun it runs as it is. For Node, and for an npm package, it is compiled to plain JavaScript in dist/. One launcher,...
- 13. Clip scenes2 minA scene that plays a finished video file: a recording from a phone, a piece of an older demo, a logo animation, some footage. It sits on the timeline like...
- 14. showcase auto (beta)4 minOne command that goes from a config to a finished video with nobody writing scenes. The kit explores the product, asks Claude through the API to write the...
- 15. Themes3 minOne word that changes the whole look of a video: cards, captions, labels, fonts, colours, backdrop, movement and sound. There are twelve, plus the kit's...
- 16. Your own theme6 minA theme for your brand: your colours, your fonts, your corners, and if you want, your own way of drawing cards and captions. It is one small file in your...
Make it good
- Themes7 minA theme is one word that sets the whole look of a video: how cards, labels and captions are drawn, the fonts, the colours, the backdrop behind the...
- Fonts for video8 minHow the kit chooses type, which Google Fonts work for video and why, and the eleven ready pairings. To just pick one, jump to The pairings.
- Craft guide4 minWhat a senior video editor works on, in the order they usually handle it. The numbers are common working ranges, not fixed rules. Each section ends with...
- Troubleshooting4 minStart with showcase doctor. It shows what is installed and what is missing.
How it is built
- How it works5 minThe pipeline, told in order. For the modules, data structures and diagrams see Architecture; for the tools and versions see Tech stack.
- Architecture15 minHow the kit is put together: the processes involved, the modules, the data that flows between them, and where it can be extended. For the pipeline told as...
- Tech stack8 minEvery technology the kit uses, what it does here, and why it was chosen. Versions are the ones the kit was built and tested with in October 2026, on...
- Testing9 minThe kit has 1121 unit tests, run with Vitest. They take about ten seconds and need no browser, no FFmpeg, no voice model and no network.
- Before you commit, push or release5 minHow to know the kit really works, in rising order of effort. Automated tests prove the logic. Only real use proves the product. Do both.