System Architecture
Frontend (React)
→
Backend API (Node.js)
→
Video Pipeline (Python)
→
After Effects
1. Video Ingestion & Scraping
Multi-source support for 1000+ sites via yt-dlp, Puppeteer for dynamic content.
class VideoIngestionService {
async ingestVideo(sourceUrl) {
const sourceType = this.detectSourceType(sourceUrl);
// youtube, vimeo, tiktok, instagram, twitter, direct
const videoPath = await this.download(sourceUrl);
return { jobId, videoPath, sourceType };
}
}
2. Video Analysis & Asset Extraction
- Scene Detection: PySceneDetect with ContentDetector algorithm
- Audio Extraction: FFmpeg + Demucs for stem separation (vocals/music)
- Frame Extraction: OpenCV for key frames from each scene
- Metadata: FFprobe for resolution, FPS, codec, duration
3. After Effects Project Structure
Project_{JOB_ID}/
├── _Compositions/
│ ├── MAIN_COMP
│ └── Precomps/Scene_01, Scene_02...
├── Footage/Video/
├── Audio/Stems/
└── Assets/
4. After Effects Automation (ExtendScript)
Generated .jsx script automatically:
- Creates folder structure in Project panel
- Imports all footage
- Creates pre-compositions for each detected scene
- Builds main composition with chronological layer arrangement
- Adds null objects and adjustment layers
5. Tech Stack Recommendation
| Frontend | React 18, TypeScript, Tailwind CSS, React Dropzone |
| Backend | Node.js, Express, Socket.io, Bull Queue |
| Video Processing | Python, FFmpeg, PySceneDetect, OpenCV, Demucs |
| Storage | MinIO/S3, Redis, PostgreSQL |
| AE Integration | ExtendScript (.jsx), JSON Schema |
API Endpoints
POST /api/videos/import — Import video from URL
GET /api/videos/:id/status — Check processing status
GET /api/videos/:id/analysis — Get analysis results
POST /api/videos/:id/generate — Generate AE project
GET /api/videos/:id/download — Download project ZIP
Workflow
User submits URL → Download (yt-dlp/Puppeteer) → Analyze (FFmpeg/PySceneDetect) → Generate (JSON/JSX) → Package → Download ZIP