Not in the top 1,000 by GitHub stars

AbubakrChan/product-launch-motion

Claude Code skill for Dribbble-level product launch videos from code. One shape that never cuts, springs, a cursor that drives every change, beat-synced SFX, 60 fps motion blur. v2: use with Claude Opus 5.5.

Design Marketing

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

`SKILL.md`

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Network or broad shell

First observation → edbfb105382f

No earlier version was observed for comparison.

Compare on GitHub

`legacy/SKILL.md`

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Local scripts

First observation → edbfb105382f

No earlier version was observed for comparison.

Compare on GitHub

View on GitHub Add to my skills

Verified commit edbfb105382f21507bad895d8b5f6e0faa67487c

425GitHub stars

75stars in 7 days

2skills in this repository

43commits in 30 days

Heat

7.9

Star growth, last 7 daysNot available
Star growth, last 24 hoursNot available
Rank movement, last 7 daysNot available
Commits, last 30 daysNot available
Accounts asking about it through MCP, last 7 daysNot available
Hot votes this weekNot available

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

30-day change not yet available: not enough history.

Individual skills in this repository

product-launch-motion /
product-launch-motion-v1 legacy

How it works

Choose a skill

product-launch-motion

When your agent uses it

Use when asked to make a launch video, product film, motion design piece, UI motion reel, Dribbble-style UI animation or animated brand/logo sting — anything rendered to MP4 from HTML with a cursor, morphing UI, springs, beat-synced music and SFX. Carries Chan's full creative direction (one shape never cut, blur content swaps, springs, real data, logo slams, no creative limits) and the proven build/render pipeline (pure seek(t), closed-form springs, Playwright subframes, ffmpeg tmix, numpy beat grid).

What it loads into context

Frontmatter

125 tokens

Always available to the agent

SKILL.md

2,115 tokens

When the skill is activated

Reference documents

5,664 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

The stance: you are the director
Non-negotiable motion rules
Look
Content
Process
Gotchas that cost hours
Output

Files

.github/FUNDING.ymlasset20 bytes
.gitignoreasset50 bytes
LICENSEasset1,069 bytes
NOTICEasset3,578 bytes
README.mddoc8,350 bytes
SKILL.mdcore9,088 bytes
examples/film-preview.webpasset18,350,620 bytes
examples/hoopoe-preview.webpasset2,175,514 bytes
examples/one-shape-loop.webpasset3,325,266 bytes
references/prompts.mddoc6,923 bytes
references/technique.mddoc5,625 bytes

Read SKILL.md


# Motion design launch videos

This is how Chan wants launch films made. It is the distilled direction from every prompt and review
that produced "The Spark" (v1) and the real-data cut (v2) for Cheerful.
The prompts themselves, verbatim and in order, are in `references/prompts.md` — read them before
starting; they are the spec. The code patterns are in `references/technique.md`.
Prior films demonstrate the technique; compose this product's own story from its customer's
problem, current brand assets and actual behavior. Preserve the one-shape continuity throughout.

## The stance: you are the director

- **No constraints on creativity.** Chan says "I want you to be the director", "full creative control",
  "think out of the box", "no limits on shapes or buttons". Do not ask permission for creative choices;
  make them, log them as DECISIONs, and list them at the end so he can overturn any in one reply.

View the complete source on GitHub

product-launch-motion-v1

When your agent uses it

Legacy v1 (voiceover-led, GSAP + HyperFrames). Use when making, directing or rescuing a product launch video, promo, teaser, demo reel, sizzle, feature-announcement film or animated product explainer built from code — and when an existing one looks basic, reads as a slideshow, has reveals that miss the voiceover, an invisible cursor, an inaudible sound effect, a clipped or too-quiet mix, or every video coming out looking the same. Covers SaaS, apps, hardware, e-commerce, dev tools, services. Keywords include motion design, storyboard, voiceover sync, kinetic typography, GSAP, HyperFrames, Remotion, film grain, LUFS, ffmpeg.

What it loads into context

Frontmatter

158 tokens

Always available to the agent

SKILL.md

4,380 tokens

When the skill is activated

Reference documents

59,787 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

When to use this
The ten laws
Red flags
The pipeline
Reference map
Scripts
Templates
Definition of done
Worked example

