remotion

★ 15,600

by vercel · part of vercel-labs/json-render

Remotion renderer for json-render that turns JSON timeline specs into videos. Use when working with @json-render/remotion, building video compositions from…

🔥🔥🔥✓ VerifiedFreeQuick setup

#git #video-editing

🧰 Not standalone. This skill ships with vercel-labs/json-render and only works together with that tool — install the tool first, then add this skill.

Remotion renderer for json-render that turns JSON timeline specs into videos. Use when working with @json-render/remotion, building video compositions from…

Inspect the full instructions your agent will receiveExpand

This is the exact playbook injected into your agent when the skill activates — shown here so you can audit it before installing. You don't need to read it to use the skill.

by vercel

Remotion renderer for json-render that turns JSON timeline specs into videos. Use when working with @json-render/remotion, building video compositions from… npx skills add https://github.com/vercel-labs/json-render --skill remotion Download ZIP GitHub15.6k

@json-render/remotion

Remotion renderer that converts JSON timeline specs into video compositions.

Using Standard Components

Copy & paste — that's it

import { defineCatalog } from "@json-render/core";
import {
 schema,
 standardComponentDefinitions,
 standardTransitionDefinitions,
 standardEffectDefinitions,
} from "@json-render/remotion";

export const videoCatalog = defineCatalog(schema, {
 components: standardComponentDefinitions,
 transitions: standardTransitionDefinitions,
 effects: standardEffectDefinitions,
});

Adding Custom Components

Copy & paste — that's it

import { z } from "zod";

const catalog = defineCatalog(schema, {
 components: {
 ...standardComponentDefinitions,
 MyCustomClip: {
 props: z.object({ text: z.string() }),
 type: "scene",
 defaultDuration: 90,
 description: "My custom video clip",
 },
 },
});

// Pass custom component to Renderer

Timeline Spec Structure

Copy & paste — that's it

{
 "composition": { "id": "video", "fps": 30, "width": 1920, "height": 1080, "durationInFrames": 300 },
 "tracks": [{ "id": "main", "name": "Main", "type": "video", "enabled": true }],
 "clips": [
 { "id": "clip-1", "trackId": "main", "component": "TitleCard", "props": { "title": "Hello" }, "from": 0, "durationInFrames": 90 }
 ],
 "audio": { "tracks": [] }
}

Standard Components

Component Type Description TitleCard scene Full-screen title with subtitle TypingText scene Terminal-style typing animation ImageSlide image Full-screen image display SplitScreen scene Two-panel comparison QuoteCard scene Quote with attribution StatCard scene Animated statistic display TextOverlay overlay Text overlay LowerThird overlay Name/title overlay

Key Exports

Export Purpose Renderer Render spec to Remotion composition schema Timeline schema standardComponents Pre-built component registry standardComponentDefinitions Catalog definitions useTransition Transition animation hook ClipWrapper Wrap clips with transitions

Copy & paste — that's it

npx skills add https://github.com/vercel-labs/json-render --skill remotion

Run this in your project — your agent picks the skill up automatically.

Quick Start

Copy & paste — that's it

import { Player } from "@remotion/player";
import { Renderer, type TimelineSpec } from "@json-render/remotion";

function VideoPlayer({ spec }: { spec: TimelineSpec }) {
 return (
 
 );
}