Substack to Remotion

A Claude Code skill that scrapes Substack articles with images in-context, follows links for additional visualizations, and outputs Remotion-ready JSON for video generation.

Features

• Context-Aware Scraping: Extracts article content with images positioned exactly where they appear in the article
• Link Following: Crawls linked pages to find charts, graphs, and data visualizations
• Remotion-Ready Output: Generates JSON structured as video scenes with duration hints
• Image Downloading: Downloads all images locally with proper organization

Installation

As a Claude Code Skill

npx skills add philmade/substack-to-remotion

Manual Installation

git clone https://github.com/philmade/substack-to-remotion.git
cd substack-to-remotion
pip install -r requirements.txt
playwright install chromium

Usage

Basic Usage

python3 scripts/scraper.py "https://example.substack.com/p/article-name" ./output/

With More Link Following

python3 scripts/scraper.py "https://example.substack.com/p/article-name" ./output/ --max-links 10

Without Link Following

python3 scripts/scraper.py "https://example.substack.com/p/article-name" ./output/ --no-links

Output Structure

output/
├── remotion-scenes.json      # Main Remotion input file
├── article-data.json         # Full extracted article data
├── article-summary.md        # Human-readable summary
├── linked-sources.json       # Data from followed links
└── images/
    ├── article-000-*.png     # Images from the article
    └── linked/               # Images from followed links

Remotion Integration

Copy the templates/ArticleVideo.tsx to your Remotion project and import the scraped JSON:

import sceneData from './scraped-article/remotion-scenes.json';
import { ArticleVideo } from './ArticleVideo';

// In your Root.tsx
<Composition
  id="ArticleVideo"
  component={ArticleVideo}
  durationInFrames={sceneData.totalDuration * 30}
  fps={30}
  width={1920}
  height={1080}
/>

Scene Types

Type	Description
title	Opening title card with article name and author
section-header	Section heading transition
image-with-context	Image with surrounding paragraph text
narration	Text-only content for voiceover
quote	Blockquote highlight
list	Bullet or numbered list
linked-source	Visualization from external link

Requirements

• Python 3.9+
• Playwright
• aiohttp

License

MIT

Author

Phil Harper