dsh-remotion 0.2.0 → 0.3.0

package/skills/remotion/rules/extract-frames.md

@@ -1,229 +0,0 @@
----
-name: extract-frames
-description: Extract frames from videos at specific timestamps using Mediabunny
-metadata:
-  tags: frames, extract, video, thumbnail, filmstrip, canvas
----
-
-# Extracting frames from videos
-
-Use Mediabunny to extract frames from videos at specific timestamps. This is useful for generating thumbnails, filmstrips, or processing individual frames.
-
-## The `extractFrames()` function
-
-This function can be copy-pasted into any project.
-
-```tsx
-import {
-  ALL_FORMATS,
-  Input,
-  UrlSource,
-  VideoSample,
-  VideoSampleSink,
-} from "mediabunny";
-
-type Options = {
-  track: { width: number; height: number };
-  container: string;
-  durationInSeconds: number | null;
-};
-
-export type ExtractFramesTimestampsInSecondsFn = (
-  options: Options,
-) => Promise<number[]> | number[];
-
-export type ExtractFramesProps = {
-  src: string;
-  timestampsInSeconds: number[] | ExtractFramesTimestampsInSecondsFn;
-  onVideoSample: (sample: VideoSample) => void;
-  signal?: AbortSignal;
-};
-
-export async function extractFrames({
-  src,
-  timestampsInSeconds,
-  onVideoSample,
-  signal,
-}: ExtractFramesProps): Promise<void> {
-  using input = new Input({
-    formats: ALL_FORMATS,
-    source: new UrlSource(src),
-  });
-
-  const [durationInSeconds, format, videoTrack] = await Promise.all([
-    input.computeDuration(),
-    input.getFormat(),
-    input.getPrimaryVideoTrack(),
-  ]);
-
-  if (!videoTrack) {
-    throw new Error("No video track found in the input");
-  }
-
-  if (signal?.aborted) {
-    throw new Error("Aborted");
-  }
-
-  const timestamps =
-    typeof timestampsInSeconds === "function"
-      ? await timestampsInSeconds({
-          track: {
-            width: videoTrack.displayWidth,
-            height: videoTrack.displayHeight,
-          },
-          container: format.name,
-          durationInSeconds,
-        })
-      : timestampsInSeconds;
-
-  if (timestamps.length === 0) {
-    return;
-  }
-
-  if (signal?.aborted) {
-    throw new Error("Aborted");
-  }
-
-  const sink = new VideoSampleSink(videoTrack);
-
-  for await (using videoSample of sink.samplesAtTimestamps(timestamps)) {
-    if (signal?.aborted) {
-      break;
-    }
-
-    if (!videoSample) {
-      continue;
-    }
-
-    onVideoSample(videoSample);
-  }
-}
-```
-
-## Basic usage
-
-Extract frames at specific timestamps:
-
-```tsx
-await extractFrames({
-  src: "https://remotion.media/video.mp4",
-  timestampsInSeconds: [0, 1, 2, 3, 4],
-  onVideoSample: (sample) => {
-    const canvas = document.createElement("canvas");
-    canvas.width = sample.displayWidth;
-    canvas.height = sample.displayHeight;
-    const ctx = canvas.getContext("2d");
-    sample.draw(ctx!, 0, 0);
-  },
-});
-```
-
-## Creating a filmstrip
-
-Use a callback function to dynamically calculate timestamps based on video metadata:
-
-```tsx
-const canvasWidth = 500;
-const canvasHeight = 80;
-const fromSeconds = 0;
-const toSeconds = 10;
-
-await extractFrames({
-  src: "https://remotion.media/video.mp4",
-  timestampsInSeconds: async ({ track, durationInSeconds }) => {
-    const aspectRatio = track.width / track.height;
-    const amountOfFramesFit = Math.ceil(
-      canvasWidth / (canvasHeight * aspectRatio),
-    );
-    const segmentDuration = toSeconds - fromSeconds;
-    const timestamps: number[] = [];
-
-    for (let i = 0; i < amountOfFramesFit; i++) {
-      timestamps.push(
-        fromSeconds + (segmentDuration / amountOfFramesFit) * (i + 0.5),
-      );
-    }
-
-    return timestamps;
-  },
-  onVideoSample: (sample) => {
-    console.log(`Frame at ${sample.timestamp}s`);
-
-    const canvas = document.createElement("canvas");
-    canvas.width = sample.displayWidth;
-    canvas.height = sample.displayHeight;
-    const ctx = canvas.getContext("2d");
-    sample.draw(ctx!, 0, 0);
-  },
-});
-```
-
-## Cancellation with AbortSignal
-
-Cancel frame extraction after a timeout:
-
-```tsx
-const controller = new AbortController();
-
-setTimeout(() => controller.abort(), 5000);
-
-try {
-  await extractFrames({
-    src: "https://remotion.media/video.mp4",
-    timestampsInSeconds: [0, 1, 2, 3, 4],
-    onVideoSample: (sample) => {
-      using frame = sample;
-      const canvas = document.createElement("canvas");
-      canvas.width = frame.displayWidth;
-      canvas.height = frame.displayHeight;
-      const ctx = canvas.getContext("2d");
-      frame.draw(ctx!, 0, 0);
-    },
-    signal: controller.signal,
-  });
-
-  console.log("Frame extraction complete!");
-} catch (error) {
-  console.error("Frame extraction was aborted or failed:", error);
-}
-```
-
-## Timeout with Promise.race
-
-```tsx
-const controller = new AbortController();
-
-const timeoutPromise = new Promise<never>((_, reject) => {
-  const timeoutId = setTimeout(() => {
-    controller.abort();
-    reject(new Error("Frame extraction timed out after 10 seconds"));
-  }, 10000);
-
-  controller.signal.addEventListener("abort", () => clearTimeout(timeoutId), {
-    once: true,
-  });
-});
-
-try {
-  await Promise.race([
-    extractFrames({
-      src: "https://remotion.media/video.mp4",
-      timestampsInSeconds: [0, 1, 2, 3, 4],
-      onVideoSample: (sample) => {
-        using frame = sample;
-        const canvas = document.createElement("canvas");
-        canvas.width = frame.displayWidth;
-        canvas.height = frame.displayHeight;
-        const ctx = canvas.getContext("2d");
-        frame.draw(ctx!, 0, 0);
-      },
-      signal: controller.signal,
-    }),
-    timeoutPromise,
-  ]);
-
-  console.log("Frame extraction complete!");
-} catch (error) {
-  console.error("Frame extraction was aborted or failed:", error);
-}
-```

