dsh-remotion 0.3.3 → 0.4.0

package/skills/remotion-best-practices/remotion-markup/local-fonts.md

@@ -1,69 +1,69 @@
-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
-});
-```
+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
+});
+```

package/skills/remotion-best-practices/remotion-markup/lottie.md

@@ -1,73 +1,73 @@
----
-name: lottie
-description: Embedding Lottie animations in Remotion.
-metadata:
-  category: Animation
----
-
-# Using Lottie Animations in Remotion
-
-## Prerequisites
-
-First, the @remotion/lottie package needs to be installed.  
-If it is not, use the following command:
-
-```bash
-npx remotion add @remotion/lottie # If project uses npm
-bunx remotion add @remotion/lottie # If project uses bun
-yarn remotion add @remotion/lottie # If project uses yarn
-pnpm exec remotion add @remotion/lottie # If project uses pnpm
-```
-
-## Displaying a Lottie file
-
-To import a Lottie animation:
-
-- Fetch the Lottie asset
-- Wrap the loading process in `delayRender()` and `continueRender()`
-- Save the animation data in a state
-- Render the Lottie animation using the `Lottie` component from the `@remotion/lottie` package
-
-```tsx
-import { Lottie, LottieAnimationData } from "@remotion/lottie";
-import { useEffect, useState } from "react";
-import { cancelRender, continueRender, delayRender } from "remotion";
-
-export const MyAnimation = () => {
-  const [handle] = useState(() => delayRender("Loading Lottie animation"));
-
-  const [animationData, setAnimationData] =
-    useState<LottieAnimationData | null>(null);
-
-  useEffect(() => {
-    fetch("https://assets4.lottiefiles.com/packages/lf20_zyquagfl.json")
-      .then((data) => data.json())
-      .then((json) => {
-        setAnimationData(json);
-        continueRender(handle);
-      })
-      .catch((err) => {
-        cancelRender(err);
-      });
-  }, [handle]);
-
-  if (!animationData) {
-    return null;
-  }
-
-  return <Lottie animationData={animationData} />;
-};
-```
-
-## Styling and animating
-
-Lottie supports the `style` prop to allow styles and animations:
-
-```tsx
-return (
-  <Lottie
-    animationData={animationData}
-    style={{ width: 400, height: 400 }}
-  />
-);
-```
+---
+name: lottie
+description: Embedding Lottie animations in Remotion.
+metadata:
+  category: Animation
+---
+
+# Using Lottie Animations in Remotion
+
+## Prerequisites
+
+First, the @remotion/lottie package needs to be installed.  
+If it is not, use the following command:
+
+```bash
+npx remotion add @remotion/lottie # If project uses npm
+bunx remotion add @remotion/lottie # If project uses bun
+yarn remotion add @remotion/lottie # If project uses yarn
+pnpm exec remotion add @remotion/lottie # If project uses pnpm
+```
+
+## Displaying a Lottie file
+
+To import a Lottie animation:
+
+- Fetch the Lottie asset
+- Wrap the loading process in `delayRender()` and `continueRender()`
+- Save the animation data in a state
+- Render the Lottie animation using the `Lottie` component from the `@remotion/lottie` package
+
+```tsx
+import { Lottie, LottieAnimationData } from "@remotion/lottie";
+import { useEffect, useState } from "react";
+import { cancelRender, continueRender, delayRender } from "remotion";
+
+export const MyAnimation = () => {
+  const [handle] = useState(() => delayRender("Loading Lottie animation"));
+
+  const [animationData, setAnimationData] =
+    useState<LottieAnimationData | null>(null);
+
+  useEffect(() => {
+    fetch("https://assets4.lottiefiles.com/packages/lf20_zyquagfl.json")
+      .then((data) => data.json())
+      .then((json) => {
+        setAnimationData(json);
+        continueRender(handle);
+      })
+      .catch((err) => {
+        cancelRender(err);
+      });
+  }, [handle]);
+
+  if (!animationData) {
+    return null;
+  }
+
+  return <Lottie animationData={animationData} />;
+};
+```
+
+## Styling and animating
+
+Lottie supports the `style` prop to allow styles and animations:
+
+```tsx
+return (
+  <Lottie
+    animationData={animationData}
+    style={{ width: 400, height: 400 }}
+  />
+);
+```

package/skills/remotion-best-practices/remotion-markup/measuring-dom-nodes.md

