dsh-remotion 0.3.2 → 0.3.3

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

@@ -1,7 +1,7 @@
 interface:
   display_name: '/remotion-markup'
   short_description: 'Apply Remotion animation and effects practices'
-  icon_small: './assets/remotion-icon.png'
-  icon_large: './assets/remotion-icon.png'
+  icon_small: './assets/remotion-icon.svg'
+  icon_large: './assets/remotion-icon.svg'
   brand_color: '#0B84F3'
   default_prompt: '$remotion-markup: Apply best Remotion Practices to MyComp.tsx.'

package/skills/remotion-markup/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/skills/remotion-markup/audio.md

@@ -58,18 +58,16 @@ The audio still starts playing at the beginning of the composition - only the sp
 
 ## Delaying
 
-Wrap the audio in a `<Sequence>` to delay when it starts:
+Set `from` directly on `<Audio>` to delay when it starts:
 
 ```tsx
-import { Sequence, staticFile } from "remotion";
+import { staticFile, useVideoConfig } from "remotion";
 import { Audio } from "@remotion/media";
 
 const { fps } = useVideoConfig();
 
 return (
-  <Sequence from={1 * fps}>
-    <Audio src={staticFile("audio.mp3")} />
-  </Sequence>
+  <Audio from={fps} src={staticFile("audio.mp3")} />
 );
 ```
 

package/skills/remotion-markup/calculate-metadata.md

@@ -26,7 +26,7 @@ For static dimensions, duration, FPS, and initial props, inline the values on `<
 
 ## Setting duration based on a video
 
-Use the [`getVideoDuration`](../remotion-multimedia/get-video-duration.md) and [`getVideoDimensions`](../remotion-multimedia/get-video-dimensions.md) skills to get the video duration and dimensions:
+Use the `getVideoDuration` and `getVideoDimensions` skills to get the video duration and dimensions:
 
 ```tsx
 import { CalculateMetadataFunction } from "remotion";
