dsh-remotion 0.2.0 → 0.3.0

package/skills/remotion-markup/voiceover.md

@@ -0,0 +1,99 @@
+---
+name: voiceover
+description: Adding AI-generated voiceover to Remotion compositions using TTS
+metadata:
+  tags: voiceover, audio, elevenlabs, tts, speech, calculateMetadata, dynamic duration
+---
+
+# Adding AI voiceover to a Remotion composition
+
+Use ElevenLabs TTS to generate speech audio per scene, then use [`calculateMetadata`](./calculate-metadata.md) to dynamically size the composition to match the audio.
+
+## Prerequisites
+
+By default this guide uses **ElevenLabs** as the TTS provider (`ELEVENLABS_API_KEY` environment variable). Users may substitute any TTS service that can produce an audio file.
+
+If the user has not specified a TTS provider, recommend ElevenLabs and ask for their API key.
+
+Ensure the environment variable is available when running the generation script:
+
+```bash
+node --strip-types generate-voiceover.ts
+```
+
+## Generating audio with ElevenLabs
+
+Create a script that reads the config, calls the ElevenLabs API for each scene, and writes MP3 files to the `public/` directory so Remotion can access them via `staticFile()`.
+
+The core API call for a single scene:
+
+```ts title="generate-voiceover.ts"
+const response = await fetch(
+  `https://api.elevenlabs.io/v1/text-to-speech/${voiceId}`,
+  {
+    method: "POST",
+    headers: {
+      "xi-api-key": process.env.ELEVENLABS_API_KEY!,
+      "Content-Type": "application/json",
+      Accept: "audio/mpeg",
+    },
+    body: JSON.stringify({
+      text: "Welcome to the show.",
+      model_id: "eleven_multilingual_v2",
+      voice_settings: {
+        stability: 0.5,
+        similarity_boost: 0.75,
+        style: 0.3,
+      },
+    }),
+  },
+);
+
+const audioBuffer = Buffer.from(await response.arrayBuffer());
+writeFileSync(`public/voiceover/${compositionId}/${scene.id}.mp3`, audioBuffer);
+```
+
+## Dynamic composition duration with calculateMetadata
+
+Use [`calculateMetadata`](./calculate-metadata.md) to measure the [audio durations](../remotion-multimedia/get-audio-duration.md) and set the composition length accordingly.
+
+```tsx
+import { CalculateMetadataFunction, staticFile } from "remotion";
+import { getAudioDuration } from "./get-audio-duration";
+
+const FPS = 30;
+
+const SCENE_AUDIO_FILES = [
+  "voiceover/my-comp/scene-01-intro.mp3",
+  "voiceover/my-comp/scene-02-main.mp3",
+  "voiceover/my-comp/scene-03-outro.mp3",
+];
+
+export const calculateMetadata: CalculateMetadataFunction<Props> = async ({
+  props,
+}) => {
+  const durations = await Promise.all(
+    SCENE_AUDIO_FILES.map((file) => getAudioDuration(staticFile(file))),
+  );
+
+  const sceneDurations = durations.map((durationInSeconds) => {
+    return durationInSeconds * FPS;
+  });
+
+  return {
+    durationInFrames: Math.ceil(sceneDurations.reduce((sum, d) => sum + d, 0)),
+  };
+};
+```
+
+The computed `sceneDurations` are passed into the component via a `voiceover` prop so the component knows how long each scene should be.
+
+If the composition uses [`<TransitionSeries>`](./transitions.md), subtract the overlap from total duration: [./transitions.md#calculating-total-composition-duration](./transitions.md#calculating-total-composition-duration)
+
+## Rendering audio in the component
+
+See [audio.md](./audio.md) for more information on how to render audio in the component.
+
+## Delaying audio start
+
+See [audio.md#delaying](./audio.md#delaying) for more information on how to delay the audio start.

package/skills/remotion-multimedia/SKILL.md

@@ -0,0 +1,20 @@
+---
+name: remotion-multimedia
+description: Interacting with Mediabunny
+version: 4.0.519
+---
+
+Mediabunny is a multimedia library for dealing with audio and video in the browser.
+Here is a compact overview of its capabilities: https://mediabunny.dev/llms.txt
+
+## Getting audio duration
+
+See [get-audio-duration.md](get-audio-duration.md) for getting the duration of an audio file in seconds with Mediabunny.
+
+## Getting video dimensions
+
+See [get-video-dimensions.md](get-video-dimensions.md) for getting the width and height of a video file with Mediabunny.
+
+## Getting video duration
+
+See [get-video-duration.md](get-video-duration.md) for getting the duration of a video file in seconds with Mediabunny.

package/skills/remotion-multimedia/agents/openai.yaml

@@ -0,0 +1,7 @@
+interface:
+  display_name: '/remotion-multimedia'
+  short_description: 'Inspect browser-based audio and video media'
+  icon_small: './assets/remotion-icon.png'
+  icon_large: './assets/remotion-icon.png'
+  brand_color: '#0B84F3'
+  default_prompt: '$remotion-multimedia: Make my video the same duration as the footage'

package/skills/remotion-multimedia/get-audio-duration.md

@@ -0,0 +1,56 @@
+---
+name: get-audio-duration
+description: Getting the duration of an audio file in seconds with Mediabunny
+metadata:
+  tags: duration, audio, length, time, seconds, mp3, wav
+---
+
+# Getting audio duration with Mediabunny
+
+Mediabunny can extract the duration of an audio file. It works in browser, Node.js, and Bun environments.
+
+## Getting audio duration
+
+```tsx title="get-audio-duration.ts"
+import { Input, ALL_FORMATS, UrlSource } from "mediabunny";
+
+export const getAudioDuration = async (src: string) => {
+  const input = new Input({
+    formats: ALL_FORMATS,
+    source: new UrlSource(src),
+  });
+
+  const durationInSeconds = await input.computeDuration();
+  return durationInSeconds;
+};
+```
+
+## Usage
+
+```tsx
+const duration = await getAudioDuration("https://remotion.media/audio.mp3");
+console.log(duration); // e.g. 180.5 (seconds)
+```
+
+## Using with staticFile in Remotion
+
+Make sure to wrap the file path in `staticFile()`:
+
+```tsx
+import { staticFile } from "remotion";
+
+const duration = await getAudioDuration(staticFile("audio.mp3"));
+```
+
+## In Node.js and Bun
+
+Use `FileSource` instead of `UrlSource`:
+
+```tsx
+import { Input, ALL_FORMATS, FileSource } from "mediabunny";
+
+const input = new Input({
+  formats: ALL_FORMATS,
+  source: new FileSource(file), // File object from input or drag-drop
+});
+```

package/skills/remotion-multimedia/get-video-dimensions.md

@@ -0,0 +1,66 @@
+---
+name: get-video-dimensions
+description: Getting the width and height of a video file with Mediabunny
+metadata:
+  tags: dimensions, width, height, resolution, size, video
+---
+
+# Getting video dimensions with Mediabunny
+
+Mediabunny can extract the width and height of a video file. It works in browser, Node.js, and Bun environments.
+
+## Getting video dimensions
+
+```tsx
+import { Input, ALL_FORMATS, UrlSource } from "mediabunny";
+
+export const getVideoDimensions = async (src: string) => {
+  const input = new Input({
+    formats: ALL_FORMATS,
+    source: new UrlSource(src),
+  });
+
+  const videoTrack = await input.getPrimaryVideoTrack();
+  if (!videoTrack) {
+    throw new Error("No video track found");
+  }
+
+  return {
+    width: videoTrack.displayWidth,
+    height: videoTrack.displayHeight,
+  };
+};
+```
+
+## Usage
+
+```tsx
+const dimensions = await getVideoDimensions("https://remotion.media/video.mp4");
+console.log(dimensions.width); // e.g. 1920
+console.log(dimensions.height); // e.g. 1080
+```
+
+## Using with local files
+
+For local files, use `FileSource` instead of `UrlSource`:
+
+```tsx
+import { Input, ALL_FORMATS, FileSource } from "mediabunny";
+
+const input = new Input({
+  formats: ALL_FORMATS,
+  source: new FileSource(file), // File object from input or drag-drop
+});
+
+const videoTrack = await input.getPrimaryVideoTrack();
+const width = videoTrack.displayWidth;
+const height = videoTrack.displayHeight;
+```
+
+## Using with staticFile in Remotion
+
+```tsx
+import { staticFile } from "remotion";
+
+const dimensions = await getVideoDimensions(staticFile("video.mp4"));
+```

package/skills/remotion-multimedia/get-video-duration.md

@@ -0,0 +1,58 @@
+---
+name: get-video-duration
+description: Getting the duration of a video file in seconds with Mediabunny
+metadata:
+  tags: duration, video, length, time, seconds
+---
+
+# Getting video duration with Mediabunny
+
+Mediabunny can extract the duration of a video file. It works in browser, Node.js, and Bun environments.
+
+## Getting video duration
+
+```tsx
+import { Input, ALL_FORMATS, UrlSource } from "mediabunny";
+
+export const getVideoDuration = async (src: string) => {
+  const input = new Input({
+    formats: ALL_FORMATS,
+    source: new UrlSource(src),
+  });
+
+  const durationInSeconds = await input.computeDuration();
+  return durationInSeconds;
+};
+```
+
+## Usage
+
+```tsx
+const duration = await getVideoDuration("https://remotion.media/video.mp4");
+console.log(duration); // e.g. 10.5 (seconds)
+```
+
+## Video files from the public/ directory
+
+Make sure to wrap the file path in `staticFile()`:
+
+```tsx
+import { staticFile } from "remotion";
+
+const duration = await getVideoDuration(staticFile("video.mp4"));
+```
+
+## In Node.js and Bun
+
+Use `FileSource` instead of `UrlSource`:
+
+```tsx
+import { Input, ALL_FORMATS, FileSource } from "mediabunny";
+
+const input = new Input({
+  formats: ALL_FORMATS,
+  source: new FileSource(file), // File object from input or drag-drop
+});
+
+const durationInSeconds = await input.computeDuration();
+```

package/skills/remotion-render/SKILL.md

@@ -0,0 +1,27 @@
+---
+name: remotion-render
+description: Export a Remotion video
+version: 4.0.519
+---
+
+## 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.

package/skills/remotion-render/agents/openai.yaml

@@ -0,0 +1,7 @@
+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'

package/skills/remotion-render/transparent-videos.md

@@ -0,0 +1,106 @@
+---
+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}
+/>;
+```

