kodelyth-ecc 2.19.0 → 2.21.0

package/.kimi/skills/remotion-video-creation/rules/sequencing.md

@@ -1,106 +0,0 @@
----
-name: sequencing
-description: Sequencing patterns for Remotion - delay, trim, limit duration of items
-metadata:
-  tags: sequence, series, timing, delay, trim
----
-
-Use `<Sequence>` to delay when an element appears in the timeline.
-
-```tsx
-import { Sequence } from "remotion";
-
-const {fps} = useVideoConfig();
-
-<Sequence from={1 * fps} durationInFrames={2 * fps} premountFor={1 * fps}>
-  <Title />
-</Sequence>
-<Sequence from={2 * fps} durationInFrames={2 * fps} premountFor={1 * fps}>
-  <Subtitle />
-</Sequence>
-```
-
-This will by default wrap the component in an absolute fill element.
-If the items should not be wrapped, use the `layout` prop:
-
-```tsx
-<Sequence layout="none">
-  <Title />
-</Sequence>
-```
-
-## Premounting
-
-This loads the component in the timeline before it is actually played.
-Always premount any `<Sequence>`!
-
-```tsx
-<Sequence premountFor={1 * fps}>
-  <Title />
-</Sequence>
-```
-
-## Series
-
-Use `<Series>` when elements should play one after another without overlap.
-
-```tsx
-import {Series} from 'remotion';
-
-<Series>
-  <Series.Sequence durationInFrames={45}>
-    <Intro />
-  </Series.Sequence>
-  <Series.Sequence durationInFrames={60}>
-    <MainContent />
-  </Series.Sequence>
-  <Series.Sequence durationInFrames={30}>
-    <Outro />
-  </Series.Sequence>
-</Series>;
-```
-
-Same as with `<Sequence>`, the items will be wrapped in an absolute fill element by default when using `<Series.Sequence>`, unless the `layout` prop is set to `none`.
-
-### Series with overlaps
-
-Use negative offset for overlapping sequences:
-
-```tsx
-<Series>
-  <Series.Sequence durationInFrames={60}>
-    <SceneA />
-  </Series.Sequence>
-  <Series.Sequence offset={-15} durationInFrames={60}>
-    {/* Starts 15 frames before SceneA ends */}
-    <SceneB />
-  </Series.Sequence>
-</Series>
-```
-
-## Frame References Inside Sequences
-
-Inside a Sequence, `useCurrentFrame()` returns the local frame (starting from 0):
-
-```tsx
-<Sequence from={60} durationInFrames={30}>
-  <MyComponent />
-  {/* Inside MyComponent, useCurrentFrame() returns 0-29, not 60-89 */}
-</Sequence>
-```
-
-## Nested Sequences
-
-Sequences can be nested for complex timing:
-
-```tsx
-<Sequence from={0} durationInFrames={120}>
-  <Background />
-  <Sequence from={15} durationInFrames={90} layout="none">
-    <Title />
-  </Sequence>
-  <Sequence from={45} durationInFrames={60} layout="none">
-    <Subtitle />
-  </Sequence>
-</Sequence>
-```

package/.kimi/skills/remotion-video-creation/rules/tailwind.md

@@ -1,11 +0,0 @@
----
-name: tailwind
-description: Using TailwindCSS in Remotion.
-metadata:
----
-
-You can and should use TailwindCSS in Remotion, if TailwindCSS is installed in the project.
-
-Don't use `transition-*` or `animate-*` classes - always animate using the `useCurrentFrame()` hook.
-
-Tailwind must be installed and enabled first in a Remotion project - fetch  <https://www.remotion.dev/docs/tailwind> using WebFetch for instructions.

package/.kimi/skills/remotion-video-creation/rules/text-animations.md

