@autoaiai/aicut 0.1.11 → 0.1.13

package/skills/30x-web-to-video/references/lottie.md

@@ -1,174 +0,0 @@
-# Lottie & GSAP Integration
-
-AE-quality animations in Remotion via `@remotion/lottie` and GSAP timeline sync.
-
-## @remotion/lottie — Core Integration
-
-**Install:**
-```bash
-npm i @remotion/lottie lottie-web
-```
-
-**LottieAnimation wrapper component:**
-
-```tsx
-import React, { useEffect, useState } from "react";
-import { Lottie, LottieAnimationData } from "@remotion/lottie";
-import { cancelRender, continueRender, delayRender, staticFile } from "remotion";
-
-interface LottieAnimationProps {
-  file: string;                    // path relative to public/
-  loop?: boolean;
-  playbackRate?: number;
-  direction?: "forward" | "backward";
-  style?: React.CSSProperties;
-}
-
-export const LottieAnimation: React.FC<LottieAnimationProps> = ({
-  file, loop = false, playbackRate = 1, direction = "forward", style,
-}) => {
-  const [handle] = useState(() => delayRender(`Loading Lottie: ${file}`));
-  const [data, setData] = useState<LottieAnimationData | null>(null);
-
-  useEffect(() => {
-    fetch(staticFile(file))
-      .then(r => r.json())
-      .then(json => {
-        setData(json);
-        continueRender(handle);
-      })
-      .catch(err => cancelRender(err));
-  }, [handle, file]);
-
-  if (!data) return null;
-
-  return (
-    <Lottie
-      animationData={data}
-      loop={loop}
-      playbackRate={playbackRate}
-      direction={direction}
-      style={{ width: "100%", height: "100%", ...style }}
-    />
-  );
-};
-```
-
-**Usage in scenes:**
-
-```tsx
-// Logo reveal with particle animation
-<AbsoluteFill>
-  <LottieAnimation file="lottie/particle-converge.json" />
-</AbsoluteFill>
-
-// Background ambient effect
-<div style={{ position: "absolute", inset: 0, opacity: 0.3 }}>
-  <LottieAnimation file="lottie/aurora-bg.json" loop />
-</div>
-
-// Transition between scenes
-<Sequence from={transitionStart} durationInFrames={30}>
-  <LottieAnimation file="lottie/liquid-wipe.json" playbackRate={1.5} />
-</Sequence>
-```
-
-## Lottie Props Reference
-
-| Prop | Type | Default | Purpose |
-|------|------|---------|---------|
-| `animationData` | object | required | Lottie JSON (memoize with useState) |
-| `loop` | boolean | false | Repeat animation |
-| `playbackRate` | number | 1 | Speed multiplier |
-| `direction` | "forward"/"backward" | "forward" | Play direction |
-| `renderer` | "svg"/"canvas"/"html" | "svg" | Render mode (svg = best quality) |
-| `style` | CSSProperties | — | Container styling |
-| `className` | string | — | Container class |
-
-**Critical:** Always use `delayRender()` / `continueRender()` pattern. Remotion will not wait for async loads otherwise, causing blank frames during render.
-
-## Where to Get Premium Lottie Files
-
-For product launch videos, you need these categories:
-
-**Logo/Reveal animations:**
-- LottieFiles marketplace: search "particle converge", "logo reveal", "morphing shapes"
-- Creattie.com: artist-made premium animations
-
-**Transition effects:**
-- Search "liquid transition", "geometric morph", "light sweep", "glitch"
-- These replace hard cuts between scenes
-
-**Data visualization:**
-- Search "animated chart", "counter", "graph", "network", "node"
-- Use in Proof scene (Act 4) for metric reveals
-
-**Background/Ambient:**
-- Search "aurora", "particles floating", "gradient mesh animated", "abstract lines"
-- Layer at low opacity (0.2-0.4) behind content
-
-**Tech-specific:**
-- "AI brain", "neural network", "code typing", "terminal", "API flow"
-- Map to product category
-
-## GSAP Integration (Advanced)
-
-For effects not available in Lottie, use GSAP with paused timeline + seek:
-
-```tsx
-import gsap from "gsap";
-import { useCurrentFrame, useVideoConfig } from "remotion";
-import { useEffect, useRef } from "react";
-
-const GsapScene: React.FC = () => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
-  const ref = useRef<HTMLDivElement>(null);
-  const tl = useRef<gsap.core.Timeline>();
-
-  // Build timeline once
-  useEffect(() => {
-    if (!ref.current) return;
-    tl.current = gsap.timeline({ paused: true })
-      .from(ref.current, { x: -200, opacity: 0, duration: 0.8, ease: "power3.out" })
-      .to(ref.current, { scale: 1.05, duration: 0.3, ease: "power2.inOut" }, "+=0.2")
-      .to(ref.current, { scale: 1, duration: 0.2, ease: "power2.out" });
-  }, []);
-
-  // Seek to current frame position
-  useEffect(() => {
-    tl.current?.seek(frame / fps);
-  }, [frame, fps]);
-
-  return <div ref={ref}>Animated Element</div>;
-};
-```
-
-**When to use GSAP vs Remotion native:**
-- GSAP: Complex timeline choreography, MorphSVG, DrawSVG, SplitText (GSAP plugin)
-- Remotion: Simple spring/interpolate animations, audio sync, frame-accurate control
-
-**Install:** `npm i gsap` (free core). Premium plugins (MorphSVG, DrawSVG) require GSAP license.
-
-## Rive Integration (Alternative to Lottie)
-
-For interactive/parametric animations:
-
-```bash
-npm i @remotion/rive
-```
-
-```tsx
-import { RemotionRiveCanvas } from "@remotion/rive";
-import { staticFile } from "remotion";
-
-<RemotionRiveCanvas
-  src={staticFile("animation.riv")}
-  fit="contain"
-  alignment="center"
-/>
-```
-
-Rive advantage: state machines, dynamic text, interactive. Use when animation needs to respond to data (e.g., dynamic brand name in animated title).
-
-[PROTOCOL]: 变更时更新此头部，然后检查 AGENTS.md

