Website to Video Generator#

Turn any website into a 60-second promotional video with animations, Chinese narration, subtitles, and free BGM.

When to Use#

• User provides a website URL and wants a video
• Creating brand/promotional videos from web content
• Need tech-style animated videos with narration
• Any request mentioning "网站生成视频", "promo video", "宣传视频", " Remotion video from URL"

Workflow#

Step 1: Scrape Website Content#

bash

# Extract website content
python3 /root/.openclaw/workspace/scripts/smart_search.py "site:example.com" --max-results 5

Or use web_fetch tool to get the homepage content. Extract:

• Brand name
• Tagline / slogan
• Core services/products (3-5 items)
• Key statistics (users, projects, languages, etc.)
• Target audience
• CTA (call to action)

Step 2: Extract Brand Colors#

bash

curl -sL https://example.com | grep -oE '(#[0-9a-fA-F]{3,8}|rgb\([^)]+\))' | sort | uniq -c | sort -rn | head -10

Identify:

• Primary color: Most frequent hex (CTA buttons, highlights)
• Background color: Dark theme usually #1a1a2e or #0a0a0f
• Secondary/Accent: Second most frequent
• Text colors: White #fff or light gray

Step 3: Create Remotion Project#

bash

mkdir -p remotion-{brand}-promo/{src,audio,out}
cd remotion-{brand}-promo
npm init -y
npm install remotion @remotion/cli react react-dom
npm install -D typescript @types/react

Create files:

• src/index.tsx - Composition registration
• src/{Brand}Promo.tsx - Main video component
• remotion.config.ts - Config
• audio/narration.txt - Script for TTS

Step 4: Write Narration Script#

Create audio/narration.txt with 5 segments (12s each = 60s total):

text

Segment 1: [Brand] introduction + tagline
Segment 2: Vision / core value proposition
Segment 3: Key services/products (3 items)
Segment 4: Trust signals / statistics
Segment 5: CTA + website URL

Step 5: Generate TTS Audio#

Use tts tool to generate Chinese narration for each segment. Then concatenate:

bash

# If multiple TTS files
ffmpeg -i "concat:audio/part1.mp3|audio/part2.mp3|audio/part3.mp3|audio/part4.mp3|audio/part5.mp3" -acodec copy audio/narration.mp3

Step 6: Download Free BGM#

Get free tech-style background music from Pixabay:

bash

cd audio
curl -L -o bgm.mp3 "https://cdn.pixabay.com/download/audio/2022/05/27/audio_1808fbf07a.mp3?filename=electronic-future-beats-117998.mp3" -H "User-Agent: Mozilla/5.0"

