@autoaiai/aicut 0.1.7 → 0.1.11

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

@@ -0,0 +1,174 @@
+# 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

@@ -0,0 +1,157 @@
+# 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

@@ -0,0 +1,169 @@
+---
+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

@@ -0,0 +1,134 @@
+---
+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