@@ -45,7 +45,7 @@ const calculateMetadata: CalculateMetadataFunction<Props> = async ({
 
 ## Matching dimensions of a video
 
-Use the [`getVideoDimensions`](../remotion-multimedia/get-video-dimensions.md) skill to get the video dimensions:
+Use the `getVideoDimensions` skill to get the video dimensions:
 
 ```tsx
 import { CalculateMetadataFunction } from "remotion";

package/skills/remotion-markup/compositions.md

@@ -106,12 +106,18 @@ Use [`calculateMetadata`](./calculate-metadata.md) to make dimensions, duration,
 
 ## Nesting compositions within another
 
-To add a composition within another composition, you can use the `<Sequence>` component with a `width` and `height` prop to specify the size of the composition.
+To render a composition's component inside another composition, use `<Sequence>` with `width` and `height` when the nested content needs its own dimensions.
+
+When the nested scene should have its own editable Studio timeline, use the [connected composition structure](connected-compositions.md).
 
 ```tsx
-<AbsoluteFill>
-  <Sequence width={COMPOSITION_WIDTH} height={COMPOSITION_HEIGHT}>
-    <CompositionComponent />
+<>
+  <Video src="https://remotion.media/video.mp4" />
+  <Sequence
+    width={1920}
+    height={1080}
+  >
+    <OverlayComponent />
   </Sequence>
-</AbsoluteFill>
+</>
 ```

package/skills/remotion-markup/connected-compositions.md

@@ -0,0 +1,79 @@
+# Connected compositions
+
+Using the connected compositions pattern, a group of layers can get their own Studio timeline, like a precomposition in After Effects.
+
+Use connected composition when a section has its own layers or timing, will be reused, or would be easier to edit and preview on its own.
+
+1. Put the scene's markup in a named React component. Multiple internal layers and sequences can live inside it.
+2. Render exactly one direct instance of that component inside a `<Sequence>`, `<Series.Sequence>`, or `<TransitionSeries.Sequence>` in the parent.
+3. Register the **same component reference** with `<Composition component={...}>` in the root. Give it a unique `id` and the dimensions, fps, and natural duration needed to preview the scene on its own. A `<Folder>` can keep scene compositions together.
+
+```tsx
+// MyVideo.tsx
+import {Series} from 'remotion';
+import {OpeningScene} from './OpeningScene';
+import {FeatureScene} from './FeatureScene';
+
+export const MyVideo = () => (
+  <Series>
+    <Series.Sequence
+      name="Opening"
+      durationInFrames={90}
+    >
+      <OpeningScene />
+    </Series.Sequence>
+    <Series.Sequence
+      name="Feature"
+      durationInFrames={120}
+    >
+      <FeatureScene />
+    </Series.Sequence>
+  </Series>
+);
+```
+
+```tsx
+// Root.tsx
+import {Composition, Folder} from 'remotion';
+import {MyVideo} from './MyVideo';
+import {OpeningScene} from './OpeningScene';
+import {FeatureScene} from './FeatureScene';
+
+export const RemotionRoot = () => (
+  <>
+    <Folder name="MyVideo-Scenes">
+      <Composition
+        id="Opening"
+        component={OpeningScene}
+        width={1920}
+        height={1080}
+        fps={30}
+        durationInFrames={90}
+      />
+      <Composition
+        id="Feature"
+        component={FeatureScene}
+        width={1920}
+        height={1080}
+        fps={30}
+        durationInFrames={120}
+      />
+    </Folder>
+    <Composition
+      id="MyVideo"
+      component={MyVideo}
+      width={1920}
+      height={1080}
+      fps={30}
+      durationInFrames={210}
+    />
+  </>
+);
+```
+
+Studio replaces the layers with a reference to the connected composition in the timeline.
+Double-clicking a sequence with one connected composition opens it at the corresponding frame.
+Editing the shared component changes both views.
+
+If the scene takes props, pass the intended values in the parent and use matching `defaultProps` on its standalone registration; registration does not automatically copy the parent's props.
+Keep scene and parent fps and dimensions aligned unless their difference is intentional.

package/skills/remotion-markup/cropping.md

@@ -18,7 +18,7 @@ The following components support `crop*` props:
 Crop values are ratios between `0` and `1`.
 A value of `0` applies no crop on that edge.
 A value of `1` is a full crop.
-Keep [Interactivity Best Practices](../remotion-interactivity/SKILL.md) also for cropping, to keep it editable and keyframable.
+Keep Interactivity Best Practices also for cropping, to keep it editable and keyframable.
 
 ```tsx
 <CanvasImage

package/skills/remotion-markup/embedding-videos.md

@@ -54,18 +54,16 @@ return (
 
 ## Delaying
 
-Wrap the video in a `<Sequence>` to delay when it appears:
+Set `from` directly on `<Video>` to delay when it appears:
 
 ```tsx
-import { Sequence, staticFile } from "remotion";
+import { staticFile, useVideoConfig } from "remotion";
 import { Video } from "@remotion/media";
 
 const { fps } = useVideoConfig();
 
 return (
-  <Sequence from={1 * fps}>
-    <Video src={staticFile("video.mp4")} />
-  </Sequence>
+  <Video from={fps} src={staticFile("video.mp4")} />
 );
 ```
 

package/skills/remotion-markup/motion-blur.md

@@ -0,0 +1,60 @@
+# Motion blur
+
+Use `@remotion/motion-blur` for frame-driven motion blur.  
+Install it with `npx remotion add @remotion/motion-blur`.
+
+`<HtmlInCanvasMotionBlur>` is the state of the art in Remotion for blurring animated HTML. It captures the content at fractional frames and averages its pixels in a canvas.
+
+## `<HtmlInCanvasMotionBlur>`
+
+Available from Remotion 4.0.529.  
+Supply the canvas `width` and `height`, usually from `useVideoConfig()`.  
+`shutterAngle` defaults to `180` and accepts `0` to `360`.
+`0` disables blur. `samples` defaults to `8` and must be an integer from `1` to `64`. More samples can smooth the blur but increase preview and render cost.
+
+Call `useCurrentFrame()` inside the child component so each sample receives its own frame.
+
+```tsx
+import {
+  HtmlInCanvasMotionBlur,
+} from '@remotion/motion-blur';
+import {useCurrentFrame, useVideoConfig} from 'remotion';
+
+const MovingBox = () => {
+  const frame = useCurrentFrame();
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: frame * 10,
+        top: 200,
+        width: 120,
+        height: 120,
+        backgroundColor: '#ff6b6b',
+      }}
+    />
+  );
+};
+
+export const HtmlInCanvasBlur = () => {
+  const {width, height} = useVideoConfig();
+
+  return (
+    <HtmlInCanvasMotionBlur
+      width={width}
+      height={height}
+      samples={8}
+      shutterAngle={180}
+    >
+      <MovingBox />
+    </HtmlInCanvasMotionBlur>
+  );
+};
+```
+
+For live preview, enable HTML-in-canvas in Chrome 149 or later with `chrome://flags/#canvas-draw-element`.  
+No configuration for rendering is necessary.
+
+Do not nest `<HtmlInCanvas>` or `<HtmlInCanvasMotionBlur>` components; nested HTML-in-canvas is unsupported.
+
+If HTML-in-canvas is unavailable, see the [motion blur guide](https://www.remotion.dev/docs/motion-blur-guide) for other options. See the [`<HtmlInCanvasMotionBlur>` reference](https://www.remotion.dev/docs/motion-blur/html-in-canvas-motion-blur) for API details.

package/skills/remotion-markup/multi-scene-video.md

@@ -1,81 +1,81 @@
-If the video being created is a multi-scene video, it should be structured in a special way.
-Create a new folder and put each scene in a separate file.
+# Multi-scene videos
 
-```tsx
-// SceneA.tsx
-export const SceneA: React.FC = () => {
- return // ...
-}
-```
-
-```tsx
-// SceneB.tsx
-export const SceneB: React.FC = () => {
-  return // ...
-} 
-```
+Put each substantial scene in its own component and file.  
+Register those components as [connected compositions](connected-compositions.md) so each scene has an editable Studio timeline.
 
-Install `@remotion/transitions` if not yet available:
+Use `<TransitionSeries>` when the scenes may have transitions.  
+Install `@remotion/transitions` if it is missing.  
+Give each sequence an inline `durationInFrames` value so Studio can edit its timing.
 
-```
-npx remotion add @remotion/transitions
-```
+Example:
 
-// MyVideo.tsx
 ```tsx
+// MyVideo.tsx
 import {TransitionSeries} from '@remotion/transitions';
+import {OpeningScene} from './OpeningScene';
+import {FeatureScene} from './FeatureScene';
 
-const MyVideo: React.FC = () => {
-  return (
-    <TransitionSeries>
-      <TransitionSeries.Sequence durationInFrames={4 * fps} name="SceneA">
-        <SceneA />
-      </TransitionSeries.Sequence>
-      <TransitionSeries.Sequence durationInFrames={4 * fps} name="SceneB">
-        <SceneB />
-      </TransitionSeries.Sequence>
-    </TransitionSeries>
-  )
-}
+export const MyVideo = () => (
+  <TransitionSeries>
+    <TransitionSeries.Sequence
+      name="Opening"
+      durationInFrames={90}
+    >
+      <OpeningScene />
+    </TransitionSeries.Sequence>
+    <TransitionSeries.Sequence
+      name="Feature"
+      durationInFrames={120}
+    >
+      <FeatureScene />
+    </TransitionSeries.Sequence>
+  </TransitionSeries>
+);
 ```
 
-It could also make sense to register each scene individually in the root file so it can be edited there.
-If a composition with the same component is registered, one can double click the sequence in the main composition and jump to that composition.
+Register the same scene components, plus the parent video, in the root:
 
 ```tsx
-export const Root: React.FC = () => {
-  return (
-    <>
-      <Folder id="MyVideo-Scenes">
-        <Composition
-          id="Scene1"
-          component={Scene1}
-          durationInFrames={5 * fps}
-          fps={30}
-          width={1920}
-          height={1080}
-        />
-        <Composition
-          id="Scene2"
-          component={Scene2}
-          durationInFrames={5 * fps}
-          fps={30}
-          width={1920}
-          height={1080}
-        /> 
-      </Folder>
+// Root.tsx
+import {Composition, Folder} from 'remotion';
+import {OpeningScene} from './OpeningScene';
+import {FeatureScene} from './FeatureScene';
+import {MyVideo} from './MyVideo';
+
+export const RemotionRoot = () => (
+  <>
+    <Folder name="MyVideo-Scenes">
       <Composition
-        id="MyVideo"
-        component={MyVideo}
-        durationInFrames={10 * fps}
+        id="Opening"
+        component={OpeningScene}
+        width={1920}
+        height={1080}
         fps={30}
+        durationInFrames={90}
+      />
+      <Composition
+        id="Feature"
+        component={FeatureScene}
         width={1920}
         height={1080}
-      /> 
-    </>
-  )
-}
+        fps={30}
+        durationInFrames={120}
+      />
+    </Folder>
+    <Composition
+      id="MyVideo"
+      component={MyVideo}
+      width={1920}
+      height={1080}
+      fps={30}
+      durationInFrames={210}
+    />
+  </>
+);
 ```
 
-This allows the user to trim the start and end of the durations visually and add [transitions](./transitions.md) later.
-Prefer inlining the `durationInFrames` values, because only then they are editable. It's okay if the value is redundant.
+Keep each scene's standalone metadata and `defaultProps` consistent with how it is used in the main video.
+
+With no transition, this example needs a 210-frame main composition. If you add a transition, account for its overlap in the main duration; see [transitions](transitions.md).
+
+Use `<Series>` for consecutive scenes that do not need transitions. Use `<Sequence>` for scenes placed independently on the parent timeline.

package/skills/{remotion-best-practices/remotion-markup/remotion-maps/SKILL.md → remotion-markup/remotion-maps/REFERENCE.md}

@@ -1,7 +1,7 @@
 ---
 name: remotion-maps
 description: Remotion Map animation knowledge
-version: 4.0.519
+version: 4.0.529
 ---
 
 # Remotion Maps

package/skills/remotion-markup/remotion-maps/agents/openai.yaml

@@ -1,7 +1,7 @@
 interface:
   display_name: '/remotion-maps'
   short_description: 'Create animated maps in Remotion videos'
-  icon_small: './assets/remotion-icon.png'
-  icon_large: './assets/remotion-icon.png'
+  icon_small: './assets/remotion-icon.svg'
+  icon_large: './assets/remotion-icon.svg'
   brand_color: '#0B84F3'
   default_prompt: '$remotion-maps: Animate a dot from Zurich to New York.'

package/skills/remotion-markup/remotion-maps/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/skills/remotion-markup/remotion-maps/techniques/maplibre/TECHNIQUE.md

@@ -63,7 +63,7 @@ import 'maplibre-gl/dist/maplibre-gl.css';
 ```tsx
 import {useEffect, useRef, useState} from 'react';
 import {AbsoluteFill, useDelayRender, useVideoConfig} from 'remotion';
-import maplibregl from 'maplibre-gl';
+import * as maplibregl from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 
 const zurich: [number, number] = [8.5417, 47.3769];
@@ -79,6 +79,15 @@ export const MyComposition = () => {
 			return;
 		}
 
+		maplibregl.setWorkerUrl(
+			URL.createObjectURL(
+				new Blob(
+					[`import "https://unpkg.com/maplibre-gl@${maplibregl.getVersion()}/dist/maplibre-gl-worker.mjs";`],
+					{type: 'text/javascript'},
+				),
+			),
+		);
+
 		const mapInstance = new maplibregl.Map({
 			container: containerRef.current,
 			style: 'https://demotiles.maplibre.org/style.json',
@@ -131,7 +140,8 @@ import {
 	useDelayRender,
 	useVideoConfig,
 } from 'remotion';
-import maplibregl, {type GeoJSONSource, type Map} from 'maplibre-gl';
+import * as maplibregl from 'maplibre-gl';
+import {type GeoJSONSource, type Map} from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 
 const zurich: [number, number] = [8.5417, 47.3769];
@@ -214,6 +224,15 @@ export const MyComposition = () => {
 			return;
 		}
 
+		maplibregl.setWorkerUrl(
+			URL.createObjectURL(
+				new Blob(
+					[`import "https://unpkg.com/maplibre-gl@${maplibregl.getVersion()}/dist/maplibre-gl-worker.mjs";`],
+					{type: 'text/javascript'},
+				),
+			),
+		);
+
 		const mapInstance = new maplibregl.Map({
 			container: containerRef.current,
 			style: 'https://demotiles.maplibre.org/style.json',

package/skills/remotion-markup/remotion-maps/techniques/static-map/TECHNIQUE.md

@@ -34,4 +34,4 @@ export const StaticMap: React.FC = () => {
 
 ## Overlays and Interactivity
 
-Follow [Remotion Interactivity](../../../remotion-interactivity/SKILL.md) best practices and [Remotion Markup Best practices](../../../remotion-markup/SKILL.md) for elements.
+Follow Remotion Interactivity best practices and [Remotion Markup Best practices](../../../SKILL.md) for elements.

package/skills/remotion-markup/text-highlights.md

@@ -53,4 +53,4 @@ export const TextAnnotations: React.FC = () => {
 };
 ```
 
-Keep `progress` inline, hardcoded and use `interpolate` for maximum [Studio interactivity](../remotion-interactivity/SKILL.md).
+Keep `progress` inline, hardcoded and use `interpolate` for maximum Studio interactivity.

package/skills/remotion-markup/voiceover.md

@@ -55,7 +55,7 @@ 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.
+Use [`calculateMetadata`](./calculate-metadata.md) to measure the audio durations and set the composition length accordingly.
 
 ```tsx
 import { CalculateMetadataFunction, staticFile } from "remotion";

package/skills/remotion-multimedia/SKILL.md

@@ -1,8 +1,9 @@
----
-name: remotion-multimedia
-description: Interacting with Mediabunny
-version: 4.0.519
----
+---
+name: remotion-multimedia
+description: Interacting with Mediabunny
+version: 4.0.529
+---
+
 
 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

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

@@ -1,7 +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'
+  icon_small: './assets/remotion-icon.svg'
+  icon_large: './assets/remotion-icon.svg'
   brand_color: '#0B84F3'
   default_prompt: '$remotion-multimedia: Make my video the same duration as the footage'

package/skills/remotion-multimedia/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/skills/remotion-render/SKILL.md

@@ -1,8 +1,9 @@
----
-name: remotion-render
-description: Export a Remotion video
-version: 4.0.519
----
+---
+name: remotion-render
+description: Export a Remotion video
+version: 4.0.529
+---
+
 
 ## General rendering strategy
 
@@ -22,6 +23,14 @@ npx remotion still
 
 Full list of options: https://www.remotion.dev/docs/cli/still.md
 
+To render several frames as images in one call, use `render --frames`:
+
+```
+npx remotion render [composition-id] out/frames --frames=0,30,90 --image-format=png
+```
+
+See https://www.remotion.dev/docs/cli/render.md#--frames for more options.
+
 ## Transparent videos
 
 See [Transparent videos](./transparent-videos.md) for rendering out a video with transparency.

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

@@ -1,7 +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'
+  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/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/skills/remotion-saas/SKILL.md

@@ -1,8 +1,9 @@
----
-name: remotion-saas
-description: Build an app with Remotion
-version: 4.0.519
----
+---
+name: remotion-saas
+description: Build an app with Remotion
+version: 4.0.529
+---
+
 
 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.

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

@@ -1,7 +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'
+  icon_small: './assets/remotion-icon.svg'
+  icon_large: './assets/remotion-icon.svg'
   brand_color: '#0B84F3'
   default_prompt: '$remotion-saas: Turn my video into an app.'

package/skills/remotion-saas/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/skills/remotion-saas/framework.md

@@ -9,9 +9,7 @@ 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.
+- Next.js: https://github.com/remotion-dev/template-next-app-dir-tailwind. 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.