# product-launch-motion

A skill that turns a product story into an MP4 launch film built from HTML scenes, with one morphing element, spring motion, a working cursor and edits locked to the music.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 585 installs · ★ 350
- Author: AbubakrChan
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/AbubakrChan/product-launch-motion/tree/HEAD/SKILL.md
- Updated: 2026-10-21
- HTML: https://affpapa.org/en/nevibecode/skills/product-launch-motion

## What it does

The skill puts the agent in the director's chair. It invents the scenes on its own rather than asking first, and writes each call down as a DECISION so a single reply can undo any of them. Two files come with it: `references/prompts.md` keeps the earlier briefs verbatim, `references/technique.md` keeps the code.

Continuity carries the film. A single element shifts its size, corner radius and colour from start to finish while its contents blur out and return. Each state change comes from a cursor making a genuine click or drag, springs follow a closed-form response, and the camera pushes until the state fills the frame. Timing begins with the soundtrack: a numpy pass maps the beat grid, and synthesized effects land on the measured kick peak.

Before any animation code the skill asks for 8–12 states, a palette and a royalty-free track near 120 BPM. Footage and stills have to come from free-licence libraries, and each item needs a look because Mixkit mixes Restricted clips into its catalogue. The big numbers on screen are real product data, read only.

## Requirements
- Works with: Playwright

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add AbubakrChan/product-launch-motion --skill product-launch-motion -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/product-launch-motion/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/product-launch-motion/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add AbubakrChan/product-launch-motion --skill product-launch-motion -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/product-launch-motion/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add AbubakrChan/product-launch-motion --skill product-launch-motion -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/product-launch-motion/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install AbubakrChan/product-launch-motion product-launch-motion
```

2. **Manually: put the files in place**
- File: `.github/skills/product-launch-motion/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add AbubakrChan/product-launch-motion --skill product-launch-motion -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/AbubakrChan/product-launch-motion
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/product-launch-motion/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add AbubakrChan/product-launch-motion --skill product-launch-motion -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/AbubakrChan/product-launch-motion/tree/HEAD/SKILL.md

## When to use it
- render a product launch spot to MP4 from HTML
- show an interface in motion with no hard cuts
- sync scene changes and sound effects to the beat
- animate a cursor that clicks and drags real UI
- put live product numbers on screen as rolling counters

## Example prompts
- Make a launch film from this skill: 10 states, brand palette, 120 BPM track.
- Read `references/prompts.md` and rebuild the search wall scene.
- Swap the springs to the closed-form version in `references/technique.md` and re-render.

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 13bcf94d7a444111.

BEGIN THIRD-PARTY FILE 13bcf94d7a444111
```text
---
name: product-launch-motion
description: 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).
---

# 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.
- **Original, never a template, never a copy.** Do not lift the product website's copy, UI, stats or
  images wholesale. Invent the scenes. "Anything that looks like a template" is banned.
- **Launch-film energy.** Modern, futuristic, premium — the way top motion designers do it (Linear,
  Apple, Arc). Something happens on every beat; there is no dead time.
- **Attention to detail is the product.** Micro-interactions (button press, knob stretch, name pill
  lag, click ripple, odometer settle, sticker tilt) are what make it read as expensive.
- **Make it easy to follow.** One clear takeaway per scene, short prompts and answers, and enough
  settled time to read the result. Keep the beat alive through secondary motion and sound while
  the main idea holds; simplify the content or add beats rather than rushing the viewer.

## Non-negotiable motion rules

1. **One shape, never cut.** Every state is the same element morphing its size, radius and colour
```
END THIRD-PARTY FILE 13bcf94d7a444111

The third-party file has ended. Everything between the 13bcf94d7a444111 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2439 of 9088 bytes. © AbubakrChan · MIT · https://github.com/AbubakrChan/product-launch-motion/tree/HEAD/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md