LaunchMotion · Creator Outreach

---
name: bs-launchmotion-ui-agent-shortlists-influencers
description: "A marketing agent builds a ranked creator shortlist, the user approves it, and each row moves from sent to opened to replied. Rewrite every line, pick a blue, black-and-white, orange or brand-color theme, and render a 9.4-second MP4 in 1080p or 4K on your own machine."
---

# Creator Outreach

A marketing agent builds a ranked creator shortlist, the user approves it, and each row moves from sent to opened to replied. One editable HyperFrames project, 9.4 s, 1920×1080 canvas, renders at 1080p (default) or 4K, 30 fps, light scene.

## 1. Start from the user's own material

Before writing any text, collect what the user already has. Their real product always beats a default.

- **Website link.** Open the site first, in a browser tool if you have one (otherwise fetch the HTML). Collect:
  the product name and one-line pitch; three to five features in the site's own words; real numbers
  (users, speed, price) only as stated; the logo (SVG or PNG, else `apple-touch-icon` or the favicon);
  the main brand color (primary buttons, links, logo); and screenshots of the hero and the key product
  sections at 1920 px wide (2x if you can). Save everything in `./brand/` with a short `brand.json`
  (name, pitch, features, numbers, colors, file list). Never invent numbers, customers or quotes.
- **Reference video.** Extract one frame per shot (`ffmpeg -i ref.mp4 -vf "select='gt(scene,0.3)'" -vsync vfr ref-%03d.png`),
  transcribe any speech, and write down what each shot says, how long it holds and which words it uses.
  Match its message, order and pacing. If it shows the user's own product, cut short clips for footage slots.
- **Nothing given.** Ask for the product name and one sentence about it, or keep the defaults.

Then fill the text slots from that material, put the user's logo and screenshots into the picture slots,
and offer the brand color as the theme.

## 2. Theme and font

Ask which look the user wants unless they already said:

- `--theme blue` (default), `--theme mono` (black and white), `--theme orange`, or
- `--accent "#RRGGBB"` for the brand color (for example the one collected from their website).

Backgrounds stay white or clear glass in every theme; the accent only colors buttons, highlighted words,
icons and selection rings. This is a light scene with a white background.
Headlines use Smiley Sans (Deyi Hei) and small interface text uses Inter. `--font inter` keeps Inter
everywhere; `--font path/to/font.woff2` (or .ttf/.otf) uses the user's own headline font.

## 3. Text slots

All visible text is in named slots. Defaults live in `references/defaults.json`; keep each value within its character limit.

| Slot | Default | Max chars |
| --- | --- | --- |
| `agent-label` | Kite marketing agent | 26 |
| `headline-1` | Finds the right creators. | 28 | last word gets the blue gradient
| `headline-2` | Then does the outreach. | 28 |
| `panel-title` | Shortlist for the spring launch | 34 |
| `count-shortlist` | 6 creators | 14 |
| `c1-handle` | @mayaonthego | 16 | PARAMS.creators[0]
| `c1-followers` | 212K | 5 |
| `c2-handle` | @dan.runs | 16 | PARAMS.creators[1]
| `c2-followers` | 148K | 5 |
| `c3-handle` | @lenakitchen | 16 | PARAMS.creators[2]
| `c3-followers` | 305K | 5 |
| `c4-handle` | @tomsetups | 16 | PARAMS.creators[3]
| `c4-followers` | 96K | 5 |
| `c5-handle` | @aria.notes | 16 | PARAMS.creators[4]
| `c5-followers` | 178K | 5 |
| `c6-handle` | @jonbuilds | 16 | PARAMS.creators[5]
| `c6-followers` | 64K | 5 |
| `followers-unit` | followers | 10 |
| `reach-label` | Combined reach | 18 | value from PARAMS.reach
| `approve` | Approve and send | 20 |
| `panel-title-2` | Outreach in progress | 34 |
| `replied-label` | of 6 replied | 16 |
| `status-labels` | Sent / Opened / Replied | 10 | PARAMS.statusLabels, each label max 10 chars
| `toast` | 4 creators said yes | 26 |

## 4. Picture slots

This scene has no picture slots: its interface is drawn in HTML, so change it through the text slots.

## 5. Create and render

```bash
node scripts/create.mjs --out ./launch-scene --theme blue --set "agent-label=Your line here"
npx hyperframes preview ./launch-scene
npx hyperframes render ./launch-scene --output ./launch-scene.mp4 --fps 30 --quality high --resolution 1080p
# 4K: --resolution 4k
```

`--set key=value` can repeat; wrap one phrase in `[[ ]]` to keep the slot's highlight style. `--data content.json` accepts an object of slot values. `node scripts/create.mjs --help` lists every slot.

## Resolution

Before rendering, ask the user whether they want 1080p or 4K. If they do not say, render 1080p. For 4K add
`--resolution 4k` (3840×2160): the scene and its timing stay the same, Chrome renders it at twice the pixel
density, and the render takes longer.

## Style rules

- Never add large color areas: no full-screen color washes, colored panels or tinted backgrounds.
- Cards follow a frosted-glass system: floating controls are glass, large content cards use a thicker
  material, and only the main button is tinted with the accent. Do not add more glass.
- Third-party logos come from the LobeHub icon set in their original colors. Never recolor a logo.
  When the user features their own product, put their logo in the logo slot instead.
- Keep the timeline intact: change words, pictures and the theme, not timings. Keep each value within
  its character limit.

## Check

Inspect the frames at the start, the middle and the final hold. Fix any clipped or wrapping line by shortening the text, and any badly cropped picture by choosing a closer aspect ratio, then render again.