package/skills/30x-web-to-video/references/visual-effects.md

@@ -1,157 +0,0 @@
-# Visual Effects Library Reference
-
-Confirmed-working libraries for advanced visual effects in Remotion videos.
-
-**CRITICAL:** Remotion renders frame-by-frame. Libraries using browser timing APIs (`requestAnimationFrame`, `performance.now()`, CSS transitions) will **flicker or break**. Only use libraries confirmed to work with `useCurrentFrame()`.
-
-## Tier 1: Official Remotion Packages (Install & Use)
-
-### @remotion/lottie — Lottie Animations
-```bash
-npm i @remotion/lottie lottie-web
-```
-Play Lottie JSON animations synchronized with timeline. Use for: logo animations, loading spinners, micro-interactions, icon animations, celebration effects.
-
-```tsx
-import { Lottie, getLottieMetadata } from "@remotion/lottie";
-import animationData from "./animation.json";
-
-const metadata = getLottieMetadata(animationData);
-
-<Lottie
-  animationData={animationData}
-  playbackRate={1}
-  style={{ width: 200, height: 200 }}
-/>
-```
-
-**Free Lottie sources:**
-- LottieFiles: https://lottiefiles.com (largest library)
-- LordIcon: https://lordicon.com (animated icons)
-- useAnimations: https://useanimations.com (micro-animations)
-
-### @remotion/motion-blur — Film Motion Blur
-```bash
-npm i @remotion/motion-blur
-```
-```tsx
-import { CameraMotionBlur, Trail } from "@remotion/motion-blur";
-
-// Natural film-camera motion blur
-<CameraMotionBlur samples={10}>
-  <MyAnimatedScene />
-</CameraMotionBlur>
-
-// Trailing duplicates with time offset
-<Trail layers={6} lagInFrames={2}>
-  <MyMovingElement />
-</Trail>
-```
-Use for: fast-moving elements, scene transitions, premium kinetic feel.
-
-### @remotion/paths — SVG Path Animation
-Already in scaffold. Key functions:
-```tsx
-import { evolvePath, interpolatePath } from "@remotion/paths";
-
-// Line drawing effect (path gradually appears)
-const progress = interpolate(frame, [0, 60], [0, 1], { extrapolateRight: "clamp" });
-const evolved = evolvePath(progress, svgPathData);
-<path d={evolved} stroke={color} fill="none" />
-
-// Morph between two SVG shapes
-const morphed = interpolatePath(progress, pathA, pathB);
-```
-Use for: chart line drawing, logo path reveal, icon morphing.
-
-### @remotion/noise — Perlin Noise
-Already in scaffold. Use for organic, natural randomness:
-```tsx
-import { noise2D, noise3D } from "@remotion/noise";
-
-// Floating particle positions
-const x = noise2D("seed-x", frame / 100, 0) * 200;
-const y = noise2D("seed-y", 0, frame / 100) * 200;
-```
-
-## Tier 2: Confirmed Community Libraries
-
-### remotion-confetti — Confetti Bursts
-```bash
-npm i remotion-confetti
-```
-Canvas-based confetti. Use for: celebration moments, achievement reveals, proof scene.
-
-### remotion-animated — Declarative Animation Chains
-```bash
-npm i remotion-animated
-```
-```tsx
-import { Animated, Move, Scale, Fade } from "remotion-animated";
-
-<Animated animations={[
-  Move({ y: 0, start: -50 }),
-  Scale({ by: 1, initial: 0.8 }),
-  Fade({ to: 1 }),
-]}>
-  <MyComponent />
-</Animated>
-```
-Use for: cleaner animation code, chaining multiple effects.
-
-### Flubber — SVG Shape Morphing
-```bash
-npm i flubber
-```
-```tsx
-import { interpolate as flubberInterpolate } from "flubber";
-const morpher = flubberInterpolate(circlePath, starPath);
-const d = morpher(progress); // 0→1
-<path d={d} />
-```
-Use for: icon transitions, shape-shifting logos.
-
-## Tier 3: Advanced (Heavier, Use Sparingly)
-
-### @remotion/three — 3D via React Three Fiber
-```bash
-npm i three @react-three/fiber @remotion/three @types/three
-```
-Full 3D: models (GLTF), 3D text, particles, shaders, post-processing.
-```tsx
-import { ThreeCanvas } from "@remotion/three";
-<ThreeCanvas width={1920} height={1080}>
-  <mesh><boxGeometry /><meshStandardMaterial /></mesh>
-</ThreeCanvas>
-```
-**Gotchas:** Use `useCurrentFrame()` not R3F's `useFrame()`. `<Sequence layout="none">` inside canvas. Heavy render time.
-
-### @react-three/postprocessing — Bloom, Glitch, Chromatic Aberration
-```bash
-npm i @react-three/postprocessing postprocessing
-```
-Works inside `<ThreeCanvas>`. Effects: Bloom, ChromaticAberration, Glitch, DepthOfField, GodRays, Noise, Vignette, Scanlines.
-
-### GL Transitions — 80+ GLSL Transitions
-Repo: https://github.com/remotion-dev/remotion-gl-transitions
-Collection: https://gl-transitions.com/
-Beyond fade: cube rotate, directional wipe, swap, mosaic, pixelize, burn, ripple.
-
-## DO NOT USE (Incompatible)
-
-| Library | Why |
-|---------|-----|
-| Framer Motion / motion | Uses `performance.now()`, flickers during render |
-| react-spring | Conflicts with Remotion's spring(), timing issues |
-| tsParticles | Internal animation loop, no frame sync |
-| CSS transitions/animations | Not deterministic per-frame |
-
-## Recommended Additions to Scaffold
-
-For maximum visual punch with minimal complexity, add these to every project:
-1. `@remotion/lottie` + `lottie-web` — drop-in animated icons/effects
-2. `@remotion/motion-blur` — premium kinetic feel on fast animations
-3. `remotion-confetti` — celebration/proof moments
-4. `flubber` — SVG morphing for transitions
-
-The scaffold already includes: `@remotion/paths`, `@remotion/noise`, `@remotion/transitions`, `@remotion/light-leaks`.

