Remotion Video Creation Skill

Generate AI videos and compose them into professional sequences using KIE AI + Remotion.

Quick Start

Full pipeline:

1. Generate video with KIE API → Download
2. Create/modify Remotion composition → Reference video with staticFile()
3. Render with scripts/render.sh → Auto-compress if >16MB

When to Use Which KIE Model

Decision tree:

• Need character/object consistency? → Kling 3.0 (element references)
• Need fast iteration? → Veo Fast (85s, 25% of Google pricing)
• Need highest quality? → Veo Quality (117s, flagship)
• Need flexible duration (5/8/10s)? → Runway or Kling
• Need multi-language? → Veo (auto-translation)

Default image model: nano-banana-pro (Google Imagen family, best quality for our use case).

See references/prompting-guide.md for detailed prompting strategies.

KIE API Reference

Base URL: https://api.kie.ai/api/v1
Auth: Authorization: Bearer $KIE_API_KEY

Veo 3.1 Generation

# Generate video
curl -X POST https://api.kie.ai/api/v1/veo/generate \
  -H "Authorization: Bearer $KIE_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "model": "veo3_fast",
    "prompt": "Medium shot. Confident entrepreneur walking through modern office. Morning sunlight, glass architecture. Cinematic lighting, shallow depth of field.",
    "aspect_ratio": "16:9"
  }'

# Returns: { "data": { "taskId": "abc123..." } }

# Check status
curl "https://api.kie.ai/api/v1/veo/record-info?taskId=abc123..." \
  -H "Authorization: Bearer $KIE_API_KEY"

# When complete: response.resultUrls[0] contains video URL

Key parameters:

• model: "veo3" (Quality) or "veo3_fast" (Fast)
• prompt: Detailed scene description (see prompting guide)
• aspect_ratio: "16:9", "9:16", or "Auto"
• imageUrls: (Optional) 1-2 images for image-to-video
• seeds: (Optional) 10000-99999 for reproducibility

Generation times:

• Fast: ~85 seconds
• Quality: ~117 seconds

Runway Gen-4 Turbo

curl -X POST https://api.kie.ai/api/v1/runway/generate \
  -H "Authorization: Bearer $KIE_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "prompt": "Slow rotating 360-degree shot. Luxury watch on black velvet. Macro lens, studio lighting.",
    "aspect_ratio": "16:9",
    "quality": "1080p",
    "duration": 5
  }'

# Check status
curl "https://api.kie.ai/api/v1/runway/record-detail?taskId=xyz..." \
  -H "Authorization: Bearer $KIE_API_KEY"

Important quirks:

• 1080p only supports 5 seconds (not 8 or 10)
• 720p supports 5, 8, or 10 seconds
• Quality must be exactly "720p" or "1080p"

Kling 3.0

curl -X POST https://api.kie.ai/api/v1/jobs/createTask \
  -H "Authorization: Bearer $KIE_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "model": "kling-3.0/video",
    "input": {
      "prompt": "Professional dancer performing pirouette. Flowing dress, dramatic spotlights. Slow-motion tracking camera.",
      "duration": "5",
      "aspect_ratio": "16:9",
      "mode": "pro",
      "sound": true
    }
  }'

# Check status (unified endpoint for all market models)
curl "https://api.kie.ai/api/v1/jobs/recordInfo?taskId=kling123..." \
  -H "Authorization: Bearer $KIE_API_KEY"

Unique features:

• mode: "std" or "pro" (higher resolution)
• sound: Enable AI-generated sound effects
• multi_shots: Multi-shot sequences (1-12s each)
• kling_elements: Reference uploaded images/videos with @element_name
• duration: "3" to "15" seconds

See /data/workspace/skills/video-content/references/video-models.md for complete API reference (all 16 models).

Download Generated Videos

# Download from KIE result URL
wget -O video.mp4 "https://tempfile.aiquickdraw.com/v/..."

# Or with curl
curl -o video.mp4 "https://tempfile.aiquickdraw.com/v/..."

# Move to Remotion public/ folder for use
mv video.mp4 /data/workspace/remotion-studio/public/

Remotion Workflow

Directory Structure

/data/workspace/remotion-studio/
├── src/
│   ├── Root.tsx              # Register compositions here
│   ├── AtlasIntro.tsx        # Example: animated intro
│   ├── IntercutVideo.tsx     # Example: intercut AI clips
│   └── MyComposition.tsx     # Your compositions
├── public/                    # Put videos here
│   ├── clip1.mp4
│   ├── clip2.mp4
│   └── kie-generated.mp4
└── package.json