@@ -1,38 +1,38 @@
----
-name: measuring-dom-nodes
-description: Measuring DOM element dimensions in Remotion
-metadata:
-  tags: measure, layout, dimensions, getBoundingClientRect, scale
----
-
-# Measuring DOM nodes in Remotion
-
-Remotion applies a `scale()` transform to the video container, which affects values from `getBoundingClientRect()`. Use `useCurrentScale()` to get correct measurements.
-
-## Measuring element dimensions
-
-```tsx
-import { useCurrentScale } from "remotion";
-import { useRef, useEffect, useState } from "react";
-
-export const MyComponent = () => {
-  const ref = useRef<HTMLDivElement>(null);
-  const scale = useCurrentScale();
-  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
-
-  useEffect(() => {
-    if (!ref.current) return;
-    const rect = ref.current.getBoundingClientRect();
-    setDimensions({
-      width: rect.width / scale,
-      height: rect.height / scale,
-    });
-  }, [scale]);
-
-  return (
-    <div ref={ref}>
-      Content to measure
-    </div>
-  );
-};
-```
+---
+name: measuring-dom-nodes
+description: Measuring DOM element dimensions in Remotion
+metadata:
+  tags: measure, layout, dimensions, getBoundingClientRect, scale
+---
+
+# Measuring DOM nodes in Remotion
+
+Remotion applies a `scale()` transform to the video container, which affects values from `getBoundingClientRect()`. Use `useCurrentScale()` to get correct measurements.
+
+## Measuring element dimensions
+
+```tsx
+import { useCurrentScale } from "remotion";
+import { useRef, useEffect, useState } from "react";
+
+export const MyComponent = () => {
+  const ref = useRef<HTMLDivElement>(null);
+  const scale = useCurrentScale();
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    if (!ref.current) return;
+    const rect = ref.current.getBoundingClientRect();
+    setDimensions({
+      width: rect.width / scale,
+      height: rect.height / scale,
+    });
+  }, [scale]);
+
+  return (
+    <div ref={ref}>
+      Content to measure
+    </div>
+  );
+};
+```

package/skills/remotion-best-practices/remotion-markup/measuring-text.md