package/skills/30x-web-to-video/remotion-best-practices/rules/audio.md

@@ -1,169 +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
-```
-
-## 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/skills/30x-web-to-video/remotion-best-practices/rules/calculate-metadata.md

@@ -1,134 +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 [`getVideoDuration`](./get-video-duration.md) and [`getVideoDimensions`](./get-video-dimensions.md) skills to get the video duration and dimensions:
-
-```tsx
-import { CalculateMetadataFunction } from "remotion";
-import { getVideoDuration } from "./get-video-duration";
-
-const calculateMetadata: CalculateMetadataFunction<Props> = async ({
-  props,
-}) => {
-  const durationInSeconds = await getVideoDuration(props.videoSrc);
-
-  return {
-    durationInFrames: Math.ceil(durationInSeconds * 30),
-  };
-};
-```
-
-## Matching dimensions of a video
-
-Use the [`getVideoDimensions`](./get-video-dimensions.md) skill to get the video dimensions:
-
-```tsx
-import { CalculateMetadataFunction } from "remotion";
-import { getVideoDuration } from "./get-video-duration";
-import { getVideoDimensions } from "./get-video-dimensions";
-
-const calculateMetadata: CalculateMetadataFunction<Props> = async ({
-  props,
-}) => {
-  const dimensions = await getVideoDimensions(props.videoSrc);
-
-  return {
-    width: dimensions.width,
-    height: dimensions.height,
-  };
-};
-```
-
-## Setting duration based on multiple videos
-
-```tsx
-const calculateMetadata: CalculateMetadataFunction<Props> = async ({
-  props,
-}) => {
-  const metadataPromises = props.videos.map((video) =>
-    getVideoDuration(video.src),
-  );
-  const allMetadata = await Promise.all(metadataPromises);
-
-  const totalDuration = allMetadata.reduce(
-    (sum, durationInSeconds) => sum + 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