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

🎬 Sister project — SwiftMographer: Turn rough motion ideas into high-quality Markdown storyboard handoffs for Remotion and HyperFrames, powered by Claude Code and Codex. 👉 github.com/zz41354899/SwiftMographer

• 32 production-ready templates — Marketing, Social, Data Viz, Broadcast, AI, Retro, 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

Browse and preview all templates at the live site.

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.

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

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

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',
    }}
  />
);

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

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

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

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

• a Claude Code environment with /plugin support
• an existing Remotion project
• remotion installed in package.json
• remotion/Root.tsx in the target workspace

If you do not have a Remotion project yet, run:

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

Then enable the SwiftClip workflow inside that project.

Add the marketplace:

/plugin marketplace add zz41354899/SwiftClip

Install the plugin:

/plugin install swiftclip-remotion@swiftclip-tools

If you prefer the CLI form:

claude plugin marketplace add zz41354899/SwiftClip
claude plugin install swiftclip-remotion@swiftclip-tools --scope project

After installation, reload plugins:

/reload-plugins

This repository already includes project-scoped marketplace wiring in .claude/settings.json:

• marketplace name: swiftclip-tools
• plugin id: swiftclip-remotion
• source: GitHub repository zz41354899/SwiftClip

That means collaborators can clone the repo, trust the folder in Claude Code, and install the shared plugin from the configured project settings.

The current distribution model is a GitHub-backed third-party marketplace.

• Push changes to this repository.
• Users run /plugin marketplace update swiftclip-tools to refresh the marketplace.
• Users run /plugin update swiftclip-remotion@swiftclip-tools to pull the latest plugin version.
• Because the plugin currently does not declare an explicit version, Claude Code uses the git commit SHA as the version key.

This commit-SHA versioning model is useful while the plugin is still evolving quickly.

npx create-video@latest
cd my-video-project
claude plugin marketplace add zz41354899/SwiftClip
claude plugin install swiftclip-remotion@swiftclip-tools --scope project

Then in Claude Code:

/reload-plugins

SwiftClip also includes a Codex-compatible plugin manifest and repo marketplace.

The Codex layer uses the same shared workflow contract as the Claude Code version:

• the same plugin id: swiftclip-remotion
• the same marketplace id: swiftclip-tools
• the same skill and agent naming
• the same preflight JSON + storyboard beats output contract
• the same expectation that the workflow creates a derivative component and registers it in remotion/Root.tsx

Before enabling the Codex workflow, make sure you already have:

• a Codex environment with plugin support
• an existing Remotion project
• remotion installed in package.json
• remotion/Root.tsx in the target workspace

If you do not have a Remotion project yet, run:

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

codex plugin marketplace add zz41354899/SwiftClip

Advanced install with sparse checkout:

codex plugin marketplace add zz41354899/SwiftClip --sparse .agents/plugins --sparse .codex-plugin --sparse plugins

This repository includes:

• repo marketplace: .agents/plugins/marketplace.json
• plugin manifest: .codex-plugin/plugin.json

After adding the marketplace, restart Codex and install swiftclip-remotion from the swiftclip-tools marketplace.

Use this checklist before submitting SwiftClip to the official Anthropic marketplace.

• Replace the placeholder live-site note with the final public homepage URL.
• Add a dedicated plugin homepage or docs page that explains what swiftclip-remotion does.
• Add a real LICENSE file at the repository root. The README says MIT, but the repository should include the actual license text.
• Add repository metadata that matches the public listing you want users to see.
• Confirm marketplace and plugin names stay stable: swiftclip-tools and swiftclip-remotion.

• Decide whether to keep commit-SHA versioning for rapid iteration or switch to explicit semver for public releases.
• If switching to semver, add version to plugins/swiftclip-remotion/.claude-plugin/plugin.json and bump it on every release.
• Do not define conflicting versions in both plugin.json and the marketplace entry unless you intend plugin.json to win.
• Add a CHANGELOG.md if you want clearer public release notes.

• Run claude plugin validate . once the Claude CLI is installed.
• Verify .claude-plugin/marketplace.json loads correctly from GitHub.
• Verify plugins/swiftclip-remotion/.claude-plugin/plugin.json is valid.
• Verify the skill, builder, and hook files load without frontmatter or JSON errors.
• Test a full local install with /plugin marketplace add ./path/to/repo and /plugin install swiftclip-remotion@swiftclip-tools.
• Test a full GitHub install with zz41354899/SwiftClip as the marketplace source.

• Keep the exact install commands in this README up to date.
• Document the Remotion prerequisite clearly so users know this does not replace npx create-video@latest.
• Document the expected output: preflight JSON, storyboard beats, generated component, and Root.tsx registration.
• Include /reload-plugins in the usage flow so users know how to activate updates immediately.

• Submit through Claude.ai: https://claude.ai/settings/plugins/submit
• Or submit through Console: https://platform.claude.com/plugins/submit
• Prepare a short listing description, install instructions, homepage URL, and support contact before submitting.
• Confirm the repository is public, or that reviewers can access it.

