@nguyenphp/antigravity-marketing 1.0.16 → 1.0.19

package/templates/.agent/skills/remotion-best-practices/rules/sfx.md

@@ -0,0 +1,26 @@
+---
+name: sfx
+description: Including sound effects
+metadata:
+  tags: sfx, sound, effect, audio
+---
+
+To include a sound effect, use the `<Audio>` tag:
+
+```tsx
+import { Audio } from "@remotion/sfx";
+
+<Audio src={"https://remotion.media/whoosh.wav"} />;
+```
+
+The following sound effects are available:
+
+- `https://remotion.media/whoosh.wav`
+- `https://remotion.media/whip.wav`
+- `https://remotion.media/page-turn.wav`
+- `https://remotion.media/switch.wav`
+- `https://remotion.media/mouse-click.wav`
+- `https://remotion.media/shutter-modern.wav`
+- `https://remotion.media/shutter-old.wav`
+
+For more sound effects, search the internet. A good resource is https://github.com/kapishdima/soundcn/tree/main/assets.

package/templates/.agent/skills/remotion-best-practices/rules/subtitles.md

@@ -0,0 +1,36 @@
+---
+name: subtitles
+description: subtitles and caption rules
+metadata:
+  tags: subtitles, captions, remotion, json
+---
+
+All captions must be processed in JSON. The captions must use the `Caption` type which is the following:
+
+```ts
+import type { Caption } from "@remotion/captions";
+```
+
+This is the definition:
+
+```ts
+type Caption = {
+  text: string;
+  startMs: number;
+  endMs: number;
+  timestampMs: number | null;
+  confidence: number | null;
+};
+```
+
+## Generating captions
+
+To transcribe video and audio files to generate captions, load the [./transcribe-captions.md](./transcribe-captions.md) file for more instructions.
+
+## Displaying captions
+
+To display captions in your video, load the [./display-captions.md](./display-captions.md) file for more instructions.
+
+## Importing captions
+
+To import captions from a .srt file, load the [./import-srt-captions.md](./import-srt-captions.md) file for more instructions.

package/templates/.agent/skills/remotion-best-practices/rules/tailwind.md

@@ -0,0 +1,11 @@
+---
+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/templates/.agent/skills/remotion-best-practices/rules/text-animations.md

@@ -2,7 +2,7 @@
 name: text-animations
 description: Typography and text animation patterns for Remotion.
 metadata:
-  tags: typography, text, typewriter, highlighter
+  tags: typography, text, typewriter, highlighter ken
 ---
 
 ## Text animations
@@ -11,121 +11,10 @@ Based on `useCurrentFrame()`, reduce the string character by character to create
 
 ## Typewriter Effect
 
-Always use string slicing for typewriter effects. Never use per-character opacity.
-
-```tsx
-import { useCurrentFrame, useVideoConfig, interpolate } from "remotion";
-
-export const Typewriter = ({ text }: { text: string }) => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
-
-  // Characters per second
-  const CHARS_PER_SECOND = 20;
-  const charsToShow = Math.floor((frame / fps) * CHARS_PER_SECOND);
-
-  const displayText = text.slice(0, charsToShow);
-
-  return (
-    <div style={{ fontFamily: "monospace", fontSize: 48 }}>
-      {displayText}
-      <span style={{ opacity: frame % 30 < 15 ? 1 : 0 }}>|</span>
-    </div>
-  );
-};
-```
-
-### With cursor blink
-
-```tsx
-const cursorOpacity = Math.sin(frame * 0.3) > 0 ? 1 : 0;
-
-<span style={{ opacity: cursorOpacity }}>|</span>
-```
-
-## Word-by-word reveal
-
-```tsx
-const words = text.split(" ");
-const frame = useCurrentFrame();
-const { fps } = useVideoConfig();
+See [Typewriter](assets/text-animations-typewriter.tsx) for an advanced example with a blinking cursor and a pause after the first sentence.
 
-const WORDS_PER_SECOND = 3;
-const wordsToShow = Math.floor((frame / fps) * WORDS_PER_SECOND);
-
-const displayWords = words.slice(0, wordsToShow).join(" ");
-```
+Always use string slicing for typewriter effects. Never use per-character opacity.
 
 ## Word Highlighting
 
