# Marketing Video

> Create marketing videos for Solana projects using Remotion (code-driven) and Renoise (AI-generated). Use when a user says "marketing video", "product video", "promo video", "deck review", "video pitch", "create a video", or "Remotion project".

- Skill: `sendaifun/marketing-video` (Agent Skill, multi-file: 9 files)
- Install (CLI): `npx skillmds@latest add sendaifun/marketing-video`
- Raw SKILL.md: https://api.skillmd.com/api/skills/sendaifun/marketing-video/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: sendaifun (https://skillmd.com/u/sendaifun)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/sendaifun/marketing-video

---


## Preamble (run first)

```bash
_TEL_TIER=$(cat ~/.superstack/config.json 2>/dev/null | grep -o '"telemetryTier": *"[^"]*"' | head -1 | sed 's/.*"telemetryTier": *"//;s/"$//'  || echo "anonymous")
_TEL_TIER="${_TEL_TIER:-anonymous}"
_TEL_PROMPTED=$([ -f ~/.superstack/.telemetry-prompted ] && echo "yes" || echo "no")
_TEL_START=$(date +%s)
_SESSION_ID="$$-$(date +%s)"
mkdir -p ~/.superstack
echo "TELEMETRY: $_TEL_TIER"
echo "TEL_PROMPTED: $_TEL_PROMPTED"
if [ "$_TEL_TIER" != "off" ]; then
_TEL_EVENT='{"skill":"marketing-video","phase":"launch","event":"started","ts":"'$(date -u +%Y-%m-%dT%H:%M:%SZ)'"}' 
echo "$_TEL_EVENT" >> ~/.superstack/telemetry.jsonl 2>/dev/null || true
_CONVEX_URL=$(cat ~/.superstack/config.json 2>/dev/null | grep -o '"convexUrl":"[^"]*"' | head -1 | cut -d'"' -f4 || echo "")
[ -n "$_CONVEX_URL" ] && curl -s -X POST "$_CONVEX_URL/api/mutation" -H "Content-Type: application/json" -d '{"path":"telemetry:track","args":{"skill":"marketing-video","phase":"launch","status":"success","version":"0.2.0","platform":"'$(uname -s)-$(uname -m)'","timestamp":'$(date +%s)000'}}' >/dev/null 2>&1 &
true
fi
```

If `TEL_PROMPTED` is `no`: Before starting the skill workflow, ask the user about telemetry.
Use AskUserQuestion:

> Help superstack get better! We track which skills get used and how long they take —
> no code, no file paths, no PII. Change anytime in `~/.superstack/config.json`.

Options:
- A) Sure, help superstack improve (anonymous)
- B) No thanks

If A: run this bash:
```bash
echo '{"telemetryTier":"anonymous"}' > ~/.superstack/config.json
_TEL_TIER="anonymous"
touch ~/.superstack/.telemetry-prompted
```

If B: run this bash:
```bash
echo '{"telemetryTier":"off"}' > ~/.superstack/config.json
_TEL_TIER="off"
touch ~/.superstack/.telemetry-prompted
```

This only happens once. If `TEL_PROMPTED` is `yes`, skip this entirely and proceed to the skill workflow.

> **Wrong skill?** See [SKILL_ROUTER.md](../../SKILL_ROUTER.md) for all available skills.

# Marketing Video — Remotion + Renoise

