opencode-skills-collection 4.0.69 → 4.0.70

package/bundled-skills/remotion-create/SKILL.md

@@ -0,0 +1,106 @@
+---
+name: remotion-create
+description: Create a new Remotion video
+version: 4.0.526
+source_repo: remotion-dev/skills
+source_type: official
+source: remotion-dev
+date_added: '2026-09-21'
+risk: unknown
+---
+## When to Use
+- Use when this upstream workflow matches the user's stated goal.
+- Use when the task requires the procedures documented in this skill.
+
+These are instructions for making a new Remotion project and composition.  
+If this is not the next task, see Remotion Best Practices
+
+## Scaffold a project
+
+If a project already exists, skip this.
+Ensure Node.js and Git is installed, and the current folder is appropriate for starting a new project.
+
+Inspect the current folder, including hidden files, before choosing where to scaffold.
+
+### Empty folder
+
+If it is empty, or contains only disposable operating-system metadata such as `.DS_Store`, create the project directly in the current folder.
+Remove only those disposable metadata files first, since `create-video` rejects non-empty folders.
+Do not treat all hidden files as disposable: files such as `.env` and directories such as `.git` are meaningful contents.
+
+Scaffold in existing folder:
+
+```bash
+npx create-video@latest --yes --blank --no-tailwind .
+npm i
+```
+
+### Non-empty folder
+
+If the current folder contains meaningful contents and no project already exists, scaffold into a new subfolder.
+Replace `my-video` with a suitable project name.
+
+
+```bash
+npx create-video@latest --yes --blank --no-tailwind my-video
+cd my-video
+npm i
+```
+
+## Designing a video
+
+Keep the scaffold and add React Markup.
+Follow Remotion React Markup Best Practices and [Video Layout Rules for video-first layout and text sizing guidance.
+
+## Is this a multi-scene video?
+
+If this is a video with multiple subsequence videos, follow guidance at Multi-scene videos.
+
+## Interactivity Best Practices
+
+By structuring the React Markup following Remotion Interactivity Best Practices, you allow the user to make edits in the Studio which write back to code.
+
+## TailwindCSS
+
+If Tailwind is requested, see [tailwind.md for using TailwindCSS in Remotion.
+
+## Open the preview
+
+Start the preview server after building the composition:
+
+```bash
+npx remotion studio --no-open
+```
+
+This will start a long-running process and print the server URL for the preview.  
+If the server is already started, it will print the URL.
+If an in-harness browser is available, open it there.
+You can visit a specific composition by navigating to `/[composition-id]`, for example `http://localhost:3000/MapAnimation`.
+
+## Render the video
+
+Only render if the user explicitly asks for it.
+
+```
+npx remotion render
+```
+
+For more options, see Rendering.
+
+## Follow-up
+
+The video creation process has finished.
+For follow-up prompts, use Remotion Best Practices
+
+
+## Examples
+
+```text
+User: Apply this skill to my current task.
+Assistant: Follow the workflow in this skill, cite limitations, and ask before risky steps.
+```
+
+## Limitations
+
+- Imported upstream skill; verify credentials, permissions, and safety boundaries before execution.
+- Does not replace environment-specific validation, testing, or maintainer review.

package/bundled-skills/remotion-create/agents/openai.yaml

@@ -0,0 +1,7 @@
+interface:
+  display_name: '/remotion-create'
+  short_description: 'Create a new Remotion video project'
+  icon_small: './assets/remotion-icon.svg'
+  icon_large: './assets/remotion-icon.svg'
+  brand_color: '#0B84F3'
+  default_prompt: '$remotion-create: Create a Remotion video and make a promo for my product'

package/bundled-skills/remotion-create/assets/remotion-icon.svg

@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">
+<title>Remotion</title>
+<path d="M148.332 92.9015C143.307 93.1742 139.259 93.9713 135.179 95.5236C133.144 96.2893 129.809 97.957 127.973 99.1108C120.295 103.925 114.443 111.162 111.391 119.584C110.782 121.252 109.136 126.57 108.076 130.23C101.018 154.7 97.0112 181.456 96.1511 209.776C96.0148 214.286 96.0148 225.026 96.1511 229.463C96.728 248.237 98.5216 265.187 101.773 282.472C103.095 289.468 105.213 298.866 106.44 303.135C108.947 311.809 114.065 319.193 121.344 324.605C126.221 328.234 131.759 330.668 137.895 331.863C140.853 332.44 144.755 332.702 147.629 332.514C151.604 332.251 159.491 331.192 165.9 330.049C194.786 324.899 221.469 315.679 245.666 302.485C260.99 294.125 274.09 285.074 286.729 274.092C299.326 263.163 310.066 251.405 319.516 238.21C321.708 235.158 322.81 233.375 323.911 231.131C326.743 225.341 328.075 219.583 328.064 213.143C328.064 207.143 326.932 201.815 324.488 196.361C323.313 193.728 322.191 191.84 319.674 188.253C310.402 175.048 300.112 163.542 287.568 152.361C268.122 135.034 245.026 120.822 219.235 110.302C213.644 108.026 208.138 106.022 201.509 103.851C187.475 99.2681 170.106 95.2929 155.411 93.3105C153.104 92.9959 149.968 92.8176 148.332 92.9015Z" fill="#0B84F3"/>
+</svg>

package/bundled-skills/remotion-create/tailwind.md

@@ -0,0 +1,11 @@
+---
+name: tailwind
+description: Using TailwindCSS in Remotion.
+metadata:
+---
+
+You can and should use TailwindCSS in Remotion, if TailwindCSS is installed in the project.
+
+Don't use `transition-*` or `animate-*` classes - always animate using the `useCurrentFrame()` hook.
+
+Tailwind must be installed and enabled first in a Remotion project - see https://www.remotion.dev/docs/tailwind.

package/bundled-skills/remotion-create/video-layout.md

@@ -0,0 +1,9 @@
+You are designing a video, not a webpage.
+
+- Decide what the viewer should notice first in each scene. Build the frame around that one thing.
+- Keep important content inside a generous safe area. For 1080px-wide videos, keep key text at least 80px from the sides and 100px from the top and bottom.
+- Do not add redundant elements.
+- For 1080px-wide compositions, use these rough minimums:
+  - Main headline: 84px
+  - Important supporting text: 44px
+- Scale those values with the composition width.

package/bundled-skills/remotion-docs/SKILL.md

@@ -0,0 +1,67 @@
+---
+name: remotion-docs
+description: Search Remotion documentation
+version: 4.0.526
+source_repo: remotion-dev/skills
+source_type: official
+source: remotion-dev
+date_added: '2026-09-21'
+risk: unknown
+---
+## When to Use
+- Use when this upstream workflow matches the user's stated goal.
+- Use when the task requires the procedures documented in this skill.
+
+This skill teaches you how to discover and read current Remotion documentation.
+If this is not relevant, load Remotion Best Practices instead.
+
+## Searching the docs
+
+Use the Algolia search API to find relevant documentation pages:
+
+```
+POST https://plsduol1ca-dsn.algolia.net/1/indexes/*/queries?x-algolia-api-key=3e42dbd4f895fe93ff5cf40d860c4a85&x-algolia-application-id=PLSDUOL1CA
+Content-Type: application/x-www-form-urlencoded
+
+{
+  "requests": [
+    {
+      "query": "<your search query>",
+      "indexName": "remotion",
+      "params": "attributesToRetrieve=[\"hierarchy.lvl0\",\"hierarchy.lvl1\",\"hierarchy.lvl2\",\"url\"]&hitsPerPage=10"
+    }
+  ]
+}
+```
+
+Each hit contains a `url` field pointing to the documentation page.
+
+## Fetching a page as Markdown
+
+Append `.md` to any Remotion docs URL to retrieve its Markdown source (saves tokens):
+
+```
+https://www.remotion.dev/docs/use-video-config.md
+https://www.remotion.dev/docs/sequence.md
+https://www.remotion.dev/docs/lambda/rendermediaonlambda.md
+```
+
+## Workflow
+
+1. Search Algolia for the concept or API you need.
+2. Pick the most relevant URL(s) from the results.
+3. Fetch each URL with the `.md` suffix.
+4. Implement using the current documentation rather than memorized API knowledge.
+
+
+## Examples
+
+```text
+User: Apply this skill to my current task.
+Assistant: Follow the workflow in this skill, cite limitations, and ask before risky steps.
+```
+
+## Limitations
+
+- Imported upstream skill; verify credentials, permissions, and safety boundaries before execution.
+- Does not replace environment-specific validation, testing, or maintainer review.

package/bundled-skills/remotion-docs/agents/openai.yaml

@@ -0,0 +1,7 @@
+interface:
+  display_name: '/remotion-docs'
+  short_description: 'Search current Remotion documentation'
+  icon_small: './assets/remotion-icon.svg'
+  icon_large: './assets/remotion-icon.svg'
+  brand_color: '#0B84F3'
+  default_prompt: '$remotion-docs: What server-side rendering options does Remotion have?'

package/bundled-skills/remotion-docs/assets/remotion-icon.svg

@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">
+<title>Remotion</title>
+<path d="M148.332 92.9015C143.307 93.1742 139.259 93.9713 135.179 95.5236C133.144 96.2893 129.809 97.957 127.973 99.1108C120.295 103.925 114.443 111.162 111.391 119.584C110.782 121.252 109.136 126.57 108.076 130.23C101.018 154.7 97.0112 181.456 96.1511 209.776C96.0148 214.286 96.0148 225.026 96.1511 229.463C96.728 248.237 98.5216 265.187 101.773 282.472C103.095 289.468 105.213 298.866 106.44 303.135C108.947 311.809 114.065 319.193 121.344 324.605C126.221 328.234 131.759 330.668 137.895 331.863C140.853 332.44 144.755 332.702 147.629 332.514C151.604 332.251 159.491 331.192 165.9 330.049C194.786 324.899 221.469 315.679 245.666 302.485C260.99 294.125 274.09 285.074 286.729 274.092C299.326 263.163 310.066 251.405 319.516 238.21C321.708 235.158 322.81 233.375 323.911 231.131C326.743 225.341 328.075 219.583 328.064 213.143C328.064 207.143 326.932 201.815 324.488 196.361C323.313 193.728 322.191 191.84 319.674 188.253C310.402 175.048 300.112 163.542 287.568 152.361C268.122 135.034 245.026 120.822 219.235 110.302C213.644 108.026 208.138 106.022 201.509 103.851C187.475 99.2681 170.106 95.2929 155.411 93.3105C153.104 92.9959 149.968 92.8176 148.332 92.9015Z" fill="#0B84F3"/>
+</svg>

package/bundled-skills/remotion-interactivity/SKILL.md

@@ -0,0 +1,270 @@
+---
+name: remotion-interactivity
+description: Structure Remotion markup for interactivity
+version: 4.0.526
+source_repo: remotion-dev/skills
+source_type: official
+source: remotion-dev
+date_added: '2026-09-21'
+risk: unknown
+---
+## When to Use
+- Use when this upstream workflow matches the user's stated goal.
+- Use when the task requires the procedures documented in this skill.
+
+By writing Remotion markup in a specific way, the Remotion Studio is able to recognize the structure of the code and makes it interactive:
+
+- Allowing items to be selected by clicking on them
+- Allowing drag+drop, resizing and rotation
+- Editing the CSS styles
+- Making keyframes and easing values editable
+
+If the markup is too complex for the Studio to make it interactive, then the values become grayed out.
+
+## Make an HTML element interactive using `Interactive`
+
+Every HTML and SVG element (except `<Img>`, it already is interactive) such as `<div>` can be turned interactive using `Interactive`:
+
+```tsx title="Interactive elements"
+<Interactive.Div
+  name="Greeting card"
+  style={{fontSize: 80, padding: 24}}
+>
+  Hello
+</Interactive.Div>
+```
+
+This allows styles and keyframes to be set in the Studio. Be sensible, if a component has many elements, the timeline might get messy.
+
+## Prefer inline text
+
+If text is fixed and only used once, write it directly inside the interactive element instead of extracting it into a constant.
+
+```tsx title="Inline text"
+// 👍 Fixed copy stays editable
+<Interactive.Div name="Title">
+  Remotion Best Practices
+</Interactive.Div>
+```
+
+Use a prop or variable only when the text is dynamic or reused.
+
+## Give interactive elements a descriptive name
+
+Add a `name` prop to elements to make them easily identifyable.
+Avoid computed names, hardcode them.
+
+```tsx title="Interactive names"
+<>
+  <Interactive.Div name="Hero title" style={{fontSize: 80}}>
+    Launch day
+  </Interactive.Div>
+  <Img name="Avatar" src="https://remotion.media/image.jpeg" />
+  <Video name="Background" src="https://remotion.media/video.mp4" />
+  <Sequence name="Title">
+    Launch day
+  </Sequence>
+</>
+```
+
+## Keep all CSS styles inline
+
+The best way is to just pass a plain object to `style` - no referring to constants, no object spreading, no math.
+
+```tsx title="Interactive example"
+<Interactive.Div
+  style={{
+    fontSize: 80,
+    color: 'red',
+  }}
+>
+  Hello World!
+</Interactive.Div>
+```
+
+```tsx title="❌ Bad for interactivity"
+const baseStyle = useMemo(() => {
+  return {
+    fontSize: 12 // ❌ Non-inline styles are not supported
+  }
+}, []);
+
+<Interactive.Div
+  style={{
+    ...baseStyle, // ❌ Spreading is not supported
+    color: RED, // ❌ Referring to constants is not supported
+    scale: frame * 10 // ❌ Math is not supported
+  }}
+>
+  Hello World!
+</Interactive.Div>
+```
+
+## Animate using `interpolate()`
+
+Write animations as inline `interpolate()` calls on the property that changes.  
+The output range, easing, extrapolation and `output` property should use hardcoded values.
+
+The input range may additionally use `durationInFrames`, `fps`, `width` and `height` destructured directly from `useVideoConfig()`. Bare identifiers such as `durationInFrames`, multiplication with a number such as `2 * fps` or `fps * 2`, and subtraction of a number such as `durationInFrames - 1` are supported.
+
+```tsx title="Inline values"
+const {fps, durationInFrames} = useVideoConfig();
+
+// 👍 Inline values can be standardized and keyframed
+<Interactive.Div
+  name="Product card"
+  style={{
+    color: 'white',
+    fontSize: 80,
+    scale: interpolate(frame, [0, fps], [0, 1], {
+      easing: Easing.spring({damping: 200}),
+      output: 'perceptual-scale',
+      extrapolateLeft: 'clamp',
+      extrapolateRight: 'clamp'
+    }),
+    rotate: interpolate(frame, [0, 1 * fps], ['0deg', '20deg'], {
+      easing: Easing.spring({damping: 200}),
+      extrapolateLeft: 'clamp',
+      extrapolateRight: 'clamp'
+    }),
+    translate: interpolate(
+      frame,
+      [durationInFrames - 30, durationInFrames],
+      ['0px 0px', '0px 120px'],
+      {
+        easing: Easing.spring({damping: 200}),
+        output: 'perceptual-scale',
+        extrapolateLeft: 'clamp',
+        extrapolateRight: 'clamp'
+      }
+    ),
+  }}
+/>
+```
+
+```tsx title="❌ Bad interactivity"
+const translateY = interpolate(frame, [0, 30], [0, 120]); // ❌ Math should be directly in the markup
+
+<Interactive.Div
+  name="Product card"
+  style={{
+    translate: translateY, // ❌ Only inline interpolate() calls are supported,
+    rotate: interpolate(frame, [start, start + 10], [0, Math.PI]), // ❌ Cannot use math with arbitrary variables, cannot use constants
+    scale: interpolate(anyVariable, [0, 30], [0, 1]) // ❌ Can only interpret the `frame` variable.
+  }}
+/>
+```
+
+## Use `scale`, `translate`, `rotate` CSS properties
+
+Avoid the `transform` CSS property.  
+If possible, use `scale`, `rotate` and `translate` instead because only they are interactively editable.
+
+## Keep composition metadata inline
+
+When scaffolding a composition, keep `width`, `height`, `fps`, `durationInFrames` and `defaultProps` inline and make no type assertions.
+
+The Props editor can save visual edits back to your code when `defaultProps` is an inline object literal on `<Composition>` or `<Still>`.
+
+```tsx
+// 👍 Static values are in <Composition>, dynamic values are in calculateMetadata()
+const calculateMetadata = useMemo(async () => {
+  const dimensions = await getDimensions(); // just an example
+  return {width: dimensions.width, height: dimensions.height};
+});
+
+<Composition
+  id="my-video"
+  component={MyComponent}
+  durationInFrames={150}
+  fps={30}
+  calculateMetadata={calculateMetadata}
+  defaultProps={{title: 'Hello', color: '#0b84ff'}}
+/>
+```
+
+```tsx title="Negative examples"
+const defaultProps = {title: 'Hello', color: '#0b84ff'}; // ❌ Don't extract defaultProps, must be inline
+const calculateMetadata = useMemo(() => {
+  // ❌ Unnecessary because no calculation is being done,
+  return {durationInFrames: 150, fps: 30, width: 1920, height: 1080};
+});
+
+<Composition
+  id="my-video"
+  component={MyComponent}
+  calculateMetadata={calculateMetadata}
+  defaultProps={{
+    title: 'Hello',
+  } as Props} // ❌ Don't have type assertions, instead type MyComponent correctly
+/>
+```
+
+Use only `calculateMetadata()` for the part of the metadata that is dynamic.
+
+## Effects should be inline too
+
+The effects array should not be computed.  
+The same rules for setting keyframes as `interpolate()` apply too here: All values should also be hardcoded: Input range, output range, easing, extrapolation, `output` property.
+
+```tsx title="Effects"
+// 👍 Parameters are inline and the array shape is stable
+<CanvasImage
+  src={src}
+  width={1280}
+  height={720}
+  effects={[
+    radialProgressiveBlur({
+      center: [0.5, 0.5],
+      width: 1.2,
+      height: 0.8,
+      start: 0.2,
+      disabled: true,
+      rotation: interpolate(frame, [0, 120], [0, 180]),
+    }),
+  ]}
+/>
+
+const center = [0.5, 0.5] as const;
+const rotation = frame * 1.5;
+
+<CanvasImage
+  src={src}
+  width={1280}
+  height={720}
+  // ❌ Conditional effect is not animateable
+  effects={enabled ? [
+    radialProgressiveBlur({
+      // ❌ Not inline
+      center,
+      rotation,
+    }),
+  ] : []}
+/>
+```
+
+Render separate elements if one version should have effects and another should not.
+
+## Making your own component interactive
+
+When using `Interactive.withSchema()`, include `Interactive.baseSchema` in the schema so standard timeline controls such as trimming and visibility remain available.
+
+To make a custom userland component interactive, use:
+[Make a component interactive](https://www.remotion.dev/docs/studio/make-component-interactive.md)
+
+## Video editing
+
+If a Remotion component mainly consists of video and audio clips, see Video editing for best practices on how to structure Remotion markup so the clips are interactively editable in the timeline.
+
+
+## Examples
+
+```text
+User: Apply this skill to my current task.
+Assistant: Follow the workflow in this skill, cite limitations, and ask before risky steps.
+```
+
+## Limitations
+
+- Imported upstream skill; verify credentials, permissions, and safety boundaries before execution.
+- Does not replace environment-specific validation, testing, or maintainer review.

package/bundled-skills/remotion-interactivity/agents/openai.yaml

@@ -0,0 +1,7 @@
+interface:
+  display_name: '/remotion-interactivity'
+  short_description: 'Make compositions editable in Remotion Studio'
+  icon_small: './assets/remotion-icon.svg'
+  icon_large: './assets/remotion-icon.svg'
+  brand_color: '#0B84F3'
+  default_prompt: '$remotion-interactivity: Make the markup in MyComp.tsx interactive'

package/bundled-skills/remotion-interactivity/assets/remotion-icon.svg

@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">
+<title>Remotion</title>
+<path d="M148.332 92.9015C143.307 93.1742 139.259 93.9713 135.179 95.5236C133.144 96.2893 129.809 97.957 127.973 99.1108C120.295 103.925 114.443 111.162 111.391 119.584C110.782 121.252 109.136 126.57 108.076 130.23C101.018 154.7 97.0112 181.456 96.1511 209.776C96.0148 214.286 96.0148 225.026 96.1511 229.463C96.728 248.237 98.5216 265.187 101.773 282.472C103.095 289.468 105.213 298.866 106.44 303.135C108.947 311.809 114.065 319.193 121.344 324.605C126.221 328.234 131.759 330.668 137.895 331.863C140.853 332.44 144.755 332.702 147.629 332.514C151.604 332.251 159.491 331.192 165.9 330.049C194.786 324.899 221.469 315.679 245.666 302.485C260.99 294.125 274.09 285.074 286.729 274.092C299.326 263.163 310.066 251.405 319.516 238.21C321.708 235.158 322.81 233.375 323.911 231.131C326.743 225.341 328.075 219.583 328.064 213.143C328.064 207.143 326.932 201.815 324.488 196.361C323.313 193.728 322.191 191.84 319.674 188.253C310.402 175.048 300.112 163.542 287.568 152.361C268.122 135.034 245.026 120.822 219.235 110.302C213.644 108.026 208.138 106.022 201.509 103.851C187.475 99.2681 170.106 95.2929 155.411 93.3105C153.104 92.9959 149.968 92.8176 148.332 92.9015Z" fill="#0B84F3"/>
+</svg>

package/bundled-skills/remotion-render/SKILL.md

@@ -0,0 +1,48 @@
+---
+name: remotion-render
+description: Export a Remotion video
+version: 4.0.526
+source_repo: remotion-dev/skills
+source_type: official
+source: remotion-dev
+date_added: '2026-09-21'
+risk: unknown
+---
+## When to Use
+- Use when this upstream workflow matches the user's stated goal.
+- Use when the task requires the procedures documented in this skill.
+
+## 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.
+
+
+## Examples
+
+```text
+User: Apply this skill to my current task.
+Assistant: Follow the workflow in this skill, cite limitations, and ask before risky steps.
+```
+
+## Limitations
+
+- Imported upstream skill; verify credentials, permissions, and safety boundaries before execution.
+- Does not replace environment-specific validation, testing, or maintainer review.

package/bundled-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.svg'
+  icon_large: './assets/remotion-icon.svg'
+  brand_color: '#0B84F3'
+  default_prompt: '$remotion-render: Render this as transparent ProRes'

package/bundled-skills/remotion-render/assets/remotion-icon.svg

@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">
+<title>Remotion</title>
+<path d="M148.332 92.9015C143.307 93.1742 139.259 93.9713 135.179 95.5236C133.144 96.2893 129.809 97.957 127.973 99.1108C120.295 103.925 114.443 111.162 111.391 119.584C110.782 121.252 109.136 126.57 108.076 130.23C101.018 154.7 97.0112 181.456 96.1511 209.776C96.0148 214.286 96.0148 225.026 96.1511 229.463C96.728 248.237 98.5216 265.187 101.773 282.472C103.095 289.468 105.213 298.866 106.44 303.135C108.947 311.809 114.065 319.193 121.344 324.605C126.221 328.234 131.759 330.668 137.895 331.863C140.853 332.44 144.755 332.702 147.629 332.514C151.604 332.251 159.491 331.192 165.9 330.049C194.786 324.899 221.469 315.679 245.666 302.485C260.99 294.125 274.09 285.074 286.729 274.092C299.326 263.163 310.066 251.405 319.516 238.21C321.708 235.158 322.81 233.375 323.911 231.131C326.743 225.341 328.075 219.583 328.064 213.143C328.064 207.143 326.932 201.815 324.488 196.361C323.313 193.728 322.191 191.84 319.674 188.253C310.402 175.048 300.112 163.542 287.568 152.361C268.122 135.034 245.026 120.822 219.235 110.302C213.644 108.026 208.138 106.022 201.509 103.851C187.475 99.2681 170.106 95.2929 155.411 93.3105C153.104 92.9959 149.968 92.8176 148.332 92.9015Z" fill="#0B84F3"/>
+</svg>

package/bundled-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}
+/>;
+```