@@ -1,20 +0,0 @@
----
-name: text-animations
-description: Typography and text animation patterns for Remotion.
-metadata:
-  tags: typography, text, typewriter, highlighter ken
----
-
-## Text animations
-
-Based on `useCurrentFrame()`, reduce the string character by character to create a typewriter effect.
-
-## Typewriter Effect
-
-See [Typewriter](assets/text-animations-typewriter.tsx) for an advanced example with a blinking cursor and a pause after the first sentence.
-
-Always use string slicing for typewriter effects. Never use per-character opacity.
-
-## Word Highlighting
-
-See [Word Highlight](assets/text-animations-word-highlight.tsx) for an example for how a word highlight is animated, like with a highlighter pen.

package/.kimi/skills/remotion-video-creation/rules/timing.md

@@ -1,179 +0,0 @@
----
-name: timing
-description: Interpolation curves in Remotion - linear, easing, spring animations
-metadata:
-  tags: spring, bounce, easing, interpolation
----
-
-A simple linear interpolation is done using the `interpolate` function.
-
-```ts title="Going from 0 to 1 over 100 frames"
-import {interpolate} from 'remotion';
-
-const opacity = interpolate(frame, [0, 100], [0, 1]);
-```
-
-By default, the values are not clamped, so the value can go outside the range [0, 1].
-Here is how they can be clamped:
-
-```ts title="Going from 0 to 1 over 100 frames with extrapolation"
-const opacity = interpolate(frame, [0, 100], [0, 1], {
-  extrapolateRight: 'clamp',
-  extrapolateLeft: 'clamp',
-});
-```
-
-## Spring animations
-
-Spring animations have a more natural motion.
-They go from 0 to 1 over time.
-
-```ts title="Spring animation from 0 to 1 over 100 frames"
-import {spring, useCurrentFrame, useVideoConfig} from 'remotion';
-
-const frame = useCurrentFrame();
-const {fps} = useVideoConfig();
-
-const scale = spring({
-  frame,
-  fps,
-});
-```
-
-### Physical properties
-
-The default configuration is: `mass: 1, damping: 10, stiffness: 100`.
-This leads to the animation having a bit of bounce before it settles.
-
-The config can be overwritten like this:
-
-```ts
-const scale = spring({
-  frame,
-  fps,
-  config: {damping: 200},
-});
-```
-
-The recommended configuration for a natural motion without a bounce is: `{ damping: 200 }`.
-
-Here are some common configurations:
-
-```tsx
-const smooth = {damping: 200}; // Smooth, no bounce (subtle reveals)
-const snappy = {damping: 20, stiffness: 200}; // Snappy, minimal bounce (UI elements)
-const bouncy = {damping: 8}; // Bouncy entrance (playful animations)
-const heavy = {damping: 15, stiffness: 80, mass: 2}; // Heavy, slow, small bounce
-```
-
-### Delay
-
-The animation starts immediately by default.
-Use the `delay` parameter to delay the animation by a number of frames.
-
-```tsx
-const entrance = spring({
-  frame: frame - ENTRANCE_DELAY,
-  fps,
-  delay: 20,
-});
-```
-
-### Duration
-
-A `spring()` has a natural duration based on the physical properties.
-To stretch the animation to a specific duration, use the `durationInFrames` parameter.
-
-```tsx
-const spring = spring({
-  frame,
-  fps,
-  durationInFrames: 40,
-});
-```
-
-### Combining spring() with interpolate()
-
-Map spring output (0-1) to custom ranges:
-
-```tsx
-const springProgress = spring({
-  frame,
-  fps,
-});
-
-// Map to rotation
-const rotation = interpolate(springProgress, [0, 1], [0, 360]);
-
-<div style={{rotate: rotation + 'deg'}} />;
-```
-
-### Adding springs
-
-Springs return just numbers, so math can be performed:
-
-```tsx
-const frame = useCurrentFrame();
-const {fps, durationInFrames} = useVideoConfig();
-
-const inAnimation = spring({
-  frame,
-  fps,
-});
-const outAnimation = spring({
-  frame,
-  fps,
-  durationInFrames: 1 * fps,
-  delay: durationInFrames - 1 * fps,
-});
-
-const scale = inAnimation - outAnimation;
-```
-
-## Easing
-
-Easing can be added to the `interpolate` function:
-
-```ts
-import {interpolate, Easing} from 'remotion';
-
-const value1 = interpolate(frame, [0, 100], [0, 1], {
-  easing: Easing.inOut(Easing.quad),
-  extrapolateLeft: 'clamp',
-  extrapolateRight: 'clamp',
-});
-```
-
-The default easing is `Easing.linear`.
-There are various other convexities:
-
-- `Easing.in` for starting slow and accelerating
-- `Easing.out` for starting fast and slowing down
-- `Easing.inOut`
-
-and curves (sorted from most linear to most curved):
-
-- `Easing.quad`
-- `Easing.sin`
-- `Easing.exp`
-- `Easing.circle`
-
-Convexities and curves need be combined for an easing function:
-
-```ts
-const value1 = interpolate(frame, [0, 100], [0, 1], {
-  easing: Easing.inOut(Easing.quad),
-  extrapolateLeft: 'clamp',
-  extrapolateRight: 'clamp',
-});
-```
-
-Cubic bezier curves are also supported:
-
-```ts
-const value1 = interpolate(frame, [0, 100], [0, 1], {
-  easing: Easing.bezier(0.8, 0.22, 0.96, 0.65),
-  extrapolateLeft: 'clamp',
-  extrapolateRight: 'clamp',
-});
-```