-Animate a highlighter effect on specific words:
-
-```tsx
-import { useCurrentFrame, useVideoConfig, interpolate, spring } from "remotion";
-
-export const HighlightedWord = ({ text }: { text: string }) => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
-
-  const highlightWidth = spring({
-    frame,
-    fps,
-    config: { damping: 200 },
-  });
-
-  const width = interpolate(highlightWidth, [0, 1], [0, 100]);
-
-  return (
-    <span style={{ position: "relative", display: "inline-block" }}>
-      <span
-        style={{
-          position: "absolute",
-          bottom: 0,
-          left: 0,
-          width: `${width}%`,
-          height: "30%",
-          backgroundColor: "#ffff00",
-          zIndex: -1,
-        }}
-      />
-      {text}
-    </span>
-  );
-};
-```
-
-## Staggered text entrance
-
-```tsx
-const words = text.split(" ");
-
-return (
-  <div>
-    {words.map((word, i) => {
-      const delay = i * 5; // 5 frames delay per word
-      const opacity = interpolate(frame - delay, [0, 10], [0, 1], {
-        extrapolateLeft: "clamp",
-        extrapolateRight: "clamp",
-      });
-      const y = interpolate(frame - delay, [0, 10], [20, 0], {
-        extrapolateLeft: "clamp",
-        extrapolateRight: "clamp",
-      });
-
-      return (
-        <span
-          key={i}
-          style={{
-            display: "inline-block",
-            opacity,
-            transform: `translateY(${y}px)`,
-            marginRight: 8,
-          }}
-        >
-          {word}
-        </span>
-      );
-    })}
-  </div>
-);
-```
+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/templates/.agent/skills/remotion-best-practices/rules/timing.md

@@ -8,7 +8,7 @@ metadata:
 A simple linear interpolation is done using the `interpolate` function.
 
 ```ts title="Going from 0 to 1 over 100 frames"
-import {interpolate} from 'remotion';
+import { interpolate } from "remotion";
 
 const opacity = interpolate(frame, [0, 100], [0, 1]);
 ```
@@ -18,8 +18,8 @@ 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',
+  extrapolateRight: "clamp",
+  extrapolateLeft: "clamp",
 });
 ```
 
@@ -29,10 +29,10 @@ 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';
+import { spring, useCurrentFrame, useVideoConfig } from "remotion";
 
 const frame = useCurrentFrame();
-const {fps} = useVideoConfig();
+const { fps } = useVideoConfig();
 
 const scale = spring({
   frame,
@@ -51,7 +51,7 @@ The config can be overwritten like this:
 const scale = spring({
   frame,
   fps,
-  config: {damping: 200},
+  config: { damping: 200 },
 });
 ```
 
@@ -60,10 +60,10 @@ The recommended configuration for a natural motion without a bounce is: `{ dampi
 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
+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
@@ -105,7 +105,7 @@ const springProgress = spring({
 // Map to rotation
 const rotation = interpolate(springProgress, [0, 1], [0, 360]);
 
-<div style={{rotate: rotation + 'deg'}} />;
+<div style={{ rotate: rotation + "deg" }} />;
 ```
 
 ### Adding springs
@@ -114,7 +114,7 @@ Springs return just numbers, so math can be performed:
 
 ```tsx
 const frame = useCurrentFrame();
-const {fps, durationInFrames} = useVideoConfig();
+const { fps, durationInFrames } = useVideoConfig();
 
 const inAnimation = spring({
   frame,
@@ -135,12 +135,12 @@ const scale = inAnimation - outAnimation;
 Easing can be added to the `interpolate` function:
 
 ```ts
-import {interpolate, Easing} from 'remotion';
+import { interpolate, Easing } from "remotion";
 
 const value1 = interpolate(frame, [0, 100], [0, 1], {
   easing: Easing.inOut(Easing.quad),
-  extrapolateLeft: 'clamp',
-  extrapolateRight: 'clamp',
+  extrapolateLeft: "clamp",
+  extrapolateRight: "clamp",
 });
 ```
 
@@ -163,8 +163,8 @@ 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',
+  extrapolateLeft: "clamp",
+  extrapolateRight: "clamp",
 });
 ```
 
