| name | marketing-video |
| description | 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". |
Preamble (run first)
_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:
echo '{"telemetryTier":"anonymous"}' > ~/.superstack/config.json
_TEL_TIER="anonymous"
touch ~/.superstack/.telemetry-prompted
If B: run this 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 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 (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 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:
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
find . -maxdepth 3 -type f -name "*.svg" ! -path "*/node_modules/*" ! -path "*/.git/*" 2>/dev/null | head -20
find . -maxdepth 3 -type f \( -name "*.mp4" -o -name "*.webm" -o -name "*.mov" \) ! -path "*/node_modules/*" ! -path "*/.git/*" 2>/dev/null | head -10
grep -r "primary\|accent\|brand" tailwind.config.* globals.css theme.* 2>/dev/null | head -10
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):
-
"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.
-
"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?"
-
"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):
-
"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.
-
"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?"
-
"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):
-
"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?"
-
"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.
-
"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):
-
"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."
-
"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 for defaults.
-
"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):
-
"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.
-
"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:
-
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."
-
Storytelling Framework — Pick the best one (read 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 |
-
Visual Direction — Read the video-craft skill's frame composition reference for frame archetypes and product demo patterns reference 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)
- Key visual elements: What appears on screen in each scene
-
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.
-
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)
-
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:
import { Zap, Shield, Wallet, ArrowRight, ChevronDown } from "lucide-react";
<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):
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):
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:
Read references/remotion-quickstart.md for the full technical reference based on the official Remotion skills (38 rule modules covering animations, transitions, text, charts, audio, 3D, captions, and more).
0. Install Official Remotion Skills (one-time):
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:
npx create-video@latest marketing-video
cd marketing-video && npm install
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:
6. Render:
npx remotion studio
npx remotion render ProductDemo out/draft.mp4 --codec h264 --crf 23
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
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:
- Storyboard: Write a shot-by-shot description using the chosen storytelling framework
- Visual analysis (optional): Use
/renoise:gemini-gen to analyze product screenshots and extract visual details for prompt writing
- 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
- Iterate: Use
/renoise:renoise-gen for specific generations
- Text-to-video, image-to-video, video-to-video
- Product design sheets (multi-angle views)
- 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:
- Video files in
out/ directory (MP4, platform-specific formats)
- Source code (Remotion project) for future edits and updates
- Platform-specific cuts — landscape (16:9), portrait (9:16), square (1:1)
- Thumbnail images for each platform (1280x720 for YouTube, 1080x1080 for Instagram)
- Caption file (.srt) for accessibility
- Post copy — suggested tweet/caption text for each platform
Resources
Writing Tone
- ../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 — 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 — Full technical reference + official skills setup (38 rule modules)
- references/remotion-advanced.md — Advanced patterns: transitions, 3D, charts, noise, color grading, thumbnails, multi-format export
- references/professional-quality-guide.md — Anti-AI patterns, Disney principles, consistent animation vocabulary, typography rules, spring physics guide
- references/cinematic-techniques.md — Light leaks, noise, audio-reactive visuals, color grading, Whisper captions, ElevenLabs voiceover, SVG animation, 4K rendering
- references/audio-library.md — Royalty-free music sources, SFX layering guide, volume guidelines, mood-to-track matching, Remotion audio integration
- 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
npx skills add remotion-dev/skills
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
npx remotion render ProductDemo out/product-demo.mp4 --crf 18 --color-space bt709
Framework Credits
This skill incorporates patterns and best practices from:
- 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 — Official Remotion MCP server for documentation lookup (optional, for advanced queries)
- Remotion (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:
_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.
