Claude Skill

remotion-render

Export a Remotion video

LLM Mart · 0 points · 0 0 0

Virus-scanned Reviewed automatically before listing.

Full trust report

Download muzimu217-ui-design-agent-kit-.agents_skills_remotion-render-aa38774.zip · 2 KB

muzimu217/ui-design-agent-kit 19 3 forks Updated 7d ago

Part of muzimu217/ui-design-agent-kit — 23 skills

Install

skills CLI npx skills add https://github.com/muzimu217/ui-design-agent-kit/tree/main/.agents/skills/remotion-render

Claude Code

claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install muzimu217-ui-design-agent-kit@llmmart

Git git clone https://github.com/muzimu217/ui-design-agent-kit.git

The skills CLI installs just this skill, for any of its supported agents. Claude Code installs the whole muzimu217/ui-design-agent-kit collection as a plugin from our marketplace. Git is the plain clone.

Skill manifest

General rendering strategy

Render a video using:

npx remotion render

Full list of options: https://www.remotion.dev/docs/cli/render.md

Render a still using:

npx remotion still

Full list of options: https://www.remotion.dev/docs/cli/still.md

Transparent videos

See Transparent videos for rendering out a video with transparency.

Files (ui-design-agent-kit)

agents

openai.yaml 286 B

interface:
  display_name: '/remotion-render'
  short_description: 'Export Remotion videos and stills'
  icon_small: './assets/remotion-icon.png'
  icon_large: './assets/remotion-icon.png'
  brand_color: '#0B84F3'
  default_prompt: '$remotion-render: Render this as transparent ProRes'

assets
- remotion-icon.png 1.3 KB · in bundle

SKILL.md 484 B

---
name: remotion-render
description: Export a Remotion video
metadata:
  version: "4.0.520"
---

## General rendering strategy

Render a video using:

```
npx remotion render
```

Full list of options: https://www.remotion.dev/docs/cli/render.md

Render a still using:

```
npx remotion still
```

Full list of options: https://www.remotion.dev/docs/cli/still.md

## Transparent videos

See [Transparent videos](./transparent-videos.md) for rendering out a video with transparency.

transparent-videos.md 2.2 KB

---
name: transparent-videos
description: Rendering transparent videos in Remotion
metadata:
  tags: transparent, alpha, codec, vp9, prores, webm
---

# Rendering Transparent Videos

Remotion can render transparent videos in two ways: as a ProRes video or as a WebM video.

## Transparent ProRes

Ideal for when importing into video editing software.

**CLI:**

```bash
npx remotion render --image-format=png --pixel-format=yuva444p10le --codec=prores --prores-profile=4444 MyComp out.mov
```

**Default in Studio** (restart Studio after changing):

```ts
// remotion.config.ts
import { Config } from "@remotion/cli/config";

Config.setVideoImageFormat("png");
Config.setPixelFormat("yuva444p10le");
Config.setCodec("prores");
Config.setProResProfile("4444");
```

**Setting it as the default export settings for a composition** (using `calculateMetadata`):

```tsx
import { CalculateMetadataFunction } from "remotion";

const calculateMetadata: CalculateMetadataFunction<Props> = async ({
  props,
}) => {
  return {
    defaultCodec: "prores",
    defaultVideoImageFormat: "png",
    defaultPixelFormat: "yuva444p10le",
    defaultProResProfile: "4444",
  };
};

<Composition
  id="my-video"
  component={MyVideo}
  durationInFrames={150}
  fps={30}
  width={1920}
  height={1080}
  calculateMetadata={calculateMetadata}
/>;
```

## Transparent WebM (VP9)

Ideal for when playing in a browser.

**CLI:**

```bash
npx remotion render --image-format=png --pixel-format=yuva420p --codec=vp9 MyComp out.webm
```

**Default in Studio** (restart Studio after changing):

```ts
// remotion.config.ts
import { Config } from "@remotion/cli/config";

Config.setVideoImageFormat("png");
Config.setPixelFormat("yuva420p");
Config.setCodec("vp9");
```

**Setting it as the default export settings for a composition** (using `calculateMetadata`):

```tsx
import { CalculateMetadataFunction } from "remotion";

const calculateMetadata: CalculateMetadataFunction<Props> = async ({
  props,
}) => {
  return {
    defaultCodec: "vp8",
    defaultVideoImageFormat: "png",
    defaultPixelFormat: "yuva420p",
  };
};

<Composition
  id="my-video"
  component={MyVideo}
  durationInFrames={150}
  fps={30}
  width={1920}
  height={1080}
  calculateMetadata={calculateMetadata}
/>;
```