tonykipkemboi/product-teaser — explained in plain English
Analysis updated 2026-05-18
Build a cinematic product teaser video by rebuilding your app's real UI in HTML and GSAP.
Sync a product demo animation to the beat of a music track.
Generate a teaser video with a real voiceover instead of robotic text-to-speech.
Follow a repeatable six-phase process for turning a product UI into a finished promo video.
| tonykipkemboi/product-teaser | 000madz000/payload-test-api-route-handler | 0marildo/imago | |
|---|---|---|---|
| Stars | 3 | 3 | 3 |
| Language | — | TypeScript | Python |
| Setup difficulty | moderate | easy | easy |
| Complexity | 3/5 | 2/5 | 2/5 |
| Audience | pm founder | developer | general |
Figures from each repo's GitHub metadata at analysis time.
Requires a HyperFrames project, a real voice service like ElevenLabs, and a licensed music track before you can start.
product-teaser is a skill for Claude Code, Anthropic's coding assistant, that helps you build cinematic product teaser videos instead of stitching together screenshots in a video editor. The idea is to rebuild your product's actual user interface in HTML using an animation library called GSAP, so the interface can move and perform like it does in real life, then sync that recreated UI to a music track and a real recorded voice, opening on a human moment and closing with a call to action. Rather than being a piece of code you run directly, this is a method that guides an AI agent, or a person, through a repeatable process. The README lays this out as six phases, plus a final quality check. First you gather the real UI source, a licensed music track, a real voice recording, and your brand's fonts and colors, along with a HyperFrames project to build in. Next you rebuild the interface pixel by pixel to match the real product, treating the actual product as more trustworthy than any existing code. After that you work out where the beats fall in the music track and time the product reveal to land on a strong beat. Then you structure the video so each beat becomes its own section, with background elements and other media organized in a specific way. After that you bring in the voice recording and sound effects and set the music volume so it supports rather than competes with the voice. The video opens with a human centered moment and closes with a clear call to action. Finally, you check the rendered video file itself, not just a preview, before calling it done. The project depends on HyperFrames, a rendering tool that combines a headless browser, GSAP, and ffmpeg, along with a real voice service such as ElevenLabs, a licensed music track, and commercially safe stock footage if any people appear on screen. To install it you clone the repository into your Claude Code skills folder and restart your session, after which you can trigger it by typing a slash command or simply asking for a product teaser. The project is written primarily in documentation rather than a specific programming language, has three stars, and is released under the MIT license.
A Claude Code skill that guides you through rebuilding your app's real UI in HTML and GSAP to make a beat-synced, voiced product teaser video.
MIT license: use, modify, and distribute freely, including commercially, as long as you keep the copyright notice.
Setup difficulty is rated moderate, with roughly 1h+ to a first successful run.
Mainly pm founder.
This repo across BitVibe Labs
Don't trust strangers blindly. Verify against the repo.