Create a Composition

See references/remotion-patterns.md for comprehensive patterns. Quick example:

// src/MyVideo.tsx
import {
  AbsoluteFill,
  Sequence,
  OffthreadVideo,
  staticFile,
  useCurrentFrame,
  interpolate,
} from "remotion";
import { z } from "zod";

export const mySchema = z.object({
  videoClip: z.string(),  // Filename in public/
  title: z.string()
});

export const MyVideo: React.FC<z.infer<typeof mySchema>> = ({
  videoClip,
  title
}) => {
  return (
    <AbsoluteFill style={{ background: "#000" }}>
      {/* Title card (0-2s) */}
      <Sequence from={0} durationInFrames={60}>
        <TitleCard text={title} />
      </Sequence>
      
      {/* AI video (2-7s) */}
      <Sequence from={60} durationInFrames={150}>
        <AbsoluteFill>
          <OffthreadVideo src={staticFile(videoClip)} />
        </AbsoluteFill>
      </Sequence>
    </AbsoluteFill>
  );
};

const TitleCard: React.FC<{ text: string }> = ({ text }) => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 15, 45, 60], [0, 1, 1, 0]);
  
  return (
    <AbsoluteFill style={{
      background: "linear-gradient(135deg, #667eea, #764ba2)",
      justifyContent: "center",
      alignItems: "center",
      opacity
    }}>
      <h1 style={{ fontSize: 100, color: "white" }}>{text}</h1>
    </AbsoluteFill>
  );
};

Register Composition

Add to src/Root.tsx:

import { MyVideo, mySchema } from "./MyVideo";

<Composition
  id="MyVideo"
  component={MyVideo}
  durationInFrames={210}  // 7 seconds at 30fps
  fps={30}
  width={1920}
  height={1080}
  schema={mySchema}
  defaultProps={{
    videoClip: "kie-clip.mp4",
    title: "AI Generated"
  }}
/>

Render

Use the provided script:

cd /data/workspace/skills/remotion-video
./scripts/render.sh MyVideo output.mp4

# Custom quality (default: 80)
./scripts/render.sh MyVideo output.mp4 90

# Or render directly with npx
cd /data/workspace/remotion-studio
npx remotion render MyVideo output.mp4 --quality=80

Script automatically:

• Renders composition
• Checks file size
• Compresses if >16MB (Discord/Telegram limit)
• Outputs both original and compressed versions

Common Patterns

Intercut Multiple AI Clips

<AbsoluteFill style={{ background: "#000" }}>
  <Sequence from={0} durationInFrames={150}>
    <OffthreadVideo src={staticFile("clip1.mp4")} />
  </Sequence>
  
  <Sequence from={150} durationInFrames={150}>
    <OffthreadVideo src={staticFile("clip2.mp4")} />
  </Sequence>
  
  <Sequence from={300} durationInFrames={150}>
    <OffthreadVideo src={staticFile("clip3.mp4")} />
  </Sequence>
</AbsoluteFill>

Add Lower Third Text Overlay

<Sequence from={60} durationInFrames={150}>
  <AbsoluteFill>
    <OffthreadVideo src={staticFile("video.mp4")} />
  </AbsoluteFill>
  
  {/* Overlay appears 1s into the clip */}
  <Sequence from={30}>
    <LowerThird text="🗺️ AI-powered second brain" />
  </Sequence>
</Sequence>

See references/remotion-patterns.md for LowerThird component and more patterns.

Transitions Between Clips

{/* Clip 1 */}
<Sequence from={0} durationInFrames={155}>
  <OffthreadVideo src={staticFile("clip1.mp4")} />
</Sequence>

{/* Transition overlay (overlaps by 5 frames each side) */}
<Sequence from={145} durationInFrames={10}>
  <GlitchTransition />
</Sequence>

{/* Clip 2 */}
<Sequence from={150} durationInFrames={150}>
  <OffthreadVideo src={staticFile("clip2.mp4")} />
</Sequence>

ffmpeg Compression Cheat Sheet

Quick compress (CRF 28, medium preset):

ffmpeg -i input.mp4 \
  -vcodec libx264 \
  -crf 28 \
  -preset medium \
  -movflags +faststart \
  output.mp4

Aggressive compress (target size):

# Calculate bitrate for 15MB target, 30s video:
# bitrate = (15 * 8192) / 30 = 4096 kbps

