remotion

Name: remotion
Author: vercel-labs

1.1kinstalls849forks

How to install remotion?

vercel-labs/json-render/remotion

$npx -y skills add vercel-labs/json-render --skill remotion

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# @json-render/remotion
2
3	Remotion renderer that converts JSON timeline specs into video compositions.
4
5	## Quick Start
6
7	```typescript
8	import { Player } from "@remotion/player";
9	import { Renderer, type TimelineSpec } from "@json-render/remotion";
10
11	function VideoPlayer({ spec }: { spec: TimelineSpec }) {
12	return (
13	<Player
14	component={Renderer}
15	inputProps={{ spec }}
16	durationInFrames={spec.composition.durationInFrames}
17	fps={spec.composition.fps}
18	compositionWidth={spec.composition.width}
19	compositionHeight={spec.composition.height}
20	controls
21	/>
22	);
23	}
24	```
25
26	## Using Standard Components
27
28	```typescript
29	import { defineCatalog } from "@json-render/core";
30	import {
31	schema,
32	standardComponentDefinitions,
33	standardTransitionDefinitions,
34	standardEffectDefinitions,
35	} from "@json-render/remotion";
36
37	export const videoCatalog = defineCatalog(schema, {
38	components: standardComponentDefinitions,
39	transitions: standardTransitionDefinitions,
40	effects: standardEffectDefinitions,
41	});
42	```
43
44	## Adding Custom Components
45
46	```typescript
47	import { z } from "zod";
48
49	const catalog = defineCatalog(schema, {
50	components: {
51	...standardComponentDefinitions,
52	MyCustomClip: {
53	props: z.object({ text: z.string() }),
54	type: "scene",
55	defaultDuration: 90,
56	description: "My custom video clip",
57	},
58	},
59	});
60
61	// Pass custom component to Renderer
62	<Player
63	component={Renderer}
64	inputProps={{
65	spec,
66	components: { MyCustomClip: MyCustomComponent },
67	}}
68	/>
69	```
70
71	## Timeline Spec Structure
72
73	```json
74	{
75	"composition": { "id": "video", "fps": 30, "width": 1920, "height": 1080, "durationInFrames": 300 },
76	"tracks": [{ "id": "main", "name": "Main", "type": "video", "enabled": true }],
77	"clips": [
78	{ "id": "clip-1", "trackId": "main", "component": "TitleCard", "props": { "title": "Hello" }, "from": 0, "durationInFrames": 90 }
79	],
80	"audio": { "tracks": [] }
81	}
82	```
83
84	## Standard Components
85
86	\| Component \| Type \| Description \|
87	\|-----------\|------\|-------------\|
88	\| `TitleCard` \| scene \| Full-screen title with subtitle \|
89	\| `TypingText` \| scene \| Terminal-style typing animation \|
90	\| `ImageSlide` \| image \| Full-screen image display \|
91	\| `SplitScreen` \| scene \| Two-panel comparison \|
92	\| `QuoteCard` \| scene \| Quote with attribution \|
93	\| `StatCard` \| scene \| Animated statistic display \|
94	\| `TextOverlay` \| overlay \| Text overlay \|
95	\| `LowerThird` \| overlay \| Name/title overlay \|
96
97	## Key Exports
98
99	\| Export \| Purpose \|
100	\|--------\|---------\|
101	\| `Renderer` \| Render spec to Remotion composition \|
102	\| `schema` \| Timeline schema \|
103	\| `standardComponents` \| Pre-built component registry \|
104	\| `standardComponentDefinitions` \| Catalog definitions \|
105	\| `useTransition` \| Transition animation hook \|
106	\| `ClipWrapper` \| Wrap clips with transitions \|

People who liked this also viewed

6 picks

Type

remotion

1.1kinstalls849forks

View on GitHub

How to install remotion?

vercel-labs/json-render/remotion

$npx -y skills add vercel-labs/json-render --skill remotion

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# @json-render/remotion
2
3	Remotion renderer that converts JSON timeline specs into video compositions.
4
5	## Quick Start
6
7	```typescript
8	import { Player } from "@remotion/player";
9	import { Renderer, type TimelineSpec } from "@json-render/remotion";
10
11	function VideoPlayer({ spec }: { spec: TimelineSpec }) {
12	return (
13	<Player
14	component={Renderer}
15	inputProps={{ spec }}
16	durationInFrames={spec.composition.durationInFrames}
17	fps={spec.composition.fps}
18	compositionWidth={spec.composition.width}
19	compositionHeight={spec.composition.height}
20	controls
21	/>
22	);
23	}
24	```
25
26	## Using Standard Components
27
28	```typescript
29	import { defineCatalog } from "@json-render/core";
30	import {
31	schema,
32	standardComponentDefinitions,
33	standardTransitionDefinitions,
34	standardEffectDefinitions,
35	} from "@json-render/remotion";
36
37	export const videoCatalog = defineCatalog(schema, {
38	components: standardComponentDefinitions,
39	transitions: standardTransitionDefinitions,
40	effects: standardEffectDefinitions,
41	});
42	```
43
44	## Adding Custom Components
45
46	```typescript
47	import { z } from "zod";
48
49	const catalog = defineCatalog(schema, {
50	components: {
51	...standardComponentDefinitions,
52	MyCustomClip: {
53	props: z.object({ text: z.string() }),
54	type: "scene",
55	defaultDuration: 90,
56	description: "My custom video clip",
57	},
58	},
59	});
60
61	// Pass custom component to Renderer
62	<Player
63	component={Renderer}
64	inputProps={{
65	spec,
66	components: { MyCustomClip: MyCustomComponent },
67	}}
68	/>
69	```
70
71	## Timeline Spec Structure
72
73	```json
74	{
75	"composition": { "id": "video", "fps": 30, "width": 1920, "height": 1080, "durationInFrames": 300 },
76	"tracks": [{ "id": "main", "name": "Main", "type": "video", "enabled": true }],
77	"clips": [
78	{ "id": "clip-1", "trackId": "main", "component": "TitleCard", "props": { "title": "Hello" }, "from": 0, "durationInFrames": 90 }
79	],
80	"audio": { "tracks": [] }
81	}
82	```
83
84	## Standard Components
85
86	\| Component \| Type \| Description \|
87	\|-----------\|------\|-------------\|
88	\| `TitleCard` \| scene \| Full-screen title with subtitle \|
89	\| `TypingText` \| scene \| Terminal-style typing animation \|
90	\| `ImageSlide` \| image \| Full-screen image display \|
91	\| `SplitScreen` \| scene \| Two-panel comparison \|
92	\| `QuoteCard` \| scene \| Quote with attribution \|
93	\| `StatCard` \| scene \| Animated statistic display \|
94	\| `TextOverlay` \| overlay \| Text overlay \|
95	\| `LowerThird` \| overlay \| Name/title overlay \|
96
97	## Key Exports
98
99	\| Export \| Purpose \|
100	\|--------\|---------\|
101	\| `Renderer` \| Render spec to Remotion composition \|
102	\| `schema` \| Timeline schema \|
103	\| `standardComponents` \| Pre-built component registry \|
104	\| `standardComponentDefinitions` \| Catalog definitions \|
105	\| `useTransition` \| Transition animation hook \|
106	\| `ClipWrapper` \| Wrap clips with transitions \|

People who liked this also viewed

6 picks

Type