Create marketing videos for your Solana project using two complementary approaches:
- **Remotion** (code-driven): Programmatic React videos — full control, reproducible, version-controlled. Uses the [official Remotion skills](https://github.com/remotion-dev/skills) (38 rule modules).
- **Renoise** (AI-generated): AI video generation — fast, creative, no code needed

**Goal: Professional quality that doesn't look AI-generated.** Read [references/professional-quality-guide.md](references/professional-quality-guide.md) before starting any Remotion work.

## When to Use

- `/marketing-video` — Full video production workflow
- `/deck-review` — Convert pitch deck into video format
- "Create a marketing video for my Solana project"
- "Make a product demo video"
- "Turn my pitch deck into a video"
- "Create a social media promo"
- "Make a TikTok for my dApp"

## Non-Negotiables

- **Never skip the interview.** Don't guess the product, the audience, or the visual direction. Ask.
- **Never ask about animation technicalities.** The user doesn't care about spring configs or TransitionSeries. Ask about their product, their story, their taste.
- **Stay opinionated.** If the user's idea for a video is weak (too long, wrong audience, no hook), say so plainly and redirect.
- **Visual taste first, code second.** Establish what the video should FEEL like before writing a single line of Remotion.
- **Gather elements proactively.** Ask for screenshots, logos, brand colors. If they don't have them, source SVG icons (Lucide, Heroicons), generate color palettes, and suggest illustration styles.
- **One-stop shop.** This skill handles everything: interview → concept → storyboard → element gathering → scaffold → code → render → platform cuts. The user should not need another tool.

## Workflow

### Step 1: Context Gathering (Before You Ask Anything)

Silently check for existing context. Read these files if they exist — don't ask the user to repeat themselves:

```
.superstack/idea-context.md    → Product concept, audience, value prop
.superstack/build-context.md   → Tech stack, features, deployment status
```

Also check: Does a Remotion project already exist in the working directory? (`remotion.config.ts` or `package.json` with remotion dependency)

**Auto-detect product assets.** Before the interview, scan the project for usable visual material:

```bash
# Screenshots and images
find . -maxdepth 3 -type f \( -name "*.png" -o -name "*.jpg" -o -name "*.jpeg" -o -name "*.webp" \) ! -path "*/node_modules/*" ! -path "*/.git/*" 2>/dev/null | head -20

# SVG files (logos, icons, illustrations)
find . -maxdepth 3 -type f -name "*.svg" ! -path "*/node_modules/*" ! -path "*/.git/*" 2>/dev/null | head -20

# Video/screen recordings
find . -maxdepth 3 -type f \( -name "*.mp4" -o -name "*.webm" -o -name "*.mov" \) ! -path "*/node_modules/*" ! -path "*/.git/*" 2>/dev/null | head -10

# Brand colors from CSS/Tailwind config
grep -r "primary\|accent\|brand" tailwind.config.* globals.css theme.* 2>/dev/null | head -10

# Package.json for project name/description
cat package.json 2>/dev/null | grep -E '"name"|"description"' | head -5
```

If you find assets, mention them during the interview: "I noticed you have screenshots in `public/` and an SVG logo — I can use those directly."

### Step 2: The Interview (Deep, Product-Focused)

This is a conversation, not a questionnaire. Start with the anchor questions. Pull deeper based on their answers. Do NOT move to production until you can clearly articulate: what the product does, who cares, why it matters, and what the video should make someone feel.

**Round 1 — The Product (mandatory, ask all):**

1. **"Explain your product to me like I'm a potential user, not a developer."**
   Why: Forces them out of technical jargon. The video needs to speak the user's language.

2. **"Who specifically is going to watch this video? Not 'everyone' — give me one person."**
   Why: A video for a DeFi degen is completely different from one for a hackathon judge.
   Follow-up if vague: "Is this person technical? Do they already use crypto? What are they doing when they see your video — scrolling Twitter, browsing a landing page, sitting in a pitch meeting?"

3. **"What's the single thing you want the viewer to DO after watching?"**
   Why: Every frame exists to drive toward this one action. No action = no point.
   Push back if they say "learn about us" — that's not an action. "Sign up", "try the demo", "visit the site", "vote for us" — those are actions.

**Round 2 — The Story (mandatory, ask all):**

4. **"What problem does your product solve? Describe the pain — make me feel it."**
   Why: The best videos start with a problem the viewer already has. No problem = no hook.

5. **"What's the 'aha moment' in your product? The thing that makes people go 'oh wait, that's actually cool.'"**
   Why: This becomes the centerpiece of the video. If they can't name it, probe: "What do users compliment most? What's the demo moment that gets reactions?"

6. **"Do you have a number that would make someone stop scrolling?"**
   Why: Metrics are the most powerful hooks in crypto content. Examples: "$2M TVL", "400ms settlement", "50K transactions", "10x cheaper than Ethereum".
   If they don't have a metric: "What's the most concrete proof your product works? User count? Transaction volume? Speed comparison?"

**Round 3 — The Taste (mandatory, ask all):**

7. **"Show me a video you love — from any brand, any industry. Something that captures the energy you want."**
   Why: This reveals more about desired quality and tone than any multiple-choice question. If they can't name one, offer reference anchors:
   - "Clean and minimal, like an Apple product launch?"
   - "Fast and punchy, like a crypto Twitter banger?"
   - "Technical and nerdy, like a developer conference talk?"
   - "Bold and cinematic, like a movie trailer?"
   - "Playful and meme-y, like a TikTok trend?"

8. **"What vibe should this video have? Pick one: confident, urgent, playful, mysterious, authoritative, rebellious."**
   Why: Vibe determines everything — color palette, animation speed, typography weight, music choice.

9. **"Where will people see this? What platform?"**
   Why: Determines format (16:9 vs 9:16), duration (15s vs 3min), and hook window (1s for TikTok, 5s for YouTube).

**Round 4 — The Assets (mandatory, ask all):**

10. **"Do you have: a logo, brand colors, and a screenshot of your product? Share what you have."**
    Why: Real product footage separates professional from generic. If they have nothing, that's OK — we'll generate visuals.
    - If they have a logo: Get it as SVG if possible, PNG otherwise
    - If they have brand colors: Get hex codes
    - If they have screenshots: Get them in the highest resolution possible
    - If they have NOTHING: "No worries. I'll set up a visual system — we'll use SVG icons, a generated color palette, and animated text to build the video."

11. **"Do you have a preferred writing tone for text overlays and captions? Lowercase and casual, or polished and proper?"**
    Why: Text overlays and post copy should match the founder's voice. Read [../tone-guide.md](../tone-guide.md) for defaults.

12. **"Any specific text that MUST appear? Tagline, URL, metric, hackathon name?"**
    Why: Some text is non-negotiable (sponsor logos, hackathon branding, product URL).

**Round 5 — The Constraint (ask if needed):**

12. **"Is there a deadline? Hackathon submission, launch date, pitch meeting?"**
    Why: If they need it in 2 hours, we're doing a fast Remotion template or Renoise. If they have a week, we can be more ambitious.

13. **"Budget for extras? Voiceover (ElevenLabs), music, stock footage?"**
    Why: Determines whether we use SFX only (free) or add TTS voiceover / licensed music.

### Interview Rules

- **Adapt, don't script.** If the user gives a rich answer to question 1 that covers questions 2-4, skip them. If they're terse, dig deeper.
- **Challenge weak hooks.** If their "scroll-stopping metric" is "we use Solana" — that's not a hook. Push for something specific and surprising.
- **No false praise.** If their video concept is too ambitious for a 15s Twitter clip, say so. If their product doesn't have a clear visual story yet, help them find one.
- **Never ask about animation preferences.** Users don't know what `spring damping` means and shouldn't need to. Ask about FEEL, not technique. You translate taste → technique.
- **3 questions max per message.** Don't dump all 13 questions at once. Conversational rounds.

### Step 2.5: Live Research (mandatory before creative direction)

Every metric shown in a video must be current. Before producing the creative brief, research:

- Pull current TVL, volume, user counts for the product and its competitors using web search or MCP tools (DefiLlama, CoinGecko)
- Get the latest ecosystem stats relevant to the hook (eg. total Solana perps volume, number of tokens launched on pump.fun, etc.)
- Verify any numbers the user mentioned in the interview

**Every number that appears as text in the video must come from this research pass.** Outdated metrics in a video are worse than no metrics.

**Check for recent hacks/exploits.** Don't reference hacked protocols positively. Verify before citing any protocol as a competitor or comparison.

### Step 3: Creative Direction (You Decide, User Approves)

After the interview, YOU produce the creative direction. Don't ask the user to pick from a menu — present a single confident recommendation they can approve or push back on.

**Output a Creative Brief that includes:**

1. **Video Concept** — One sentence: "A 30-second Twitter clip that opens with your $2M settlement metric, shows a 3-step product demo, and ends with a QR code to your site."

2. **Storytelling Framework** — Pick the best one (read [references/video-storytelling.md](references/video-storytelling.md)):
   | Framework | Best For | Structure |
   |-----------|----------|-----------|
   | **Hook-Proof-CTA** | Twitter, TikTok (15-30s) | Shocking metric → Demo proof → "Try it" |
   | **Problem-Demo-Result** | Product demos (30-90s) | Pain point → Solution demo → Outcome |
   | **Before/After** | Landing pages (30-60s) | Old way (painful) → New way (smooth) |
   | **Speedrun** | Hackathon demos (1-3min) | Full product walkthrough at speed |
   | **Testimonial Sandwich** | YouTube, longer content | User quote → Demo → User quote |
   | **Data Story** | DeFi/infra products | Animated metrics telling growth story |

3. **Visual Direction** — Read the `video-craft` skill's [frame composition reference](../video-craft/references/frame-composition.md) for frame archetypes and [product demo patterns reference](../video-craft/references/product-demo-patterns.md) if the video includes product screenshots. Then define:
   - Color palette (hex codes — derived from their brand or generated)
   - Typography choices (headline font + body font)
   - Animation feel: "smooth and elegant" or "fast and punchy" or "heavy and cinematic"
   - Frame archetype per scene (hero / product / split / data / comparison / end-card)
   - Effect family choice (1-2 max per video — see the [effect families section in frame-composition.md](../video-craft/references/frame-composition.md#effect-families))
   - Key visual elements: What appears on screen in each scene

4. **Scene-by-Scene Storyboard** — Written out, frame by frame:
   ```
   Scene 1 (0-3s): HOOK — Large animated metric "$2.1M" springs in on black background.
                    Subtitle fades up: "settled in 30 days. Zero bank accounts."
   Scene 2 (3-8s): PROBLEM — Text reveals line by line: "AI agents can't pay each other
                    without a human co-signer." Red-tinted, desaturated.
   Scene 3 (8-22s): DEMO — Product screenshot slides in from right. Animated arrows point
                     to key features. Step labels appear in sequence.
   Scene 4 (22-27s): PROOF — Three metric cards spring in with stagger: "50K+ txns",
                      "120 agents", "<400ms settlement"
   Scene 5 (27-30s): CTA — "Try it now" with URL and QR code. Light leak transition.
   ```

5. **Visual Elements Needed** — Concrete list:
   - Screenshots to capture / provide
   - SVG icons to use (from Lucide, Heroicons, or custom)
   - Illustrations or diagrams to create
   - Brand assets (logo placement, colors)

6. **Approach Decision** — Remotion or Renoise, with reasoning:
   ```
   Need pixel-perfect control or live data? → Remotion
   Need it in 10 minutes with no code? → Renoise
   Need both? → Renoise for creative cuts + Remotion for product demos
   ```

**Present this to the user for approval.** Wait for their OK or adjustments before building anything.

### Step 4: Element Gathering

Before writing any code, gather all visual elements:

**Brand Assets:**
- Logo (SVG preferred, PNG fallback) → save to `public/`
- Brand colors → define as constants
- Brand fonts → load via `@remotion/google-fonts`

**Product Assets:**
- Screenshots → save to `public/` at 2x resolution minimum
- Screen recordings → save to `public/` as MP4
- If no screenshots exist, help the user capture them or describe scenes with animated text + SVG icons

**SVG Icons (from Lucide React or similar):**
Remotion renders React components — any React icon library works natively:
```tsx
// Install: npm install lucide-react
import { Zap, Shield, Wallet, ArrowRight, ChevronDown } from "lucide-react";

// Use in compositions — animatable via useCurrentFrame()
<Zap size={64} color="#14F195" style={{ opacity, transform: `scale(${scale})` }} />
```

Common icons for Solana videos:
- Speed: `Zap`, `Timer`, `Gauge`
- Security: `Shield`, `Lock`, `ShieldCheck`
- Money: `Wallet`, `DollarSign`, `TrendingUp`, `BarChart3`
- Users: `Users`, `UserPlus`, `Globe`
- Actions: `ArrowRight`, `ExternalLink`, `QrCode`, `Play`
- Tech: `Code`, `Terminal`, `Cpu`, `Network`

**SVG Path Animations (for draw-on effects):**
```bash
npx remotion add @remotion/paths
npx remotion add @remotion/shapes
```
Use `evolvePath()` for line-drawing reveals of logos, charts, diagrams.
Use `@remotion/shapes` for animated geometric primitives (circles, stars, polygons).

**Lottie Animations (for complex vector animations):**
```bash
npx remotion add @remotion/lottie
```
Source from LottieFiles.com — search for: "loading", "success", "rocket", "chart", "crypto"

**Color Palette Generation:**
If the user has no brand colors, generate a professional palette:
- Primary: Pick from their product's existing UI, or default to Solana purple `#9945FF`
- Accent: Complementary color (e.g., `#14F195` for Solana green)
- Background: Dark (`#0a0a0f` to `#12101a` — never pure black)
- Text: White (`#ffffff`) with `rgba(255,255,255,0.7)` for secondary
- Danger/warning: For "before" scenes — desaturated reds `#e94560`

### Step 5: Build (Remotion Workflow)

**Apply `video-craft` preflight checklist before rendering** (one focal point per frame, depth in backgrounds, screenshots in device frames, max 8 words per text block, 1-2 effect families max). Load `video-craft` references as needed during build:
- Showing product UI → read [product-demo-patterns.md](../video-craft/references/product-demo-patterns.md)
- Building the CTA/end frame → read end-card section in [frame-composition.md](../video-craft/references/frame-composition.md)
- Frame composition feels off → read full [frame-composition.md](../video-craft/references/frame-composition.md)

Read [references/remotion-quickstart.md](references/remotion-quickstart.md) for the full technical reference based on the [official Remotion skills](https://github.com/remotion-dev/skills) (38 rule modules covering animations, transitions, text, charts, audio, 3D, captions, and more).

**0. Install Official Remotion Skills (one-time):**
```bash
npx skills add remotion-dev/skills
```
This installs 38 rule modules to `~/.claude/skills/` — giving Claude the complete Remotion knowledge base for all future sessions. The official skills cover: animations, timing, transitions, light leaks, audio, SFX, captions, voiceover, charts, 3D, fonts, Tailwind, Lottie, maps, and more.

**1. Scaffold:**
```bash
# If no Remotion project exists:
npx create-video@latest marketing-video
cd marketing-video && npm install

# Install key packages for cinematic quality:
npx remotion add @remotion/transitions
npx remotion add @remotion/light-leaks
npx remotion add @remotion/google-fonts
npx remotion add @remotion/noise
npx remotion add @remotion/captions
npx remotion add @remotion/media-utils
```

**2. Create compositions** based on the video type:

| Composition | Use Case | Dimensions | Duration |
|------------|----------|------------|----------|
| `ProductDemo.tsx` | Full product walkthrough | 1920x1080 | 30-90s |
| `SocialClip.tsx` | TikTok/Reels vertical | 1080x1920 | 15-60s |
| `TwitterClip.tsx` | Twitter/X landscape | 1920x1080 | 15-30s |
| `PitchVideo.tsx` | Pitch deck as video | 1920x1080 | 1-3min |
| `SquareClip.tsx` | Instagram feed | 1080x1080 | 15-30s |

**3. Structure each composition using Sequences:**

For a 30s product demo (900 frames @ 30fps):
```
Scene 1: Hook — metric or bold claim (0-90 frames, 3s)
Scene 2: Problem — the pain point (90-240, 5s)
Scene 3: Demo — product in action (240-660, 14s)
Scene 4: Proof — metrics/social proof (660-810, 5s)
Scene 5: CTA — try it now (810-900, 3s)
```

**4. Apply advanced techniques** from the Remotion skills reference:

- **Animations:** All animation via `useCurrentFrame()` + `interpolate()` or `spring()`. NEVER use CSS transitions or Tailwind `animate-*` classes.
- **Default spring: `{damping: 200}`** — No bounce. Bounce (`damping: 8`) is a deliberate choice, not a default.
- **Transitions:** Use `<TransitionSeries>` with `fade()`, `slide()`, `wipe()`, `clockWipe()` for scene changes
- **Light leaks:** Use `@remotion/light-leaks` as `<TransitionSeries.Overlay>` for cinematic scene transitions
- **Text animations:** Typewriter (string slicing, never per-character opacity), word-highlight for key phrases
- **Charts:** Animated bar charts with staggered spring entrance, pie charts with stroke-dashoffset, line charts with `evolvePath`
- **Sound effects:** Built-in SFX from `@remotion/sfx`: whoosh, whip, ding, switch, shutter
- **Captions:** TikTok-style captions with `createTikTokStyleCaptions()` and per-word highlighting
- **Voiceover:** ElevenLabs TTS integration with `calculateMetadata` for dynamic duration
- **Noise:** Use `@remotion/noise` for organic floating motion on resting elements (prevents "dead" static look)
- **Color grading:** Use `interpolateColors()` for dynamic background mood shifts across scenes
- **Premounting:** Always use `<Sequence premountFor={1 * fps}>` to preload content
- **Always clamp:** `extrapolateRight: "clamp"` on every `interpolate()` call

**5. Quality gate — before rendering, verify against [references/professional-quality-guide.md](references/professional-quality-guide.md):**
- [ ] Consistent animation vocabulary (max 2-3 techniques, not a different one per scene)
- [ ] Staggered element entrances (10-20 frame gaps, not everything at once)
- [ ] Dwell time on key content (enter, hold, exit — not instant in/out)
- [ ] No linear interpolation without easing (use spring or Easing.inOut)
- [ ] Light leak overlays at key scene transitions
- [ ] Audio integrated (at minimum: SFX on transitions and metric reveals)
- [ ] Mobile safe zones respected for vertical formats (150px top, 170px bottom)
- [ ] Headlines 56px+, body 36px+, nothing under 28px

**6. Render:**
```bash
npx remotion studio          # Preview in browser

# Draft (fast iteration)
npx remotion render ProductDemo out/draft.mp4 --codec h264 --crf 23

# Production quality (final delivery)
npx remotion render ProductDemo out/product-demo.mp4 --codec h264 --crf 18 --color-space bt709
npx remotion render SocialClip out/social-clip.mp4 --codec h264 --crf 18 --color-space bt709
npx remotion render TwitterClip out/twitter-clip.mp4 --codec h264 --crf 18 --color-space bt709

# Multi-core (faster render)
npx remotion render ProductDemo out/fast.mp4 --concurrency 8 --crf 18
```

### Step 5b: Renoise Workflow (Alternative to Remotion)

Use the installed Renoise skills for AI-generated content:

1. **Storyboard:** Write a shot-by-shot description using the chosen storytelling framework
2. **Visual analysis (optional):** Use `/renoise:gemini-gen` to analyze product screenshots and extract visual details for prompt writing
3. **Generate:** Use `/renoise:director` — the single entry point for ALL video creation
   - Product ads, dramatic reveals, brand films, animated content
   - Multi-clip short films, TikTok e-commerce content
   - Specify style, mood, pacing, and Solana brand colors
4. **Iterate:** Use `/renoise:renoise-gen` for specific generations
   - Text-to-video, image-to-video, video-to-video
   - Product design sheets (multi-angle views)
5. **Download:** Use `/renoise:video-download` to save results

### Step 6: Platform Optimization

| Platform | Format | Duration | Hook Window | Notes |
|----------|--------|----------|-------------|-------|
| **Twitter/X** | 16:9 or 1:1 | 15-60s | First 1.5s | Autoplay muted — text must carry without audio. Metrics in first 3s. |
| **TikTok** | 9:16 | 15-60s | First 1s | Vertical, fast cuts every 2-3s. Text overlays mandatory. Trending audio helps. |
| **YouTube** | 16:9 | 1-5min | First 5s | More detail allowed. Chapter markers for longer videos. Thumbnail is 50% of clicks. |
| **YouTube Shorts** | 9:16 | 15-60s | First 1s | Same as TikTok but slightly more polished audience. |
| **Instagram Reels** | 9:16 | 15-90s | First 1s | Visual quality matters more than TikTok. Clean aesthetic. |
| **Instagram Feed** | 1:1 | 15-60s | First 2s | Square format. Must look good as a still (first frame = thumbnail). |
| **Hackathon demo** | 16:9 | 1-3min | First 10s | Focus on functionality. Show code + product. End with live demo link. |
| **Landing page** | 16:9 | 30-90s | Immediate | Autoplay, muted by default. Must work without sound. Loop-friendly. |
| **Pitch meeting** | 16:9 | 1-2min | First 5s | Clean, professional. No memes. Real data. Speaking notes separate. |

### Step 7: Platform-Specific Viral Mechanics

**Twitter/X:**
- Thread format: teaser video (15s) + link to full demo
- Quote-tweet hook: "POV: You just shipped your first Solana dApp"
- Engagement bait: "Can you spot what makes this different from [competitor]?"
- Tag @solana, @superaboringclub, relevant protocols

**TikTok:**
- Pattern interrupt in first 0.5s (unexpected visual, loud text, or surprising metric)
- "POV" or "Day in the life" framing for dev content
- Duet/stitch-friendly: leave space for reactions
- Text-to-speech narration over screen recording

**YouTube:**
- Thumbnail: high contrast, 3-4 words max, face if possible
- First 5s must state what the viewer will learn/see
- End screen with subscribe + related video links
- Description: timestamps, links, keywords

## Solana Video Best Practices

### Branding
- **Primary palette:** Purple `#9945FF`, Green `#14F195`, Black `#000000`
- **Extended palette:** Dark purple `#7B3FE4`, Light green `#19FB9B`, Dark gray `#19161C`
- **Typography:** Inter (primary), JetBrains Mono (code), SF Pro (system fallback)
- **Logo:** Download from solana.com/branding. Always use on dark background.

### Content That Performs
- **Show real data** — Fetch live TVL, transaction counts, or token prices using `@solana/web3.js` in Remotion compositions
- **Terminal recordings** — Screen recordings of `anchor test` passing or `solana deploy` succeeding are powerful for dev audiences
- **Explorer links** — Link to your program on explorer.solana.com for credibility
- **QR codes** — Embed your program ID or product URL in the CTA frame
- **Speed demos** — Show transaction confirmation time (<400ms on Solana) as a visual counter
- **Before/after comparisons** — Split screen: old way (slow, expensive) vs your way (fast, cheap)
- **Live on-chain data** — Pull real metrics into Remotion compositions for authenticity

### What NOT to Do
- Don't use stock footage of "blockchain" or "crypto" imagery (generic node networks, etc.)
- Don't make it longer than needed — 30s for social, 90s for landing page, 3min max for demos
- Don't forget captions — 85% of social video is watched without sound
- Don't use generic music — either use Solana-community tracks or no music
- Don't show just slides — even for pitch videos, animate and show product

## Output Deliverables

For every video project, deliver:
1. **Video files** in `out/` directory (MP4, platform-specific formats)
2. **Source code** (Remotion project) for future edits and updates
3. **Platform-specific cuts** — landscape (16:9), portrait (9:16), square (1:1)
4. **Thumbnail images** for each platform (1280x720 for YouTube, 1080x1080 for Instagram)
5. **Caption file** (.srt) for accessibility
6. **Post copy** — suggested tweet/caption text for each platform

## Resources

### Writing Tone
- [../tone-guide.md](../tone-guide.md) — Default writing tone for text overlays, captions, and post copy. **Ask the user's tone preference** during the interview. Covers casing, sentence style, and format-specific notes for video text and social copy.

### references/
- [references/scene-templates.md](references/scene-templates.md) — **16 pre-built LEGO-block scenes** + 3 full composition recipes. Mix and match: hooks, problems, demos, metrics, CTAs, testimonials, terminals, logo reveals
- [references/remotion-quickstart.md](references/remotion-quickstart.md) — Full technical reference + official skills setup (38 rule modules)
- [references/remotion-advanced.md](references/remotion-advanced.md) — Advanced patterns: transitions, 3D, charts, noise, color grading, thumbnails, multi-format export
- [references/professional-quality-guide.md](references/professional-quality-guide.md) — **Anti-AI patterns**, Disney principles, consistent animation vocabulary, typography rules, spring physics guide
- [references/cinematic-techniques.md](references/cinematic-techniques.md) — Light leaks, noise, audio-reactive visuals, color grading, Whisper captions, ElevenLabs voiceover, SVG animation, 4K rendering
- [references/audio-library.md](references/audio-library.md) — Royalty-free music sources, SFX layering guide, volume guidelines, mood-to-track matching, Remotion audio integration
- [references/video-storytelling.md](references/video-storytelling.md) — 6 video storytelling frameworks with script templates

### Cross-skill resources
- `video-craft` — frame-level visual composition and product demo presentation. Invoke during creative direction and build phases for higher frame-by-frame quality.
- Output from `create-pitch-deck` skill → convert pitch deck to video
- `.superstack/idea-context.md` — project concept, target audience, value proposition
- `.superstack/build-context.md` — tech stack, features built, screenshots

## Quick Start

```bash
# 1. Install official Remotion skills (one-time):
npx skills add remotion-dev/skills

# 2. Remotion (code-driven video):
npx create-video@latest marketing-video
cd marketing-video && npm install
npx remotion add @remotion/transitions @remotion/light-leaks @remotion/google-fonts @remotion/noise @remotion/captions @remotion/media-utils
npx remotion studio  # Preview in browser
npx remotion render ProductDemo out/product-demo.mp4 --crf 18 --color-space bt709

# 3. Renoise (AI-generated video):
# Use /renoise:director — single entry point for all video creation
# Use /renoise:renoise-gen for specific text-to-video or image-to-video tasks
# Use /renoise:gemini-gen to analyze product visuals for better prompts
```

## Framework Credits

This skill incorporates patterns and best practices from:
- **[remotion-dev/skills](https://github.com/remotion-dev/skills)** — Official Remotion agent skill with 38 rule modules covering animations, transitions, text, charts, audio, 3D, captions, light leaks, noise, and more. Install: `npx skills add remotion-dev/skills`
- **[@remotion/mcp](https://www.remotion.dev/docs/ai/mcp)** — Official Remotion MCP server for documentation lookup (optional, for advanced queries)
- **Remotion** ([remotion.dev](https://remotion.dev)) — Programmatic video framework for React
- **Renoise** — AI video generation platform
- **Disney's 12 Principles of Animation** — Applied to motion graphics for professional quality
- **Hook-Proof-CTA** framework — Social media video structure
- Platform-specific best practices from Twitter, TikTok, YouTube creator guidelines

## Decision Points

- **Remotion vs Renoise?** Remotion for reproducible, data-driven, pixel-perfect videos. Renoise for creative/artistic content and rapid iteration. Use both for a full content suite.
- **Which format first?** Start with the platform where your audience lives. Usually Twitter (16:9, 30s) for crypto projects.
- **Storytelling framework?** Hook-Proof-CTA for social, Problem-Demo-Result for product demos, Speedrun for hackathons.
- **Captions?** Always yes. 85% of social video is watched muted.
- **Music?** Optional for social (most watch muted). Recommended for landing pages and pitch videos.

## Telemetry (run last)

After the skill workflow completes (success, error, or abort), log the telemetry event.
Determine the outcome from the workflow result: `success` if completed normally, `error`
if it failed, `abort` if the user interrupted.

Run this bash:

```bash
_TEL_END=$(date +%s)
_TEL_DUR=$(( _TEL_END - ${_TEL_START:-$_TEL_END} ))
_TEL_TIER=$(cat ~/.superstack/config.json 2>/dev/null | grep -o '"telemetryTier": *"[^"]*"' | head -1 | sed 's/.*"telemetryTier": *"//;s/"$//' || echo "anonymous")
if [ "$_TEL_TIER" != "off" ]; then
echo '{"skill":"marketing-video","phase":"launch","event":"completed","outcome":"OUTCOME","duration_s":"'"$_TEL_DUR"'","session":"'"$_SESSION_ID"'","ts":"'$(date -u +%Y-%m-%dT%H:%M:%SZ)'","platform":"'$(uname -s)-$(uname -m)'"}' >> ~/.superstack/telemetry.jsonl 2>/dev/null || true
true
fi
```

Replace `OUTCOME` with success/error/abort based on the workflow result.