Scripts executed separately

scripts/assemble.mjs
scripts/level-sfx.mjs
scripts/master.sh
scripts/transitions.mjs
scripts/verify-cue.sh
scripts/wire-audio.mjs
scripts/wire-grade.mjs
scripts/word-timings.mjs

Files

../SKILL.mddoc9,088 bytes
CASE-STUDY.mddoc13,071 bytes
SKILL.mdcore17,779 bytes
SKILL.mdcore17,779 bytes
SKILL.mdcore17,779 bytes
SKILL.mdcore17,779 bytes
SKILL.mdcore17,779 bytes
SKILL.mdcore17,779 bytes
SKILL.mdcore17,779 bytes
SKILL.mdcore17,779 bytes
SKILL.mdcore17,779 bytes
assets/BRIEF.mddoc3,065 bytes
assets/STORYBOARD.mddoc2,805 bytes
assets/cues.example.jsonasset3,266 bytes
assets/film.example.jsonasset3,518 bytes
assets/frame-skeleton.htmlasset17,731 bytes
evals/BASELINE.mddoc7,721 bytes
evals/evals.jsonasset5,410 bytes
film-preview.webpasset999,152 bytes
references/01-renderer-contract.mddoc15,108 bytes
references/02-story-and-truth.mddoc21,191 bytes
references/03-word-locked-sync.mddoc9,461 bytes
references/04-motion-grammar.mddoc20,027 bytes
references/05-camera-3d-cursor.mddoc12,724 bytes
references/06-look-and-grade.mddoc18,729 bytes
references/07-sound-and-master.mddoc10,514 bytes
references/08-qa-and-direction.mddoc11,984 bytes
references/09-shot-catalog.mddoc39,820 bytes
references/10-traps.mddoc14,957 bytes
references/11-creative-direction.mddoc17,826 bytes
references/12-deliverables.mddoc7,285 bytes
scripts/assemble.mjsruns9,484 bytes
scripts/level-sfx.mjsruns8,673 bytes
scripts/master.shruns3,923 bytes
scripts/transitions.mjsruns7,369 bytes
scripts/verify-cue.shruns3,523 bytes
scripts/wire-audio.mjsruns5,434 bytes
scripts/wire-grade.mjsruns9,965 bytes
scripts/word-timings.mjsruns4,698 bytes
still-1.jpgasset17,336 bytes

Read SKILL.md


# Product Launch Motion — v1 (legacy)

> This is the original v1 skill, kept for voiceover-led films. The current skill is
> [`../SKILL.md`](../SKILL.md): music-first, one shape never cut, springs, no GSAP or HyperFrames.

A production discipline for making launch films that look like a motion designer made
them — not a slideshow with a voiceover on top.

The output is a rendered MP4. The medium is HTML, CSS and GSAP, rendered frame-by-frame
by a deterministic seek-based renderer (HyperFrames by default). Everything here is
transferable to any renderer that can seek a timeline; the laws are renderer-neutral,
the plumbing examples are HyperFrames.

**This skill exists because green tooling is not the same as good film.** A composition

View the complete source on GitHub

Skills included

product-launch-motion
product-launch-motion-v1

Repository facts

License: MIT
Created: Jul 27, 2026
Last pushed: Oct 21, 2026
Forks: 57
Open issues: 0
Project activity: Active

Before you install

Network or broad shell

Automated signals, not a guarantee

Checked Nov 5, 2026

Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.

Show 9 notes

examples/film-preview.webp:1 Analysis incomplete: Blob exceeds size or total-read limit; file skipped
legacy/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
legacy/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
legacy/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
legacy/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
legacy/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
legacy/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
legacy/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
legacy/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed

No broad tool permissions
No dangerous shell commands
37 network referencesin 5 files: README.md:11 NOTICE:10 legacy/assets/frame-skeleton.html:253 and 2 more
No hidden or obfuscated text
No instruction overrides
8 executable scriptsin 8 files: legacy/scripts/assemble.mjs:1 legacy/scripts/level-sfx.mjs:1 legacy/scripts/master.sh:1 and 5 more
No access to secrets
No requests to vote in Hot

Show all 45 signals by file

`NOTICE`

Network accessline 10

