AI-Driven Promotional Videos with Claude Skills

January 25, 2024 · Eden Stack Team

aivideomarketingremotionelevenlabsclaude-skills

AI-Driven Promotional Videos with Claude Skills

Marketing video production traditionally requires expensive software, professional voiceover artists, and hours of editing. With Eden Stack, you can generate polished promotional videos using code—and let AI handle the heavy lifting.

The Traditional Video Production Problem

Creating a 60-second promo video typically involves:

Writing the script (~2 hours)
Recording or hiring voiceover talent (~$100-500 + coordination time)
Learning video editing software (~10+ hours)
Manually syncing audio to visuals (~4 hours)
Exporting for different platforms (~1 hour per format)
Re-doing everything when branding changes

Total: 8-20+ hours and $100-500 per video.

The Eden Stack Approach

You don't write JSON or code. You have a conversation:

You: "I need a 60-second promo video for my SaaS. 
      Hook about saving time, show the pain of manual setup, 
      then the solution, end with a clear CTA."
 
Claude: "I'll create a 6-scene structure for you..."
        [Updates scenes in generate-voiceovers.ts]
        [Generates voiceovers via ElevenLabs]
        [Builds React scene components]
        [Renders to all formats]
 
You: "The hook feels too slow, make it punchier"
 
Claude: [Updates the hook text and regenerates voiceover]

Total: ~30 minutes of conversation. Free tier covers ~25 videos/month.

How It Works

You describe what you want. Claude—equipped with Eden Stack's video skills—handles everything: writing the script, generating voiceovers, building scenes, and rendering.

Loading diagram...

Claude Skills: Encoded Expertise

Claude skills are markdown files that inject domain expertise into AI assistants. Eden Stack includes three skills for video production:

1. `remotion-best-practices`

Best practices for programmatic video creation:

Scene composition with TransitionSeries
Audio synchronization patterns
Animation utilities (spring, interpolate)
Multi-format export configuration
Performance optimization

2. `elevenlabs-remotion`

Professional voiceover generation:

Voice selection with preset names (Alexandra, Archer, Mark, etc.)
Voice settings for natural delivery (stability, similarity, style, speed)
Scene-by-scene generation
Timing validation with ffprobe

End-to-end video production workflow:

Script writing templates
Project structure
Scene patterns (hook, problem, solution, CTA)
Audio synchronization
Brand theming

Quick Start

1. Define Your Scenes

Scenes are defined in the voiceover generation script:

// apps/video/scripts/generate-voiceovers.ts
const scenes = [
  {
    id: "scene-1-hook",
    text: "Ship your startup this weekend.",
  },
  {
    id: "scene-2-problem",
    text: "Setting up authentication. Configuring payments. A hundred hours before you write your first feature.",
  },
  {
    id: "scene-3-solution",
    text: "With Eden Stack, everything is pre-configured. Just describe what you want to build.",
  },
  {
    id: "scene-4-cta",
    text: "Get started in five minutes. Visit get eden dot dev.",
  },
];

2. Generate Voiceovers

Eden Stack includes a video app (apps/video) with voiceover generation built-in:

# From apps/video directory
cd apps/video
 
# Generate with default voice (Alexandra)
bun run generate:voice
 
# Use a different voice
bun run generate:voice -- --voice archer
 
# Adjust voice settings
bun run generate:voice -- --voice alexandra --stability 0.5 --similarity 0.9
 
# List available voices
bun run generate:voice:list

This generates MP3 files in apps/video/public/voiceovers/ for each scene.

3. Build Scene Components

// src/scenes/HookScene.tsx
import { AbsoluteFill, Img, staticFile } from "remotion";
import { useCurrentFrame, useVideoConfig } from "remotion";
import { spring, interpolate } from "remotion";
 
export const HookScene: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  
  const logoScale = spring({
    frame,
    fps,
    config: { damping: 20, stiffness: 200 },
  });
  
  const textOpacity = interpolate(frame, [15, 30], [0, 1], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });
 
  return (
    <AbsoluteFill className="bg-background flex items-center justify-center">
      <div style={{ transform: `scale(${logoScale})` }}>
        <Img src={staticFile("logo.svg")} className="w-32 h-32" />
      </div>
      <h1 
        style={{ opacity: textOpacity }}
        className="text-6xl font-serif text-primary mt-8"
      >
        Ship your startup this weekend.
      </h1>
    </AbsoluteFill>
  );
};

4. Assemble the Video

// src/compositions/PromoVideo.tsx
import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { fade } from "@remotion/transitions/fade";
import { Audio, Sequence, staticFile } from "remotion";
 
