Demo

https://github.com/user-attachments/assets/464622be-c855-42c6-bc9e-988350906d92

Features

• Multiple Scene Types

  • stack - Card stack display with entrance animation
  • focus - Extract and zoom into a specific page with scroll support
  • switch - Smooth page transitions with slide animations
  • fan - Fan/wheel layout with rotation and focus effects

• Smart Animations

  • Natural card spread when focusing (like poker cards)
  • Breathing effect before scrolling
  • Bounce effect at scroll stop
  • Collapse animation for seamless scene transitions

• Title System

  • Main title + subtitle at opening
  • Persistent corner title during page viewing
  • Per-page custom titles

• Bottom Info Bar

  • Scene title with typing effect for descriptions
  • Progress indicator (1/5 format)
  • Customizable per-page descriptions

• Ending Scene

  • PDF stack moves to left with staggered cards
  • "Thank you" message with title on right
  • Animated decoration line

• Dynamic Duration

  • Auto-calculates video length from script configuration

• Background Music

  • Auto fade-in/fade-out (2 seconds each)
  • Duration matches video length automatically

• High Quality Rendering

  • Focus pages render at 2x resolution for sharp zoom

Quick Start

Installation

npm install

Add Your Files

Place your PDF and background music in the public/ folder:

# PDF document
cp /path/to/your/document.pdf public/sample.pdf

# Background music (optional)
cp /path/to/your/music.mp3 public/background.mp3

Development Preview

npm run dev

# Preview with custom props
npx remotion preview --props=./props/example.json

Render Video

npm run build

# Render with custom props
npx remotion render PdfShowcase out/example.mp4 --props=./props/example.json

Configuration

Basic Props

{
  src: "/sample.pdf",           // PDF file path (in public folder)
  title: "Document Title",       // Main title
  subtitle: "Subtitle",          // Optional subtitle
  highlights: [1, 3, 5],        // Pages to showcase
  pageTitles: {                 // Per-page titles
    "1": "Cover",
    "3": "Key Points",
    "5": "Summary",
  },
  pageDescriptions: {           // Per-page descriptions (typing effect)
    "1": "Introduction to the document...",
    "3": "The core findings are...",
    "5": "In conclusion...",
  },
}

Custom Script

Full control over the presentation flow:

{
  src: "/sample.pdf",
  title: "Custom Flow",
  script: [
    { type: "stack", duration: 60 },            // Stack display
    { type: "focus", page: 1, duration: 120 },  // Focus page 1
    { type: "switch", page: 3, duration: 120 }, // Switch to page 3
    { type: "fan", page: 5, duration: 150 },    // Fan mode for page 5
    { type: "stack", duration: 120 },           // Ending stack
  ],
}

Script Item Types

Example Configurations

Standard Mode

{
  "src": "/sample.pdf",
  "title": "Technical Report",
  "subtitle": "Key Insights",
  "highlights": [1, 3, 9, 14, 20],
  "pageTitles": {
    "1": "Abstract",
    "3": "Architecture",
    "9": "Training",
    "14": "Results",
    "20": "Conclusion"
  },
  "pageDescriptions": {
    "1": "Overview of the technical approach...",
    "3": "The system architecture consists of...",
    "9": "Training process involves...",
    "14": "Benchmark results show...",
    "20": "Key takeaways include..."
  }
}

Fan Mode

{
  "src": "/sample.pdf",
  "title": "Technical Report",
  "subtitle": "Key Insights",
  "script": [
    { "type": "stack", "duration": 60 },
    { "type": "fan", "page": 1, "duration": 150 },
    { "type": "fan", "page": 3, "duration": 150 },
    { "type": "fan", "page": 9, "duration": 150 },
    { "type": "stack", "duration": 120 }
  ]
}

Claude Code Skill

This project includes a Claude Code skill (.claude/skills/pdf-to-video/) for automated PDF to video conversion.

Setup

The skill is already in the correct location. If you want to use it globally, copy to yo

...