@oriro/orirocli 0.1.9 → 0.1.11

package/skills/craft/remotion-best-practices/rules/trimming.md

@@ -1,51 +1,51 @@
----
-name: trimming
-description: Trimming patterns for Remotion - cut the beginning or end of animations
-metadata:
-  tags: sequence, trim, clip, cut, offset
----
-
-Use `<Sequence>` with a negative `from` value to trim the start of an animation.
-
-## Trim the Beginning
-
-A negative `from` value shifts time backwards, making the animation start partway through:
-
-```tsx
-import { Sequence, useVideoConfig } from "remotion";
-
-const fps = useVideoConfig();
-
-<Sequence from={-0.5 * fps}>
-  <MyAnimation />
-</Sequence>;
-```
-
-The animation appears 15 frames into its progress - the first 15 frames are trimmed off.
-Inside `<MyAnimation>`, `useCurrentFrame()` starts at 15 instead of 0.
-
-## Trim the End
-
-Use `durationInFrames` to unmount content after a specified duration:
-
-```tsx
-<Sequence durationInFrames={1.5 * fps}>
-  <MyAnimation />
-</Sequence>
-```
-
-The animation plays for 45 frames, then the component unmounts.
-
-## Trim and Delay
-
-Nest sequences to both trim the beginning and delay when it appears:
-
-```tsx
-<Sequence from={30}>
-  <Sequence from={-15}>
-    <MyAnimation />
-  </Sequence>
-</Sequence>
-```
-
-The inner sequence trims 15 frames from the start, and the outer sequence delays the result by 30 frames.
+---
+name: trimming
+description: Trimming patterns for Remotion - cut the beginning or end of animations
+metadata:
+  tags: sequence, trim, clip, cut, offset
+---
+
+Use `<Sequence>` with a negative `from` value to trim the start of an animation.
+
+## Trim the Beginning
+
+A negative `from` value shifts time backwards, making the animation start partway through:
+
+```tsx
+import { Sequence, useVideoConfig } from "remotion";
+
+const fps = useVideoConfig();
+
+<Sequence from={-0.5 * fps}>
+  <MyAnimation />
+</Sequence>;
+```
+
+The animation appears 15 frames into its progress - the first 15 frames are trimmed off.
+Inside `<MyAnimation>`, `useCurrentFrame()` starts at 15 instead of 0.
+
+## Trim the End
+
+Use `durationInFrames` to unmount content after a specified duration:
+
+```tsx
+<Sequence durationInFrames={1.5 * fps}>
+  <MyAnimation />
+</Sequence>
+```
+
+The animation plays for 45 frames, then the component unmounts.
+
+## Trim and Delay
+
+Nest sequences to both trim the beginning and delay when it appears:
+
+```tsx
+<Sequence from={30}>
+  <Sequence from={-15}>
+    <MyAnimation />
+  </Sequence>
+</Sequence>
+```
+
+The inner sequence trims 15 frames from the start, and the outer sequence delays the result by 30 frames.

package/skills/craft/remotion-best-practices/rules/videos.md

