kodelyth-ecc 2.19.0 → 2.20.0

package/.roo/skills/remotion-video-creation/rules/assets/text-animations-typewriter.tsx

@@ -1,100 +0,0 @@
-import {
-	AbsoluteFill,
-	interpolate,
-	useCurrentFrame,
-	useVideoConfig,
-} from 'remotion';
-
-const COLOR_BG = '#ffffff';
-const COLOR_TEXT = '#000000';
-const FULL_TEXT = 'From prompt to motion graphics. This is Remotion.';
-const PAUSE_AFTER = 'From prompt to motion graphics.';
-const FONT_SIZE = 72;
-const FONT_WEIGHT = 700;
-const CHAR_FRAMES = 2;
-const CURSOR_BLINK_FRAMES = 16;
-const PAUSE_SECONDS = 1;
-
-// Ideal composition size: 1280x720
-
-const getTypedText = ({
-	frame,
-	fullText,
-	pauseAfter,
-	charFrames,
-	pauseFrames,
-}: {
-	frame: number;
-	fullText: string;
-	pauseAfter: string;
-	charFrames: number;
-	pauseFrames: number;
-}): string => {
-	const pauseIndex = fullText.indexOf(pauseAfter);
-	const preLen =
-		pauseIndex >= 0 ? pauseIndex + pauseAfter.length : fullText.length;
-
-	let typedChars = 0;
-	if (frame < preLen * charFrames) {
-		typedChars = Math.floor(frame / charFrames);
-	} else if (frame < preLen * charFrames + pauseFrames) {
-		typedChars = preLen;
-	} else {
-		const postPhase = frame - preLen * charFrames - pauseFrames;
-		typedChars = Math.min(
-			fullText.length,
-			preLen + Math.floor(postPhase / charFrames),
-		);
-	}
-	return fullText.slice(0, typedChars);
-};
-
-const Cursor: React.FC<{
-	frame: number;
-	blinkFrames: number;
-	symbol?: string;
-}> = ({frame, blinkFrames, symbol = '\u258C'}) => {
-	const opacity = interpolate(
-		frame % blinkFrames,
-		[0, blinkFrames / 2, blinkFrames],
-		[1, 0, 1],
-		{extrapolateLeft: 'clamp', extrapolateRight: 'clamp'},
-	);
-
-	return <span style={{opacity}}>{symbol}</span>;
-};
-
-export const MyAnimation = () => {
-	const frame = useCurrentFrame();
-	const {fps} = useVideoConfig();
-
-	const pauseFrames = Math.round(fps * PAUSE_SECONDS);
-
-	const typedText = getTypedText({
-		frame,
-		fullText: FULL_TEXT,
-		pauseAfter: PAUSE_AFTER,
-		charFrames: CHAR_FRAMES,
-		pauseFrames,
-	});
-
-	return (
-		<AbsoluteFill
-			style={{
-				backgroundColor: COLOR_BG,
-			}}
-		>
-			<div
-				style={{
-					color: COLOR_TEXT,
-					fontSize: FONT_SIZE,
-					fontWeight: FONT_WEIGHT,
-					fontFamily: 'sans-serif',
-				}}
-			>
-				<span>{typedText}</span>
-				<Cursor frame={frame} blinkFrames={CURSOR_BLINK_FRAMES} />
-			</div>
-		</AbsoluteFill>
-	);
-};

package/.roo/skills/remotion-video-creation/rules/assets/text-animations-word-highlight.tsx

@@ -1,108 +0,0 @@
-import {loadFont} from '@remotion/google-fonts/Inter';
-import React from 'react';
-import {
-	AbsoluteFill,
-	spring,
-	useCurrentFrame,
-	useVideoConfig,
-} from 'remotion';
-
-/*
- * Highlight a word in a sentence with a spring-animated wipe effect.
- */
-
-// Ideal composition size: 1280x720
-
-const COLOR_BG = '#ffffff';
-const COLOR_TEXT = '#000000';
-const COLOR_HIGHLIGHT = '#A7C7E7';
-const FULL_TEXT = 'This is Remotion.';
-const HIGHLIGHT_WORD = 'Remotion';
-const FONT_SIZE = 72;
-const FONT_WEIGHT = 700;
-const HIGHLIGHT_START_FRAME = 30;
-const HIGHLIGHT_WIPE_DURATION = 18;
-
-const {fontFamily} = loadFont();
-
-const Highlight: React.FC<{
-	word: string;
-	color: string;
-	delay: number;
-	durationInFrames: number;
-}> = ({word, color, delay, durationInFrames}) => {
-	const frame = useCurrentFrame();
-	const {fps} = useVideoConfig();
-
-	const highlightProgress = spring({
-		fps,
-		frame,
-		config: {damping: 200},
-		delay,
-		durationInFrames,
-	});
-	const scaleX = Math.max(0, Math.min(1, highlightProgress));
-
-	return (
-		<span style={{position: 'relative', display: 'inline-block'}}>
-			<span
-				style={{
-					position: 'absolute',
-					left: 0,
-					right: 0,
-					top: '50%',
-					height: '1.05em',
-					transform: `translateY(-50%) scaleX(${scaleX})`,
-					transformOrigin: 'left center',
-					backgroundColor: color,
-					borderRadius: '0.18em',
-					zIndex: 0,
-				}}
-			/>
-			<span style={{position: 'relative', zIndex: 1}}>{word}</span>
-		</span>
-	);
-};
-
-export const MyAnimation = () => {
-	const highlightIndex = FULL_TEXT.indexOf(HIGHLIGHT_WORD);
-	const hasHighlight = highlightIndex >= 0;
-	const preText = hasHighlight ? FULL_TEXT.slice(0, highlightIndex) : FULL_TEXT;
-	const postText = hasHighlight
-		? FULL_TEXT.slice(highlightIndex + HIGHLIGHT_WORD.length)
-		: '';
-
-	return (
-		<AbsoluteFill
-			style={{
-				backgroundColor: COLOR_BG,
-				alignItems: 'center',
-				justifyContent: 'center',
-				fontFamily,
-			}}
-		>
-			<div
-				style={{
-					color: COLOR_TEXT,
-					fontSize: FONT_SIZE,
-					fontWeight: FONT_WEIGHT,
-				}}
-			>
-				{hasHighlight ? (
-					<>
-						<span>{preText}</span>
-						<Highlight
-							word={HIGHLIGHT_WORD}
-							color={COLOR_HIGHLIGHT}
-							delay={HIGHLIGHT_START_FRAME}
-							durationInFrames={HIGHLIGHT_WIPE_DURATION}
-						/>
-						<span>{postText}</span>
-					</>
-				) : (
-					<span>{FULL_TEXT}</span>
-				)}
-			</div>
-		</AbsoluteFill>
-	);
-};

package/.roo/skills/remotion-video-creation/rules/assets.md

@@ -1,78 +0,0 @@
----
-name: assets
-description: Importing images, videos, audio, and fonts into Remotion
-metadata:
-  tags: assets, staticFile, images, fonts, public
----
-
-# Importing assets in Remotion
-
-## The public folder
-
-Place assets in the `public/` folder at your project root.
-
-## Using staticFile()
-
-You MUST use `staticFile()` to reference files from the `public/` folder:
-
-```tsx
-import {Img, staticFile} from 'remotion';
-
-export const MyComposition = () => {
-  return <Img src={staticFile('logo.png')} />;
-};
-```
-
-The function returns an encoded URL that works correctly when deploying to subdirectories.
-
-## Using with components
-
-**Images:**
-
-```tsx
-import {Img, staticFile} from 'remotion';
-
-<Img src={staticFile('photo.png')} />;
-```
-
-**Videos:**
-
-```tsx
-import {Video} from '@remotion/media';
-import {staticFile} from 'remotion';
-
-<Video src={staticFile('clip.mp4')} />;
-```
-
-**Audio:**
-
-```tsx
-import {Audio} from '@remotion/media';
-import {staticFile} from 'remotion';
-
-<Audio src={staticFile('music.mp3')} />;
-```
-
-**Fonts:**
-
-```tsx
-import {staticFile} from 'remotion';
-
-const fontFamily = new FontFace('MyFont', `url(${staticFile('font.woff2')})`);
-await fontFamily.load();
-document.fonts.add(fontFamily);
-```
-
-## Remote URLs
-
-Remote URLs can be used directly without `staticFile()`:
-
-```tsx
-<Img src="https://example.com/image.png" />
-<Video src="https://remotion.media/video.mp4" />
-```
-
-## Important notes
-
-- Remotion components (`<Img>`, `<Video>`, `<Audio>`) ensure assets are fully loaded before rendering
-- Special characters in filenames (`#`, `?`, `&`) are automatically encoded

package/.roo/skills/remotion-video-creation/rules/audio.md

@@ -1,172 +0,0 @@
----
-name: audio
-description: Using audio and sound in Remotion - importing, trimming, volume, speed, pitch
-metadata:
-  tags: audio, media, trim, volume, speed, loop, pitch, mute, sound, sfx
----
-
-# Using audio in Remotion
-
-## Prerequisites
-
-First, the @remotion/media package needs to be installed.
-If it is not installed, 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
-```
-
-## Importing Audio
-
-Use `<Audio>` from `@remotion/media` to add audio to your composition.
-
-```tsx
-import { Audio } from "@remotion/media";
-import { staticFile } from "remotion";
-
-export const MyComposition = () => {
-  return <Audio src={staticFile("audio.mp3")} />;
-};
-```
-
-Remote URLs are also supported:
-
-```tsx
-<Audio src="https://remotion.media/audio.mp3" />
-```
-
-By default, audio plays from the start, at full volume and full length.
-Multiple audio tracks can be layered by adding multiple `<Audio>` components.
-
-## Trimming
-
-Use `trimBefore` and `trimAfter` to remove portions of the audio. Values are in frames.
-
-```tsx
-const { fps } = useVideoConfig();
-
-return (
-  <Audio
-    src={staticFile("audio.mp3")}
-    trimBefore={2 * fps} // Skip the first 2 seconds
-    trimAfter={10 * fps} // End at the 10 second mark
-  />
-);
-```
-
-The audio still starts playing at the beginning of the composition - only the specified portion is played.
-
-## Delaying
-
-Wrap the audio in a `<Sequence>` to delay when it starts:
-
-```tsx
-import { Sequence, staticFile } from "remotion";
-import { Audio } from "@remotion/media";
-
-const { fps } = useVideoConfig();
-
-return (
-  <Sequence from={1 * fps}>
-    <Audio src={staticFile("audio.mp3")} />
-  </Sequence>
-);
-```
-
-The audio will start playing after 1 second.
-
-## Volume
-
-Set a static volume (0 to 1):
-
-```tsx
-<Audio src={staticFile("audio.mp3")} volume={0.5} />
-```
-
-Or use a callback for dynamic volume based on the current frame:
-
-```tsx
-import { interpolate } from "remotion";
-
-const { fps } = useVideoConfig();
-
-return (
-  <Audio
-    src={staticFile("audio.mp3")}
-    volume={(f) =>
-      interpolate(f, [0, 1 * fps], [0, 1], { extrapolateRight: "clamp" })
-    }
-  />
-);
-```
-
-The value of `f` starts at 0 when the audio begins to play, not the composition frame.
-
-## Muting
-
-Use `muted` to silence the audio. It can be set dynamically:
-
-```tsx
-const frame = useCurrentFrame();
-const { fps } = useVideoConfig();
-
-return (
-  <Audio
-    src={staticFile("audio.mp3")}
-    muted={frame >= 2 * fps && frame <= 4 * fps} // Mute between 2s and 4s
-  />
-);
-```
-
-## Speed
-
-Use `playbackRate` to change the playback speed:
-
-```tsx
-<Audio src={staticFile("audio.mp3")} playbackRate={2} /> {/* 2x speed */}
-<Audio src={staticFile("audio.mp3")} playbackRate={0.5} /> {/* Half speed */}
-```
-
-Reverse playback is not supported.
-
-## Looping
-
-Use `loop` to loop the audio indefinitely:
-
-```tsx
-<Audio src={staticFile("audio.mp3")} loop />
-```
-
-Use `loopVolumeCurveBehavior` to control how the frame count behaves when looping:
-
-- `"repeat"`: Frame count resets to 0 each loop (default)
-- `"extend"`: Frame count continues incrementing
-
-```tsx
-<Audio
-  src={staticFile("audio.mp3")}
-  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
-<Audio
-  src={staticFile("audio.mp3")}
-  toneFrequency={1.5} // Higher pitch
-/>
-<Audio
-  src={staticFile("audio.mp3")}
-  toneFrequency={0.8} // Lower pitch
-/>
-```
-
-Pitch shifting only works during server-side rendering, not in the Remotion Studio preview or in the `<Player />`.

package/.roo/skills/remotion-video-creation/rules/calculate-metadata.md

@@ -1,104 +0,0 @@
----
-name: calculate-metadata
-description: Dynamically set composition duration, dimensions, and props
-metadata:
-  tags: calculateMetadata, duration, dimensions, props, dynamic
----
-
-# Using calculateMetadata
-
-Use `calculateMetadata` on a `<Composition>` to dynamically set duration, dimensions, and transform props before rendering.
-
-```tsx
-<Composition id="MyComp" component={MyComponent} durationInFrames={300} fps={30} width={1920} height={1080} defaultProps={{videoSrc: 'https://remotion.media/video.mp4'}} calculateMetadata={calculateMetadata} />
-```
-
-## Setting duration based on a video
-
-Use the `getMediaMetadata()` function from the mediabunny/metadata skill to get the video duration:
-
-```tsx
-import {CalculateMetadataFunction} from 'remotion';
-import {getMediaMetadata} from '../get-media-metadata';
-
-const calculateMetadata: CalculateMetadataFunction<Props> = async ({props}) => {
-  const {durationInSeconds} = await getMediaMetadata(props.videoSrc);
-
-  return {
-    durationInFrames: Math.ceil(durationInSeconds * 30),
-  };
-};
-```
-
-## Matching dimensions of a video
-
-```tsx
-const calculateMetadata: CalculateMetadataFunction<Props> = async ({props}) => {
-  const {durationInSeconds, dimensions} = await getMediaMetadata(props.videoSrc);
-
-  return {
-    durationInFrames: Math.ceil(durationInSeconds * 30),
-    width: dimensions?.width ?? 1920,
-    height: dimensions?.height ?? 1080,
-  };
-};
-```
-
-## Setting duration based on multiple videos
-
-```tsx
-const calculateMetadata: CalculateMetadataFunction<Props> = async ({props}) => {
-  const metadataPromises = props.videos.map((video) => getMediaMetadata(video.src));
-  const allMetadata = await Promise.all(metadataPromises);
-
-  const totalDuration = allMetadata.reduce((sum, meta) => sum + meta.durationInSeconds, 0);
-
-  return {
-    durationInFrames: Math.ceil(totalDuration * 30),
-  };
-};
-```
-
-## Setting a default outName
-
-Set the default output filename based on props:
-
-```tsx
-const calculateMetadata: CalculateMetadataFunction<Props> = async ({props}) => {
-  return {
-    defaultOutName: `video-${props.id}.mp4`,
-  };
-};
-```
-
-## Transforming props
-
-Fetch data or transform props before rendering:
-
-```tsx
-const calculateMetadata: CalculateMetadataFunction<Props> = async ({props, abortSignal}) => {
-  const response = await fetch(props.dataUrl, {signal: abortSignal});
-  const data = await response.json();
-
-  return {
-    props: {
-      ...props,
-      fetchedData: data,
-    },
-  };
-};
-```
-
-The `abortSignal` cancels stale requests when props change in the Studio.
-
-## Return value
-
-All fields are optional. Returned values override the `<Composition>` props:
-
-- `durationInFrames`: Number of frames
-- `width`: Composition width in pixels
-- `height`: Composition height in pixels
-- `fps`: Frames per second
-- `props`: Transformed props passed to the component
-- `defaultOutName`: Default output filename
-- `defaultCodec`: Default codec for rendering

package/.roo/skills/remotion-video-creation/rules/can-decode.md

@@ -1,75 +0,0 @@
----
-name: can-decode
-description: Check if a video can be decoded by the browser using Mediabunny
-metadata:
-  tags: decode, validation, video, audio, compatibility, browser
----
-
-# Checking if a video can be decoded
-
-Use Mediabunny to check if a video can be decoded by the browser before attempting to play it.
-
-## The `canDecode()` function
-
-This function can be copy-pasted into any project.
-
-```tsx
-import { Input, ALL_FORMATS, UrlSource } from "mediabunny";
-
-export const canDecode = async (src: string) => {
-  const input = new Input({
-    formats: ALL_FORMATS,
-    source: new UrlSource(src, {
-      getRetryDelay: () => null,
-    }),
-  });
-
-  try {
-    await input.getFormat();
-  } catch {
-    return false;
-  }
-
-  const videoTrack = await input.getPrimaryVideoTrack();
-  if (videoTrack && !(await videoTrack.canDecode())) {
-    return false;
-  }
-
-  const audioTrack = await input.getPrimaryAudioTrack();
-  if (audioTrack && !(await audioTrack.canDecode())) {
-    return false;
-  }
-
-  return true;
-};
-```
-
-## Usage
-
-```tsx
-const src = "https://remotion.media/video.mp4";
-const isDecodable = await canDecode(src);
-
-if (isDecodable) {
-  console.log("Video can be decoded");
-} else {
-  console.log("Video cannot be decoded by this browser");
-}
-```
-
-## Using with Blob
-
-For file uploads or drag-and-drop, use `BlobSource`:
-
-```tsx
-import { Input, ALL_FORMATS, BlobSource } from "mediabunny";
-
-export const canDecodeBlob = async (blob: Blob) => {
-  const input = new Input({
-    formats: ALL_FORMATS,
-    source: new BlobSource(blob),
-  });
-
-  // Same validation logic as above
-};
-```

package/.roo/skills/remotion-video-creation/rules/charts.md

@@ -1,58 +0,0 @@
----
-name: charts
-description: Chart and data visualization patterns for Remotion. Use when creating bar charts, pie charts, histograms, progress bars, or any data-driven animations.
-metadata:
-  tags: charts, data, visualization, bar-chart, pie-chart, graphs
----
-
-# Charts in Remotion
-
-You can create bar charts in Remotion by using regular React code - HTML and SVG is allowed, as well as D3.js.
-
-## No animations not powered by `useCurrentFrame()`
-
-Disable all animations by third party libraries.
-They will cause flickering during rendering.
-Instead, drive all animations from `useCurrentFrame()`.
-
-## Bar Chart Animations
-
-See [Bar Chart Example](assets/charts/bar-chart.tsx) for a basic example implmentation.
-
-### Staggered Bars
-
-You can animate the height of the bars and stagger them like this:
-
-```tsx
-const STAGGER_DELAY = 5;
-const frame = useCurrentFrame();
-const {fps} = useVideoConfig();
-
-const bars = data.map((item, i) => {
-  const delay = i * STAGGER_DELAY;
-  const height = spring({
-    frame,
-    fps,
-    delay,
-    config: {damping: 200},
-  });
-  return <div style={{height: height * item.value}} />;
-});
-```
-
-## Pie Chart Animation
-
-Animate segments using stroke-dashoffset, starting from 12 o'clock.
-
-```tsx
-const frame = useCurrentFrame();
-const {fps} = useVideoConfig();
-
-const progress = interpolate(frame, [0, 100], [0, 1]);
-
-const circumference = 2 * Math.PI * radius;
-const segmentLength = (value / total) * circumference;
-const offset = interpolate(progress, [0, 1], [segmentLength, 0]);
-
-<circle r={radius} cx={center} cy={center} fill="none" stroke={color} strokeWidth={strokeWidth} strokeDasharray={`${segmentLength} ${circumference}`} strokeDashoffset={offset} transform={`rotate(-90 ${center} ${center})`} />;
-```