package/skills/remotion/rules/fonts.md

@@ -1,152 +0,0 @@
----
-name: fonts
-description: Loading Google Fonts and local fonts in Remotion
-metadata:
-  tags: fonts, google-fonts, typography, text
----
-
-# Using fonts in Remotion
-
-## Google Fonts with @remotion/google-fonts
-
-The recommended way to use Google Fonts. It's type-safe and automatically blocks rendering until the font is ready.
-
-### Prerequisites
-
-First, the @remotion/google-fonts package needs to be installed.
-If it is not installed, use the following command:
-
-```bash
-npx remotion add @remotion/google-fonts # If project uses npm
-bunx remotion add @remotion/google-fonts # If project uses bun
-yarn remotion add @remotion/google-fonts # If project uses yarn
-pnpm exec remotion add @remotion/google-fonts # If project uses pnpm
-```
-
-```tsx
-import { loadFont } from "@remotion/google-fonts/Lobster";
-
-const { fontFamily } = loadFont();
-
-export const MyComposition = () => {
-  return <div style={{ fontFamily }}>Hello World</div>;
-};
-```
-
-Preferrably, specify only needed weights and subsets to reduce file size:
-
-```tsx
-import { loadFont } from "@remotion/google-fonts/Roboto";
-
-const { fontFamily } = loadFont("normal", {
-  weights: ["400", "700"],
-  subsets: ["latin"],
-});
-```
-
-### Waiting for font to load
-
-Use `waitUntilDone()` if you need to know when the font is ready:
-
-```tsx
-import { loadFont } from "@remotion/google-fonts/Lobster";
-
-const { fontFamily, waitUntilDone } = loadFont();
-
-await waitUntilDone();
-```
-
-## Local fonts with @remotion/fonts
-
-For local font files, use the `@remotion/fonts` package.
-
-### Prerequisites
-
-First, install @remotion/fonts:
-
-```bash
-npx remotion add @remotion/fonts # If project uses npm
-bunx remotion add @remotion/fonts # If project uses bun
-yarn remotion add @remotion/fonts # If project uses yarn
-pnpm exec remotion add @remotion/fonts # If project uses pnpm
-```
-
-### Loading a local font
-
-Place your font file in the `public/` folder and use `loadFont()`:
-
-```tsx
-import { loadFont } from "@remotion/fonts";
-import { staticFile } from "remotion";
-
-await loadFont({
-  family: "MyFont",
-  url: staticFile("MyFont-Regular.woff2"),
-});
-
-export const MyComposition = () => {
-  return <div style={{ fontFamily: "MyFont" }}>Hello World</div>;
-};
-```
-
-### Loading multiple weights
-
-Load each weight separately with the same family name:
-
-```tsx
-import { loadFont } from "@remotion/fonts";
-import { staticFile } from "remotion";
-
-await Promise.all([
-  loadFont({
-    family: "Inter",
-    url: staticFile("Inter-Regular.woff2"),
-    weight: "400",
-  }),
-  loadFont({
-    family: "Inter",
-    url: staticFile("Inter-Bold.woff2"),
-    weight: "700",
-  }),
-]);
-```
-
-### Available options
-
-```tsx
-loadFont({
-  family: "MyFont", // Required: name to use in CSS
-  url: staticFile("font.woff2"), // Required: font file URL
-  format: "woff2", // Optional: auto-detected from extension
-  weight: "400", // Optional: font weight
-  style: "normal", // Optional: normal or italic
-  display: "block", // Optional: font-display behavior
-});
-```
-
-## Using in components
-
-Call `loadFont()` at the top level of your component or in a separate file that's imported early:
-
-```tsx
-import { loadFont } from "@remotion/google-fonts/Montserrat";
-
-const { fontFamily } = loadFont("normal", {
-  weights: ["400", "700"],
-  subsets: ["latin"],
-});
-
-export const Title: React.FC<{ text: string }> = ({ text }) => {
-  return (
-    <h1
-      style={{
-        fontFamily,
-        fontSize: 80,
-        fontWeight: "bold",
-      }}
-    >
-      {text}
-    </h1>
-  );
-};
-```

