Building a Taiwan Stock Market Explainer Video with Remotion + Claude Code

What if you could generate a professional 56-second financial explainer video — with animated candlestick charts, synchronized narration, and bilingual subtitles — entirely through a conversation with an AI coding assistant?

That’s exactly what we did. In this post, I’ll walk through how we used Remotion (a React-based video framework) together with Claude Code (Anthropic’s CLI coding agent) and Bun to produce an educational video about the Taiwan stock market — from zero to final MP4.

The Tech Stack

Tool	Role
Remotion v4	React-based video rendering framework
Claude Code	AI pair programmer — wrote all the code via conversation
Bun	Fast JavaScript runtime (replaces Node.js)
React 18 + TypeScript	Component architecture for video scenes
Gemini TTS API	Traditional Chinese narration generation
FFmpeg	Final MP4 encoding (1920x1080 @ 30fps)

The Workflow: Conversation-Driven Video Development

The entire project was built through a conversation with Claude Code. No manual coding — just describing what we wanted, scene by scene.

graph LR
    A[Describe Scene<br/>in Natural Language] --> B[Claude Code<br/>Generates React Component]
    B --> C[Preview in<br/>Remotion Studio]
    C --> D{Looks Good?}
    D -->|No| A
    D -->|Yes| E[Generate TTS<br/>Narration via Gemini]
    E --> F[Sync Audio<br/>with Scenes]
    F --> G[Render to MP4<br/>via FFmpeg]

    style A fill:#e1f5fe
    style B fill:#f3e5f5
    style G fill:#e8f5e9

Here’s how the loop worked:

1. Describe what the scene should show (e.g., “animate a candlestick chart with staggered candle reveals”)
2. Claude Code generates the React component using Remotion’s useCurrentFrame() and interpolate() APIs
3. Preview in Remotion Studio (bun start)
4. Iterate — adjust timing, colors, easing via natural language feedback
5. Generate narration using Gemini TTS in Traditional Chinese
6. Sync audio — each scene is exactly 240 frames (8 seconds), matched to its audio track
7. Render the final MP4 with bun run build

Project Structure

The video is organized as a monorepo with shared components:

apps/taiwan-stock-market/
├── src/
│   ├── Root.tsx              # Composition declaration (1680 frames)
│   ├── TaiwanStockMarket.tsx # Main composition — 7 scenes
│   └── scenes/
│       ├── TitleScene.tsx            # Opening with bull/bear icon
│       ├── KLineScene.tsx            # Candlestick fundamentals
│       ├── PriceVolumeScene.tsx      # Price-volume analysis
│       ├── SupportResistanceScene.tsx # Support & resistance levels
│       ├── MovingAverageScene.tsx    # MA crossover signals
│       ├── TradingHoursScene.tsx     # TWSE trading hours
│       └── LimitScene.tsx            # Daily price limits (±10%)
├── scripts/
│   ├── narration.ts          # Chinese narration scripts
│   └── generate-tts.ts       # Gemini TTS integration
└── public/audio/             # Generated audio files

Seven Scenes, Seven Concepts

The video covers six core Taiwan stock market concepts plus an intro:

Scene 1: Title (0:00-0:08)

Animated opening with a bull/bear icon and the video title in Traditional Chinese.

Scene 2: K-Line Basics (0:08-0:16)

// Each candle reveals with a stagger effect — 4 frames apart
candles.map((candle, i) => (
  <Candle
    key={i}
    data={candle}
    delay={i * 4}  // staggered reveal
    color={candle.close > candle.open ? "#EF5350" : "#26A69A"}
  />
))

Red = up, green = down — following Taiwan market conventions. Candles appear one by one with smooth reveal animations.

Scene 3: Price-Volume Relationship (0:16-0:24)

Demonstrates key signals:

• Price up + Volume up = strong bullish signal
• Price down + Volume down = bearish confirmation

Animated bar charts appear alongside price movements.

Scene 4: Support & Resistance (0:24-0:32)

Visual explanation of how price levels act as floors (support) and ceilings (resistance), including the concept of role reversal when levels break.

Scene 5: Moving Average System (0:32-0:40)

Shows MA5/MA10 crossover signals — the golden cross (bullish) and death cross (bearish) — with animated line charts.

Scene 6: TWSE Trading Hours (0:40-0:48)

A timeline visualization of the Taiwan Stock Exchange trading day:

• Pre-market: 08:30-09:00
• Regular session: 09:00-13:30
• Post-market: 13:30-14:30 (odd-lot only)

Scene 7: Price Limits (0:48-0:56)

Explains Taiwan’s daily price limit system with a visual gauge animation.

Key Technical Details

Animation with Remotion’s interpolate()

Remotion makes frame-based animation declarative. Here’s the pattern used throughout:

const frame = useCurrentFrame();

// Fade text in over 20 frames with a slight upward slide
const opacity = interpolate(frame, [0, 20], [0, 1], {
  extrapolateRight: "clamp",
});
const translateY = interpolate(frame, [0, 20], [20, 0], {
  extrapolateRight: "clamp",
});

This gives us smooth, easing-based animations that are perfectly deterministic — the same input always produces the same output frame.

Synchronized Audio

Each scene is exactly 240 frames (8 seconds at 30fps). The narration scripts were written first, then Gemini TTS generated audio files to match. Remotion’s <Audio> component places each track precisely:

<Sequence from={0} durationInFrames={240}>
  <Audio src={titleAudio} />
  <TitleScene />
</Sequence>
<Sequence from={240} durationInFrames={240}>
  <Audio src={klineAudio} />
  <KLineScene />
</Sequence>

Gemini TTS Integration

The narration was generated using Google’s Gemini API:

// scripts/generate-tts.ts
const response = await gemini.models.generateContent({
  model: "gemini-2.5-flash-preview-tts",
  contents: [{ parts: [{ text: narrationScript }] }],
});
// Save generated audio to public/audio/

Why This Matters

This project demonstrates something powerful: AI-assisted creative workflows. The entire video — from concept to final render — was produced through natural language conversation. No video editing software. No timeline scrubbing. Just describe, generate, preview, iterate.

The combination of Remotion (deterministic, code-based video) + Claude Code (conversational code generation) + Bun (fast iteration) creates a workflow where:

• Iteration speed is measured in seconds, not minutes
• Changes are version-controlled (it’s just code)
• Reusability is built-in (shared components like <CandleChart>)
• Reproducibility is guaranteed (same code = same video)

Try It Yourself

The project is open source at github.com/ziyu4huang/bun_remotion.

git clone https://github.com/ziyu4huang/bun_remotion.git
cd bun_remotion
bun install
bun start:stock        # Preview in Remotion Studio
bun run build:stock    # Render to MP4

Lessons Learned

1. Frame-based thinking — Designing animations in terms of frames (not seconds) gives you precise control and makes syncing trivial
2. Component architecture scales — Each scene as a React component means you can independently develop, test, and reorder scenes
3. AI conversation = rapid prototyping — What would take hours in After Effects takes minutes when you can describe what you want in natural language
4. TTS sync is the hardest part — Matching generated speech to fixed-duration scenes required careful script tuning
5. Deterministic rendering is a superpower — No more “it looked different when I exported it”

---

Built with Remotion, Claude Code, and Bun. Source code available on GitHub.