Feature short
Vertical short about one feature: a hook, the feature in a line, the feature running on a phone, and a call to action.
FeatureShort, defaults
Installation
npx shadcn add https://www.reelcn.dev/r/feature-short.jsonFiles land in src/reelcn/ with the items it builds on. Dependencies: zod.
Register the composition
<Composition
id="FeatureShort"
component={FeatureShort}
schema={featureShortSchema}
defaultProps={featureShortDefaults}
calculateMetadata={featureShortMetadata}
width={1080}
height={1920}
fps={30}
durationInFrames={1}
/>Render
npx remotion render FeatureShort # 16:9
npx remotion render FeatureShort --width=1080 --height=1920 # 9:16Props
PropTypeDescription
hook*stringFirst line on screen; it has three seconds to earn the next.
feature*string
cta*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.
demostringScreen recording or screenshot of the feature. A placeholder screen stands in when omitted.
Built from
Use
- Social shorts that show off a single feature
- Weekly "did you know" clips for a product
Avoid
- A full product story. Use
product-launch
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/feature-short.tsx
/**
* @title Feature Short
* @category templates
* @description Vertical short about one feature: a hook, the feature in a line, the feature running on a phone, and a call to action.
* @duration data-driven
* @use Social shorts that show off a single feature
* @use Weekly "did you know" clips for a product
* @avoid A full product story. Use `product-launch`
* @tags short, feature, product, vertical, template
* @example
* <Composition
* id="FeatureShort"
* component={FeatureShort}
* schema={featureShortSchema}
* defaultProps={featureShortDefaults}
* calculateMetadata={featureShortMetadata}
* 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 featureShortSchema = templateSchema.extend({
/** First line on screen; it has three seconds to earn the next. */
hook: z.string(),
feature: z.string(),
/** Screen recording or screenshot of the feature. A placeholder screen stands in when omitted. */
demo: z.string().optional(),
cta: z.string(),
});
export type FeatureShortProps = z.infer<typeof featureShortSchema>;
export const featureShortDefaults: FeatureShortProps = {
hook: "Stop writing release notes by hand",
feature: "Relay drafts them from your merged pull requests",
cta: "Try Relay free",
};
export function featureShortStory(props: FeatureShortProps): Story {
return templateStory(props, [
{ type: "text", text: props.hook, background: "aurora" },
{ type: "title", title: props.feature },
{ type: "device", device: "phone", src: props.demo },
{ type: "cta", title: props.cta },
]);
}
export function FeatureShort(props: FeatureShortProps) {
return <Storyboard story={featureShortStory(props)} />;
}
export const featureShortMetadata = templateMetadata(featureShortStory);