package/skills/remotion/rules/images.md

@@ -1,134 +0,0 @@
----
-name: images
-description: Embedding images in Remotion using the <Img> component
-metadata:
-  tags: images, img, staticFile, png, jpg, svg, webp
----
-
-# Using images in Remotion
-
-## The `<Img>` component
-
-Always use the `<Img>` component from `remotion` to display images:
-
-```tsx
-import { Img, staticFile } from "remotion";
-
-export const MyComposition = () => {
-  return <Img src={staticFile("photo.png")} />;
-};
-```
-
-## Important restrictions
-
-**You MUST use the `<Img>` component from `remotion`.** Do not use:
-
-- Native HTML `<img>` elements
-- Next.js `<Image>` component
-- CSS `background-image`
-
-The `<Img>` component ensures images are fully loaded before rendering, preventing flickering and blank frames during video export.
-
-## Local images with staticFile()
-
-Place images in the `public/` folder and use `staticFile()` to reference them:
-
-```
-my-video/
-├─ public/
-│  ├─ logo.png
-│  ├─ avatar.jpg
-│  └─ icon.svg
-├─ src/
-├─ package.json
-```
-
-```tsx
-import { Img, staticFile } from "remotion";
-
-<Img src={staticFile("logo.png")} />;
-```
-
-## Remote images
-
-Remote URLs can be used directly without `staticFile()`:
-
-```tsx
-<Img src="https://example.com/image.png" />
-```
-
-Ensure remote images have CORS enabled.
-
-For animated GIFs, use the `<Gif>` component from `@remotion/gif` instead.
-
-## Sizing and positioning
-
-Use the `style` prop to control size and position:
-
-```tsx
-<Img
-  src={staticFile("photo.png")}
-  style={{
-    width: 500,
-    height: 300,
-    position: "absolute",
-    top: 100,
-    left: 50,
-    objectFit: "cover",
-  }}
-/>
-```
-
-## Dynamic image paths
-
-Use template literals for dynamic file references:
-
-```tsx
-import { Img, staticFile, useCurrentFrame } from "remotion";
-
-const frame = useCurrentFrame();
-
-// Image sequence
-<Img src={staticFile(`frames/frame${frame}.png`)} />
-
-// Selecting based on props
-<Img src={staticFile(`avatars/${props.userId}.png`)} />
-
-// Conditional images
-<Img src={staticFile(`icons/${isActive ? "active" : "inactive"}.svg`)} />
-```
-
-This pattern is useful for:
-
-- Image sequences (frame-by-frame animations)
-- User-specific avatars or profile images
-- Theme-based icons
-- State-dependent graphics
-
-## Getting image dimensions
-
-Use `getImageDimensions()` to get the dimensions of an image:
-
-```tsx
-import { getImageDimensions, staticFile } from "remotion";
-
-const { width, height } = await getImageDimensions(staticFile("photo.png"));
-```
-
-This is useful for calculating aspect ratios or sizing compositions:
-
-```tsx
-import {
-  getImageDimensions,
-  staticFile,
-  CalculateMetadataFunction,
-} from "remotion";
-
-const calculateMetadata: CalculateMetadataFunction = async () => {
-  const { width, height } = await getImageDimensions(staticFile("photo.png"));
-  return {
-    width,
-    height,
-  };
-};
-```