@@ -173,7 +173,7 @@ 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',
+  extrapolateLeft: "clamp",
+  extrapolateRight: "clamp",
 });
 ```

package/templates/.agent/skills/remotion-best-practices/rules/transcribe-captions.md

@@ -0,0 +1,70 @@
+---
+name: transcribe-captions
+description: Transcribing audio to generate captions in Remotion
+metadata:
+  tags: captions, transcribe, whisper, audio, speech-to-text
+---
+
+# Transcribing audio
+
+To transcribe audio to generate captions in Remotion, you can use the [`transcribe()`](https://www.remotion.dev/docs/install-whisper-cpp/transcribe) function from the [`@remotion/install-whisper-cpp`](https://www.remotion.dev/docs/install-whisper-cpp) package.
+
+## Prerequisites
+
+First, the @remotion/install-whisper-cpp package needs to be installed.
+If it is not installed, use the following command:
+
+```bash
+npx remotion add @remotion/install-whisper-cpp
+```
+
+## Transcribing
+
+Make a Node.js script to download Whisper.cpp and a model, and transcribe the audio.
+
+```ts
+import path from "path";
+import {
+  downloadWhisperModel,
+  installWhisperCpp,
+  transcribe,
+  toCaptions,
+} from "@remotion/install-whisper-cpp";
+import fs from "fs";
+
+const to = path.join(process.cwd(), "whisper.cpp");
+
+await installWhisperCpp({
+  to,
+  version: "1.5.5",
+});
+
+await downloadWhisperModel({
+  model: "medium.en",
+  folder: to,
+});
+
+// Convert the audio to a 16KHz wav file first if needed:
+// import {execSync} from 'child_process';
+// execSync('ffmpeg -i /path/to/audio.mp4 -ar 16000 /path/to/audio.wav -y');
+
+const whisperCppOutput = await transcribe({
+  model: "medium.en",
+  whisperPath: to,
+  whisperCppVersion: "1.5.5",
+  inputPath: "/path/to/audio123.wav",
+  tokenLevelTimestamps: true,
+});
+
+// Optional: Apply our recommended postprocessing
+const { captions } = toCaptions({
+  whisperCppOutput,
+});
+
+// Write it to the public/ folder so it can be fetched from Remotion
+fs.writeFileSync("captions123.json", JSON.stringify(captions, null, 2));
+```
+
+Transcribe each clip individually and create multiple JSON files.
+
+See [Displaying captions](display-captions.md) for how to display the captions in Remotion.

package/templates/.agent/skills/remotion-best-practices/rules/transitions.md

@@ -1,102 +1,172 @@
 ---
 name: transitions
-description: Fullscreen scene transitions for Remotion.
+description: Scene transitions and overlays for Remotion using TransitionSeries.
 metadata:
-  tags: transitions, fade, slide, wipe, scenes
+  tags: transitions, overlays, fade, slide, wipe, scenes
 ---
 
-## Fullscreen transitions
+## TransitionSeries
 
-Using `<TransitionSeries>` to animate between multiple scenes or clips.  
-This will absolutely position the children.
+`<TransitionSeries>` arranges scenes and supports two ways to enhance the cut point between them:
 
-## Prerequisites
+- **Transitions** (`<TransitionSeries.Transition>`) — crossfade, slide, wipe, etc. between two scenes. Shortens the timeline because both scenes play simultaneously during the transition.
+- **Overlays** (`<TransitionSeries.Overlay>`) — render an effect (e.g. a light leak) on top of the cut point without shortening the timeline.
+
+Children are absolutely positioned.
 
-First, the @remotion/transitions package needs to be installed.  
-If it is not, use the following command:
+## Prerequisites
 
 ```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
+npx remotion add @remotion/transitions
 ```
 
-## Example usage
+## Transition example
 
 ```tsx
-import {TransitionSeries, linearTiming} from '@remotion/transitions';
-import {fade} from '@remotion/transitions/fade';
+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.Transition
+    presentation={fade()}
+    timing={linearTiming({ durationInFrames: 15 })}
+  />
   <TransitionSeries.Sequence durationInFrames={60}>
     <SceneB />
   </TransitionSeries.Sequence>
 </TransitionSeries>;
 ```
 
-## Available Transition Types
+## Overlay example
 
-Import transitions from their respective modules:
+Any React component can be used as an overlay. For a ready-made effect, see the **light-leaks** rule.
+
+```tsx
+import { TransitionSeries } from "@remotion/transitions";
+import { LightLeak } from "@remotion/light-leaks";
+
+<TransitionSeries>
+  <TransitionSeries.Sequence durationInFrames={60}>
+    <SceneA />
+  </TransitionSeries.Sequence>
+  <TransitionSeries.Overlay durationInFrames={20}>
+    <LightLeak />
+  </TransitionSeries.Overlay>
+  <TransitionSeries.Sequence durationInFrames={60}>
+    <SceneB />
+  </TransitionSeries.Sequence>
+</TransitionSeries>;
+```
+
+## Mixing transitions and overlays
+
+Transitions and overlays can coexist in the same `<TransitionSeries>`, but an overlay cannot be adjacent to a transition or another overlay.
 
 ```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';
