@oriro/orirocli 0.1.9 → 0.1.11

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

@@ -1,135 +1,135 @@
----
-name: gif
-description: Displaying GIFs, APNG, AVIF and WebP in Remotion
-metadata:
-  tags: gif, animation, images, animated, apng, avif, webp
----
-
-# Using Animated images in Remotion
-
-## Basic usage
-
-Use `<AnimatedImage>` to display a GIF, APNG, AVIF or WebP image synchronized with Remotion's timeline:
-
-```tsx
-import { AnimatedImage, staticFile } from "remotion";
-
-export const MyComposition = () => {
-  return <AnimatedImage src={staticFile("animation.gif")} width={500} height={500} />;
-};
-```
-
-Remote URLs are also supported (must have CORS enabled):
-
-```tsx
-<AnimatedImage src="https://example.com/animation.gif" width={500} height={500} />
-```
-
-## Sizing and fit
-
-Control how the image fills its container with the `fit` prop:
-
-```tsx
-// Stretch to fill (default)
-<AnimatedImage src={staticFile("animation.gif")} width={500} height={300} fit="fill" />
-
-// Maintain aspect ratio, fit inside container
-<AnimatedImage src={staticFile("animation.gif")} width={500} height={300} fit="contain" />
-
-// Fill container, crop if needed
-<AnimatedImage src={staticFile("animation.gif")} width={500} height={300} fit="cover" />
-```
-
-## Playback speed
-
-Use `playbackRate` to control the animation speed:
-
-```tsx
-<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} playbackRate={2} /> {/* 2x speed */}
-<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} playbackRate={0.5} /> {/* Half speed */}
-```
-
-## Looping behavior
-
-Control what happens when the animation finishes:
-
-```tsx
-// Loop indefinitely (default)
-<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} loopBehavior="loop" />
-
-// Play once, show final frame
-<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} loopBehavior="pause-after-finish" />
-
-// Play once, then clear canvas
-<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} loopBehavior="clear-after-finish" />
-```
-
-## Styling
-
-Use the `style` prop for additional CSS (use `width` and `height` props for sizing):
-
-```tsx
-<AnimatedImage
-  src={staticFile("animation.gif")}
-  width={500}
-  height={500}
-  style={{
-    borderRadius: 20,
-    position: "absolute",
-    top: 100,
-    left: 50,
-  }}
-/>
-```
-
-## Getting GIF duration
-
-Use `getGifDurationInSeconds()` from `@remotion/gif` to get the duration of a GIF.
-
-```bash
-npx remotion add @remotion/gif
-```
-
-```tsx
-import { getGifDurationInSeconds } from "@remotion/gif";
-import { staticFile } from "remotion";
-
-const duration = await getGifDurationInSeconds(staticFile("animation.gif"));
-console.log(duration); // e.g. 2.5
-```
-
-This is useful for setting the composition duration to match the GIF:
-
-```tsx
-import { getGifDurationInSeconds } from "@remotion/gif";
-import { staticFile, CalculateMetadataFunction } from "remotion";
-
-const calculateMetadata: CalculateMetadataFunction = async () => {
-  const duration = await getGifDurationInSeconds(staticFile("animation.gif"));
-  return {
-    durationInFrames: Math.ceil(duration * 30),
-  };
-};
-```
-
-## Alternative
-
-If `<AnimatedImage>` does not work (only supported in Chrome and Firefox), you can use `<Gif>` from `@remotion/gif` instead.
-
-```bash
-npx remotion add @remotion/gif # If project uses npm
-bunx remotion add @remotion/gif # If project uses bun
-yarn remotion add @remotion/gif # If project uses yarn
-pnpm exec remotion add @remotion/gif # If project uses pnpm
-```
-
-```tsx
-import { Gif } from "@remotion/gif";
-import { staticFile } from "remotion";
-
-export const MyComposition = () => {
-  return <Gif src={staticFile("animation.gif")} width={500} height={500} />;
-};
-```
-
-The `<Gif>` component has the same props as `<AnimatedImage>` but only supports GIF files.
+---
+name: gif
+description: Displaying GIFs, APNG, AVIF and WebP in Remotion
+metadata:
+  tags: gif, animation, images, animated, apng, avif, webp
+---
+
+# Using Animated images in Remotion
+
+## Basic usage
+
+Use `<AnimatedImage>` to display a GIF, APNG, AVIF or WebP image synchronized with Remotion's timeline:
+
+```tsx
+import { AnimatedImage, staticFile } from "remotion";
+
+export const MyComposition = () => {
+  return <AnimatedImage src={staticFile("animation.gif")} width={500} height={500} />;
+};
+```
+
+Remote URLs are also supported (must have CORS enabled):
+
+```tsx
+<AnimatedImage src="https://example.com/animation.gif" width={500} height={500} />
+```
+
+## Sizing and fit
+
+Control how the image fills its container with the `fit` prop:
+
+```tsx
+// Stretch to fill (default)
+<AnimatedImage src={staticFile("animation.gif")} width={500} height={300} fit="fill" />
+
+// Maintain aspect ratio, fit inside container
+<AnimatedImage src={staticFile("animation.gif")} width={500} height={300} fit="contain" />
+
+// Fill container, crop if needed
+<AnimatedImage src={staticFile("animation.gif")} width={500} height={300} fit="cover" />
+```
+
+## Playback speed
+
+Use `playbackRate` to control the animation speed:
+
+```tsx
+<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} playbackRate={2} /> {/* 2x speed */}
+<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} playbackRate={0.5} /> {/* Half speed */}
+```
+
+## Looping behavior
+
+Control what happens when the animation finishes:
+
+```tsx
+// Loop indefinitely (default)
+<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} loopBehavior="loop" />
+
+// Play once, show final frame
+<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} loopBehavior="pause-after-finish" />
+
+// Play once, then clear canvas
+<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} loopBehavior="clear-after-finish" />
+```
+
+## Styling
+
+Use the `style` prop for additional CSS (use `width` and `height` props for sizing):
+
+```tsx
+<AnimatedImage
+  src={staticFile("animation.gif")}
+  width={500}
+  height={500}
+  style={{
+    borderRadius: 20,
+    position: "absolute",
+    top: 100,
+    left: 50,
+  }}
+/>
+```
+
+## Getting GIF duration
+
+Use `getGifDurationInSeconds()` from `@remotion/gif` to get the duration of a GIF.
+
+```bash
+npx remotion add @remotion/gif
+```
+
+```tsx
+import { getGifDurationInSeconds } from "@remotion/gif";
+import { staticFile } from "remotion";
+
+const duration = await getGifDurationInSeconds(staticFile("animation.gif"));
+console.log(duration); // e.g. 2.5
+```
+
+This is useful for setting the composition duration to match the GIF:
+
+```tsx
+import { getGifDurationInSeconds } from "@remotion/gif";
+import { staticFile, CalculateMetadataFunction } from "remotion";
+
+const calculateMetadata: CalculateMetadataFunction = async () => {
+  const duration = await getGifDurationInSeconds(staticFile("animation.gif"));
+  return {
+    durationInFrames: Math.ceil(duration * 30),
+  };
+};
+```
+
+## Alternative
+
+If `<AnimatedImage>` does not work (only supported in Chrome and Firefox), you can use `<Gif>` from `@remotion/gif` instead.
+
+```bash
+npx remotion add @remotion/gif # If project uses npm
+bunx remotion add @remotion/gif # If project uses bun
+yarn remotion add @remotion/gif # If project uses yarn
+pnpm exec remotion add @remotion/gif # If project uses pnpm
+```
+
+```tsx
+import { Gif } from "@remotion/gif";
+import { staticFile } from "remotion";
+
+export const MyComposition = () => {
+  return <Gif src={staticFile("animation.gif")} width={500} height={500} />;
+};
+```
+
+The `<Gif>` component has the same props as `<AnimatedImage>` but only supports GIF files.