@@ -1,146 +1,146 @@
----
-name: measuring-text
-description: Measuring text dimensions, fitting text to containers, and checking overflow
-metadata:
-  tags: measure, text, layout, dimensions, fitText, fillTextBox
----
-
-# Measuring text in Remotion
-
-## Prerequisites
-
-Install @remotion/layout-utils if it is not already installed:
-
-```bash
-npx remotion add @remotion/layout-utils
-```
-
-## Measuring text dimensions
-
-Use `measureText()` to calculate the width and height of text:
-
-```tsx
-import { measureText } from "@remotion/layout-utils";
-
-const { width, height } = measureText({
-  text: "Hello World",
-  fontFamily: "Arial",
-  fontSize: 32,
-  fontWeight: "bold",
-});
-```
-
-Results are cached - duplicate calls return the cached result.
-
-## Fitting text to a width
-
-Use `fitText()` to find the optimal font size for a container:
-
-```tsx
-import { fitText } from "@remotion/layout-utils";
-
-const { fontSize } = fitText({
-  text: "Hello World",
-  withinWidth: 600,
-  fontFamily: "Inter",
-  fontWeight: "bold",
-});
-
-return (
-  <div
-    style={{
-      fontSize: Math.min(fontSize, 80), // Cap at 80px
-      fontFamily: "Inter",
-      fontWeight: "bold",
-    }}
-  >
-    Hello World
-  </div>
-);
-```
-
-## Checking text overflow
-
-Use `fillTextBox()` to check if text exceeds a box:
-
-```tsx
-import { fillTextBox } from "@remotion/layout-utils";
-
-const box = fillTextBox({ maxBoxWidth: 400, maxLines: 3 });
-
-const words = ["Hello", "World", "This", "is", "a", "test"];
-for (const word of words) {
-  const { exceedsBox } = box.add({
-    text: word + " ",
-    fontFamily: "Arial",
-    fontSize: 24,
-  });
-  if (exceedsBox) {
-    // Text would overflow, handle accordingly
-    break;
-  }
-}
-```
-
-## Best practices
-
-**Load fonts first:** Only call measurement functions after fonts are loaded.
-
-```tsx
-import { loadFont } from "@remotion/google-fonts/Inter";
-
-const { fontFamily, waitUntilDone } = loadFont("normal", {
-  weights: ["400"],
-  subsets: ["latin"],
-});
-
-waitUntilDone().then(() => {
-  // Now safe to measure
-  const { width } = measureText({
-    text: "Hello",
-    fontFamily,
-    fontSize: 32,
-  });
-});
-```
-
-**Use validateFontIsLoaded:** Catch font loading issues early:
-
-```tsx
-measureText({
-  text: "Hello",
-  fontFamily: "MyCustomFont",
-  fontSize: 32,
-  validateFontIsLoaded: true, // Throws if font not loaded
-});
-```
-
-**Match font properties:** Use the same properties for measurement and rendering:
-
-```tsx
-const fontStyle = {
-  fontFamily: "Inter",
-  fontSize: 32,
-  fontWeight: "bold" as const,
-  letterSpacing: "0.5px",
-};
-
-const { width } = measureText({
-  text: "Hello",
-  ...fontStyle,
-});
-
-return (
-  <div style={fontStyle}>
-    Hello
-  </div>
-);
-```
-
-**Avoid padding and border:** Use `outline` instead of `border` to prevent layout differences:
-
-```tsx
-<div style={{ outline: "2px solid red" }}>
-  Text
-</div>
-```
+---
+name: measuring-text
+description: Measuring text dimensions, fitting text to containers, and checking overflow
+metadata:
+  tags: measure, text, layout, dimensions, fitText, fillTextBox
+---
+
+# Measuring text in Remotion
+
+## Prerequisites
+
+Install @remotion/layout-utils if it is not already installed:
+
+```bash
+npx remotion add @remotion/layout-utils
+```
+
+## Measuring text dimensions
+
+Use `measureText()` to calculate the width and height of text:
+
+```tsx
+import { measureText } from "@remotion/layout-utils";
+
+const { width, height } = measureText({
+  text: "Hello World",
+  fontFamily: "Arial",
+  fontSize: 32,
+  fontWeight: "bold",
+});
+```
+
+Results are cached - duplicate calls return the cached result.
+
+## Fitting text to a width
+
+Use `fitText()` to find the optimal font size for a container:
+
+```tsx
+import { fitText } from "@remotion/layout-utils";
+
+const { fontSize } = fitText({
+  text: "Hello World",
+  withinWidth: 600,
+  fontFamily: "Inter",
+  fontWeight: "bold",
+});
+
+return (
+  <div
+    style={{
+      fontSize: Math.min(fontSize, 80), // Cap at 80px
+      fontFamily: "Inter",
+      fontWeight: "bold",
+    }}
+  >
+    Hello World
+  </div>
+);
+```
+
+## Checking text overflow
+
+Use `fillTextBox()` to check if text exceeds a box:
+
+```tsx
+import { fillTextBox } from "@remotion/layout-utils";
+
+const box = fillTextBox({ maxBoxWidth: 400, maxLines: 3 });
+
+const words = ["Hello", "World", "This", "is", "a", "test"];
+for (const word of words) {
+  const { exceedsBox } = box.add({
+    text: word + " ",
+    fontFamily: "Arial",
+    fontSize: 24,
+  });
+  if (exceedsBox) {
+    // Text would overflow, handle accordingly
+    break;
+  }
+}
+```
+
+## Best practices
+
+**Load fonts first:** Only call measurement functions after fonts are loaded.
+
+```tsx
+import { loadFont } from "@remotion/google-fonts/Inter";
+
+const { fontFamily, waitUntilDone } = loadFont("normal", {
+  weights: ["400"],
+  subsets: ["latin"],
+});
+
+waitUntilDone().then(() => {
+  // Now safe to measure
+  const { width } = measureText({
+    text: "Hello",
+    fontFamily,
+    fontSize: 32,
+  });
+});
+```
+
+**Use validateFontIsLoaded:** Catch font loading issues early:
+
+```tsx
+measureText({
+  text: "Hello",
+  fontFamily: "MyCustomFont",
+  fontSize: 32,
+  validateFontIsLoaded: true, // Throws if font not loaded
+});
+```
+
+**Match font properties:** Use the same properties for measurement and rendering:
+
+```tsx
+const fontStyle = {
+  fontFamily: "Inter",
+  fontSize: 32,
+  fontWeight: "bold" as const,
+  letterSpacing: "0.5px",
+};
+
+const { width } = measureText({
+  text: "Hello",
+  ...fontStyle,
+});
+
+return (
+  <div style={fontStyle}>
+    Hello
+  </div>
+);
+```
+
+**Avoid padding and border:** Use `outline` instead of `border` to prevent layout differences:
+
+```tsx
+<div style={{ outline: "2px solid red" }}>
+  Text
+</div>
+```