kodelyth-ecc 2.19.0 → 2.20.0

package/.gemini/skills/remotion-video-creation/rules/get-video-dimensions.md

@@ -1,68 +0,0 @@
----
-name: get-video-dimensions
-description: Getting the width and height of a video file with Mediabunny
-metadata:
-  tags: dimensions, width, height, resolution, size, video
----
-
-# Getting video dimensions with Mediabunny
-
-Mediabunny can extract the width and height of a video file. It works in browser, Node.js, and Bun environments.
-
-## Getting video dimensions
-
-```tsx
-import { Input, ALL_FORMATS, UrlSource } from "mediabunny";
-
-export const getVideoDimensions = async (src: string) => {
-  const input = new Input({
-    formats: ALL_FORMATS,
-    source: new UrlSource(src, {
-      getRetryDelay: () => null,
-    }),
-  });
-
-  const videoTrack = await input.getPrimaryVideoTrack();
-  if (!videoTrack) {
-    throw new Error("No video track found");
-  }
-
-  return {
-    width: videoTrack.displayWidth,
-    height: videoTrack.displayHeight,
-  };
-};
-```
-
-## Usage
-
-```tsx
-const dimensions = await getVideoDimensions("https://remotion.media/video.mp4");
-console.log(dimensions.width);  // e.g. 1920
-console.log(dimensions.height); // e.g. 1080
-```
-
-## Using with local files
-
-For local files, use `FileSource` instead of `UrlSource`:
-
-```tsx
-import { Input, ALL_FORMATS, FileSource } from "mediabunny";
-
-const input = new Input({
-  formats: ALL_FORMATS,
-  source: new FileSource(file), // File object from input or drag-drop
-});
-
-const videoTrack = await input.getPrimaryVideoTrack();
-const width = videoTrack.displayWidth;
-const height = videoTrack.displayHeight;
-```
-
-## Using with staticFile in Remotion
-
-```tsx
-import { staticFile } from "remotion";
-
-const dimensions = await getVideoDimensions(staticFile("video.mp4"));
-```

package/.gemini/skills/remotion-video-creation/rules/get-video-duration.md

@@ -1,58 +0,0 @@
----
-name: get-video-duration
-description: Getting the duration of a video file in seconds with Mediabunny
-metadata:
-  tags: duration, video, length, time, seconds
----
-
-# Getting video duration with Mediabunny
-
-Mediabunny can extract the duration of a video file. It works in browser, Node.js, and Bun environments.
-
-## Getting video duration
-
-```tsx
-import { Input, ALL_FORMATS, UrlSource } from "mediabunny";
-
-export const getVideoDuration = async (src: string) => {
-  const input = new Input({
-    formats: ALL_FORMATS,
-    source: new UrlSource(src, {
-      getRetryDelay: () => null,
-    }),
-  });
-
-  const durationInSeconds = await input.computeDuration();
-  return durationInSeconds;
-};
-```
-
-## Usage
-
-```tsx
-const duration = await getVideoDuration("https://remotion.media/video.mp4");
-console.log(duration); // e.g. 10.5 (seconds)
-```
-
-## Using with local files
-
-For local files, use `FileSource` instead of `UrlSource`:
-
-```tsx
-import { Input, ALL_FORMATS, FileSource } from "mediabunny";
-
-const input = new Input({
-  formats: ALL_FORMATS,
-  source: new FileSource(file), // File object from input or drag-drop
-});
-
-const durationInSeconds = await input.computeDuration();
-```
-
-## Using with staticFile in Remotion
-
-```tsx
-import { staticFile } from "remotion";
-
-const duration = await getVideoDuration(staticFile("video.mp4"));
-```

package/.gemini/skills/remotion-video-creation/rules/gifs.md

@@ -1,138 +0,0 @@
----
-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 # 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 {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/.gemini/skills/remotion-video-creation/rules/images.md

@@ -1,130 +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/.gemini/skills/remotion-video-creation/rules/import-srt-captions.md

@@ -1,67 +0,0 @@
----
-name: import-srt-captions
-description: Importing .srt subtitle files into Remotion using @remotion/captions
-metadata:
-  tags: captions, subtitles, srt, import, parse
----
-
-# Importing .srt subtitles into Remotion
-
-If you have an existing `.srt` subtitle file, you can import it into Remotion using `parseSrt()` from `@remotion/captions`.
-
-## Prerequisites
-
-First, the @remotion/captions package needs to be installed.
-If it is not installed, use the following command:
-
-```bash
-npx remotion add @remotion/captions # If project uses npm
-bunx remotion add @remotion/captions # If project uses bun
-yarn remotion add @remotion/captions # If project uses yarn
-pnpm exec remotion add @remotion/captions # If project uses pnpm
-```
-
-## Reading an .srt file
-
-Use `staticFile()` to reference an `.srt` file in your `public` folder, then fetch and parse it:
-
-```tsx
-import {useState, useEffect, useCallback} from 'react';
-import {AbsoluteFill, staticFile, useDelayRender} from 'remotion';
-import {parseSrt} from '@remotion/captions';
-import type {Caption} from '@remotion/captions';
-
-export const MyComponent: React.FC = () => {
-  const [captions, setCaptions] = useState<Caption[] | null>(null);
-  const {delayRender, continueRender, cancelRender} = useDelayRender();
-  const [handle] = useState(() => delayRender());
-
-  const fetchCaptions = useCallback(async () => {
-    try {
-      const response = await fetch(staticFile('subtitles.srt'));
-      const text = await response.text();
-      const {captions: parsed} = parseSrt({input: text});
-      setCaptions(parsed);
-      continueRender(handle);
-    } catch (e) {
-      cancelRender(e);
-    }
-  }, [continueRender, cancelRender, handle]);
-
-  useEffect(() => {
-    fetchCaptions();
-  }, [fetchCaptions]);
-
-  if (!captions) {
-    return null;
-  }
-
-  return <AbsoluteFill>{/* Use captions here */}</AbsoluteFill>;
-};
-```
-
-Remote URLs are also supported - you can `fetch()` a remote file via URL instead of using `staticFile()`.
-
-## Using imported captions
-
-Once parsed, the captions are in the `Caption` format and can be used with all `@remotion/captions` utilities.

package/.gemini/skills/remotion-video-creation/rules/lottie.md

@@ -1,67 +0,0 @@
----
-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/.gemini/skills/remotion-video-creation/rules/measuring-dom-nodes.md

@@ -1,34 +0,0 @@
----
-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/.gemini/skills/remotion-video-creation/rules/measuring-text.md

@@ -1,143 +0,0 @@
----
-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 # If project uses npm
-bunx remotion add @remotion/layout-utils # If project uses bun
-yarn remotion add @remotion/layout-utils # If project uses yarn
-pnpm exec remotion add @remotion/layout-utils # If project uses pnpm
-```
-
-## 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>
-```