Volume: 0.15 (very subtle, don't overpower narration)

Step 7: Build React Animation Component#

Follow these design rules:

A. Safe Area Layout

typescript

const SAFE_AREA = {
  subtitleHeight: 60,
  subtitleBottom: 8,
};

• Core content: paddingBottom: 80 (stays above subtitle zone)
• Subtitle: bottom: 8, font-size 22px
• Never let content overlap subtitle area

B. Subtitle Component

typescript

const Subtitle = ({ text, active }: { text: string; active: boolean }) => {
  const frame = useCurrentFrame();
  const opacity = active
    ? interpolate(frame, [0, 8], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' })
    : interpolate(frame, [0, 8], [1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });

  return (
    <div style={{
      position: 'absolute',
      bottom: 8,
      left: 0,
      right: 0,
      textAlign: 'center',
      opacity,
      zIndex: 100,
    }}>
      <div style={{
        display: 'inline-block',
        padding: '6px 20px',
        background: 'rgba(0,0,0,0.75)',
        backdropFilter: 'blur(8px)',
        borderRadius: 8,
        border: `1px solid ${COLORS.primary}25`,
      }}>
        <span style={{ fontSize: 22, color: COLORS.text }}>{text}</span>
      </div>
    </div>
  );
};

C. Use SVG Vector Icons (NOT emoji)

Create SVG icon components inline:

typescript

const IconRocket = ({ size = 40, color = COLORS.primary }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2">
    <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" />
    <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" />
  </svg>
);

Required icons: Eye, Rocket, Book, Target, Wrench, Palette, Monitor, Globe, Arrow

D. Decorative Shapes

Add rotating geometric decorations:

typescript

const DecoShapes = () => {
  const frame = useCurrentFrame();
  return (
    <>
      <div style={{ position: 'absolute', top: '8%', left: '5%', opacity: 0.15, transform: `rotate(${frame * 0.3}deg)` }}>
        <svg width="60" height="60"><polygon points="30,5 55,17.5 55,42.5 30,55 5,42.5 5,17.5" fill="none" stroke={COLORS.primary} strokeWidth="1.5" /></svg>
      </div>
    </>
  );
};

E. Lightning Number Animation

Numbers must complete within 0.5 seconds (12 frames @ 24fps):

typescript

const studentCount = Math.floor(interpolate(frame, [0, 12], [0, 1200], { extrapolateRight: 'clamp' }));

F. 5-Scene Structure

SceneTimeContent10-12sLogo + brand + tagline212-24sVision (before → after comparison)324-36s3 core services with icons436-48sStats with lightning numbers + tags548-60sCTA button + website URL

Each scene: durationInFrames={288} (12s @ 24fps) Total: 1440 frames = 60s

Step 8: VPS-Optimized Rendering#

CRITICAL: VPS has limited RAM. Use these settings:

typescript

// src/index.tsx
<Composition
  id="promo"
  component={Promo}
  durationInFrames={1440}
  fps={24}
  width={854}
  height={480}
/>

Render command:

bash

npx remotion render src/index.tsx promo out/video.mp4 --overwrite --concurrency=1

Why these settings:

• 854×480: Low-res but clear enough for mobile/social media
• 24fps: Smooth enough, saves 20% frames vs 30fps
• concurrency=1: Prevents OOM kills
• Higher resolutions WILL fail (1280×720 @ 30fps = SIGKILL at ~80%)

Step 9: Generate Screenshots for Review#

Before full render, generate keyframe screenshots:

bash

npx remotion still src/index.tsx promo stills/scene1.png --frame=144
npx remotion still src/index.tsx promo stills/scene2.png --frame=432
npx remotion still src/index.tsx promo stills/scene3.png --frame=720
npx remotion still src/index.tsx promo stills/scene4.png --frame=1008
npx remotion still src/index.tsx promo stills/scene5.png --frame=1296

Send to user for approval before final render.

Color Palette Template#

typescript

const COLORS = {
  background: '#1a1a2e',    // Extract from website or use dark
  primary: '#ff6b35',        // Website main CTA color
  secondary: '#2ec4b6',      // Accent color
  accent: '#ff6b35',
  text: '#ffffff',
  textMuted: '#999999',
  darkCard: 'rgba(255,255,255,0.06)',
};

Key Constraints#

1. VPS Resource Limits: 854×480 @ 24fps is the safe maximum
2. Subtitle Safe Zone: Bottom 12% of frame reserved for subtitles
3. SVG Icons Only: No emoji — use inline SVG components
4. Brand Colors: Extract from website, don't guess
5. Free BGM: Always use royalty-free music (Pixabay)
6. Chinese Narration: TTS for all segments, synchronized with subtitles
7. 5-Scene Structure: Don't deviate — 12s × 5 = 60s

Output#

• out/video.mp4 - Final video (~6MB for 60s)
• stills/ - 5 keyframe screenshots for review
• Full Remotion project for future edits

Troubleshooting#

ProblemCauseFixSIGKILL during renderOOM (memory)Lower resolution/fps, use concurrency=1"setup-cache.js" errorChrome headless issueRe-run, or delete node_modules/.cacheSubtitle overlaps contentContent too lowAdd paddingBottom: 80 to content containerEmoji render as boxesSystem font missingUse inline SVG icons insteadBGM too loudVolume too highSet Audio volume={0.15}TTS audio cut offDuration mismatchExtend segment or trim TTS