swiftclip-remotion

SwiftClip

Production-ready Remotion video templates — built with React & TypeScript, styled with Apple Light Mode design.

SwiftClip is an open-source library of 30 copy-paste video composition templates. Instead of dragging keyframes in After Effects, you write React components. Every template is fully typed, zero-config, and renders to 4K MP4 in seconds.

🌐 Live site: swift-clip.vercel.app

---

✨ Features

• 30 production-ready templates — Marketing, Social, Data Viz, Broadcast, AI, and more
• Apple Light Mode design — consistent #f5f5f7 backgrounds, frosted glass cards, SF Pro typography
• Fully typed — every template written in TypeScript with React
• Frame-perfect animations — powered by useCurrentFrame(), interpolate(), and spring()
• 4K-ready — render at any resolution via --scale flag
• Zero dependencies† — only Remotion + React + lucide-react; no proprietary SDKs
• MIT licensed — use in personal and commercial projects

---

🗂 Template Library

#	Template	Tags	Resolution	Duration
1	Product Launch	Marketing, Branding	1920×1080	15s
2	Tutorial Intro	Tutorial, Education	1920×1080	8s
3	SaaS Promo	SaaS, Marketing	1920×1080	30s
4	Social Story	Social, Short-form	1080×1920	10s
5	Data Viz	Data, Business	1920×1080	20s
6	Lower Third	Broadcast, Motion	1920×1080	5s
7	Testimonial Card	Marketing, Social	1080×1080	8s
8	Countdown Timer	Events, Marketing	1920×1080	7s
9	Brand Reveal	Branding, Marketing	1920×1080	6s
10	Vertical Story	Social, Short-form	1080×1920	10s
11	End Screen	Marketing, Tutorial	1920×1080	7s
12	Metric Dashboard	Data, SaaS	1920×1080	8s
13	Typewriter Quote	Social, Motion	1920×1080	8s
14	Dynamic Island	Tech, Motion	1920×1080	5s
15	Pricing Card	SaaS, Marketing	1080×1080	8s
16	Bar Chart	Data, Business	1920×1080	8s
17	Split Reveal	Branding, Motion	1920×1080	6s
18	Event Promo	Events, Marketing	1920×1080	8s
19	Subscribe CTA	Marketing, Social	1920×1080	6s
20	News Breaking	Broadcast, Motion	1920×1080	10s
21	Minimal Title	Motion, Branding	1920×1080	5s
22	Gradient Reveal	Branding, Motion	1920×1080	6s
23	Team Grid	Business, Marketing	1920×1080	8s
24	Quote Story	Social, Short-form	1080×1920	8s
25	Timeline	Business, Tutorial	1920×1080	9s
26	Web Promo	Marketing, SaaS	1920×1080	10s
27	Celebration Burst	Events, Social	1080×1080	6s
28	Code Reveal	Developer, Tutorial	1920×1080	10s
29	Product Card	eCommerce, Marketing	1080×1080	6s
30	AI Generation	AI, Tech, SaaS	1920×1080	8s

Browse and preview all templates at the live site.

---

🚀 Quick Start

Prerequisites

Requirement	Version
Node.js	v16+ (v18+ recommended)
npm / yarn / pnpm / bun	any
Remotion project	required

Chrome and FFmpeg are automatically downloaded by Remotion — no global installation needed. SwiftClip templates and the Claude marketplace workflow assume you are already inside a Remotion project with remotion installed and a remotion/Root.tsx entry file available.

1. Scaffold a Remotion project

npx create-video@latest
cd my-video-project

2. Copy a template

Browse the Template Library and copy any .tsx file into your remotion/ folder.

3. Register it in remotion/Root.tsx

import { Composition } from 'remotion';
import { ProductLaunch } from './ProductLaunch';

export const RemotionRoot = () => (
  <Composition
    id="ProductLaunch"
    component={ProductLaunch}
    durationInFrames={450}   // 15 s at 30 fps
    fps={30}
    width={1920}
    height={1080}
    defaultProps={{
      title: 'My Product',
      subtitle: 'Ship faster with SwiftClip',
    }}
  />
);

4. Preview in Remotion Studio

npm run dev
# Open http://localhost:3000

5. Render to MP4

npx remotion render remotion/index.tsx ProductLaunch output.mp4

---

Claude Code Marketplace

SwiftClip also ships as a Claude Code marketplace plus plugin for Remotion planning and generation workflows.

What it does:

• aligns the video brief before code generation
• recommends the best internal Remotion base template
• outputs a machine-readable preflight JSON plus storyboard beats
• generates a derivative component and registers it in remotion/Root.tsx

Claude prerequisites

Before enabling the SwiftClip Claude workflow, make sure you already have: