dsh-remotion 0.3.3 → 0.4.0

package/skills/remotion-markup/html-in-canvas.md

@@ -1,128 +1,128 @@
-# 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>` components. Remotion rejects nesting because Chrome does not reliably render nested HTML-in-canvas subtrees.
-
-## 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>` components. Remotion rejects nesting because Chrome does not reliably render nested HTML-in-canvas subtrees.
+
+## 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`.

package/skills/remotion-markup/images.md

@@ -1,73 +1,73 @@
-## 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,
-  };
-};
-```
+## 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-markup/light-leaks.md

@@ -1,106 +1,106 @@
----
-name: light-leaks
-description: Light leak overlay effects for Remotion using lightLeak() from @remotion/effects.
-metadata:
-  tags: light-leaks, overlays, effects, transitions
----
-
-## Light Leaks
-
-This only works from Remotion 4.0.500 and up. Use `npx remotion versions` to check your Remotion version and `npx remotion upgrade` to upgrade your Remotion version.
-
-Apply `lightLeak()` from `@remotion/effects/light-leak` to a canvas-based component such as `<Solid>`. Animate `progress` from `0` to `1`; the light leak reveals during the first half and retracts during the second half.
-
-Typically use it 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/effects
-```
-
-## Light leak overlay component
-
-Keep the `progress` calculation inline so it is editable in Remotion Studio:
-
-```tsx
-import {lightLeak} from '@remotion/effects/light-leak';
-import {interpolate, Solid, useCurrentFrame, useVideoConfig} from 'remotion';
-
-const LightLeakOverlay: React.FC<{
-  seed?: number;
-  hueShift?: number;
-}> = ({seed = 0, hueShift = 0}) => {
-  const frame = useCurrentFrame();
-  const {durationInFrames, height, width} = useVideoConfig();
-
-  return (
-    <Solid
-      width={width}
-      height={height}
-      effects={[
-        lightLeak({
-          seed,
-          hueShift,
-          progress: interpolate(frame, [0, durationInFrames - 1], [0, 1], {
-            extrapolateLeft: 'clamp',
-            extrapolateRight: 'clamp',
-          }),
-        }),
-      ]}
-    />
-  );
-};
-```
-
-## Basic usage with TransitionSeries
-
-```tsx
-import {TransitionSeries} from '@remotion/transitions';
-
-<TransitionSeries>
-  <TransitionSeries.Sequence durationInFrames={60}>
-    <SceneA />
-  </TransitionSeries.Sequence>
-  <TransitionSeries.Overlay durationInFrames={30}>
-    <LightLeakOverlay />
-  </TransitionSeries.Overlay>
-  <TransitionSeries.Sequence durationInFrames={60}>
-    <SceneB />
-  </TransitionSeries.Sequence>
-</TransitionSeries>;
-```
-
-## Options
-
-- `progress?` — controls the evolve/retract phase from `0` to `1`. Effects do not animate on their own, so drive it with `useCurrentFrame()` and `interpolate()`. Default: `0.5`.
-- `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.
-- `disabled?` — skips the effect when `true`. Default: `false`.
-
-## Customizing the look
-
-```tsx
-// Blue-tinted light leak with a different pattern
-<LightLeakOverlay seed={5} hueShift={240} />;
-
-// Green-tinted light leak
-<LightLeakOverlay seed={2} hueShift={120} />;
-```
-
-## Standalone usage
-
-The overlay component can also be used outside of `<TransitionSeries>` as a decorative layer in any composition:
-
-```tsx
-import {AbsoluteFill} from 'remotion';
-
-const MyComp: React.FC = () => (
-  <AbsoluteFill>
-    <MyContent />
-    <LightLeakOverlay seed={3} />
-  </AbsoluteFill>
-);
-```
-
-`lightLeak()` uses WebGL2. Enable WebGL during rendering with `Config.setChromiumOpenGlRenderer("angle")`.
+---
+name: light-leaks
+description: Light leak overlay effects for Remotion using lightLeak() from @remotion/effects.
+metadata:
+  tags: light-leaks, overlays, effects, transitions
+---
+
+## Light Leaks
+
+This only works from Remotion 4.0.500 and up. Use `npx remotion versions` to check your Remotion version and `npx remotion upgrade` to upgrade your Remotion version.
+
+Apply `lightLeak()` from `@remotion/effects/light-leak` to a canvas-based component such as `<Solid>`. Animate `progress` from `0` to `1`; the light leak reveals during the first half and retracts during the second half.
+
+Typically use it 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/effects
+```
+
+## Light leak overlay component
+
+Keep the `progress` calculation inline so it is editable in Remotion Studio:
+
+```tsx
+import {lightLeak} from '@remotion/effects/light-leak';
+import {interpolate, Solid, useCurrentFrame, useVideoConfig} from 'remotion';
+
+const LightLeakOverlay: React.FC<{
+  seed?: number;
+  hueShift?: number;
+}> = ({seed = 0, hueShift = 0}) => {
+  const frame = useCurrentFrame();
+  const {durationInFrames, height, width} = useVideoConfig();
+
+  return (
+    <Solid
+      width={width}
+      height={height}
+      effects={[
+        lightLeak({
+          seed,
+          hueShift,
+          progress: interpolate(frame, [0, durationInFrames - 1], [0, 1], {
+            extrapolateLeft: 'clamp',
+            extrapolateRight: 'clamp',
+          }),
+        }),
+      ]}
+    />
+  );
+};
+```
+
+## Basic usage with TransitionSeries
+
+```tsx
+import {TransitionSeries} from '@remotion/transitions';
+
+<TransitionSeries>
+  <TransitionSeries.Sequence durationInFrames={60}>
+    <SceneA />
+  </TransitionSeries.Sequence>
+  <TransitionSeries.Overlay durationInFrames={30}>
+    <LightLeakOverlay />
+  </TransitionSeries.Overlay>
+  <TransitionSeries.Sequence durationInFrames={60}>
+    <SceneB />
+  </TransitionSeries.Sequence>
+</TransitionSeries>;
+```
+
+## Options
+
+- `progress?` — controls the evolve/retract phase from `0` to `1`. Effects do not animate on their own, so drive it with `useCurrentFrame()` and `interpolate()`. Default: `0.5`.
+- `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.
+- `disabled?` — skips the effect when `true`. Default: `false`.
+
+## Customizing the look
+
+```tsx
+// Blue-tinted light leak with a different pattern
+<LightLeakOverlay seed={5} hueShift={240} />;
+
+// Green-tinted light leak
+<LightLeakOverlay seed={2} hueShift={120} />;
+```
+
+## Standalone usage
+
+The overlay component can also be used outside of `<TransitionSeries>` as a decorative layer in any composition:
+
+```tsx
+import {AbsoluteFill} from 'remotion';
+
+const MyComp: React.FC = () => (
+  <AbsoluteFill>
+    <MyContent />
+    <LightLeakOverlay seed={3} />
+  </AbsoluteFill>
+);
+```
+
+`lightLeak()` uses WebGL2. Enable WebGL during rendering with `Config.setChromiumOpenGlRenderer("angle")`.