Use this draft in the official marketplace submission form:

SwiftClip Remotion is a Claude Code plugin and GitHub-backed marketplace for planning and generating Remotion video compositions. It helps users align a video brief, recommend the best internal base template, produce a machine-readable preflight JSON and storyboard beats, then generate a derivative component and register it in remotion/Root.tsx. The plugin is designed for teams already working inside a Remotion project who want a structured workflow for template selection, brief confirmation, and composition generation.

Suggested homepage URL:

• https://swift-clip.vercel.app/

Suggested repository URL:

• https://github.com/zz41354899/SwiftClip

Suggested install commands:

/plugin marketplace add zz41354899/SwiftClip
/plugin install swiftclip-remotion@swiftclip-tools
/reload-plugins

# High-quality H.264 (default)
npx remotion render remotion/index.tsx ProductLaunch output.mp4

# 4K upscale
npx remotion render remotion/index.tsx ProductLaunch output-4k.mp4 --scale=2

# Fast parallel render (8 threads)
npx remotion render remotion/index.tsx ProductLaunch output.mp4 --concurrency=8

# Export as GIF
npx remotion render remotion/index.tsx ProductLaunch output.gif --codec=gif

# ProRes for post-production
npx remotion render remotion/index.tsx ProductLaunch output.mov --codec=prores

# Serverless via Lambda
npx remotion lambda render remotion/index.tsx ProductLaunch --region=us-east-1

swiftclip/
├── app/                    # Next.js App Router (website)
│   ├── page.tsx            # Homepage
│   ├── templates/          # Template browser & detail pages
│   ├── docs/               # Documentation
│   ├── community/          # Community page
│   ├── privacy/            # Privacy Policy
│   └── terms/              # Terms of Service
├── components/             # Shared UI components
│   ├── Navbar.tsx
│   ├── Footer.tsx
│   ├── HeroSection.tsx
│   └── ...
├── remotion/               # 📦 Video templates (the main product)
│   ├── Root.tsx            # Composition registry
│   ├── index.tsx           # Entry point
│   ├── ProductLaunch.tsx
│   ├── AiAnimation.tsx     # Siri-style AI animation
│   └── ... (30 templates total)
├── lib/
│   └── templates.ts        # Template metadata (no embedded code)
└── public/
    ├── videos/             # Rendered preview MP4s (30 files)
    └── thumbnails/         # Extracted JPG thumbnails (30 files)

# Install dependencies
npm install

# Start the website (Next.js dev server)
npm run dev

# Open Remotion Studio for composition preview / render debugging
npx remotion studio

# Build for production
npm run build

This repository uses one shared Tailwind source for both the website and Remotion compositions:

• website styles live in app/globals.css
• remotion/Root.tsx imports that shared stylesheet
• remotion.config.ts enables the official @remotion/tailwind bundler integration

If you add new utility classes in remotion/*.tsx, you do not need a separate generated CSS file. Just update the component and restart Remotion Studio if the bundle cache is stale.

• npm run dev starts Next.js, not Remotion Studio
• npx remotion studio is the correct preview environment for composition work
• template thumbnails are served from public/thumbnails/<template-id>.jpg
• AppleMovie uses public/desktop.png as its wallpaper asset to avoid browser decode issues with JPEGs in the preview/render pipeline

Every template accepts typed props. Example with ProductLaunch:

// All props are optional — sensible defaults are provided
interface ProductLaunchProps {
  title?: string;        // Main headline
  subtitle?: string;     // Supporting text
  accentColor?: string;  // Hex colour for accents
  logoUrl?: string;      // URL to your logo image
}

Pass values via defaultProps in Root.tsx or at render time with --props:

npx remotion render remotion/index.tsx ProductLaunch output.mp4 \
  --props='{"title":"Acme 3.0","subtitle":"The fastest tool on earth"}'

Contributions are welcome! Here's how:

1. Fork this repository
2. Clone your fork: git clone https://github.com/zz41354899/SwiftClip
3. Create a branch: git checkout -b feat/my-template
4. Add your template to remotion/ — follow the naming and prop conventions of existing templates
5. Register it in remotion/Root.tsx and add metadata to lib/templates.ts
6. Open a Pull Request with a short description and a rendered preview

• File name: PascalCase.tsx matching the composition id
• All props should be optional with sensible defaults
• Use useCurrentFrame() + interpolate() — avoid setTimeout or imperative logic
• Keep animation logic co-located in a single file (no external style sheets)

MIT © SwiftClip contributors

This project is free to use in personal and commercial projects. Attribution is appreciated but not required.

Note on Remotion licensing: Remotion itself is free for individuals and small studios. Companies with more than 3 people must purchase a Remotion company license. SwiftClip templates are MIT licensed regardless of the Remotion license tier.

• 📖 Remotion Docs
• 💬 Community (LINE)
• 🐛 Report an Issue
• ✨ Request a Template