package/.kimi/skills/remotion-video-creation/rules/transcribe-captions.md

@@ -1,19 +0,0 @@
----
-name: transcribe-captions
-description: Transcribing audio to generate captions in Remotion
-metadata:
-  tags: captions, transcribe, whisper, audio, speech-to-text
----
-
-# Transcribing audio
-
-Remotion provides several built-in options for transcribing audio to generate captions:
-
-- `@remotion/install-whisper-cpp` - Transcribe locally on a server using Whisper.cpp. Fast and free, but requires server infrastructure.
-  <https://remotion.dev/docs/install-whisper-cpp>
-
-- `@remotion/whisper-web` - Transcribe in the browser using WebAssembly. No server needed and free, but slower due to WASM overhead.
-  <https://remotion.dev/docs/whisper-web>
-
-- `@remotion/openai-whisper` - Use OpenAI Whisper API for cloud-based transcription. Fast and no server needed, but requires payment.
-  <https://remotion.dev/docs/openai-whisper/openai-whisper-api-to-captions>

package/.kimi/skills/remotion-video-creation/rules/transitions.md

@@ -1,122 +0,0 @@
----
-name: transitions
-description: Fullscreen scene transitions for Remotion.
-metadata:
-  tags: transitions, fade, slide, wipe, scenes
----
-
-## Fullscreen transitions
-
-Using `<TransitionSeries>` to animate between multiple scenes or clips.
-This will absolutely position the children.
-
-## Prerequisites
-
-First, the @remotion/transitions package needs to be installed.
-If it is not, use the following command:
-
-```bash
-npx remotion add @remotion/transitions # If project uses npm
-bunx remotion add @remotion/transitions # If project uses bun
-yarn remotion add @remotion/transitions # If project uses yarn
-pnpm exec remotion add @remotion/transitions # If project uses pnpm
-```
-
-## Example usage
-
-```tsx
-import {TransitionSeries, linearTiming} from '@remotion/transitions';
-import {fade} from '@remotion/transitions/fade';
-
-<TransitionSeries>
-  <TransitionSeries.Sequence durationInFrames={60}>
-    <SceneA />
-  </TransitionSeries.Sequence>
-  <TransitionSeries.Transition presentation={fade()} timing={linearTiming({durationInFrames: 15})} />
-  <TransitionSeries.Sequence durationInFrames={60}>
-    <SceneB />
-  </TransitionSeries.Sequence>
-</TransitionSeries>;
-```
-
-## Available Transition Types
-
-Import transitions from their respective modules:
-
-```tsx
-import {fade} from '@remotion/transitions/fade';
-import {slide} from '@remotion/transitions/slide';
-import {wipe} from '@remotion/transitions/wipe';
-import {flip} from '@remotion/transitions/flip';
-import {clockWipe} from '@remotion/transitions/clock-wipe';
-```
-
-## Slide Transition with Direction
-
-Specify slide direction for enter/exit animations.
-
-```tsx
-import {slide} from '@remotion/transitions/slide';
-
-<TransitionSeries.Transition presentation={slide({direction: 'from-left'})} timing={linearTiming({durationInFrames: 20})} />;
-```
-
-Directions: `"from-left"`, `"from-right"`, `"from-top"`, `"from-bottom"`
-
-## Timing Options
-
-```tsx
-import {linearTiming, springTiming} from '@remotion/transitions';
-
-// Linear timing - constant speed
-linearTiming({durationInFrames: 20});
-
-// Spring timing - organic motion
-springTiming({config: {damping: 200}, durationInFrames: 25});
-```
-
-## Duration calculation
-
-Transitions overlap adjacent scenes, so the total composition length is **shorter** than the sum of all sequence durations.
-
-For example, with two 60-frame sequences and a 15-frame transition:
-
-- Without transitions: `60 + 60 = 120` frames
-- With transition: `60 + 60 - 15 = 105` frames
-
-The transition duration is subtracted because both scenes play simultaneously during the transition.
-
-### Getting the duration of a transition
-
-Use the `getDurationInFrames()` method on the timing object:
-
-```tsx
-import {linearTiming, springTiming} from '@remotion/transitions';
-
-const linearDuration = linearTiming({durationInFrames: 20}).getDurationInFrames({fps: 30});
-// Returns 20
-
-const springDuration = springTiming({config: {damping: 200}}).getDurationInFrames({fps: 30});
-// Returns calculated duration based on spring physics
-```
-
-For `springTiming` without an explicit `durationInFrames`, the duration depends on `fps` because it calculates when the spring animation settles.
-
-### Calculating total composition duration
-
-```tsx
-import {linearTiming} from '@remotion/transitions';
-
-const scene1Duration = 60;
-const scene2Duration = 60;
-const scene3Duration = 60;
-
-const timing1 = linearTiming({durationInFrames: 15});
-const timing2 = linearTiming({durationInFrames: 20});
-
-const transition1Duration = timing1.getDurationInFrames({fps: 30});
-const transition2Duration = timing2.getDurationInFrames({fps: 30});
-
-const totalDuration = scene1Duration + scene2Duration + scene3Duration - transition1Duration - transition2Duration;
-// 60 + 60 + 60 - 15 - 20 = 145 frames
-```