+import { TransitionSeries, linearTiming } from "@remotion/transitions";
+import { fade } from "@remotion/transitions/fade";
+import { LightLeak } from "@remotion/light-leaks";
+
+<TransitionSeries>
+  <TransitionSeries.Sequence durationInFrames={60}>
+    <SceneA />
+  </TransitionSeries.Sequence>
+  <TransitionSeries.Overlay durationInFrames={30}>
+    <LightLeak />
+  </TransitionSeries.Overlay>
+  <TransitionSeries.Sequence durationInFrames={60}>
+    <SceneB />
+  </TransitionSeries.Sequence>
+  <TransitionSeries.Transition
+    presentation={fade()}
+    timing={linearTiming({ durationInFrames: 15 })}
+  />
+  <TransitionSeries.Sequence durationInFrames={60}>
+    <SceneC />
+  </TransitionSeries.Sequence>
+</TransitionSeries>;
 ```
 
-## Slide Transition with Direction
+## Transition props
+
+`<TransitionSeries.Transition>` requires:
+
+- `presentation` — the visual effect (e.g. `fade()`, `slide()`, `wipe()`).
+- `timing` — controls speed and easing (e.g. `linearTiming()`, `springTiming()`).
+
+## Overlay props
+
+`<TransitionSeries.Overlay>` accepts:
+
+- `durationInFrames` — how long the overlay is visible (positive integer).
+- `offset?` — shifts the overlay relative to the cut point center. Positive = later, negative = earlier. Default: `0`.
+
+## 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";
+```
 
-Specify slide direction for enter/exit animations.
+## Slide transition with direction
 
 ```tsx
-import {slide} from '@remotion/transitions/slide';
+import { slide } from "@remotion/transitions/slide";
 
-<TransitionSeries.Transition presentation={slide({direction: 'from-left'})} timing={linearTiming({durationInFrames: 20})} />;
+<TransitionSeries.Transition
+  presentation={slide({ direction: "from-left" })}
+  timing={linearTiming({ durationInFrames: 20 })}
+/>;
 ```
 
 Directions: `"from-left"`, `"from-right"`, `"from-top"`, `"from-bottom"`
 
-## Timing Options
+## Timing options
 
 ```tsx
-import {linearTiming, springTiming} from '@remotion/transitions';
+import { linearTiming, springTiming } from "@remotion/transitions";
 
 // Linear timing - constant speed
-linearTiming({durationInFrames: 20});
+linearTiming({ durationInFrames: 20 });
 
 // Spring timing - organic motion
-springTiming({config: {damping: 200}, durationInFrames: 25});
+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.
+Transitions overlap adjacent scenes, so the total composition length is **shorter** than the sum of all sequence durations. Overlays do **not** affect the total duration.
 
 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.
+Adding an overlay between two other sequences does not change the total.
 
 ### Getting the duration of a transition
 
 Use the `getDurationInFrames()` method on the timing object:
 
 ```tsx
-import {linearTiming, springTiming} from '@remotion/transitions';
+import { linearTiming, springTiming } from "@remotion/transitions";
 
-const linearDuration = linearTiming({durationInFrames: 20}).getDurationInFrames({fps: 30});
+const linearDuration = linearTiming({
+  durationInFrames: 20,
+}).getDurationInFrames({ fps: 30 });
 // Returns 20
 
-const springDuration = springTiming({config: {damping: 200}}).getDurationInFrames({fps: 30});
+const springDuration = springTiming({
+  config: { damping: 200 },
+}).getDurationInFrames({ fps: 30 });
 // Returns calculated duration based on spring physics
 ```
 
@@ -105,18 +175,23 @@ For `springTiming` without an explicit `durationInFrames`, the duration depends
 ### Calculating total composition duration
 
 ```tsx
-import {linearTiming} from '@remotion/transitions';
+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 timing1 = linearTiming({ durationInFrames: 15 });
+const timing2 = linearTiming({ durationInFrames: 20 });
 
-const transition1Duration = timing1.getDurationInFrames({fps: 30});
-const transition2Duration = timing2.getDurationInFrames({fps: 30});
+const transition1Duration = timing1.getDurationInFrames({ fps: 30 });
+const transition2Duration = timing2.getDurationInFrames({ fps: 30 });
 
-const totalDuration = scene1Duration + scene2Duration + scene3Duration - transition1Duration - transition2Duration;
+const totalDuration =
+  scene1Duration +
+  scene2Duration +
+  scene3Duration -
+  transition1Duration -
+  transition2Duration;
 // 60 + 60 + 60 - 15 - 20 = 145 frames
 ```