@@ -1,169 +1,169 @@
----
-name: videos
-description: Embedding videos in Remotion - trimming, volume, speed, looping, pitch
-metadata:
-  tags: video, media, trim, volume, speed, loop, pitch
----
-
-# Using videos in Remotion
-
-## Prerequisites
-
-First, the @remotion/media package needs to be installed.  
-If it is not, use the following command:
-
-```bash
-npx remotion add @remotion/media # If project uses npm
-bunx remotion add @remotion/media # If project uses bun
-yarn remotion add @remotion/media # If project uses yarn
-pnpm exec remotion add @remotion/media # If project uses pnpm
-```
-
-Use `<Video>` from `@remotion/media` to embed videos into your composition.
-
-```tsx
-import { Video } from "@remotion/media";
-import { staticFile } from "remotion";
-
-export const MyComposition = () => {
-  return <Video src={staticFile("video.mp4")} />;
-};
-```
-
-Remote URLs are also supported:
-
-```tsx
-<Video src="https://remotion.media/video.mp4" />
-```
-
-## Trimming
-
-Use `trimBefore` and `trimAfter` to remove portions of the video. Values are in seconds.
-
-```tsx
-const { fps } = useVideoConfig();
-
-return (
-  <Video
-    src={staticFile("video.mp4")}
-    trimBefore={2 * fps} // Skip the first 2 seconds
-    trimAfter={10 * fps} // End at the 10 second mark
-  />
-);
-```
-
-## Delaying
-
-Wrap the video in a `<Sequence>` to delay when it appears:
-
-```tsx
-import { Sequence, staticFile } from "remotion";
-import { Video } from "@remotion/media";
-
-const { fps } = useVideoConfig();
-
-return (
-  <Sequence from={1 * fps}>
-    <Video src={staticFile("video.mp4")} />
-  </Sequence>
-);
-```
-
-The video will appear after 1 second.
-
-## Sizing and Position
-
-Use the `style` prop to control size and position:
-
-```tsx
-<Video
-  src={staticFile("video.mp4")}
-  style={{
-    width: 500,
-    height: 300,
-    position: "absolute",
-    top: 100,
-    left: 50,
-    objectFit: "cover",
-  }}
-/>
-```
-
-## Volume
-
-Set a static volume (0 to 1):
-
-```tsx
-<Video src={staticFile("video.mp4")} volume={0.5} />
-```
-
-Or use a callback for dynamic volume based on the current frame:
-
-```tsx
-import { interpolate } from "remotion";
-
-const { fps } = useVideoConfig();
-
-return (
-  <Video
-    src={staticFile("video.mp4")}
-    volume={(f) => interpolate(f, [0, 1 * fps], [0, 1], { extrapolateRight: "clamp" })}
-  />
-);
-```
-
-Use `muted` to silence the video entirely:
-
-```tsx
-<Video src={staticFile("video.mp4")} muted />
-```
-
-## Speed
-
-Use `playbackRate` to change the playback speed:
-
-```tsx
-<Video src={staticFile("video.mp4")} playbackRate={2} /> {/* 2x speed */}
-<Video src={staticFile("video.mp4")} playbackRate={0.5} /> {/* Half speed */}
-```
-
-Reverse playback is not supported.
-
-## Looping
-
-Use `loop` to loop the video indefinitely:
-
-```tsx
-<Video src={staticFile("video.mp4")} loop />
-```
-
-Use `loopVolumeCurveBehavior` to control how the frame count behaves when looping:
-
-- `"repeat"`: Frame count resets to 0 each loop (for `volume` callback)
-- `"extend"`: Frame count continues incrementing
-
-```tsx
-<Video
-  src={staticFile("video.mp4")}
-  loop
-  loopVolumeCurveBehavior="extend"
-  volume={(f) => interpolate(f, [0, 300], [1, 0])} // Fade out over multiple loops
-/>
-```
-
-## Pitch
-
-Use `toneFrequency` to adjust the pitch without affecting speed. Values range from 0.01 to 2:
-
-```tsx
-<Video
-  src={staticFile("video.mp4")}
-  toneFrequency={1.5} // Higher pitch
-/>
-<Video
-  src={staticFile("video.mp4")}
-  toneFrequency={0.8} // Lower pitch
-/>
-```
-
-Pitch shifting only works during server-side rendering, not in the Remotion Studio preview or in the `<Player />`.
+---
+name: videos
+description: Embedding videos in Remotion - trimming, volume, speed, looping, pitch
+metadata:
+  tags: video, media, trim, volume, speed, loop, pitch
+---
+
+# Using videos in Remotion
+
+## Prerequisites
+
+First, the @remotion/media package needs to be installed.  
+If it is not, use the following command:
+
+```bash
+npx remotion add @remotion/media # If project uses npm
+bunx remotion add @remotion/media # If project uses bun
+yarn remotion add @remotion/media # If project uses yarn
+pnpm exec remotion add @remotion/media # If project uses pnpm
+```
+
+Use `<Video>` from `@remotion/media` to embed videos into your composition.
+
+```tsx
+import { Video } from "@remotion/media";
+import { staticFile } from "remotion";
+
+export const MyComposition = () => {
+  return <Video src={staticFile("video.mp4")} />;
+};
+```
+
+Remote URLs are also supported:
+
+```tsx
+<Video src="https://remotion.media/video.mp4" />
+```
+
+## Trimming
+
+Use `trimBefore` and `trimAfter` to remove portions of the video. Values are in seconds.
+
+```tsx
+const { fps } = useVideoConfig();
+
+return (
+  <Video
+    src={staticFile("video.mp4")}
+    trimBefore={2 * fps} // Skip the first 2 seconds
+    trimAfter={10 * fps} // End at the 10 second mark
+  />
+);
+```
+
+## Delaying
+
+Wrap the video in a `<Sequence>` to delay when it appears:
+
+```tsx
+import { Sequence, staticFile } from "remotion";
+import { Video } from "@remotion/media";
+
+const { fps } = useVideoConfig();
+
+return (
+  <Sequence from={1 * fps}>
+    <Video src={staticFile("video.mp4")} />
+  </Sequence>
+);
+```
+
+The video will appear after 1 second.
+
+## Sizing and Position
+
+Use the `style` prop to control size and position:
+
+```tsx
+<Video
+  src={staticFile("video.mp4")}
+  style={{
+    width: 500,
+    height: 300,
+    position: "absolute",
+    top: 100,
+    left: 50,
+    objectFit: "cover",
+  }}
+/>
+```
+
+## Volume
+
+Set a static volume (0 to 1):
+
+```tsx
+<Video src={staticFile("video.mp4")} volume={0.5} />
+```
+
+Or use a callback for dynamic volume based on the current frame:
+
+```tsx
+import { interpolate } from "remotion";
+
+const { fps } = useVideoConfig();
+
+return (
+  <Video
+    src={staticFile("video.mp4")}
+    volume={(f) => interpolate(f, [0, 1 * fps], [0, 1], { extrapolateRight: "clamp" })}
+  />
+);
+```
+
+Use `muted` to silence the video entirely:
+
+```tsx
+<Video src={staticFile("video.mp4")} muted />
+```
+
+## Speed
+
+Use `playbackRate` to change the playback speed:
+
+```tsx
+<Video src={staticFile("video.mp4")} playbackRate={2} /> {/* 2x speed */}
+<Video src={staticFile("video.mp4")} playbackRate={0.5} /> {/* Half speed */}
+```
+
+Reverse playback is not supported.
+
+## Looping
+
+Use `loop` to loop the video indefinitely:
+
+```tsx
+<Video src={staticFile("video.mp4")} loop />
+```
+
+Use `loopVolumeCurveBehavior` to control how the frame count behaves when looping:
+
+- `"repeat"`: Frame count resets to 0 each loop (for `volume` callback)
+- `"extend"`: Frame count continues incrementing
+
+```tsx
+<Video
+  src={staticFile("video.mp4")}
+  loop
+  loopVolumeCurveBehavior="extend"
+  volume={(f) => interpolate(f, [0, 300], [1, 0])} // Fade out over multiple loops
+/>
+```
+
+## Pitch
+
+Use `toneFrequency` to adjust the pitch without affecting speed. Values range from 0.01 to 2:
+
+```tsx
+<Video
+  src={staticFile("video.mp4")}
+  toneFrequency={1.5} // Higher pitch
+/>
+<Video
+  src={staticFile("video.mp4")}
+  toneFrequency={0.8} // Lower pitch
+/>
+```
+
+Pitch shifting only works during server-side rendering, not in the Remotion Studio preview or in the `<Player />`.

package/skills/craft/remotion-best-practices/rules/voiceover.md

@@ -1,94 +1,94 @@
----
-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) 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](./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.
+---
+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) 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](./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.