package/.kimi/skills/remotion-video-creation/rules/trimming.md

@@ -1,52 +0,0 @@
----
-name: trimming
-description: Trimming patterns for Remotion - cut the beginning or end of animations
-metadata:
-  tags: sequence, trim, clip, cut, offset
----
-
-Use `<Sequence>` with a negative `from` value to trim the start of an animation.
-
-## Trim the Beginning
-
-A negative `from` value shifts time backwards, making the animation start partway through:
-
-```tsx
-import { Sequence, useVideoConfig } from "remotion";
-
-const fps = useVideoConfig();
-
-<Sequence from={-0.5 * fps}>
-  <MyAnimation />
-</Sequence>
-```
-
-The animation appears 15 frames into its progress - the first 15 frames are trimmed off.
-Inside `<MyAnimation>`, `useCurrentFrame()` starts at 15 instead of 0.
-
-## Trim the End
-
-Use `durationInFrames` to unmount content after a specified duration:
-
-```tsx
-
-<Sequence durationInFrames={1.5 * fps}>
-  <MyAnimation />
-</Sequence>
-```
-
-The animation plays for 45 frames, then the component unmounts.
-
-## Trim and Delay
-
-Nest sequences to both trim the beginning and delay when it appears:
-
-```tsx
-<Sequence from={30}>
-  <Sequence from={-15}>
-    <MyAnimation />
-  </Sequence>
-</Sequence>
-```
-
-The inner sequence trims 15 frames from the start, and the outer sequence delays the result by 30 frames.