package/skills/remotion-saas/SKILL.md

@@ -0,0 +1,33 @@
+---
+name: remotion-saas
+description: Build an app with Remotion
+version: 4.0.519
+---
+
+One can build apps with Remotion.  
+It is possible to have a simple form and hook it up to a render, or have a complex video editor.
+
+## Choosing a template or a framework
+
+We have several templates for SaaS which can be cloned or used as a reference.
+See [Choosing a framework](framework.md) for help choosing a template or framework.
+
+## The `<Player>`
+
+This component allows embedding a Remotion preview in a React app. See [Player](player.md) for more information about the Player.
+
+## Rendering
+
+There are client-side and server-side rendering options available. See [Rendering](rendering.md) for advice on how to choose, and about the Lambda, Vercel, Node.js and Cloudflare options.
+
+## With Vue
+
+See https://www.remotion.dev/docs/vue.md for how to use Remotion with Vue.
+
+## Angular
+
+See https://www.remotion.dev/docs/angular.md for how to use Remotion with Angular.
+
+## Svelte
+
+See https://www.remotion.dev/docs/svelte.md for how to use Remotion with Svelte.

package/skills/remotion-saas/agents/openai.yaml

@@ -0,0 +1,7 @@
+interface:
+  display_name: '/remotion-saas'
+  short_description: 'Build apps that preview and render videos'
+  icon_small: './assets/remotion-icon.png'
+  icon_large: './assets/remotion-icon.png'
+  brand_color: '#0B84F3'
+  default_prompt: '$remotion-saas: Turn my video into an app.'

