Remotion
Render AI- or agent-generated JSON timeline specs into previewable Remotion videos inside a React app.
Overview
Remotion is an agent skill for the Build phase that converts JSON timeline specs into Remotion Player compositions using @json-render/remotion.
Install
npx skills add https://github.com/vercel-labs/json-render --skill remotionWhat is this skill?
- Maps TimelineSpec JSON to Remotion compositions via @json-render/remotion Renderer
- Quick-start Player setup with fps, frames, and dimensions from the spec
- Standard component, transition, and effect catalogs via defineCatalog + zod
- Extend catalogs with custom clip props (e.g. MyCustomClip) alongside standard definitions
- Supports video catalogs and AI-generated timelines as first-class inputs
- Standard component, transition, and effect catalog definitions bundled for defineCatalog
Adoption & trust: 876 installs on skills.sh; 15k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have machine- or catalog-generated video timelines as JSON but no clear way to preview and compose them in Remotion/React.
Who is it for?
Indie builders using json-render or AI timelines who already ship React and need in-app Remotion previews.
Skip if: Teams that only need offline ffmpeg renders, non-React stacks, or video hosting/distribution with no JSON-to-composition layer.
When should I use this skill?
Working with @json-render/remotion, building video compositions from JSON, creating video catalogs, or rendering AI-generated video timelines.
What do I get? / Deliverables
You get a working Player + Renderer setup and catalog pattern so timeline JSON renders as a controllable Remotion composition.
- Player + Renderer integration wired to spec.composition metadata
- videoCatalog (or extended catalog) with standard and optional custom clip definitions
Recommended Skills
Journey fit
How it compares
Use for JSON-driven Remotion compositions—not generic screen recording or a hosted video CDN integration.
Common Questions / FAQ
Who is remotion for?
Solo and indie builders on React/Remotion who receive or generate TimelineSpec JSON via json-render or agents and need a renderer catalog.
When should I use remotion?
During Build (frontend) when implementing @json-render/remotion, video catalogs, AI-generated timelines, or custom clip definitions in Player.
Is remotion safe to install?
Treat it as third-party npm guidance; review the Security Audits panel on this Prism page and pin @json-render/remotion and @remotion/player versions in your lockfile.
SKILL.md
READMESKILL.md - Remotion
# @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 /> ); } ``` ## 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, }); ``` ## 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 }, }} /> ``` ## 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": [] } } ``` ## 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 |