Add ad-video skills (ad-creative, launch, testimonial)
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01VU6qqzefQ2TxgZetJ7beKU
This commit is contained in:
15 files changed
+1406
No files matched your search
Whitespace-only changes.
@@ -0,0 +1,137 @@
|
||||
---
|
||||
name: launch-video
|
||||
description: This skill should be used when the user asks to "make a launch video", "create a product hype/sizzle film", "build a teaser/trailer for a drop", "do a reveal montage with an end-card CTA", "cut a hero video to the beat", or "export a launch film in 16:9/9:16/1:1". Covers the hook→tease→reveal→feature-montage→end-card arc and multi-aspect export.
|
||||
version: 0.1.0
|
||||
---
|
||||
|
||||
# Launch Video
|
||||
|
||||
Make a premium, high-energy 15–60s launch film that stops the scroll and converts. Build the classic arc — hook → tease → reveal → feature montage → end-card CTA — cut to the music, and export for every platform aspect.
|
||||
|
||||
## When to use
|
||||
|
||||
- Product drops, feature announcements, trailers, hype reels (15–60s).
|
||||
- "Sizzle" hero videos for a landing page.
|
||||
- Beat-synced reveals where the brand moment lands on the drop.
|
||||
|
||||
## The arc
|
||||
|
||||
| Beat | Job | Typical share (of 30s) |
|
||||
|---|---|---|
|
||||
| Hook (0–3s) | A striking frame/motion that stops the scroll | 0–3s |
|
||||
| Tease | Hint the product; build curiosity, beat-synced | 3–9s |
|
||||
| Reveal | Product/logo hits on the music drop | 9–13s |
|
||||
| Feature montage | Fast, kinetic, one benefit per shot | 13–25s |
|
||||
| End card | Logo + tagline + CTA, clean hold | 25–30s |
|
||||
|
||||
Scale the same proportions for 15s (tighter) or 60s (longer montage, never a longer hook).
|
||||
|
||||
## Two non-negotiable rules
|
||||
|
||||
1. **Sound design leads picture.** Lock the track first, mark the beats and the drop, then cut visuals to those marks. Never score a finished cut — the reveal lands on the drop, not near it.
|
||||
2. **Quality over quantity.** A few flawless shots beat many mediocre ones. Cut any shot that isn't premium.
|
||||
|
||||
## Beat-synced reveal on the drop
|
||||
|
||||
Find the drop's exact timecode in the audio, then time the reveal so the brand mark snaps to full at that frame, with a micro-overshoot for impact.
|
||||
|
||||
```js
|
||||
import gsap from "gsap";
|
||||
const DROP = 9.0; // seconds, measured from the track
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
// tease builds tension up to the drop
|
||||
tl.to(".tease", { opacity: 1, scale: 1.05, duration: DROP, ease: "power1.in" })
|
||||
// reveal SNAPS on the drop frame
|
||||
.set(".logo", { opacity: 1 }, DROP)
|
||||
.fromTo(".logo", { scale: 1.18 }, { scale: 1.0, duration: .18, ease: "power3.out" }, DROP)
|
||||
.fromTo(".flash", { opacity: .9 }, { opacity: 0, duration: .25 }, DROP); // white hit
|
||||
audio.addEventListener("play", () => tl.play());
|
||||
```
|
||||
|
||||
Cut on transients, not on a fixed grid: the hardest cuts go on kick/snare hits; ramp speed (time-remap) into the drop, then hard-cut out of it.
|
||||
|
||||
## Kinetic feature montage
|
||||
|
||||
One benefit per shot, ~0.6–1.0s each, hard cuts on the beat. Each shot = a bold keyword + a single supporting visual.
|
||||
|
||||
```css
|
||||
.feature { opacity:0; }
|
||||
.feature.in .kw { animation: pop .35s cubic-bezier(.22,1,.36,1) forwards; }
|
||||
.feature.in .word { display:inline-block; }
|
||||
@keyframes pop { from { opacity:0; transform:translateY(24px) } to { opacity:1; transform:none } }
|
||||
```
|
||||
|
||||
```js
|
||||
// drive shots off beat marks measured from the track
|
||||
const beats = [13.0, 13.8, 14.6, 15.4, 16.2]; // seconds
|
||||
beats.forEach((t, i) => scheduleAt(t, () => showFeature(i)));
|
||||
```
|
||||
|
||||
Keep one motion language across the montage (same enter curve, same exit) so speed reads as confidence, not chaos.
|
||||
|
||||
## End card
|
||||
|
||||
Hold the logo + tagline + CTA still and clean for ≥2s. No busy motion competing with the CTA; let the brand settle. Land the brand moment on the strongest remaining beat, then a crisp button/URL.
|
||||
|
||||
## Multi-aspect export
|
||||
|
||||
Compose with a center safe zone so one master crops cleanly to all aspects.
|
||||
|
||||
| Aspect | Use | Resolution | Safe zone |
|
||||
|---|---|---|---|
|
||||
| 16:9 | YouTube, landing hero, X | 1920×1080 | keep key content within center 90% |
|
||||
| 9:16 | Reels, TikTok, Shorts, Stories | 1080×1920 | text within center 80% h; avoid top 12% / bottom 18% (UI) |
|
||||
| 1:1 | Feed posts | 1080×1080 | center square of the 16:9 frame |
|
||||
|
||||
Design the hero/logo/CTA inside the **1:1 center square** so it survives every crop. Render the 16:9 master, then reframe (don't just letterbox) 9:16 and 1:1 from the same project.
|
||||
|
||||
## Output checklist
|
||||
|
||||
- Track locked first; reveal lands exactly on the drop.
|
||||
- Hook earns the first 3 seconds.
|
||||
- Montage: one benefit per shot, hard cuts on beats, consistent motion language.
|
||||
- End card holds ≥2s with one clear CTA.
|
||||
- 16:9 + 9:16 + 1:1 exports, key content in the center safe zone.
|
||||
- Premium-only shots — nothing mediocre survives the cut.
|
||||
|
||||
## Deliver & verify (rendered stills → MP4)
|
||||
|
||||
> **Packaged helper** (`scripts/`): tile your stills with `scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png`, then assert the encode with `scripts/probe-mp4.sh out.mp4 [WxH] [fps]`. See `scripts/README.md`.
|
||||
|
||||
If the launch film is built/rendered in Remotion, treat it as the heavy tier: register a `<Composition>` (+ zod `schema` + `defaultProps`), drive every value off `useCurrentFrame()` — no GSAP timelines / audio-event callbacks / `Date.now()` / `Math.random()` at render time (bake beat + drop timecodes into props). Deliverable = the rendered `out/*.mp4` per aspect (plus the project).
|
||||
|
||||
**Verify loop — render stills → inspect → encode.** Sample the arc, with the **shipped** props (real headline/tagline/CTA), not just `defaultProps`.
|
||||
|
||||
```bash
|
||||
# Frame-exact stills across hook → reveal → end-card
|
||||
npx remotion still Launch out/f-hook.png --frame=24 --props=props/launch.json # hook earns first 3s
|
||||
npx remotion still Launch out/f-reveal.png --frame=270 --props=props/launch.json # logo SNAPS on the drop frame
|
||||
npx remotion still Launch out/f-end.png --frame=899 --props=props/launch.json # end card: logo+tagline+CTA, clean hold
|
||||
# inspect each: fidelity (product/logo, tagline, CTA text exact, brand colors right, reveal at the drop frame)
|
||||
# AND artifacts (text overflow, off-canvas, CTA in the 9:16 bottom third, missing font, flash frame stuck on)
|
||||
```
|
||||
|
||||
**Multi-aspect — verify the master in EACH aspect before encoding all of them.** A reframe bug (hero pushed off the safe zone) repeats across every aspect; catch it once.
|
||||
|
||||
```bash
|
||||
for ar in 16x9 9x16 1x1; do # check reveal + end card per aspect
|
||||
npx remotion still Launch "out/reveal-${ar}.png" --frame=270 \
|
||||
--props=props/launch.json --props-merge="{\"aspect\":\"${ar}\"}"
|
||||
done
|
||||
# stills clean in all aspects? → then encode each:
|
||||
for ar in 16x9 9x16 1x1; do
|
||||
npx remotion render Launch "out/launch-${ar}.mp4" --props=props/launch.json --props-merge="{\"aspect\":\"${ar}\"}"
|
||||
done
|
||||
npx remotion render Launch out/demo.gif --codec=gif --props=props/launch.json # README demo
|
||||
```
|
||||
|
||||
**Before you finish:**
|
||||
1. `npx remotion still` renders cleanly at hook / reveal / end card — no errors, no missing fonts/assets.
|
||||
2. Logo/tagline/CTA text exact, brand colors right; reveal lands on the drop frame; key content inside the center safe zone, clear of the 9:16 bottom third.
|
||||
3. Frame-driven only — no GSAP/audio-callback timing, `Date.now()`, or `Math.random()` (beats/drop baked into props).
|
||||
4. Shipped props render correctly (not just `defaultProps`); the end card holds ≥2s with one CTA.
|
||||
5. Master verified in 16:9 + 9:16 + 1:1 before encoding; MP4s play; (optional) GIF for the README.
|
||||
|
||||
## Reference files
|
||||
|
||||
- `references/launch-structure.md` — a full shot-by-shot template with timecodes for a 30s film (scalable to 15–60s), beat-synced reveal timing, kinetic-montage shot recipes, the sound-design-leads-picture workflow, and detailed multi-aspect safe-area maps for 16:9 / 9:16 / 1:1.
|
||||
@@ -0,0 +1,142 @@
|
||||
# Launch Video Structure — Cookbook
|
||||
|
||||
Shot-by-shot template, beat-sync timing, montage recipes, and multi-aspect maps for a premium 15–60s launch film.
|
||||
|
||||
## Sound-design-leads-picture workflow
|
||||
|
||||
1. **Pick/commission the track first.** The track defines the film's length and energy.
|
||||
2. **Mark the structure in the audio**: intro, build, the **drop** (the single biggest moment), and the kick/snare transients through the montage. Note exact timecodes.
|
||||
3. **Map beats → cuts.** Hard cuts land on transients; the reveal lands on the drop frame.
|
||||
4. **Build picture to the marks.** Never finish a cut and then look for music. Score-first guarantees the reveal hits.
|
||||
5. **Mix last**: add risers into the drop, an impact/whoosh on the reveal, and let the end-card breathe (drop music low, or a clean tag).
|
||||
|
||||
## Shot-by-shot template — 30s film (scalable)
|
||||
|
||||
```
|
||||
00:00–00:03 HOOK
|
||||
Visual : single striking frame — extreme close detail / impossible motion
|
||||
Motion : slow push-in or a fast whip that resolves; NO logo yet
|
||||
Audio : sub-bass swell begins, sparse
|
||||
Cut : on first audible beat at ~03s
|
||||
|
||||
00:03–00:09 TEASE
|
||||
Visual : fragments/silhouettes of the product, never the full thing
|
||||
Motion : light leaks, partial reveals, parallax; tension rising
|
||||
Audio : riser building toward the drop
|
||||
Cut : quick cuts accelerating into the drop
|
||||
|
||||
00:09–00:13 REVEAL ← THE DROP at 00:09
|
||||
Visual : product/logo SNAPS to full on the drop frame
|
||||
Motion : scale 1.18→1.0 over 0.18s + white flash-out; settle clean
|
||||
Audio : drop hits + impact stinger on the exact frame
|
||||
Hold : let it sit ~1.2s before moving
|
||||
|
||||
00:13–00:25 FEATURE MONTAGE
|
||||
Visual : one benefit per shot, ~0.6–1.0s each (≈8–10 shots)
|
||||
Motion : bold keyword pop + one supporting visual; consistent enter/exit
|
||||
Audio : hard cuts on kick/snare; energy sustained
|
||||
Pattern: KEYWORD + UI/product moment, repeat with rhythm
|
||||
|
||||
00:25–00:30 END CARD
|
||||
Visual : logo + tagline + CTA, centered, still
|
||||
Motion : minimal — a soft settle, then hold ≥2s
|
||||
Audio : music resolves; clean sonic tag
|
||||
CTA : one action (URL or button), nothing competing
|
||||
```
|
||||
|
||||
### Re-proportioning
|
||||
|
||||
- **15s**: Hook 0–2s · Tease 2–5s · Reveal 5–7s · Montage 7–12s (4–5 shots) · End card 12–15s.
|
||||
- **60s**: same hook (still ≤3s) · longer tease and a richer montage (14–16 shots, grouped in waves) · end card ≥3s.
|
||||
|
||||
The hook never gets longer — only the montage scales.
|
||||
|
||||
## Beat-synced reveal (timing detail)
|
||||
|
||||
```js
|
||||
import gsap from "gsap";
|
||||
const DROP = 9.0; // measured drop timecode (s)
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
|
||||
// build tension toward the drop
|
||||
tl.fromTo(".tease", { scale: 1.0, opacity: .6 },
|
||||
{ scale: 1.08, opacity: 1, duration: DROP, ease: "power1.in" });
|
||||
|
||||
// REVEAL exactly on the drop
|
||||
tl.set(".logo", { opacity: 1 }, DROP);
|
||||
tl.fromTo(".logo", { scale: 1.18 }, { scale: 1.0, duration: .18, ease: "power3.out" }, DROP);
|
||||
tl.fromTo(".flash", { opacity: .9 }, { opacity: 0, duration: .25, ease: "power2.out" }, DROP);
|
||||
tl.to(".tease", { opacity: 0, duration: .12 }, DROP);
|
||||
|
||||
// hold the reveal
|
||||
tl.to(".logo", { scale: 1.0, duration: 1.2 }); // dwell
|
||||
|
||||
audio.addEventListener("play", () => tl.play());
|
||||
```
|
||||
|
||||
Speed-ramp into the drop (Remotion time-remap idea): play the last ~0.5s of the tease faster, then hard-cut to the reveal on the drop frame for a snap.
|
||||
|
||||
## Kinetic montage shot recipe
|
||||
|
||||
Each shot: a bold keyword + one product/UI visual, ~0.6–1.0s, hard cut on the beat.
|
||||
|
||||
```css
|
||||
.feature { position:absolute; inset:0; opacity:0; }
|
||||
.feature.in { opacity:1; }
|
||||
.feature .word { display:inline-block; opacity:0; transform:translateY(26px); }
|
||||
.feature.in .word { animation: pop .32s cubic-bezier(.22,1,.36,1) forwards; }
|
||||
.feature.in .word:nth-child(2){ animation-delay:.04s }
|
||||
.feature.in .word:nth-child(3){ animation-delay:.08s }
|
||||
@keyframes pop { to { opacity:1; transform:none; } }
|
||||
```
|
||||
|
||||
```js
|
||||
// schedule shots on measured beat marks
|
||||
const beats = [13.0, 13.8, 14.6, 15.4, 16.2, 17.0, 17.8, 18.6]; // seconds
|
||||
let i = 0;
|
||||
function loop(now){
|
||||
const t = (now - start) / 1000;
|
||||
if (i < beats.length && t >= beats[i]) { showFeature(i); i++; }
|
||||
if (i < beats.length) requestAnimationFrame(loop);
|
||||
}
|
||||
```
|
||||
|
||||
Montage discipline: keep ONE enter curve and ONE exit across all shots; vary content, never grammar. Alternate visual rhythm (full-frame ↔ detail) but keep cut cadence locked to the beat.
|
||||
|
||||
## Multi-aspect safe-area maps
|
||||
|
||||
Compose so a single master reframes to every aspect. Place hero/logo/CTA inside the smallest common safe zone — the 1:1 center square.
|
||||
|
||||
```
|
||||
16:9 1920×1080
|
||||
Safe: center 90% (96px H / 54px V margins)
|
||||
Use : YouTube, landing hero, X timeline
|
||||
|
||||
9:16 1080×1920
|
||||
Safe: text within center 80% height
|
||||
Avoid: top 12% (status/clock area), bottom 18% (caption + UI buttons)
|
||||
Use : Reels, TikTok, Shorts, Stories
|
||||
|
||||
1:1 1080×1080
|
||||
Safe: this square == the design anchor; put logo/CTA here
|
||||
Use : feed posts
|
||||
```
|
||||
|
||||
Export workflow:
|
||||
|
||||
1. Build the 16:9 master with all key content inside the 1:1 center square.
|
||||
2. For 9:16, **reframe** (pan/scale per shot to keep the subject centered) — do not letterbox.
|
||||
3. For 1:1, crop the center square; verify text isn't clipped.
|
||||
4. Re-check captions/CTA against each platform's UI overlay zones before export.
|
||||
|
||||
## Final QA checklist
|
||||
|
||||
- [ ] Reveal lands on the exact drop frame, with overshoot + flash.
|
||||
- [ ] Hook holds attention in the first 3s without showing the product.
|
||||
- [ ] Every montage shot is one benefit, premium quality, on a beat.
|
||||
- [ ] End card holds ≥2s, single CTA, nothing competing.
|
||||
- [ ] 16:9 / 9:16 / 1:1 each pass safe-area and caption checks.
|
||||
- [ ] Audio mixed: riser → impact on drop → clean tag on end card.
|
||||
|
||||
---
|
||||
Nail the reveal beat and the sound-leads-picture cut, and a launch film lands. Built by **[iart.ai](https://iart.ai/?utm_source=github&utm_medium=readme&utm_campaign=ad-video-skills&utm_content=skill_footer&utm_term=launch-video)** — the AI motion agent for editable, on-brand motion graphics.
|
||||
Reference in new issue
Block a user