package/skills/remotion/rules/light-leaks.md

@@ -1,73 +0,0 @@
----
-name: light-leaks
-description: Light leak overlay effects for Remotion using @remotion/light-leaks.
-metadata:
-  tags: light-leaks, overlays, effects, transitions
----
-
-## Light Leaks
-
-This only works from Remotion 4.0.415 and up. Use `npx remotion versions` to check your Remotion version and `npx remotion upgrade` to upgrade your Remotion version.
-
-`<LightLeak>` from `@remotion/light-leaks` renders a WebGL-based light leak effect. It reveals during the first half of its duration and retracts during the second half.
-
-Typically used inside a `<TransitionSeries.Overlay>` to play over the cut point between two scenes. See the **transitions** rule for `<TransitionSeries>` and overlay usage.
-
-## Prerequisites
-
-```bash
-npx remotion add @remotion/light-leaks
-```
-
-## Basic usage with TransitionSeries
-
-```tsx
-import { TransitionSeries } from "@remotion/transitions";
-import { LightLeak } from "@remotion/light-leaks";
-
-<TransitionSeries>
-  <TransitionSeries.Sequence durationInFrames={60}>
-    <SceneA />
-  </TransitionSeries.Sequence>
-  <TransitionSeries.Overlay durationInFrames={30}>
-    <LightLeak />
-  </TransitionSeries.Overlay>
-  <TransitionSeries.Sequence durationInFrames={60}>
-    <SceneB />
-  </TransitionSeries.Sequence>
-</TransitionSeries>;
-```
-
-## Props
-
-- `durationInFrames?` — defaults to the parent sequence/composition duration. The effect reveals during the first half and retracts during the second half.
-- `seed?` — determines the shape of the light leak pattern. Different seeds produce different patterns. Default: `0`.
-- `hueShift?` — rotates the hue in degrees (`0`–`360`). Default: `0` (yellow-to-orange). `120` = green, `240` = blue.
-
-## Customizing the look
-
-```tsx
-import { LightLeak } from "@remotion/light-leaks";
-
-// Blue-tinted light leak with a different pattern
-<LightLeak seed={5} hueShift={240} />;
-
-// Green-tinted light leak
-<LightLeak seed={2} hueShift={120} />;
-```
-
-## Standalone usage
-
-`<LightLeak>` can also be used outside of `<TransitionSeries>`, for example as a decorative overlay in any composition:
-
-```tsx
-import { AbsoluteFill } from "remotion";
-import { LightLeak } from "@remotion/light-leaks";
-
-const MyComp: React.FC = () => (
-  <AbsoluteFill>
-    <MyContent />
-    <LightLeak durationInFrames={60} seed={3} />
-  </AbsoluteFill>
-);
-```