const SCENES = {
  hook: { duration: 150, component: HookScene },      // 5s @ 30fps
  problem: { duration: 240, component: ProblemScene },
  solution: { duration: 240, component: SolutionScene },
  cta: { duration: 180, component: CTAScene },
};
 
export const PromoVideo: React.FC = () => {
  return (
    <AbsoluteFill>
      {/* Background music */}
      <Audio src={staticFile("audio/background-music.mp3")} volume={0.15} />
      
      {/* Voiceovers synced to scenes */}
      <Sequence from={0}>
        <Audio src={staticFile("voiceovers/scene-1-hook.mp3")} />
      </Sequence>
      <Sequence from={135}>
        <Audio src={staticFile("voiceovers/scene-2-problem.mp3")} />
      </Sequence>
      {/* ... more voiceovers */}
      
      {/* Scenes with transitions */}
      <TransitionSeries>
        {Object.entries(SCENES).map(([id, { duration, component: Scene }], i) => (
          <>
            <TransitionSeries.Sequence key={id} durationInFrames={duration}>
              <Scene />
            </TransitionSeries.Sequence>
            {i < Object.keys(SCENES).length - 1 && (
              <TransitionSeries.Transition
                presentation={fade()}
                timing={linearTiming({ durationInFrames: 15 })}
              />
            )}
          </>
        ))}
      </TransitionSeries>
    </AbsoluteFill>
  );
};

5. Render All Formats

# Render for YouTube (16:9)
bun run render:16x9
 
# Render for TikTok/Reels (9:16)
bun run render:9x16
 
# Render for Instagram (1:1)
bun run render:1x1
 
# Or all at once
bun run render:all

Voice Presets

The generation script includes curated voice presets optimized for promo content:

Voice	Style	Best For
alexandra (default)	Super realistic young female	Most natural-sounding
archer	Grounded British male	Charming, conversational
mark	Relaxed, laid-back male	Casual tone
adam	Deep professional male	Classic narrator
hope	Bright, uplifting female	Positive energy
eryn	Friendly, relatable female	Conversational

Voice Settings

Fine-tune how the voice sounds:

Setting	Range	Effect
`--stability`	0-1	Lower = more dynamic/emotional (default: 0.4)
`--similarity`	0-1	Higher = clearer, closer to original voice (default: 0.8)
`--style`	0-1	Higher = more expressive (default: 0.0)
`--speed`	0.25-4.0	Speech rate (default: 1.1)

# Energetic, dynamic delivery
bun run generate:voice -- --voice alexandra --stability 0.3 --speed 1.2
 
# Calm, consistent narration
bun run generate:voice -- --voice adam --stability 0.7 --speed 1.0

Tip: For natural-sounding promo videos, use lower stability (0.3-0.4) to avoid the AI-monotone effect.

Why Claude Skills Matter

Without skills, you'd need to:

Read Remotion docs to understand composition patterns
Read ElevenLabs docs to understand voice settings
Figure out how to sync audio to video frames
Learn the project structure conventions
Discover the CLI commands through trial and error

With skills, the AI assistant already knows:

Optimal voice settings for different content types
Frame-accurate audio synchronization patterns
Scene transition best practices
Multi-format export configuration
The exact CLI commands and flags

Skills are institutional knowledge encoded as AI instructions.

Cost: Free to Start

ElevenLabs has a generous free tier:

Plan	Credits/Month	1-Min Videos
Free	10,000	~25 videos
Starter ($5)	30,000	~75 videos
Creator ($22)	100,000	~250 videos

A 1-minute promo video uses approximately 400 credits.

Let that sink in: you can create 25 professional promo videos per month on the free tier. That's enough for:

Weekly product updates
A/B testing different hooks
Multi-language versions
Platform-specific cuts

Traditional	Eden Stack
Voiceover artist: $100-500	ElevenLabs: Free (25 videos/mo)
Video editor: $50-200/hr	Your time: ~30 min conversation
Re-edits: Same cost again	Re-render: Free
Multi-format: Extra charge	Included

Total cost to get started: $0.

Next Steps

Remotion Documentation — Learn advanced composition patterns
ElevenLabs Documentation — Explore voice customization
Claude Skills Guide — Create your own skills

Check out the Eden Stack promo video—entirely generated with these tools:

# Clone the template
bunx gitpick magnusrodseth/eden-stack my-app
cd my-app
bun install
 
# Navigate to video app
cd apps/video
 
# Generate voiceovers (requires ELEVENLABS_API_KEY in .env)
bun run generate:voice
 
# Preview in browser at localhost:3003
bun dev
 
# Render all formats (16:9, 9:16, 1:1)
bun run render:all

The entire video—script, voiceover, visuals, and export—is defined in code and version controlled with your project.

Ready to build with Eden Stack?

One-time payment. Full source code. No lock-in.

View pricing