The v2 sample films (examples/ and the v2.0.0 release) ------------------------------------------------------ The launch film and the one-shape loop were made for Cheerful (https://www.cheerful.ai) and

Network accessline 11

------------------------------------------------------ The launch film and the one-shape loop were made for Cheerful (https://www.cheerful.ai) and are theirs, published here with permission to show what the skill produces. The launch film

Network accessline 12

The launch film and the one-shape loop were made for Cheerful (https://www.cheerful.ai) and

Network accessline 26

----------------------------------------------- The film referenced throughout this repository was made for Cheerful (https://www.cheerful.ai) and is theirs. legacy/still-1.jpg is one title card from it,

Network accessline 27

The film referenced throughout this repository was made for Cheerful (https://www.cheerful.ai) and is theirs. legacy/still-1.jpg is one title card from it, reproduced with permission to illustrate a point about type and stillness.

Network accessline 28

(https://www.cheerful.ai) and is theirs. legacy/still-1.jpg is one title card from it,

Network accessline 43

- GSAP — GreenSock. Free for the great majority of uses under the GSAP Standard "No     Charge" licence (https://gsap.com/licensing/), but read it before you ship: the terms

Network accessline 44

Charge" licence (https://gsap.com/licensing/), but read it before you ship: the terms

Network accessline 46

tell you to vendor gsap.min.js into your own project; that copy is GreenSock's, under     GreenSock's terms, not this repository's.   - HyperFrames — https://github.com/heygen-com/hyperframes, the default renderer.

Network accessline 47

GreenSock's terms, not this repository's.   - HyperFrames — https://github.com/heygen-com/hyperframes, the default renderer.   - FFmpeg — required at runtime by four of the scripts; check its licensing if you

Network accessline 48

- HyperFrames — https://github.com/heygen-com/hyperframes, the default renderer.

`README.md`

Network accessline 11

[![The launch film: a typed brief, a search wall of creators, a personal email, an inbox on autopilot, a 432,014,696 views odometer, customer logos on the beat and the wordmark](examples/film-preview.webp)](https://github.com/AbubakrChan/pr

Network accessline 13

**No Claude Code? Get the film made for you: a polished launch video in 30 minutes, from $20 → [launchvideos.app](https://launchvideos.app)**

Network accessline 17

> Make a launch video for https://your-website.com

Network accessline 33

> 🔊 **Download it and turn the sound on.** The preview above is silent. The real film is cut to the beat > of its music, and every click, whoosh and number roll lands on a drum hit. > **[Download the film (1080p, 60 fps, with sound)](https:

Network accessline 34

> of its music, and every click, whoosh and number roll lands on a drum hit. > **[Download the film (1080p, 60 fps, with sound)](https://github.com/AbubakrChan/product-launch-motion/releases/download/v2.0.0/launch-film-1080p60.mp4)** > to w

Network accessline 35

> **[Download the film (1080p, 60 fps, with sound)](https://github.com/AbubakrChan/product-launch-motion/releases/download/v2.0.0/launch-film-1080p60.mp4)**

Network accessline 38

30 s, made for [cheerful.ai](https://www.cheerful.ai). No After Effects, no stock templates, no AI video model: every frame is HTML computed from time. Bonus: the same film with a [WebGL glass pass](https://github.com/AbubakrChan/product-la

Network accessline 39

no AI video model: every frame is HTML computed from time. Bonus: the same film with a [WebGL glass pass](https://github.com/AbubakrChan/product-launch-motion/releases/download/v2.0.0/launch-film-glass-1080p60.mp4) (refractive 3D shapes flo

Network accessline 40

[WebGL glass pass](https://github.com/AbubakrChan/product-launch-motion/releases/download/v2.0.0/launch-film-glass-1080p60.mp4)

Network accessline 43

<table><tr> <td width="45%"><a href="https://github.com/AbubakrChan/product-launch-motion/releases/download/v2.0.0/one-shape-loop-1440.mp4"><img src="examples/one-shape-loop.webp" alt="One shape, never cut: a button becomes a loader, a chec

Network accessline 44

<td width="45%"><a href="https://github.com/AbubakrChan/product-launch-motion/releases/download/v2.0.0/one-shape-loop-1440.mp4"><img src="examples/one-shape-loop.webp" alt="One shape, never cut: a button becomes a loader, a check, a creator

Network accessline 47

**[▶ One shape, never cut](https://github.com/AbubakrChan/product-launch-motion/releases/download/v2.0.0/one-shape-loop-1440.mp4)**

Network accessline 57

[![Hoopoe Club launch film: several readers' cursors like, repost and reply to a post, then vote in a poll](examples/hoopoe-preview.webp)](https://github.com/AbubakrChan/product-launch-motion/releases/download/v2.0.0/hoopoe-club-1080p60.mp4

Network accessline 59

**[▶ Hoopoe Club](https://github.com/AbubakrChan/product-launch-motion/releases/download/v2.0.0/hoopoe-club-1080p60.mp4)** · 43 s, Arabic, with sound

Network accessline 97

| Need | For | |---|---| | [Claude Code](https://claude.com/claude-code) with **Opus 5.5** | Directing and building the film. Smaller models follow the rules but miss the detail |

Network accessline 98

|---|---| | [Claude Code](https://claude.com/claude-code) with **Opus 5.5** | Directing and building the film. Smaller models follow the rules but miss the detail | | Node ≥ 20 + Playwright | Rendering |

Network accessline 99

| [Claude Code](https://claude.com/claude-code) with **Opus 5.5** | Directing and building the film. Smaller models follow the rules but miss the detail |

Network accessline 147

Muhammad Abubakr, who builds [Cheerful](https://www.cheerful.ai). Made a film with this skill?

Network accessline 150

[![Follow on X](https://img.shields.io/badge/@Muhamma77800831-000000?style=for-the-badge&logo=x&logoColor=white)](https://x.com/Muhamma77800831)

Network accessline 151

[![LinkedIn](https://img.shields.io/badge/Muhammad_Abubakar-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/muhammad-abubakar-05173b20a/)

`legacy/CASE-STUDY.md`

Network accessline 3

This skill was extracted from one film: the launch video for [Cheerful](https://www.cheerful.ai). It is worth reading the revision history rather than

Network accessline 4

[Cheerful](https://www.cheerful.ai). It is worth reading the revision history rather than

`legacy/assets/frame-skeleton.html`

Network accessline 253

<div class="f01-ripple" id="f01-ripple-1"></div>         <div id="f01-cursor">           <svg viewBox="0 0 24 30" width="44" height="54" xmlns="http://www.w3.org/2000/svg">

Network accessline 254

<div id="f01-cursor">           <svg viewBox="0 0 24 30" width="44" height="54" xmlns="http://www.w3.org/2000/svg">             <path

Network accessline 255

<svg viewBox="0 0 24 30" width="44" height="54" xmlns="http://www.w3.org/2000/svg">

`legacy/scripts/assemble.mjs`

Executable scriptline 1
```
#!/usr/bin/env node
```

`legacy/scripts/level-sfx.mjs`

Executable scriptline 1
```
#!/usr/bin/env node
```

`legacy/scripts/master.sh`

Executable scriptline 1
```
#!/usr/bin/env bash
```

`legacy/scripts/transitions.mjs`

Executable scriptline 1
```
#!/usr/bin/env node
```

`legacy/scripts/verify-cue.sh`

Executable scriptline 1
```
#!/usr/bin/env bash
```

`legacy/scripts/wire-audio.mjs`

Executable scriptline 1
```
#!/usr/bin/env node
```

`legacy/scripts/wire-grade.mjs`

Executable scriptline 1
```
#!/usr/bin/env node
```

`legacy/scripts/word-timings.mjs`

Executable scriptline 1
```
#!/usr/bin/env node
```

`references/prompts.md`

Network accessline 21

> use the theme to create the video of Cheerful (https://www.cheerful.ai/) --- I want you to be the

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

Some files could not be read; the facts below still hold.

Signal confidence: 31 facts

Network access in prose of documentationREADME.md:11Low confidence
Network access in prose of documentationREADME.md:13Low confidence
Network access in prose of documentationREADME.md:17Low confidence
Network access in prose of documentationREADME.md:33Low confidence
Network access in prose of documentationREADME.md:34Low confidence
Network access in prose of documentationREADME.md:35Low confidence
Network access in prose of documentationREADME.md:38Low confidence
Network access in prose of documentationREADME.md:39Low confidence
Network access in prose of documentationREADME.md:40Low confidence
Network access in prose of documentationREADME.md:43Low confidence
Network access in prose of documentationREADME.md:44Low confidence
Network access in prose of documentationREADME.md:47Low confidence
Network access in prose of documentationREADME.md:57Low confidence
Network access in prose of documentationREADME.md:59Low confidence
Network access in prose of documentationREADME.md:97Low confidence
Network access in prose of documentationREADME.md:98Low confidence
Network access in prose of documentationREADME.md:99Low confidence
Network access in prose of documentationREADME.md:147Low confidence
Network access in prose of documentationREADME.md:150Low confidence
Network access in prose of documentationREADME.md:151Low confidence
Network access in prose of documentationlegacy/CASE-STUDY.md:3Low confidence
Network access in prose of documentationlegacy/CASE-STUDY.md:4Low confidence
Executable script in code of a file that runslegacy/scripts/assemble.mjs:1High confidence
Executable script in code of a file that runslegacy/scripts/level-sfx.mjs:1High confidence
Executable script in code of a file that runslegacy/scripts/master.sh:1High confidence
Executable script in code of a file that runslegacy/scripts/transitions.mjs:1High confidence
Executable script in code of a file that runslegacy/scripts/verify-cue.sh:1High confidence
Executable script in code of a file that runslegacy/scripts/wire-audio.mjs:1High confidence
Executable script in code of a file that runslegacy/scripts/wire-grade.mjs:1High confidence
Executable script in code of a file that runslegacy/scripts/word-timings.mjs:1High confidence
Network access in prose of documentationreferences/prompts.md:21Low confidence

Works with

Agent compatibility, from the files in this repository
Agent	Status	Evidence	Install to
Claude Code	Compatible	Standard SKILL.md SKILL.md	`.claude/skills/<skill-name>/`
Codex	Compatible	Standard SKILL.md SKILL.md	`.agents/skills/<skill-name>/`
Cursor	Compatible	Standard SKILL.md SKILL.md	`.cursor/skills/<skill-name>/`
Gemini CLI	Compatible	Standard SKILL.md SKILL.md	`.gemini/skills/<skill-name>/`
GitHub Copilot	Compatible	Standard SKILL.md SKILL.md	`.github/skills/<skill-name>/`
OpenCode	Compatible	Standard SKILL.md SKILL.md	`.opencode/skills/<skill-name>/`

Native The repository ships a manifest, folder or frontmatter field for this agent.
Compatible A standard SKILL.md that this agent can read.
Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

AbubakrChan/product-launch-motion

History

SKILL.md

legacy/SKILL.md

Share this page

Heat

Stars over time

Individual skills in this repository

How it works

product-launch-motion

Frontmatter

SKILL.md

Reference documents

The playbook

Files

product-launch-motion-v1

Frontmatter

SKILL.md

Reference documents

The playbook

Scripts executed separately

Files

Skills included

Repository facts

Before you install

NOTICE

README.md

legacy/CASE-STUDY.md

legacy/assets/frame-skeleton.html

legacy/scripts/assemble.mjs

legacy/scripts/level-sfx.mjs

legacy/scripts/master.sh

legacy/scripts/transitions.mjs

legacy/scripts/verify-cue.sh

legacy/scripts/wire-audio.mjs

legacy/scripts/wire-grade.mjs

legacy/scripts/word-timings.mjs

references/prompts.md

How the signals fit together

Works with

You might also use

superdesigndev/superdesign-skill

kklimuk/docx-cli

Mort1d/motion-graphics-skills

coreyhaines31/marketingskills

HUANGCHIHHUNGLeo/claude-real-video

zhuyansen/new-term-radar

`SKILL.md`

`legacy/SKILL.md`

`NOTICE`

`README.md`

`legacy/CASE-STUDY.md`

`legacy/assets/frame-skeleton.html`

`legacy/scripts/assemble.mjs`

`legacy/scripts/level-sfx.mjs`

`legacy/scripts/master.sh`

`legacy/scripts/transitions.mjs`

`legacy/scripts/verify-cue.sh`

`legacy/scripts/wire-audio.mjs`

`legacy/scripts/wire-grade.mjs`

`legacy/scripts/word-timings.mjs`

`references/prompts.md`