package/.kimi/skills/remotion-video-creation/rules/videos.md

@@ -1,171 +0,0 @@
----
-name: videos
-description: Embedding videos in Remotion - trimming, volume, speed, looping, pitch
-metadata:
-  tags: video, media, trim, volume, speed, loop, pitch
----
-
-# Using videos in Remotion
-
-## Prerequisites
-
-First, the @remotion/media package needs to be installed.
-If it is not, 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
-```
-
-Use `<Video>` from `@remotion/media` to embed videos into your composition.
-
-```tsx
-import { Video } from "@remotion/media";
-import { staticFile } from "remotion";
-
-export const MyComposition = () => {
-  return <Video src={staticFile("video.mp4")} />;
-};
-```
-
-Remote URLs are also supported:
-
-```tsx
-<Video src="https://remotion.media/video.mp4" />
-```
-
-## Trimming
-
-Use `trimBefore` and `trimAfter` to remove portions of the video. Values are in seconds.
-
-```tsx
-const { fps } = useVideoConfig();
-
-return (
-  <Video
-    src={staticFile("video.mp4")}
-    trimBefore={2 * fps} // Skip the first 2 seconds
-    trimAfter={10 * fps} // End at the 10 second mark
-  />
-);
-```
-
-## Delaying
-
-Wrap the video in a `<Sequence>` to delay when it appears:
-
-```tsx
-import { Sequence, staticFile } from "remotion";
-import { Video } from "@remotion/media";
-
-const { fps } = useVideoConfig();
-
-return (
-  <Sequence from={1 * fps}>
-    <Video src={staticFile("video.mp4")} />
-  </Sequence>
-);
-```
-
-The video will appear after 1 second.
-
-## Sizing and Position
-
-Use the `style` prop to control size and position:
-
-```tsx
-<Video
-  src={staticFile("video.mp4")}
-  style={{
-    width: 500,
-    height: 300,
-    position: "absolute",
-    top: 100,
-    left: 50,
-    objectFit: "cover",
-  }}
-/>
-```
-
-## Volume
-
-Set a static volume (0 to 1):
-
-```tsx
-<Video src={staticFile("video.mp4")} volume={0.5} />
-```
-
-Or use a callback for dynamic volume based on the current frame:
-
-```tsx
-import { interpolate } from "remotion";
-
-const { fps } = useVideoConfig();
-
-return (
-  <Video
-    src={staticFile("video.mp4")}
-    volume={(f) =>
-      interpolate(f, [0, 1 * fps], [0, 1], { extrapolateRight: "clamp" })
-    }
-  />
-);
-```
-
-Use `muted` to silence the video entirely:
-
-```tsx
-<Video src={staticFile("video.mp4")} muted />
-```
-
-## Speed
-
-Use `playbackRate` to change the playback speed:
-
-```tsx
-<Video src={staticFile("video.mp4")} playbackRate={2} /> {/* 2x speed */}
-<Video src={staticFile("video.mp4")} playbackRate={0.5} /> {/* Half speed */}
-```
-
-Reverse playback is not supported.
-
-## Looping
-
-Use `loop` to loop the video indefinitely:
-
-```tsx
-<Video src={staticFile("video.mp4")} loop />
-```
-
-Use `loopVolumeCurveBehavior` to control how the frame count behaves when looping:
-
-- `"repeat"`: Frame count resets to 0 each loop (for `volume` callback)
-- `"extend"`: Frame count continues incrementing
-
-```tsx
-<Video
-  src={staticFile("video.mp4")}
-  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
-<Video
-  src={staticFile("video.mp4")}
-  toneFrequency={1.5} // Higher pitch
-/>
-<Video
-  src={staticFile("video.mp4")}
-  toneFrequency={0.8} // Lower pitch
-/>
-```
-
-Pitch shifting only works during server-side rendering, not in the Remotion Studio preview or in the `<Player />`.