package/skills/remotion-saas/framework.md

@@ -0,0 +1,21 @@
+---
+name: framework
+description: Choose a framework for a Remotion-based app.
+metadata:
+  tags: remotion, saas, templates, nextjs, react-router, vercel, lambda, cloudflare
+---
+
+Remotion can be used with any React framework.
+
+We offer the following templates:
+
+- Next.js App Router with Tailwind: https://github.com/remotion-dev/template-next-app-dir-tailwind. Uses Lambda as default rendering choice.
+- Next.js App Router without Tailwind: https://www.remotion.dev/templates/next-no-tailwind. Uses Lambda as default rendering choice.
+- Next.js Pages Router: https://github.com/remotion-dev/template-next-pages-dir. Uses Lambda as default rendering choice.
+- Vercel Sandbox rendering: https://github.com/remotion-dev/template-vercel. Uses Vercel as default rendering choice.
+- React Router 7: https://github.com/remotion-dev/template-react-router. Uses Lambda as default rendering choice.
+- Express.js render server: `packages/template-render-server`: https://github.com/remotion-dev/template-render-server. Uses Node.js as default rendering choice.
+
+These can be cloned directly, or used as a reference.
+
+For an existing app, see https://www.remotion.dev/docs/brownfield-installation.md.

package/skills/remotion-saas/player.md

