dsh-remotion 0.2.0 → 0.3.0

package/skills/remotion-upgrade/SKILL.md

@@ -0,0 +1,31 @@
+---
+name: remotion-upgrade
+description: Upgrade Remotion, and related packages
+version: 4.0.519
+---
+
+# Upgrade Remotion
+
+1. Inspect the project manifests and lockfile to identify the package manager and workspaces. Preserve unrelated changes.
+2. Determine whether `@remotion/cli` is locally available. If it is, run:
+
+   ```bash
+   npx remotion upgrade
+   ```
+
+   This also updates project-local Remotion skills. Skip the manual upgrade below.
+
+3. If `@remotion/cli` is not available, upgrade manually:
+   - Get the latest stable Remotion version with `npm view remotion version`.
+   - Find every installed `remotion` and `@remotion/*` dependency across the project and upgrade them all to that exact version. Preserve their dependency sections and the project's workspace or catalog conventions.
+   - Read the current [Mediabunny compatibility page](https://www.remotion.dev/docs/mediabunny/version) and determine the Mediabunny version compatible with the target Remotion version. Upgrade every installed `mediabunny` and `@mediabunny/*` package to the documented compatible version.
+   - Run the project's package manager to update its lockfile.
+4. If `@remotion/cli` is not available, update the installed Remotion skills:
+
+   ```bash
+   npx skills update remotion-best-practices remotion-captions remotion-create remotion-docs remotion-interactivity remotion-maps remotion-markup remotion-multimedia remotion-render remotion-saas remotion-studio remotion-upgrade --yes
+   ```
+
+5. Review the manifest and lockfile diff. Ensure all Remotion packages use one version and all installed Mediabunny packages use the compatible version. If the CLI is available, run `npx remotion versions` as an additional check.
+
+The [Remotion releases](https://github.com/remotion-dev/remotion/releases) contain the changelog and may be useful for summarizing relevant changes after the upgrade.

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

@@ -0,0 +1,7 @@
+interface:
+  display_name: '/remotion-upgrade'
+  short_description: 'Upgrade Remotion and related dependencies'
+  icon_small: './assets/remotion-icon.png'
+  icon_large: './assets/remotion-icon.png'
+  brand_color: '#0B84F3'
+  default_prompt: '$remotion-upgrade: Upgrade my project.'

package/skills/remotion/SKILL.md

@@ -1,95 +0,0 @@
----
-name: remotion
-description: "Remotion video creation best practices: build programmatic videos with React (animations, audio, captions, subtitles, 3D, charts, fonts, GIFs, Lottie, maps, transitions, text effects). Use when the user asks to create, edit, or render a video with Remotion, scaffold a Remotion project (npx create-video), add captions or audio, or debug Remotion code. 38 rule files under rules/ cover specific domains and should be loaded on demand. 中文：用 Remotion（React 编程式视频）新建项目、写/改合成、渲染视频、加字幕/音频时使用。"
-compatibility: Requires Node.js >= 20 with npx and network access to install Remotion packages from the npm registry.
-allowed-tools: Bash
----
-
-## When to use
-
-Use this skill whenever you are dealing with Remotion code to obtain the domain-specific knowledge.
-
-## New project setup
-
-When in an empty folder or workspace with no existing Remotion project, scaffold one using:
-
-```bash
-npx create-video@latest --yes --blank --no-tailwind my-video
-```
-
-Replace `my-video` with a suitable project name.
-
-## Starting preview
-
-Start the Remotion Studio to preview a video:
-
-```bash
-npx remotion studio
-```
-
-## Optional: one-frame render check
-
-You can render a single frame with the CLI to sanity-check layout, colors, or timing.  
-Skip it for trivial edits, pure refactors, or when you already have enough confidence from Studio or prior renders.
-
-```bash
-npx remotion still [composition-id] --scale=0.25 --frame=30
-```
-
-At 30 fps, `--frame=30` is the one-second mark (`--frame` is zero-based).
-
-## Captions
-
-When dealing with captions or subtitles, load the [./rules/subtitles.md](./rules/subtitles.md) file for more information.
-
-## Using FFmpeg
-
-For some video operations, such as trimming videos or detecting silence, FFmpeg should be used. Load the [./rules/ffmpeg.md](./rules/ffmpeg.md) file for more information.
-
-## Silence detection
-
-When needing to detect and trim silent segments from video or audio files, load the [./rules/silence-detection.md](./rules/silence-detection.md) file.
-
-## Audio visualization
-
-When needing to visualize audio (spectrum bars, waveforms, bass-reactive effects), load the [./rules/audio-visualization.md](./rules/audio-visualization.md) file for more information.
-
-## Sound effects
-
-When needing to use sound effects, load the [./rules/sfx.md](./rules/sfx.md) file for more information.
-
-## How to use
-
-Read individual rule files for detailed explanations and code examples:
-
-- [rules/3d.md](rules/3d.md) - 3D content in Remotion using Three.js and React Three Fiber
-- [rules/animations.md](rules/animations.md) - Fundamental animation skills for Remotion
-- [rules/assets.md](rules/assets.md) - Importing images, videos, audio, and fonts into Remotion
-- [rules/audio.md](rules/audio.md) - Using audio and sound in Remotion - importing, trimming, volume, speed, pitch
-- [rules/calculate-metadata.md](rules/calculate-metadata.md) - Dynamically set composition duration, dimensions, and props
-- [rules/can-decode.md](rules/can-decode.md) - Check if a video can be decoded by the browser using Mediabunny
-- [rules/charts.md](rules/charts.md) - Chart and data visualization patterns for Remotion (bar, pie, line, stock charts)
-- [rules/compositions.md](rules/compositions.md) - Defining compositions, stills, folders, default props and dynamic metadata
-- [rules/extract-frames.md](rules/extract-frames.md) - Extract frames from videos at specific timestamps using Mediabunny
-- [rules/fonts.md](rules/fonts.md) - Loading Google Fonts and local fonts in Remotion
-- [rules/get-audio-duration.md](rules/get-audio-duration.md) - Getting the duration of an audio file in seconds with Mediabunny
-- [rules/get-video-dimensions.md](rules/get-video-dimensions.md) - Getting the width and height of a video file with Mediabunny
-- [rules/get-video-duration.md](rules/get-video-duration.md) - Getting the duration of a video file in seconds with Mediabunny
-- [rules/gifs.md](rules/gifs.md) - Displaying GIFs synchronized with Remotion's timeline
-- [rules/images.md](rules/images.md) - Embedding images in Remotion using the Img component
-- [rules/light-leaks.md](rules/light-leaks.md) - Light leak overlay effects using @remotion/light-leaks
-- [rules/lottie.md](rules/lottie.md) - Embedding Lottie animations in Remotion
-- [rules/measuring-dom-nodes.md](rules/measuring-dom-nodes.md) - Measuring DOM element dimensions in Remotion
-- [rules/measuring-text.md](rules/measuring-text.md) - Measuring text dimensions, fitting text to containers, and checking overflow
-- [rules/sequencing.md](rules/sequencing.md) - Sequencing patterns for Remotion - delay, trim, limit duration of items
-- [rules/tailwind.md](rules/tailwind.md) - Using TailwindCSS in Remotion
-- [rules/text-animations.md](rules/text-animations.md) - Typography and text animation patterns for Remotion
-- [rules/timing.md](rules/timing.md) - Timing with interpolate and Bézier easing, springs
-- [rules/transitions.md](rules/transitions.md) - Scene transition patterns for Remotion
-- [rules/transparent-videos.md](rules/transparent-videos.md) - Rendering out a video with transparency
-- [rules/trimming.md](rules/trimming.md) - Trimming patterns for Remotion - cut the beginning or end of animations
-- [rules/videos.md](rules/videos.md) - Embedding videos in Remotion - trimming, volume, speed, looping, pitch
-- [rules/parameters.md](rules/parameters.md) - Make a video parametrizable by adding a Zod schema
-- [rules/maps.md](rules/maps.md) - Add a map using Mapbox and animate it
-- [rules/silence-detection.md](rules/silence-detection.md) - Adaptive silence detection using FFmpeg loudnorm and silencedetect
-- [rules/voiceover.md](rules/voiceover.md) - Adding AI-generated voiceover to Remotion compositions using ElevenLabs TTS

package/skills/remotion/rules/animations.md

@@ -1,31 +0,0 @@
----
-name: animations
-description: Fundamental animation skills for Remotion
-metadata:
-  tags: animations, transitions, frames, useCurrentFrame
----
-
-All animations MUST be driven by the `useCurrentFrame()` hook.  
-Write animations in seconds and multiply them by the `fps` value from `useVideoConfig()`.
-
-For eased motion, prefer `interpolate` with explicit frame ranges and an easing—especially `Easing.bezier`, which matches CSS `cubic-bezier` so timing can be shared with web specs and curve editors. See [timing](./timing.md).
-
-```tsx
-import { useCurrentFrame, Easing } from "remotion";
-
-export const FadeIn = () => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
-
-  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
-    extrapolateRight: "clamp",
-    extrapolateLeft: "clamp",
-    easing: Easing.bezier(0.16, 1, 0.3, 1),
-  });
-
-  return <div style={{ opacity }}>Hello World!</div>;
-};
-```
-
-CSS transitions or animations are FORBIDDEN - they will not render correctly.  
-Tailwind animation class names are FORBIDDEN - they will not render correctly.

package/skills/remotion/rules/assets.md

@@ -1,78 +0,0 @@
----
-name: assets
-description: Importing images, videos, audio, and fonts into Remotion
-metadata:
-  tags: assets, staticFile, images, fonts, public
----
-
-# Importing assets in Remotion
-
-## The public folder
-
-Place assets in the `public/` folder at your project root.
-
-## Using staticFile()
-
-You MUST use `staticFile()` to reference files from the `public/` folder:
-
-```tsx
-import { Img, staticFile } from "remotion";
-
-export const MyComposition = () => {
-  return <Img src={staticFile("logo.png")} />;
-};
-```
-
-The function returns an encoded URL that works correctly when deploying to subdirectories.
-
-## Using with components
-
-**Images:**
-
-```tsx
-import { Img, staticFile } from "remotion";
-
-<Img src={staticFile("photo.png")} />;
-```
-
-**Videos:**
-
-```tsx
-import { Video } from "@remotion/media";
-import { staticFile } from "remotion";
-
-<Video src={staticFile("clip.mp4")} />;
-```
-
-**Audio:**
-
-```tsx
-import { Audio } from "@remotion/media";
-import { staticFile } from "remotion";
-
-<Audio src={staticFile("music.mp3")} />;
-```
-
-**Fonts:**
-
-```tsx
-import { staticFile } from "remotion";
-
-const fontFamily = new FontFace("MyFont", `url(${staticFile("font.woff2")})`);
-await fontFamily.load();
-document.fonts.add(fontFamily);
-```
-
-## Remote URLs
-
-Remote URLs can be used directly without `staticFile()`:
-
-```tsx
-<Img src="https://example.com/image.png" />
-<Video src="https://remotion.media/video.mp4" />
-```
-
-## Important notes
-
-- Remotion components (`<Img>`, `<Video>`, `<Audio>`) ensure assets are fully loaded before rendering
-- Special characters in filenames (`#`, `?`, `&`) are automatically encoded

package/skills/remotion/rules/can-decode.md

@@ -1,81 +0,0 @@
----
-name: can-decode
-description: Check if a video can be decoded by the browser using Mediabunny
-metadata:
-  tags: decode, validation, video, audio, compatibility, browser
----
-
-# Checking if a video can be decoded
-
-Use Mediabunny to check if a video can be decoded by the browser before attempting to play it.
-
-First, install the right version of Mediabunny:
-
-```bash
-npx remotion add mediabunny
-```
-
-## The `canDecode()` function
-
-This function can be copy-pasted into any project.
-
-```tsx
-import { Input, ALL_FORMATS, UrlSource } from "mediabunny";
-
-export const canDecode = async (src: string) => {
-  const input = new Input({
-    formats: ALL_FORMATS,
-    source: new UrlSource(src, {
-      getRetryDelay: () => null,
-    }),
-  });
-
-  try {
-    await input.getFormat();
-  } catch {
-    return false;
-  }
-
-  const videoTrack = await input.getPrimaryVideoTrack();
-  if (videoTrack && !(await videoTrack.canDecode())) {
-    return false;
-  }
-
-  const audioTrack = await input.getPrimaryAudioTrack();
-  if (audioTrack && !(await audioTrack.canDecode())) {
-    return false;
-  }
-
-  return true;
-};
-```
-
-## Usage
-
-```tsx
-const src = "https://remotion.media/video.mp4";
-const isDecodable = await canDecode(src);
-
-if (isDecodable) {
-  console.log("Video can be decoded");
-} else {
-  console.log("Video cannot be decoded by this browser");
-}
-```
-
-## Using with Blob
-
-For file uploads or drag-and-drop, use `BlobSource`:
-
-```tsx
-import { Input, ALL_FORMATS, BlobSource } from "mediabunny";
-
-export const canDecodeBlob = async (blob: Blob) => {
-  const input = new Input({
-    formats: ALL_FORMATS,
-    source: new BlobSource(blob),
-  });
-
-  // Same validation logic as above
-};
-```

package/skills/remotion/rules/charts.md

@@ -1,120 +0,0 @@
----
-name: charts
-description: Chart and data visualization patterns for Remotion. Use when creating bar charts, pie charts, line charts, stock graphs, or any data-driven animations.
-metadata:
-  tags: charts, data, visualization, bar-chart, pie-chart, line-chart, stock-chart, svg-paths, graphs
----
-
-# Charts in Remotion
-
-Create charts using React code - HTML, SVG, and D3.js are all supported.
-
-Disable all animations from third party libraries - they cause flickering.  
-Drive all animations from `useCurrentFrame()`.
-
-## Bar Chart
-
-```tsx
-const STAGGER_DELAY = 5;
-const frame = useCurrentFrame();
-const { fps } = useVideoConfig();
-
-const bars = data.map((item, i) => {
-  const height = spring({
-    frame,
-    fps,
-    delay: i * STAGGER_DELAY,
-    config: { damping: 200 },
-  });
-  return <div style={{ height: height * item.value }} />;
-});
-```
-
-## Pie Chart
-
-Animate segments using stroke-dashoffset, starting from 12 o'clock:
-
-```tsx
-const progress = interpolate(frame, [0, 100], [0, 1]);
-const circumference = 2 * Math.PI * radius;
-const segmentLength = (value / total) * circumference;
-const offset = interpolate(progress, [0, 1], [segmentLength, 0]);
-
-<circle
-  r={radius}
-  cx={center}
-  cy={center}
-  fill="none"
-  stroke={color}
-  strokeWidth={strokeWidth}
-  strokeDasharray={`${segmentLength} ${circumference}`}
-  strokeDashoffset={offset}
-  transform={`rotate(-90 ${center} ${center})`}
-/>;
-```
-
-## Line Chart / Path Animation
-
-Use `@remotion/paths` for animating SVG paths (line charts, stock graphs, signatures).
-
-Install: `npx remotion add @remotion/paths`  
-Docs: https://remotion.dev/docs/paths.md
-
-### Convert data points to SVG path
-
-```tsx
-type Point = { x: number; y: number };
-
-const generateLinePath = (points: Point[]): string => {
-  if (points.length < 2) return "";
-  return points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
-};
-```
-
-### Draw path with animation
-
-```tsx
-import { evolvePath } from "@remotion/paths";
-
-const path = "M 100 200 L 200 150 L 300 180 L 400 100";
-const progress = interpolate(frame, [0, 2 * fps], [0, 1], {
-  extrapolateLeft: "clamp",
-  extrapolateRight: "clamp",
-  easing: Easing.out(Easing.quad),
-});
-
-const { strokeDasharray, strokeDashoffset } = evolvePath(progress, path);
-
-<path
-  d={path}
-  fill="none"
-  stroke="#FF3232"
-  strokeWidth={4}
-  strokeDasharray={strokeDasharray}
-  strokeDashoffset={strokeDashoffset}
-/>;
-```
-
-### Follow path with marker/arrow
-
-```tsx
-import {
-  getLength,
-  getPointAtLength,
-  getTangentAtLength,
-} from "@remotion/paths";
-
-const pathLength = getLength(path);
-const point = getPointAtLength(path, progress * pathLength);
-const tangent = getTangentAtLength(path, progress * pathLength);
-const angle = Math.atan2(tangent.y, tangent.x);
-
-<g
-  style={{
-    transform: `translate(${point.x}px, ${point.y}px) rotate(${angle}rad)`,
-    transformOrigin: "0 0",
-  }}
->
-  <polygon points="0,0 -20,-10 -20,10" fill="#FF3232" />
-</g>;
-```

package/skills/remotion/rules/compositions.md

@@ -1,154 +0,0 @@
----
-name: compositions
-description: Defining compositions, stills, folders, default props and dynamic metadata
-metadata:
-  tags: composition, still, folder, props, metadata
----
-
-A `<Composition>` defines the component, width, height, fps and duration of a renderable video.
-
-It normally is placed in the `src/Root.tsx` file.
-
-```tsx
-import { Composition } from "remotion";
-import { MyComposition } from "./MyComposition";
-
-export const RemotionRoot = () => {
-  return (
-    <Composition
-      id="MyComposition"
-      component={MyComposition}
-      durationInFrames={100}
-      fps={30}
-      width={1080}
-      height={1080}
-    />
-  );
-};
-```
-
-## Default Props
-
-Pass `defaultProps` to provide initial values for your component.  
-Values must be JSON-serializable (`Date`, `Map`, `Set`, and `staticFile()` are supported).
-
-```tsx
-import { Composition } from "remotion";
-import { MyComposition, MyCompositionProps } from "./MyComposition";
-
-export const RemotionRoot = () => {
-  return (
-    <Composition
-      id="MyComposition"
-      component={MyComposition}
-      durationInFrames={100}
-      fps={30}
-      width={1080}
-      height={1080}
-      defaultProps={
-        {
-          title: "Hello World",
-          color: "#ff0000",
-        } satisfies MyCompositionProps
-      }
-    />
-  );
-};
-```
-
-Use `type` declarations for props rather than `interface` to ensure `defaultProps` type safety.
-
-## Folders
-
-Use `<Folder>` to organize compositions in the sidebar.  
-Folder names can only contain letters, numbers, and hyphens.
-
-```tsx
-import { Composition, Folder } from "remotion";
-
-export const RemotionRoot = () => {
-  return (
-    <>
-      <Folder name="Marketing">
-        <Composition id="Promo" /* ... */ />
-        <Composition id="Ad" /* ... */ />
-      </Folder>
-      <Folder name="Social">
-        <Folder name="Instagram">
-          <Composition id="Story" /* ... */ />
-          <Composition id="Reel" /* ... */ />
-        </Folder>
-      </Folder>
-    </>
-  );
-};
-```
-
-## Stills
-
-Use `<Still>` for single-frame images. It does not require `durationInFrames` or `fps`.
-
-```tsx
-import { Still } from "remotion";
-import { Thumbnail } from "./Thumbnail";
-
-export const RemotionRoot = () => {
-  return (
-    <Still id="Thumbnail" component={Thumbnail} width={1280} height={720} />
-  );
-};
-```
-
-## Calculate Metadata
-
-Use `calculateMetadata` to make dimensions, duration, or props dynamic based on data.
-
-```tsx
-import { Composition, CalculateMetadataFunction } from "remotion";
-import { MyComposition, MyCompositionProps } from "./MyComposition";
-
-const calculateMetadata: CalculateMetadataFunction<
-  MyCompositionProps
-> = async ({ props, abortSignal }) => {
-  const data = await fetch(`https://api.example.com/video/${props.videoId}`, {
-    signal: abortSignal,
-  }).then((res) => res.json());
-
-  return {
-    durationInFrames: Math.ceil(data.duration * 30),
-    props: {
-      ...props,
-      videoUrl: data.url,
-    },
-  };
-};
-
-export const RemotionRoot = () => {
-  return (
-    <Composition
-      id="MyComposition"
-      component={MyComposition}
-      durationInFrames={100} // Placeholder, will be overridden
-      fps={30}
-      width={1080}
-      height={1080}
-      defaultProps={{ videoId: "abc123" }}
-      calculateMetadata={calculateMetadata}
-    />
-  );
-};
-```
-
-The function can return `props`, `durationInFrames`, `width`, `height`, `fps`, and codec-related defaults. It runs once before rendering begins.
-
-## 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.
-
-```tsx
-<AbsoluteFill>
-  <Sequence width={COMPOSITION_WIDTH} height={COMPOSITION_HEIGHT}>
-    <CompositionComponent />
-  </Sequence>
-</AbsoluteFill>
-```