---
title: "Kinetic Type Short — launch hook words-as-motion over atmospheric b-roll"
tier: hero
format: short-form-video
theme: launch | typography | brand | social | marketing
persona: brand marketer, launch team, social media manager, creative director, startup founder
duration: "1 hook line → 15–30s vertical type reel in ~5–10 min"
budget_usd: "$0.50–$2.20 (1–3 atmospheric b-roll keyframes + hyperframes kinetic type + licensed music)"
caps: ["create_media", "cosmos-3-image", "flux-dev", "gpt-image", "pixverse-t2v", "ltx-q-t2v", "hyperframes-render", "sonilo-t2m", "music", "ffmpeg-mux", "ffmpeg-loop"]
skills: ["hyperframes-overlays", "short-form-video", "marketing"]
showcases: ["/chapters/kinetic-type-short-example.html"]
status: "live (2026-08-03) — Wave 1 showcase rendered E2E via MCP. See /chapters/kinetic-type-short-example.html"
reliability: 3.9 # first E2E showcase; curated (≥4.0) deferred until a second successful run
---

# Kinetic Type Short — launch hook words-as-motion

Point this at a launch hook — *"Ship faster. Break nothing."* or *"The coat that finishes every outfit."* — and Livepeer Agent builds a **kinetic typography reel**: bold words animate in, scale, slide, and collide over atmospheric AI b-roll. The background carries mood; the HTML layer carries every letter. AI video cannot render legible type — Runway, Pika, and Sora all melt glyphs. This playbook never asks them to.

This is the **launch-day social cut** — a 15–30s vertical hook for Instagram Stories, TikTok, LinkedIn, or a landing-page hero loop.

## What you'll get

- **1–3 atmospheric b-roll keyframes** — abstract gradients, city dusk, product silhouette, texture — deliberately text-free
- **A kinetic type layer** — headline words animating via CSS `@keyframes`: scale-in, slide, stagger, impact frames
- **A licensed music bed** — sonilo-t2m for commercial-safe scoring, or minimax music for quick iteration
- **A 15–30s vertical 9:16 MP4** — loopable, platform-ready, every character pixel-perfect

## Fill in your BRIEF

```yaml
headline:              # the hook — 3–8 words max, e.g. "Ship faster. Break nothing."
subline:               # OPTIONAL second beat — e.g. "Available now" / "Join the waitlist"
type_style:            # bold-impact | condensed-swiss | hand-lettered | neon-glow
                       # drives the CSS treatment in the overlay
broll_mood:            # atmospheric bed — e.g. "dark navy gradient pulse",
                       # "city skyline at blue hour", "abstract light leaks"
                       # Keep TEXT-FREE — the type layer owns all letters.
palette_hex:           # 2–4 hex colors for type + accents, e.g. "#FF4D4D #0A0A0F #FFFFFF"
aspect_ratio: 9:16
duration_seconds: 20   # 15–30
music_brief:           # e.g. "driving launch energy, ~120 BPM, instrumental, no vocals"
                       # sonilo-t2m for commercial licensing; music cap for quick drafts
cta_label:             # OPTIONAL end card — e.g. "Learn more →" / "Pre-order now"
launch_slug:           # kebab-case, e.g. ship-faster-launch
brand_kit_id:          # OPTIONAL — ckit_… for sticky palette + voice keywords
```

## CONVENTIONS

1. **HITL gates:** at every STOP, ask exactly one specific question with concrete options. Never proceed without an answer.
2. **Cost ceiling:** total < $10. After each stage, print running cost.
3. **Output paths:** write HTML to `public/launches/{launch_slug}-kinetic-type.html`. Print full paths at end.
4. **Brand stickiness:** create or activate brand kit in Stage 1 when palette or brand_kit_id is supplied.
5. **MCP envelope gaps:** ffmpeg tools with array params → direct SDK POST when envelope drops them.
6. **On capability failure:** retry once after 5s; on second failure, ask retry / skip / abort.
7. **Polling:** poll every 8–15s until done or failed.
8. **Bearer token:** cowork injects it; SDK curl reads `~/.daydream/credentials`.

## The cap chain (PROVEN recipe)

Two atmospheric paths — pick one before the type layer:

```
headline + type_style + broll_mood

Path A — stills (default, cheapest):
  → create_media action:"generate"            # 1–3 atmospheric b-roll stills, NO text
       cosmos-3-image | flux-dev | gpt-image
  → Ken-Burns or slow i2v on stills           # gentle motion bed

Path B — text-to-video atmosphere (showcase path):
  → create_media model_override:"pixverse-t2v" | "ltx-q-t2v"
       abstract cinematic b-roll, NO text, NO logos

Then (always):
  → hyperframes-render                        # THE TYPE LAYER — timed HTML kinetic type
  → sonilo-t2m | music                        # instrumental bed
  → ffmpeg-mux audio_fill:"loop"
  → ffmpeg-loop                               # OPTIONAL — seamless Story loop
```