package/skills/craft/remotion-best-practices/rules/google-fonts.md

@@ -1,72 +1,72 @@
----
-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"],
-});
-```
-
-## 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>
-  );
-};
-```
+---
+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"],
+});
+```
+
+## 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/craft/remotion-best-practices/rules/html-in-canvas.md

@@ -1,122 +1,122 @@
-# Using `<HtmlInCanvas>` in Remotion
-
-Renders children into a `<canvas>` so you can post-process them with the Canvas 2D API or WebGL.
-
-Only works in Chrome 149+ with the `chrome://flags/#canvas-draw-element` flag enabled.  
-Give the user a notice.
-
-## Nesting
-
-Do not nest `<HtmlInCanvas>` inside another `<HtmlInCanvas>`. Remotion throws:
-
-```
-<HtmlInCanvas> effects cannot be nested together. Chrome will only display the outer effect. Consider merging the effects into one if you can.
-```
-
-## Enabling WebGL during renders
-
-If you make use of WebGL during renders, you need to enable it:
-
-From the CLI:
-
-```bash
-npx remotion render --gl=angle
-```
-
-Set it as the default for Studio and CLI (advised):
-
-```ts
-import { Config } from "@remotion/cli/config";
-
-Config.setChromiumOpenGlRenderer("angle");
-```
-
-## Basic usage
-
-By default, draws to canvas with no effect applied:
-
-```tsx
-import { HtmlInCanvas } from "remotion";
-
-export const MyComp = () => {
-  return (
-    <HtmlInCanvas width={1280} height={720}>
-      <div style={{ fontSize: 80 }}>Hello</div>
-    </HtmlInCanvas>
-  );
-};
-```
-
-## 2D effect with `onPaint`
-
-`onPaint` runs whenever the content updates. Call `ctx.drawElementImage(elementImage, 0, 0)` to draw the captured DOM, and assign the returned transform to `element.style.transform` so DOM selection still aligns with the painted output.
-
-```tsx
-import {
-  AbsoluteFill,
-  HtmlInCanvas,
-  type HtmlInCanvasOnPaint,
-  useCurrentFrame,
-  useVideoConfig,
-} from "remotion";
-import { useCallback } from "react";
-
-export const Blur = () => {
-  const frame = useCurrentFrame();
-  const { width, height, fps } = useVideoConfig();
-
-  const onPaint: HtmlInCanvasOnPaint = useCallback(
-    ({ canvas, element, elementImage }) => {
-      const ctx = canvas.getContext("2d");
-      if (!ctx) throw new Error("Failed to acquire 2D context");
-
-      const blurPx = 4 + 18 * (0.5 + 0.5 * Math.sin((frame / fps) * Math.PI));
-
-      ctx.reset();
-      ctx.filter = `blur(${blurPx}px)`;
-      const transform = ctx.drawElementImage(elementImage, 0, 0);
-      element.style.transform = transform.toString();
-    },
-    [frame, fps],
-  );
-
-  return (
-    <HtmlInCanvas width={width} height={height} onPaint={onPaint}>
-      <AbsoluteFill style={{ justifyContent: "center", alignItems: "center", fontSize: 120 }}>
-        <h1>Hello</h1>
-      </AbsoluteFill>
-    </HtmlInCanvas>
-  );
-};
-```
-
-## WebGL effects
-
-For WebGL, set up the context, program, and texture in `onInit` and return a cleanup function. Inside `onPaint`, upload the captured DOM with `gl.texElementImage2D(...)` and draw.
-
-```tsx
-const onInit: HtmlInCanvasOnInit = useCallback(({ canvas }) => {
-  const gl = canvas.getContext("webgl2", { alpha: true, premultipliedAlpha: true });
-  if (!gl) {
-    throw new Error(
-      "WebGL2 unavailable. Try rendering with the --gl=angle option. See https://remotion.dev/docs/gl-options.",
-    );
-  }
-  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
-  // compile program, create texture, set up VAO...
-  return () => {
-    // delete program, texture, buffers...
-  };
-}, []);
-
-const onPaint: HtmlInCanvasOnPaint = useCallback(({ elementImage }) => {
-  gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, elementImage);
-  gl.drawArrays(gl.TRIANGLES, 0, 6);
-}, []);
-```
-
-For a fully working minimal example, see https://github.com/remotion-dev/remotion/blob/main/packages/docs/components/demos/HtmlInCanvasDocsDemoWebGL.tsx.
-
-## Async `onPaint`
-
-`onPaint` may be `async`. Remotion holds the frame open via `delayRender()` until the promise resolves. Useful for multi-pass effects with `createImageBitmap`.
+# Using `<HtmlInCanvas>` in Remotion
+
+Renders children into a `<canvas>` so you can post-process them with the Canvas 2D API or WebGL.
+
+Only works in Chrome 149+ with the `chrome://flags/#canvas-draw-element` flag enabled.  
+Give the user a notice.
+
+## Nesting
+
+Do not nest `<HtmlInCanvas>` inside another `<HtmlInCanvas>`. Remotion throws:
+
+```
+<HtmlInCanvas> effects cannot be nested together. Chrome will only display the outer effect. Consider merging the effects into one if you can.
+```
+
+## Enabling WebGL during renders
+
+If you make use of WebGL during renders, you need to enable it:
+
+From the CLI:
+
+```bash
+npx remotion render --gl=angle
+```
+
+Set it as the default for Studio and CLI (advised):
+
+```ts
+import { Config } from "@remotion/cli/config";
+
+Config.setChromiumOpenGlRenderer("angle");
+```
+
+## Basic usage
+
+By default, draws to canvas with no effect applied:
+
+```tsx
+import { HtmlInCanvas } from "remotion";
+
+export const MyComp = () => {
+  return (
+    <HtmlInCanvas width={1280} height={720}>
+      <div style={{ fontSize: 80 }}>Hello</div>
+    </HtmlInCanvas>
+  );
+};
+```
+
+## 2D effect with `onPaint`
+
+`onPaint` runs whenever the content updates. Call `ctx.drawElementImage(elementImage, 0, 0)` to draw the captured DOM, and assign the returned transform to `element.style.transform` so DOM selection still aligns with the painted output.
+
+```tsx
+import {
+  AbsoluteFill,
+  HtmlInCanvas,
+  type HtmlInCanvasOnPaint,
+  useCurrentFrame,
+  useVideoConfig,
+} from "remotion";
+import { useCallback } from "react";
+
+export const Blur = () => {
+  const frame = useCurrentFrame();
+  const { width, height, fps } = useVideoConfig();
+
+  const onPaint: HtmlInCanvasOnPaint = useCallback(
+    ({ canvas, element, elementImage }) => {
+      const ctx = canvas.getContext("2d");
+      if (!ctx) throw new Error("Failed to acquire 2D context");
+
+      const blurPx = 4 + 18 * (0.5 + 0.5 * Math.sin((frame / fps) * Math.PI));
+
+      ctx.reset();
+      ctx.filter = `blur(${blurPx}px)`;
+      const transform = ctx.drawElementImage(elementImage, 0, 0);
+      element.style.transform = transform.toString();
+    },
+    [frame, fps],
+  );
+
+  return (
+    <HtmlInCanvas width={width} height={height} onPaint={onPaint}>
+      <AbsoluteFill style={{ justifyContent: "center", alignItems: "center", fontSize: 120 }}>
+        <h1>Hello</h1>
+      </AbsoluteFill>
+    </HtmlInCanvas>
+  );
+};
+```
+
+## WebGL effects
+
+For WebGL, set up the context, program, and texture in `onInit` and return a cleanup function. Inside `onPaint`, upload the captured DOM with `gl.texElementImage2D(...)` and draw.
+
+```tsx
+const onInit: HtmlInCanvasOnInit = useCallback(({ canvas }) => {
+  const gl = canvas.getContext("webgl2", { alpha: true, premultipliedAlpha: true });
+  if (!gl) {
+    throw new Error(
+      "WebGL2 unavailable. Try rendering with the --gl=angle option. See https://remotion.dev/docs/gl-options.",
+    );
+  }
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+  // compile program, create texture, set up VAO...
+  return () => {
+    // delete program, texture, buffers...
+  };
+}, []);
+
+const onPaint: HtmlInCanvasOnPaint = useCallback(({ elementImage }) => {
+  gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, elementImage);
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+}, []);
+```
+
+For a fully working minimal example, see https://github.com/remotion-dev/remotion/blob/main/packages/docs/components/demos/HtmlInCanvasDocsDemoWebGL.tsx.
+
+## Async `onPaint`
+
+`onPaint` may be `async`. Remotion holds the frame open via `delayRender()` until the promise resolves. Useful for multi-pass effects with `createImageBitmap`.