Post to video
Turns one social post into a vertical video: the post card builds in, its text reveals and its counts climb.
PostToVideo, defaults
Installation
npx shadcn add https://www.reelcn.dev/r/post-to-video.jsonFiles land in src/reelcn/ with the items it builds on. Dependencies: zod.
Register the composition
<Composition
id="PostToVideo"
component={PostToVideo}
schema={postToVideoSchema}
defaultProps={postToVideoDefaults}
calculateMetadata={postToVideoMetadata}
width={1080}
height={1920}
fps={30}
durationInFrames={1}
/>Render
npx remotion render PostToVideo # 16:9
npx remotion render PostToVideo --width=1080 --height=1920 # 9:16Props
PropTypeDescription
author*string
text*string
theme"daylight" | "midnight" | "mono" | "ledger" | "afterglow" | "chromewave" | "neon" | "paper" | "sunset"Theme preset. Inherits the surrounding `ThemeProvider` when omitted.
brand{ accent?: string; logo?: string; font?: string; }
sfxbooleanPlays a soft whoosh as each scene starts.
musicstringBackground music file, looped under everything at 25% volume.
handlestring
avatarstringAvatar image. Initials are drawn when omitted.
metrics{ likes?: number; comments?: number; shares?: number; }
Built from
Use
- Reposting a popular post as a short
- Quoting a customer's public post in a video
Avoid
- Several posts in a row. Use
storyboardwith post scenes
Make it with an agent
With the reelcn agent skill installed, ask for the video in plain words, such as "make a launch video for Relay with reelcn". The skill picks a template, sets its props, reviews a contact sheet and renders.
Guides
Components take their colors from a theme, their timing from motion props and their layout from the canvas.
Source
registry/items/post-to-video.tsx
/**
* @title Post to Video
* @category templates
* @description Turns one social post into a vertical video: the post card builds in, its text reveals and its counts climb.
* @duration data-driven
* @use Reposting a popular post as a short
* @use Quoting a customer's public post in a video
* @avoid Several posts in a row. Use `storyboard` with post scenes
* @tags social, post, repost, short, template
* @example
* <Composition
* id="PostToVideo"
* component={PostToVideo}
* schema={postToVideoSchema}
* defaultProps={postToVideoDefaults}
* calculateMetadata={postToVideoMetadata}
* width={1080}
* height={1920}
* fps={30}
* durationInFrames={1}
* />
*/
import { z } from "zod";
import type { Story } from "./story";
import { Storyboard, templateMetadata, templateSchema, templateStory } from "./storyboard";
export const postToVideoSchema = templateSchema.extend({
author: z.string(),
handle: z.string().optional(),
/** Avatar image. Initials are drawn when omitted. */
avatar: z.string().optional(),
text: z.string(),
metrics: z
.object({ likes: z.number().optional(), comments: z.number().optional(), shares: z.number().optional() })
.optional(),
});
export type PostToVideoProps = z.infer<typeof postToVideoSchema>;
export const postToVideoDefaults: PostToVideoProps = {
author: "Maya Chen",
handle: "@mayachen",
text: "We replaced a two-week video process with a JSON file and an afternoon. The first cut shipped the same day.",
metrics: { likes: 18400, comments: 932, shares: 2100 },
};
export function postToVideoStory(props: PostToVideoProps): Story {
const { author, handle, avatar, text, metrics } = props;
return templateStory(props, [{ type: "post", name: author, handle, avatar, text, metrics, background: "dots" }]);
}
export function PostToVideo(props: PostToVideoProps) {
return <Storyboard story={postToVideoStory(props)} />;
}
export const postToVideoMetadata = templateMetadata(postToVideoStory);