ffmpeg -i input.mp4 \
  -b:v 4096k \
  -maxrate 4096k \
  -bufsize 8192k \
  -vcodec libx264 \
  -preset medium \
  -movflags +faststart \
  output.mp4

Resize and compress (max 1920x1080):

ffmpeg -i input.mp4 \
  -vf "scale='min(1920,iw)':'min(1080,ih)':force_original_aspect_ratio=decrease" \
  -vcodec libx264 \
  -crf 28 \
  -preset medium \
  -movflags +faststart \
  output.mp4

CRF quality guide:

• 18-22 - Very high quality (large files)
• 23-26 - High quality (balanced)
• 28-32 - Good quality (smaller files) ← Default for auto-compress
• 33+ - Lower quality (very small)

Preset speed guide:

• ultrafast - Fastest encode, larger file
• fast - Quick encode, moderate file size
• medium - Balanced (default)
• slow - Better compression, slower
• veryslow - Best compression, very slow

Complete Example Workflow

# 1. Generate AI video with Veo Fast
curl -X POST https://api.kie.ai/api/v1/veo/generate \
  -H "Authorization: Bearer $KIE_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "model": "veo3_fast",
    "prompt": "Medium tracking shot. Entrepreneur walking through modern startup office. Confident stride, morning sunlight streaming through glass walls. Cinematic lighting, shallow depth of field, warm color grade.",
    "aspect_ratio": "16:9"
  }' | jq -r '.data.taskId'
# Returns: abc123def456

# 2. Wait ~85 seconds, check status
curl "https://api.kie.ai/api/v1/veo/record-info?taskId=abc123def456" \
  -H "Authorization: Bearer $KIE_API_KEY" \
  | jq -r '.data.response.resultUrls[0]'
# Returns: https://tempfile.aiquickdraw.com/v/xyz.mp4

# 3. Download video
wget -O startup-office.mp4 "https://tempfile.aiquickdraw.com/v/xyz.mp4"

# 4. Move to Remotion public folder
mv startup-office.mp4 /data/workspace/remotion-studio/public/

# 5. Edit composition (or use existing)
# src/MyVideo.tsx references staticFile("startup-office.mp4")

# 6. Render
cd /data/workspace/skills/remotion-video
./scripts/render.sh MyVideo final-video.mp4

# Output:
# ✅ Render complete!
# 📊 File size: 24MB
# ⚠️  File is larger than 16MB, compressing...
# ✅ Compressed version created: final-video_compressed.mp4
# 📊 Compressed size: 14MB

Tips & Gotchas

KIE API:

• Files stored for 14 days only - download immediately
• Rate limit: 20 requests per 10 seconds
• Poll status every 5-10 seconds (not faster)
• Veo includes audio by default (may be suppressed for sensitive content)
• Runway 1080p limited to 5s duration only

Remotion:

• Use <OffthreadVideo> not <Video> for performance
• Always use staticFile() for local videos in public/
• Frame math: durationInFrames = seconds × fps (typically fps=30)
• Sequences can overlap for transitions
• Use spring() for natural animations, interpolate() for controlled

Rendering:

• Quality 80 is good balance (default in render script)
• Auto-compress triggers at >16MB
• -movflags +faststart enables streaming playback
• Render locally first, then compress if needed

File Management:

• Put AI-generated videos in remotion-studio/public/
• Name files descriptively (office-walkthrough.mp4 not video1.mp4)
• Clean up old files from public/ periodically
• Compressed files have _compressed.mp4 suffix

References

• Prompting Guide: references/prompting-guide.md - Veo & Kling prompting best practices
• Remotion Patterns: references/remotion-patterns.md - Composition patterns, animations, overlays
• KIE Models: /data/workspace/skills/video-content/references/video-models.md - Complete API docs
• Existing Compositions: /data/workspace/remotion-studio/src/ - AtlasIntro, IntercutVideo examples
• Remotion Docs: https://www.remotion.dev/docs

Troubleshooting

"Invalid id value" from KIE API → Wrong taskId format or endpoint mismatch (Veo uses /veo/record-info, market models use /jobs/recordInfo)

"Insufficient credits" (402) → Top up KIE account at https://kie.ai/pricing

OffthreadVideo not found → Check file exists in public/ folder, use exact filename in staticFile()

Render takes forever → Lower quality (--quality=50), reduce particle counts, check for heavy computations per frame

Video too large → Run render.sh (auto-compresses >16MB), or manually compress with ffmpeg CRF 28-32

Aspect ratio mismatch → Check Composition width/height matches video aspect ratio, or use CSS object-fit: cover