**The rule:** if a letter appears on screen, it came from HTML — never from a generative model.

## STAGE 0 — Confirm the brief (~0 min, $0)

Restate headline, type_style, duration, and music direction. One line: "20s 9:16 kinetic type reel — '{headline}', {type_style}, ~$0.50–$2.20, ~5–10 min."

**STOP:** "Brief looks right? (approve / edit [field] [new value])"

## STAGE 1 — Lock type + palette (~30s, ~$0.05)

Activate brand kit if supplied; otherwise confirm palette_hex swatches and type_style direction. Show a text mock of the headline in the chosen style (no render yet — $0).

**STOP:** "Type style + palette OK? (approve / refine [direction — e.g. bolder, warmer palette])"

## STAGE 2 — Atmospheric b-roll (~1–2 min, ~$0.12–$0.25)

Generate 1–3 mood keyframes matching `broll_mood`. Keep subjects abstract and text-free — gradients, light, silhouette, texture. Optionally Ken-Burns them into a slow-motion bed (deterministic, zero fal video risk).

Show the b-roll contact sheet.

**STOP:** "B-roll mood OK? (approve / reshoot [direction])"

## STAGE 3 — Preview type animation map (~30s, $0)

Before the overlay render, show the **beat map**: which words appear when, animation type per beat (scale-in at 0s, slide at 3s, impact at 6s…), subline timing, CTA hold. Fix typos now — re-rendering HTML is cheap.

**STOP:** "Type beat map + copy correct? (approve / fix [word or timing])"

## STAGE 4 — Render kinetic type overlay (~1–2 min, ~$0.20–$0.45)

Composite the kinetic type HTML over the b-roll bed for `duration_seconds`. CSS `@keyframes` drive every animation — staggered word entrances, scale impacts, subline fade, optional CTA card.

Show a preview frame at the headline's peak impact moment.

**STOP:** "Kinetic type reel OK? (approve / tweak [beat — e.g. slower stagger, bigger impact])"

## STAGE 5 — Music bed (~1 min, ~$0.15–$0.50)

Generate the music bed. Prefer sonilo-t2m when the deliverable needs commercial licensing; minimax music for quick internal drafts. Mux under the full reel with `audio_fill:"loop"`.

**STOP:** "Music OK? (approve / retry-music [direction — e.g. slower, more tension])"

## STAGE 6 — Package deliverable (~30s, ~$0.02)

Write showcase HTML to `public/launches/{launch_slug}-kinetic-type.html`. Optionally loop the clip for Story autoplay.

## Quality bar (definition of done)

- ✅ Every character in `headline` is **legible at thumbnail scale** — it's HTML, not generated pixels.
- ✅ Type animations feel intentional — stagger, impact, hold — not a static caption slapped on b-roll.
- ✅ B-roll sets mood without competing with the type (abstract, text-free background).
- ✅ Music bed covers the **full duration** — no silent tail.
- ✅ 9:16 vertical, 15–30s, loopable if requested.

## Watch-outs

- **Never put the headline in the image prompt.** AI text rendering is the hardest known failure mode — garbled launch copy kills the hook instantly.
- **Short headline wins.** 3–8 words max. Kinetic type needs room to breathe; a 20-word manifesto becomes unreadable mush even in HTML.
- **broll_mood must stay text-free.** Fake signage, fake logos, or fake UI in the background fights the type layer.
- **sonilo-t2m for client work.** minimax music is fine for drafts; sonilo-t2m carries cleaner commercial licensing for brand deliverables.
- **Re-render is cheap.** Change one word or retime a beat → re-run Stage 4 only, not the b-roll.

## FINAL OUTPUT

```
✅ Kinetic type reel: public/launches/{launch_slug}-kinetic-type.html
✅ Final MP4 (9:16, {duration}s): <URL>
✅ Headline: "{headline}"
✅ Type style: {type_style}
✅ Music: {sonilo-t2m | music}

Total spent: $X.XX
Total wall-clock: MM:SS
```

## AFTERCARE

1. **Platform variants** — re-export 1:1 (feed) and 16:9 (LinkedIn) from the same type overlay (cheap re-render).
2. **Localized hooks** — swap headline text, re-run Stage 4 only per language.
3. **Pair with hero film** — use this as the 15s social cut; link to a longer brand film in the CTA.
4. **A/B hooks** — same b-roll bed, three headline variants, three quick Stage 4 passes.

---

## Notes for the agent (only read if a step fails)

**Hyperframes >15s:** call compositor directly with `duration:N`.

**Type CSS patterns:** `bold-impact` = scale from 0→1.2→1 with `cubic-bezier`; `condensed-swiss` = slide from left with `letter-spacing` tighten; `neon-glow` = `text-shadow` pulse + `box-shadow`.

**B-roll motion:** Ken-Burns zoompan on stills is the reliable default; i2v only if user explicitly wants generative background motion.