TikTok Launch Video

Produce a TikTok-native launch video using HyperFrames — programmatic HTML/CSS video, deterministic, agent-friendly.

This skill is opinionated: it forces the TikTok grammar (9:16, hook < 1s, burned-in captions, fast cuts, native text overlays) instead of porting a 16:9 landscape video to vertical.

Usage

/tiktok-launch-video https://example.com/launch — pulls context from a launch page /tiktok-launch-video "we're shipping AI brand guardrails for marketers" — short brief /tiktok-launch-video — interview the user

Prerequisites

Run once on this machine:

node --version            # ≥ 22
ffmpeg -version | head -1 # ≥ 6

If either fails, ask the user to install Node 22+ and FFmpeg before continuing.

Steps

1. Gather product context

Try sources in this order — stop at the first one that gives you enough to write the script. Don't redo work the user has already done.

1a. Local file — read .agents/product-marketing-context.md or .claude/product-marketing-context.md if present.

1b. Cogny MCP context tree — if the cogny MCP server is connected (check via tools — mcp__cogny__get_context_tree_overview or any mcp__cogny__* tool), query it:

mcp__cogny__get_context_tree_overview          # see what's documented
mcp__cogny__search_context query="<product>"   # pull customer / pricing / positioning nodes
mcp__cogny__read_context_node node_id="…"      # drill into the most relevant nodes

The context tree usually contains things public scraping can't: real customer names, ICP, pricing tiers, current quarter goals, what's been launched recently, what's on the roadmap. Check it before falling back to web scraping.

1c. Public web — if a URL was passed and 1a/1b didn't give you enough, WebFetch the page and extract product name, value prop, core benefit, target user, one concrete proof point.

1d. User brief — if a short brief was passed, use it directly.

After 1a–1d, ask the user only for what's still missing from the TikTok hook checklist below.

TikTok hook checklist (what you actually need before you can write the script):

1. Who is the target viewer in 5 words? (e.g. "B2B marketers running paid ads")
2. What pattern interrupt opens the video? (POV, reveal, contrarian claim, demo flash, "wait for it")
3. What's the one claim or moment that makes someone stop scrolling?
4. What's the proof? (a number, a screenshot, a customer name, a before/after)
5. What's the CTA? (link in bio, comment a keyword, search the product, follow)

Don't proceed without all five. If you're guessing, ask.

1.5 Capture brand identity

Make this look like the user's brand, not a stock template. Ask for one of:

• A site URL (we'll extract colors / fonts / voice from the page)
• A repo path containing tailwind.config.* or globals.css with CSS variables
• An existing brand-kit.json (.agents/brand-kit.json / .claude/brand-kit.json / project root)
• Manual input: 3 hex colors (background, text, primary) + a font family + a one-sentence voice description

Produce a brand-kit.json with at minimum: colors.background, colors.foreground, colors.primary, colors.accent, type.family, voice.register. Save it to the HyperFrames project root.

For full schema, extraction patterns, and voice → composition mapping see references/brand-identity.md.

The composition template reads these as CSS variables (--bg, --fg, --primary, --accent, --font-display) — so once the kit is wired, the same template renders on-brand for any user.

2. Pick the idiomatic format

Don't invent a format. Pick one of these — all are proven on TikTok and map cleanly to HyperFrames:

Pick one. Confirm with the user before writing.

3. Write the script (TikTok grammar)

Write a beat sheet, not prose. Each beat is one card or moment. Constraints:

• Total length: 9–22 seconds. Default to 15s unless the user explicitly wants longer.
• Beat 1 (0.0–1.0s): Hook. Big text. No logo. No intro. The viewer must not swipe.
• Beats 2–N: ~1.0–2.5s each. Every beat earns its time or gets cut.
• Final beat (last 1.5–2s): CTA. Concrete verb. Not "learn more" — "Search [name] on TikTok", "Comment WAITLIST", "Tap the link".
• Captions: Every spoken word is burned in as text. Max 6 words per caption card.
• Voice / register: First person, conversational, no marketing voice. Read it out loud — if it sounds like a press release, rewrite.

Hand the beat sheet back to the user and wait for confirmation before composing. One round of revisions is normal.

4. Scaffold the HyperFrames project

Use the CLI. Don't try to handcraft package.json.

# In the user's working directory, or a videos/ subdirectory if they prefer
npx -y hyperframes@latest init <product-slug>-tiktok --yes
cd <product-slug>-tiktok

This creates index.html, meta.json, hyperframes.json, plus CLAUDE.md / AGENTS.md with framework rules. Read CLAUDE.md once — it documents the data-* attribute conventions and the window.__timelines registration this skill depends on.

5. Compose the video (9:16, kinetic)

Edit index.html to be a 1080×1920 composition. The pattern below is the minimum viable TikTok-native composition — adapt the copy, keep the structure.

Key rules (these come from HyperFrames, do not skip):

• Every timed element needs class="clip" plus data-start, data-duration, data-track-index.
• The composition root has data-composition-id, data-width, data-height, data-duration.
• Animations go on a paused GSAP timeline registered as window.__timelines["<composition-id>"].
• No Date.now(), no Math.random(), no fetch() — renders must be deterministic.

Reference composition: see references/composition-template.html.

A few TikTok-specific styling rules to follow:

• Type: 110–160px for hooks, 70–90px for body captions. Bold, tight letter-spacing.
• Safe area: keep the bottom 320px and top 220px clear — that's where TikTok's UI sits.
• Color: high contrast. Black background + white text + one accent (cyan, lime, or magenta). Avoid pastels.
• Motion: every card enters with a 0.25–0.4s y or scale tween. Cuts are hard, not crossfades.
• No stock footage feel: if the script calls for "demo", capture the actual product UI (hyperframes capture <url>) and crop into the 9:16 frame instead of using a generic stock clip.

6. Lint

npx hyperframes lint

Fix every error. Warnings are usually safe but read them.

7. Render

npx hyperframes render --output launch.mp4

A 15s composition typically renders in 30–90 seconds depending on the machine. Output is H.264 MP4, 1080×1920, 30fps.

8. Sanity-check before declaring done

Open the file, scrub through it once. Then check:

• Hook is fully visible by 0.8s?
• Captions readable at the size they'll be viewed (phone, no sound)?
• Nothing important in the bottom 320px?
• CTA is on screen for ≥ 1.5s at the end?
• Total length between 9 and 22 seconds?

If any check fails, edit and re-render. Do not ship a video that fails any of the above.

9. (Optional) Hand off to TikTok Ads

If the user wants to run this as a paid in-fe