{"slug": "i-built-a-remotion-kit-that-renders-vertical-shorts-from-a-single-content-file", "title": "I built a Remotion kit that renders vertical shorts from a single content file", "summary": "A developer open-sourced a Remotion-based kit that renders vertical short-form videos from a single TypeScript content file, with Zod schemas validating props so AI coding agents can generate content files safely. The MIT-licensed QuoteVideo template supports 7 formats and 5 themes, derives video length from content, and is complemented by a $19 full kit listed on Remotion's official resources page.", "body_md": "Faceless short-form channels live or die on volume — you have to ship daily. But every tool in that space wants a subscription, a timeline editor, or an API key you babysit.\n\nSo I built a kit that turns a small TypeScript content file into a finished vertical MP4, using [Remotion](https://remotion.dev) — React, but the output is a video file.\n\n*The promo above is one continuous 3D camera shot — pure CSS transforms, no WebGL.*\n\nOne file = one video:\n\n``` js\n// src/content/my-quote.ts\nexport const props: QuoteVideoProps = {\n  theme: \"paper\",\n  quote: \"You have power over your mind, not outside events...\",\n  author: \"Marcus Aurelius\",\n  authorTitle: \"Meditations\",\n  cta: \"Daily stoic wisdom — follow\",\n};\nnpx remotion render QuoteVideo out/quote.mp4\n```\n\nZod schemas validate the props, which has a nice side effect: AI coding agents (Claude Code, Cursor, Devin) can generate content files safely — the schema catches their mistakes before render.\n\n7 formats × 5 themes:\n\nVideo length derives from the content — no `durationInFrames` to babysit.\n\nI open-sourced the QuoteVideo template (MIT). Clone, `npm install`, edit one file, render:\n\n👉 [https://github.com/developk/remotion-quote-shorts](https://github.com/developk/remotion-quote-shorts)\n\nThe full kit is $19 on [Gumroad](https://shortkit.gumroad.com/l/faceless-shorts-kit) and just got listed on the [official Remotion resources](https://remotion.dev/resources) page.\n\nHappy to answer questions — what would you build with it?", "url": "https://wpnews.pro/news/i-built-a-remotion-kit-that-renders-vertical-shorts-from-a-single-content-file", "canonical_source": "https://dev.to/_developk_684c62f0f4/i-built-a-remotion-kit-that-renders-vertical-shorts-from-a-single-content-file-36l7", "published_at": "2026-10-09 14:42:24+00:00", "updated_at": "2026-10-09 14:51:37.948868+00:00", "lang": "en", "topics": ["ai-agents", "developer-tools", "ai-tools"], "entities": ["Remotion", "Claude Code", "Cursor", "Devin", "Gumroad", "GitHub"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/i-built-a-remotion-kit-that-renders-vertical-shorts-from-a-single-content-file", "markdown": "https://wpnews.pro/news/i-built-a-remotion-kit-that-renders-vertical-shorts-from-a-single-content-file.md", "text": "https://wpnews.pro/news/i-built-a-remotion-kit-that-renders-vertical-shorts-from-a-single-content-file.txt", "jsonld": "https://wpnews.pro/news/i-built-a-remotion-kit-that-renders-vertical-shorts-from-a-single-content-file.jsonld"}}