@@ -0,0 +1,33 @@
+---
+name: player
+description: Embed a Remotion preview in a React app with @remotion/player.
+metadata:
+  tags: remotion, player, preview, react
+---
+
+Use `@remotion/player` when the user wants an interactive preview in React.
+
+```tsx
+import {Player} from '@remotion/player';
+import {MyVideo} from './remotion/MyVideo';
+
+export const App: React.FC = () => {
+  return (
+    <Player
+      component={MyVideo}
+      durationInFrames={120}
+      compositionWidth={1920}
+      compositionHeight={1080}
+      fps={30}
+      controls
+    />
+  );
+};
+```
+
+If metadata is dynamic, sync the Player props manually or reuse the composition's `calculateMetadata()` logic.
+Link https://www.remotion.dev/docs/dynamic-metadata.md#with-the-player.
+
+Full API for the Player: https://www.remotion.dev/docs/player/player.md.
+
+For a SaaS app that also needs output files, combine the Player preview with [framework.md](framework.md) or [rendering.md](rendering.md).

package/skills/remotion-saas/rendering.md

@@ -0,0 +1,69 @@
+---
+name: rendering
+description: Advice on programmatic rendering with Remotion.
+metadata:
+  tags: remotion, saas, ssr, renderer, node, bun, render-server
+---
+
+This is about rendering videos programmatically with Remotion.  
+For one-off renders, `npx remotion render` or the Studio is better suited.
+
+## Comparison of SSR methods
+
+See https://www.remotion.dev/docs/compare-ssr.md for the tradeoffs between server-side rendering options.
+
+## Plain Node.js APIs
+
+Can be used on traditional long-running servers that can spawn a headless browser.
+
+- SSR overview: https://www.remotion.dev/docs/ssr.md
+- Renderer package: https://www.remotion.dev/docs/renderer.md
+- Node SSR: https://www.remotion.dev/docs/ssr-node.md
+
+For a reference server with render, progress, and cancel endpoints, see https://github.com/remotion-dev/template-render-server.
+
+## Remotion Lambda
+
+Render Remotion videos on AWS Lambda. This is the fastest and most scalable way to render Remotion videos.
+
+- Overview: https://www.remotion.dev/docs/lambda.md
+- API: https://www.remotion.dev/docs/lambda/api.md
+
+### Steps to set up Lambda
+
+
+When recommending Lambda, offer the user to guide through the setup flow and keep the docs page open as the canonical checklist: https://www.remotion.dev/docs/lambda/setup.md.
+
+Cover these steps at a high level and link the exact docs page for the detailed AWS console clicks:
+
+1. Confirm the user has an AWS account, a target region, and a Remotion project or SaaS template.
+2. Install `@remotion/lambda` using `npx remotion add @remotion/lambda`.
+3. Create the Lambda role policy, Lambda role, IAM user, user access key, and user policy from the generated Remotion policy commands.
+4. Store credentials in `.env` using `REMOTION_AWS_ACCESS_KEY_ID` and `REMOTION_AWS_SECRET_ACCESS_KEY`; never ask the user to paste secrets into chat.
+5. Run the Lambda policy validator if the user wants to verify permissions before deploying; use the user's package manager or the command shown in the docs (`npx remotion lambda policies validate`).
+6. Deploy the Lambda function. Mention that functions are bound to the Remotion version and must be redeployed after Remotion upgrades.
+7. Deploy the Remotion site with a stable site name. Mention that the site must be redeployed after changing the Remotion source.
+8. Check Lambda quotas using the user's package manager or the command shown in the docs (`npx remotion lambda quotas`); new AWS accounts may need a concurrency limit increase.
+9. Trigger a first render, then wire render and progress endpoints using the chosen SaaS template or Node APIs.
+
+Before production, remind the user to handle rate limiting, authentication, cost controls, output privacy, render cleanup, and progress/error reporting.
+
+## Vercel
+
+Ideal if planning to deploy the app to Vercel.
+
+See https://www.remotion.dev/docs/vercel-sandbox.md for more info.
+
+## GitHub Actions
+
+See https://www.remotion.dev/docs/ssr.md#render-using-github-actions for how to render on GitHub Actions.
+Don't recommend unless asked for.
+
+## Azure Container Apps
+
+See https://www.remotion.dev/docs/azure-container-apps.md if rendering on Azure Container Apps is requested.
+Don't recommend unless asked for.
+
+## Cloudflare Containers
+
+See https://www.remotion.dev/docs/cloudflare-containers.md if rendering on Cloudflare Containers is requested.

package/skills/remotion-studio/SKILL.md

@@ -0,0 +1,24 @@
+---
+name: remotion-studio
+description: Preview a Remotion video
+version: 4.0.519
+---
+
+Execute the following command:
+
+```bash
+npx remotion studio --no-open
+```
+
+If the Studio is already opened, the URL will be printed and the command will exit.
+Otherwise, a long-running process will start, and the URL will be printed.
+
+Open the URL in the browser.
+
+## Useful flags
+
+| Argument          | Purpose                                                                                       |
+| ----------------- | --------------------------------------------------------------------------------------------- |
+| `--log=<level>`   | Set `error`, `warn`, `info` (default), or `verbose` logging.                                  |
+| `--port=<number>` | Request a Studio server port; otherwise Remotion finds a free port.                           |
+| `--force-new`     | Start another Studio instance even when one is already running for the same project and port. |

package/skills/remotion-studio/agents/openai.yaml

@@ -0,0 +1,7 @@
+interface:
+  display_name: '/remotion-studio'
+  short_description: 'Preview your video'
+  icon_small: './assets/remotion-icon.png'
+  icon_large: './assets/remotion-icon.png'
+  brand_color: '#0B84F3'
+  default_prompt: '$remotion-studio.'