Remotion

by vercel-labsfc2a696a50a3No license18K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated yesterday

Remotion renderer for json-render that turns JSON timeline specs into videos. Use when working with @json-render/remotion, building video compositions from JSON, creating video catalogs, or rendering AI-generated video timelines.

FeaturedInstructions onlyDesign & Creative

AI-generated overview

Remotion renderer that turns JSON timeline specs into video compositions using @json-render/remotion.

What it does: This skill documents the @json-render/remotion renderer, which converts JSON timeline specs into Remotion video compositions. It shows how to render a spec with the Player and Renderer, define a catalog from standard component, transition and effect definitions, and register custom clip components. It also describes the timeline spec structure with composition, tracks, clips and audio, and lists the standard components and key exports.
When to use it: Use it when working with @json-render/remotion, building video compositions from JSON, creating video catalogs, or rendering AI-generated video timelines.
Requirements: Requires the @json-render/remotion, @json-render/core and @remotion/player packages, plus zod for custom component props. It ships no scripts; it is instructions only.

@json-render/remotion

Remotion renderer that converts JSON timeline specs into video compositions.

Quick Start

typescript

import { Player } from "@remotion/player";import { Renderer, type TimelineSpec } from "@json-render/remotion";
function VideoPlayer({ spec }: { spec: TimelineSpec }) {  return (    <Player      component={Renderer}      inputProps={{ spec }}      durationInFrames={spec.composition.durationInFrames}      fps={spec.composition.fps}      compositionWidth={spec.composition.width}      compositionHeight={spec.composition.height}      controls    />  );}

import { Player } from "@remotion/player";import { Renderer, type TimelineSpec } from "@json-render/remotion";
function VideoPlayer({ spec }: { spec: TimelineSpec }) {  return (    <Player      component={Renderer}      inputProps={{ spec }}      durationInFrames={spec.composition.durationInFrames}      fps={spec.composition.fps}      compositionWidth={spec.composition.width}      compositionHeight={spec.composition.height}      controls    />  );}

Using Standard Components

typescript

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,});

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

typescript

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<Player  component={Renderer}  inputProps={{    spec,    components: { MyCustomClip: MyCustomComponent },  }}/>

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<Player  component={Renderer}  inputProps={{    spec,    components: { MyCustomClip: MyCustomComponent },  }}/>

Timeline Spec Structure

json

{  "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": [] }}

{  "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

Source and attribution

Source:vercel-labs/json-renderinskills/remotionat commitfc2a696

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Remotion

@json-render/remotion

Quick Start

Using Standard Components

Adding Custom Components

Timeline Spec Structure

Standard Components

Key Exports

Source and attribution

More from vercel-labs/json-render

Zustand

Svelte

Xstate

Solid

Vue

Shadcn Svelte

More in Design & Creative

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design