[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81472":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":15,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":23,"readmeContent":24,"aiSummary":25,"trendingCount":16,"starSnapshotCount":16,"syncStatus":13,"lastSyncTime":26,"discoverSource":27},81472,"SwiftClip","zz41354899\u002FSwiftClip","zz41354899","Production-ready Remotion templates and Claude Code workflow for storyboard-driven video generation.","https:\u002F\u002Fswift-clip.vercel.app",null,"TypeScript",36,2,30,1,0,41.53,"MIT License",false,"main",true,[],"2026-08-01 04:01:32","# SwiftClip\n\n> Production-ready [Remotion](https:\u002F\u002Fremotion.dev) video templates — built with React & TypeScript, styled with Apple Light Mode design.\n\nSwiftClip 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.\n\n🌐 **Live site:** [swift-clip.vercel.app](https:\u002F\u002Fswift-clip.vercel.app)\n\n> 🎬 **Sister project — SwiftMographer:** Turn rough motion ideas into high-quality Markdown storyboard handoffs for Remotion and HyperFrames, powered by Claude Code and Codex.\n> 👉 [github.com\u002Fzz41354899\u002FSwiftMographer](https:\u002F\u002Fgithub.com\u002Fzz41354899\u002FSwiftMographer\u002Ftree\u002Fmain)\n\n---\n\n## ✨ Features\n\n- **32 production-ready templates** — Marketing, Social, Data Viz, Broadcast, AI, Retro, and more\n- **Apple Light Mode design** — consistent `#f5f5f7` backgrounds, frosted glass cards, SF Pro typography\n- **Fully typed** — every template written in TypeScript with React\n- **Frame-perfect animations** — powered by `useCurrentFrame()`, `interpolate()`, and `spring()`\n- **4K-ready** — render at any resolution via `--scale` flag\n- **Zero dependencies†** — only Remotion + React + lucide-react; no proprietary SDKs\n- **MIT licensed** — use in personal and commercial projects\n\n---\n\n## 🗂 Template Library\n\n| # | Template | Tags | Resolution | Duration |\n|---|----------|------|------------|----------|\n| 1 | Product Launch | Marketing, Branding | 1920×1080 | 15s |\n| 2 | Tutorial Intro | Tutorial, Education | 1920×1080 | 8s |\n| 3 | SaaS Promo | SaaS, Marketing | 1920×1080 | 30s |\n| 4 | Social Story | Social, Short-form | 1080×1920 | 10s |\n| 5 | Data Viz | Data, Business | 1920×1080 | 20s |\n| 6 | Lower Third | Broadcast, Motion | 1920×1080 | 5s |\n| 7 | Testimonial Card | Marketing, Social | 1080×1080 | 8s |\n| 8 | Countdown Timer | Events, Marketing | 1920×1080 | 7s |\n| 9 | Brand Reveal | Branding, Marketing | 1920×1080 | 6s |\n| 10 | Vertical Story | Social, Short-form | 1080×1920 | 10s |\n| 11 | End Screen | Marketing, Tutorial | 1920×1080 | 7s |\n| 12 | Metric Dashboard | Data, SaaS | 1920×1080 | 8s |\n| 13 | Typewriter Quote | Social, Motion | 1920×1080 | 8s |\n| 14 | Dynamic Island | Tech, Motion | 1920×1080 | 5s |\n| 15 | Pricing Card | SaaS, Marketing | 1080×1080 | 8s |\n| 16 | Bar Chart | Data, Business | 1920×1080 | 8s |\n| 17 | Split Reveal | Branding, Motion | 1920×1080 | 6s |\n| 18 | Event Promo | Events, Marketing | 1920×1080 | 8s |\n| 19 | Subscribe CTA | Marketing, Social | 1920×1080 | 6s |\n| 20 | News Breaking | Broadcast, Motion | 1920×1080 | 10s |\n| 21 | Minimal Title | Motion, Branding | 1920×1080 | 5s |\n| 22 | Gradient Reveal | Branding, Motion | 1920×1080 | 6s |\n| 23 | Team Grid | Business, Marketing | 1920×1080 | 8s |\n| 24 | Quote Story | Social, Short-form | 1080×1920 | 8s |\n| 25 | Timeline | Business, Tutorial | 1920×1080 | 9s |\n| 26 | Web Promo | Marketing, SaaS | 1920×1080 | 10s |\n| 27 | Celebration Burst | Events, Social | 1080×1080 | 6s |\n| 28 | Code Reveal | Developer, Tutorial | 1920×1080 | 10s |\n| 29 | Product Card | eCommerce, Marketing | 1080×1080 | 6s |\n| 30 | AI Generation | AI, Tech, SaaS | 1920×1080 | 8s |\n| 31 | Macintosh | Retro, Motion, Tech | 1920×1080 | 9s |\n| 32 | Apple Movie | Motion, Tech, Retro | 1920×1080 | 16s |\n\nBrowse and preview all templates at the live site.\n\n---\n\n## 🚀 Quick Start\n\n### Prerequisites\n\n| Requirement | Version |\n|-------------|---------|\n| Node.js | v16+ (v18+ recommended) |\n| npm \u002F yarn \u002F pnpm \u002F bun | any |\n| Remotion project | required |\n\nChrome and FFmpeg are automatically downloaded by Remotion — no global installation needed.\nSwiftClip templates and the Claude marketplace workflow assume you are already inside a Remotion project with `remotion` installed and a `remotion\u002FRoot.tsx` entry file available.\n\n### 1. Scaffold a Remotion project\n\n```bash\nnpx create-video@latest\ncd my-video-project\n```\n\n### 2. Copy a template\n\nBrowse the [Template Library](https:\u002F\u002Fswiftclip.dev\u002Ftemplates) and copy any `.tsx` file into your `remotion\u002F` folder.\n\n### 3. Register it in `remotion\u002FRoot.tsx`\n\n```tsx\nimport { Composition } from 'remotion';\nimport { ProductLaunch } from '.\u002FProductLaunch';\n\nexport const RemotionRoot = () => (\n  \u003CComposition\n    id=\"ProductLaunch\"\n    component={ProductLaunch}\n    durationInFrames={450}   \u002F\u002F 15 s at 30 fps\n    fps={30}\n    width={1920}\n    height={1080}\n    defaultProps={{\n      title: 'My Product',\n      subtitle: 'Ship faster with SwiftClip',\n    }}\n  \u002F>\n);\n```\n\n### 4. Preview in Remotion Studio\n\n```bash\nnpm run dev\n# Open http:\u002F\u002Flocalhost:3000\n```\n\n### 5. Render to MP4\n\n```bash\nnpx remotion render remotion\u002Findex.tsx ProductLaunch output.mp4\n```\n\n---\n\n## Claude Code Marketplace\n\nSwiftClip also ships as a Claude Code marketplace plus plugin for Remotion planning and generation workflows.\n\nWhat it does:\n\n- aligns the video brief before code generation\n- recommends the best internal Remotion base template\n- outputs a machine-readable preflight JSON plus storyboard beats\n- generates a derivative component and registers it in `remotion\u002FRoot.tsx`\n\n### Claude prerequisites\n\nBefore enabling the SwiftClip Claude workflow, make sure you already have:\n\n- a Claude Code environment with `\u002Fplugin` support\n- an existing Remotion project\n- `remotion` installed in `package.json`\n- `remotion\u002FRoot.tsx` in the target workspace\n\nIf you do not have a Remotion project yet, run:\n\n```bash\nnpx create-video@latest\ncd my-video-project\n```\n\nThen enable the SwiftClip workflow inside that project.\n\n### Install from GitHub marketplace\n\nAdd the marketplace:\n\n```text\n\u002Fplugin marketplace add zz41354899\u002FSwiftClip\n```\n\nInstall the plugin:\n\n```text\n\u002Fplugin install swiftclip-remotion@swiftclip-tools\n```\n\nIf you prefer the CLI form:\n\n```bash\nclaude plugin marketplace add zz41354899\u002FSwiftClip\nclaude plugin install swiftclip-remotion@swiftclip-tools --scope project\n```\n\nAfter installation, reload plugins:\n\n```text\n\u002Freload-plugins\n```\n\n### Team setup in this repository\n\nThis repository already includes project-scoped marketplace wiring in `.claude\u002Fsettings.json`:\n\n- marketplace name: `swiftclip-tools`\n- plugin id: `swiftclip-remotion`\n- source: GitHub repository `zz41354899\u002FSwiftClip`\n\nThat means collaborators can clone the repo, trust the folder in Claude Code, and install the shared plugin from the configured project settings.\n\n### Publish and update flow\n\nThe current distribution model is a GitHub-backed third-party marketplace.\n\n- Push changes to this repository.\n- Users run `\u002Fplugin marketplace update swiftclip-tools` to refresh the marketplace.\n- Users run `\u002Fplugin update swiftclip-remotion@swiftclip-tools` to pull the latest plugin version.\n- Because the plugin currently does not declare an explicit `version`, Claude Code uses the git commit SHA as the version key.\n\nThis commit-SHA versioning model is useful while the plugin is still evolving quickly.\n\n### Example install path for a new user\n\n```bash\nnpx create-video@latest\ncd my-video-project\nclaude plugin marketplace add zz41354899\u002FSwiftClip\nclaude plugin install swiftclip-remotion@swiftclip-tools --scope project\n```\n\nThen in Claude Code:\n\n```text\n\u002Freload-plugins\n```\n\n---\n\n## Codex Plugin Compatibility\n\nSwiftClip also includes a Codex-compatible plugin manifest and repo marketplace.\n\nThe Codex layer uses the same shared workflow contract as the Claude Code version:\n\n- the same plugin id: `swiftclip-remotion`\n- the same marketplace id: `swiftclip-tools`\n- the same skill and agent naming\n- the same `preflight JSON + storyboard beats` output contract\n- the same expectation that the workflow creates a derivative component and registers it in `remotion\u002FRoot.tsx`\n\n### Codex prerequisites\n\nBefore enabling the Codex workflow, make sure you already have:\n\n- a Codex environment with plugin support\n- an existing Remotion project\n- `remotion` installed in `package.json`\n- `remotion\u002FRoot.tsx` in the target workspace\n\nIf you do not have a Remotion project yet, run:\n\n```bash\nnpx create-video@latest\ncd my-video-project\n```\n\n### Add the Codex marketplace\n\n```bash\ncodex plugin marketplace add zz41354899\u002FSwiftClip\n```\n\nAdvanced install with sparse checkout:\n\n```bash\ncodex plugin marketplace add zz41354899\u002FSwiftClip --sparse .agents\u002Fplugins --sparse .codex-plugin --sparse plugins\n```\n\nThis repository includes:\n\n- repo marketplace: `.agents\u002Fplugins\u002Fmarketplace.json`\n- plugin manifest: `.codex-plugin\u002Fplugin.json`\n\nAfter adding the marketplace, restart Codex and install `swiftclip-remotion` from the `swiftclip-tools` marketplace.\n\n---\n\n## Official Marketplace Submission Checklist\n\nUse this checklist before submitting SwiftClip to the official Anthropic marketplace.\n\n### Metadata and listing\n\n- [ ] Replace the placeholder live-site note with the final public homepage URL.\n- [ ] Add a dedicated plugin homepage or docs page that explains what `swiftclip-remotion` does.\n- [ ] Add a real `LICENSE` file at the repository root. The README says MIT, but the repository should include the actual license text.\n- [ ] Add repository metadata that matches the public listing you want users to see.\n- [ ] Confirm marketplace and plugin names stay stable: `swiftclip-tools` and `swiftclip-remotion`.\n\n### Versioning strategy\n\n- [ ] Decide whether to keep commit-SHA versioning for rapid iteration or switch to explicit semver for public releases.\n- [ ] If switching to semver, add `version` to `plugins\u002Fswiftclip-remotion\u002F.claude-plugin\u002Fplugin.json` and bump it on every release.\n- [ ] Do not define conflicting versions in both `plugin.json` and the marketplace entry unless you intend `plugin.json` to win.\n- [ ] Add a `CHANGELOG.md` if you want clearer public release notes.\n\n### Validation\n\n- [ ] Run `claude plugin validate .` once the Claude CLI is installed.\n- [ ] Verify `.claude-plugin\u002Fmarketplace.json` loads correctly from GitHub.\n- [ ] Verify `plugins\u002Fswiftclip-remotion\u002F.claude-plugin\u002Fplugin.json` is valid.\n- [ ] Verify the skill, builder, and hook files load without frontmatter or JSON errors.\n- [ ] Test a full local install with `\u002Fplugin marketplace add .\u002Fpath\u002Fto\u002Frepo` and `\u002Fplugin install swiftclip-remotion@swiftclip-tools`.\n- [ ] Test a full GitHub install with `zz41354899\u002FSwiftClip` as the marketplace source.\n\n### Install and usage docs\n\n- [ ] Keep the exact install commands in this README up to date.\n- [ ] Document the Remotion prerequisite clearly so users know this does not replace `npx create-video@latest`.\n- [ ] Document the expected output: preflight JSON, storyboard beats, generated component, and `Root.tsx` registration.\n- [ ] Include `\u002Freload-plugins` in the usage flow so users know how to activate updates immediately.\n\n### Official submission path\n\n- [ ] Submit through Claude.ai: `https:\u002F\u002Fclaude.ai\u002Fsettings\u002Fplugins\u002Fsubmit`\n- [ ] Or submit through Console: `https:\u002F\u002Fplatform.claude.com\u002Fplugins\u002Fsubmit`\n- [ ] Prepare a short listing description, install instructions, homepage URL, and support contact before submitting.\n- [ ] Confirm the repository is public, or that reviewers can access it.\n\n### Submission description\n\nUse this draft in the official marketplace submission form:\n\n> 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\u002FRoot.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.\n\nSuggested homepage URL:\n\n- `https:\u002F\u002Fswift-clip.vercel.app\u002F`\n\nSuggested repository URL:\n\n- `https:\u002F\u002Fgithub.com\u002Fzz41354899\u002FSwiftClip`\n\nSuggested install commands:\n\n```text\n\u002Fplugin marketplace add zz41354899\u002FSwiftClip\n\u002Fplugin install swiftclip-remotion@swiftclip-tools\n\u002Freload-plugins\n```\n\n\n## 🎬 Rendering Options\n\n```bash\n# High-quality H.264 (default)\nnpx remotion render remotion\u002Findex.tsx ProductLaunch output.mp4\n\n# 4K upscale\nnpx remotion render remotion\u002Findex.tsx ProductLaunch output-4k.mp4 --scale=2\n\n# Fast parallel render (8 threads)\nnpx remotion render remotion\u002Findex.tsx ProductLaunch output.mp4 --concurrency=8\n\n# Export as GIF\nnpx remotion render remotion\u002Findex.tsx ProductLaunch output.gif --codec=gif\n\n# ProRes for post-production\nnpx remotion render remotion\u002Findex.tsx ProductLaunch output.mov --codec=prores\n\n# Serverless via Lambda\nnpx remotion lambda render remotion\u002Findex.tsx ProductLaunch --region=us-east-1\n```\n\n---\n\n## 🗄 Project Structure\n\n```\nswiftclip\u002F\n├── app\u002F                    # Next.js App Router (website)\n│   ├── page.tsx            # Homepage\n│   ├── templates\u002F          # Template browser & detail pages\n│   ├── docs\u002F               # Documentation\n│   ├── community\u002F          # Community page\n│   ├── privacy\u002F            # Privacy Policy\n│   └── terms\u002F              # Terms of Service\n├── components\u002F             # Shared UI components\n│   ├── Navbar.tsx\n│   ├── Footer.tsx\n│   ├── HeroSection.tsx\n│   └── ...\n├── remotion\u002F               # 📦 Video templates (the main product)\n│   ├── Root.tsx            # Composition registry\n│   ├── index.tsx           # Entry point\n│   ├── ProductLaunch.tsx\n│   ├── AiAnimation.tsx     # Siri-style AI animation\n│   └── ... (30 templates total)\n├── lib\u002F\n│   └── templates.ts        # Template metadata (no embedded code)\n└── public\u002F\n    ├── videos\u002F             # Rendered preview MP4s (30 files)\n    └── thumbnails\u002F         # Extracted JPG thumbnails (30 files)\n```\n\n---\n\n## 🛠 Local Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Start the website (Next.js dev server)\nnpm run dev\n\n# Open Remotion Studio for composition preview \u002F render debugging\nnpx remotion studio\n\n# Build for production\nnpm run build\n```\n\n### Tailwind in Remotion\n\nThis repository uses one shared Tailwind source for both the website and Remotion compositions:\n\n- website styles live in `app\u002Fglobals.css`\n- `remotion\u002FRoot.tsx` imports that shared stylesheet\n- `remotion.config.ts` enables the official `@remotion\u002Ftailwind` bundler integration\n\nIf you add new utility classes in `remotion\u002F*.tsx`, you do not need a separate generated CSS file. Just update the component and restart Remotion Studio if the bundle cache is stale.\n\n### Repo-specific dev notes\n\n- `npm run dev` starts Next.js, not Remotion Studio\n- `npx remotion studio` is the correct preview environment for composition work\n- template thumbnails are served from `public\u002Fthumbnails\u002F\u003Ctemplate-id>.jpg`\n- `AppleMovie` uses `public\u002Fdesktop.png` as its wallpaper asset to avoid browser decode issues with JPEGs in the preview\u002Frender pipeline\n\n---\n\n## ✏️ Customising a Template\n\nEvery template accepts typed props. Example with `ProductLaunch`:\n\n```tsx\n\u002F\u002F All props are optional — sensible defaults are provided\ninterface ProductLaunchProps {\n  title?: string;        \u002F\u002F Main headline\n  subtitle?: string;     \u002F\u002F Supporting text\n  accentColor?: string;  \u002F\u002F Hex colour for accents\n  logoUrl?: string;      \u002F\u002F URL to your logo image\n}\n```\n\nPass values via `defaultProps` in `Root.tsx` or at render time with `--props`:\n\n```bash\nnpx remotion render remotion\u002Findex.tsx ProductLaunch output.mp4 \\\n  --props='{\"title\":\"Acme 3.0\",\"subtitle\":\"The fastest tool on earth\"}'\n```\n\n---\n\n## 🤝 Contributing\n\nContributions are welcome! Here's how:\n\n1. **Fork** this repository\n2. **Clone** your fork: `git clone https:\u002F\u002Fgithub.com\u002Fzz41354899\u002FSwiftClip`\n3. **Create a branch**: `git checkout -b feat\u002Fmy-template`\n4. **Add your template** to `remotion\u002F` — follow the naming and prop conventions of existing templates\n5. **Register** it in `remotion\u002FRoot.tsx` and add metadata to `lib\u002Ftemplates.ts`\n6. **Open a Pull Request** with a short description and a rendered preview\n\n### Template conventions\n\n- File name: `PascalCase.tsx` matching the composition `id`\n- All props should be optional with sensible defaults\n- Use `useCurrentFrame()` + `interpolate()` — avoid `setTimeout` or imperative logic\n- Keep animation logic co-located in a single file (no external style sheets)\n\n---\n\n## 📄 License\n\nMIT © SwiftClip contributors\n\nThis project is free to use in personal and commercial projects. Attribution is appreciated but not required.\n\n> **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](https:\u002F\u002Fremotion.dev\u002Flicense). SwiftClip templates are MIT licensed regardless of the Remotion license tier.\n\n---\n\n## 🔗 Links\n\n- 📖 [Remotion Docs](https:\u002F\u002Fremotion.dev\u002Fdocs)\n- 💬 [Community (LINE)](https:\u002F\u002Fline.me\u002Fti\u002Fg2\u002FFO-LwoDfH0RrlsJ2hylmAyfA04-ZYNQBUWY-ow?utm_source=invitation&utm_medium=link_copy&utm_campaign=default)\n- 🐛 [Report an Issue](https:\u002F\u002Fgithub.com\u002Fzz41354899\u002FSwiftClip\u002Fissues)\n- ✨ [Request a Template](https:\u002F\u002Fgithub.com\u002Fzz41354899\u002FSwiftClip\u002Fissues\u002Fnew?template=template_request.md)\n","SwiftClip 是一个面向生产环境的 Remotion 视频模板库，提供 32 个开箱即用的 React + TypeScript 视频组件模板。核心功能包括：基于 Remotion 的帧级动画控制（useCurrentFrame、interpolate）、Apple 风格轻量设计系统、4K 分辨率渲染支持、零配置 TypeScript 类型安全及零第三方依赖。适用于营销视频制作、社交媒体竖屏内容、数据可视化短片、品牌动效包装等需要快速生成高质量视频的场景，特别适合前端开发者主导的视频工业化生产流程。","2026-07-08 04:04:30","CREATED_QUERY"]