gitwtfhub

wtf is product-teaser?

tonykipkemboi/product-teaser — explained in plain English

Analysis updated 2026-05-18

3Audience · pm founderComplexity · 3/5LicenseSetup · moderate

TL;DR

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.

Mindmap

mindmap
  root((product-teaser))
    What it does
      Rebuilds UI in HTML and GSAP
      Syncs to music beats
      Adds real voice and CTA
    Tech stack
      HyperFrames
      GSAP
      ffmpeg
      ElevenLabs
    Use cases
      Product marketing videos
      Beat-synced demos
      Claude Code workflow
    Audience
      Founders
      Marketers

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Build a cinematic product teaser video by rebuilding your app's real UI in HTML and GSAP.

REASON 2

Sync a product demo animation to the beat of a music track.

REASON 3

Generate a teaser video with a real voiceover instead of robotic text-to-speech.

REASON 4

Follow a repeatable six-phase process for turning a product UI into a finished promo video.

What's in the stack?

HTMLGSAPHyperFramesffmpeg

How it stacks up

tonykipkemboi/product-teaser000madz000/payload-test-api-route-handler0marildo/imago
Stars333
LanguageTypeScriptPython
Setup difficultymoderateeasyeasy
Complexity3/52/52/5
Audiencepm founderdevelopergeneral

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · moderate Time to first run · 1h+

Requires a HyperFrames project, a real voice service like ElevenLabs, and a licensed music track before you can start.

MIT license: use, modify, and distribute freely, including commercially, as long as you keep the copyright notice.

Wtf does this do

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.

Yoink these prompts

Prompt 1
Use the product-teaser skill to build a cinematic teaser for my app's real UI.
Prompt 2
Walk me through the six phases of the product-teaser skill for my product.
Prompt 3
Help me sync my product demo animation to the beat grid of my music track using this skill.
Prompt 4
Explain what HyperFrames setup I need before I can use the product-teaser skill.

Frequently asked questions

wtf is product-teaser?

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.

What license does product-teaser use?

MIT license: use, modify, and distribute freely, including commercially, as long as you keep the copyright notice.

How hard is product-teaser to set up?

Setup difficulty is rated moderate, with roughly 1h+ to a first successful run.

Who is product-teaser for?

Mainly pm founder.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.