@nguyenphp/antigravity-marketing 1.0.16 → 1.0.19

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

@@ -2,14 +2,19 @@
 name: fonts
 description: Loading Google Fonts and local fonts in Remotion
 metadata:
-  tags: fonts, google-fonts, typography, local-fonts
+  tags: fonts, google-fonts, typography, text
 ---
 
 # Using fonts in Remotion
 
-## Google Fonts
+## Google Fonts with @remotion/google-fonts
 
-First, install the `@remotion/google-fonts` package:
+The recommended way to use Google Fonts. It's type-safe and automatically blocks rendering until the font is ready.
+
+### Prerequisites
+
+First, the @remotion/google-fonts package needs to be installed.
+If it is not installed, use the following command:
 
 ```bash
 npx remotion add @remotion/google-fonts # If project uses npm
@@ -18,93 +23,130 @@ yarn remotion add @remotion/google-fonts # If project uses yarn
 pnpm exec remotion add @remotion/google-fonts # If project uses pnpm
 ```
 
-Import and load the font at the top of your composition:
-
 ```tsx
-import { loadFont } from "@remotion/google-fonts/Inter";
+import { loadFont } from "@remotion/google-fonts/Lobster";
 
 const { fontFamily } = loadFont();
 
 export const MyComposition = () => {
-  return (
-    <div style={{ fontFamily }}>
-      Hello World
-    </div>
-  );
+  return <div style={{ fontFamily }}>Hello World</div>;
 };
 ```
 
-### Loading specific font weights
+Preferrably, specify only needed weights and subsets to reduce file size:
 
 ```tsx
-import { loadFont } from "@remotion/google-fonts/Inter";
+import { loadFont } from "@remotion/google-fonts/Roboto";
 
 const { fontFamily } = loadFont("normal", {
   weights: ["400", "700"],
+  subsets: ["latin"],
 });
 ```
 
-### Loading multiple fonts
+### Waiting for font to load
+
+Use `waitUntilDone()` if you need to know when the font is ready:
 
 ```tsx
-import { loadFont as loadInter } from "@remotion/google-fonts/Inter";
-import { loadFont as loadRoboto } from "@remotion/google-fonts/Roboto";
+import { loadFont } from "@remotion/google-fonts/Lobster";
+
+const { fontFamily, waitUntilDone } = loadFont();
+
+await waitUntilDone();
+```
 
-const { fontFamily: inter } = loadInter();
-const { fontFamily: roboto } = loadRoboto();
+## Local fonts with @remotion/fonts
+
+For local font files, use the `@remotion/fonts` package.
+
+### Prerequisites
+
+First, install @remotion/fonts:
+
+```bash
+npx remotion add @remotion/fonts # If project uses npm
+bunx remotion add @remotion/fonts # If project uses bun
+yarn remotion add @remotion/fonts # If project uses yarn
+pnpm exec remotion add @remotion/fonts # If project uses pnpm
 ```
 
-## Local Fonts
+### Loading a local font
 
-Place font files in the `public/` folder and use CSS `@font-face`:
+Place your font file in the `public/` folder and use `loadFont()`:
 
 ```tsx
+import { loadFont } from "@remotion/fonts";
 import { staticFile } from "remotion";
 
-const fontFace = `
-@font-face {
-  font-family: 'BeVietnamPro';
-  src: url('${staticFile("fonts/BeVietnamPro-Regular.ttf")}') format('truetype');
-  font-weight: 400;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'BeVietnamPro';
-  src: url('${staticFile("fonts/BeVietnamPro-Bold.ttf")}') format('truetype');
-  font-weight: 700;
-  font-style: normal;
-}
-`;
+await loadFont({
+  family: "MyFont",
+  url: staticFile("MyFont-Regular.woff2"),
+});
 
 export const MyComposition = () => {
-  return (
-    <>
-      <style>{fontFace}</style>
-      <div style={{ fontFamily: "BeVietnamPro" }}>
-        Xin chào Việt Nam
-      </div>
-    </>
-  );
+  return <div style={{ fontFamily: "MyFont" }}>Hello World</div>;
 };
 ```
 
-## Vietnamese Font Recommendations
+### Loading multiple weights
 
-For Vietnamese text support, use these Google Fonts:
+Load each weight separately with the same family name:
 
 ```tsx
-// Option 1: Be Vietnam Pro (modern, professional)
-import { loadFont } from "@remotion/google-fonts/BeVietnamPro";
+import { loadFont } from "@remotion/fonts";
+import { staticFile } from "remotion";
 
-// Option 2: Montserrat (geometric, clean)
-import { loadFont } from "@remotion/google-fonts/Montserrat";
+await Promise.all([
+  loadFont({
+    family: "Inter",
+    url: staticFile("Inter-Regular.woff2"),
+    weight: "400",
+  }),
+  loadFont({
+    family: "Inter",
+    url: staticFile("Inter-Bold.woff2"),
+    weight: "700",
+  }),
+]);
+```
+
+### Available options
 
-// Option 3: Inter (neutral, works well with Vietnamese diacritics)
-import { loadFont } from "@remotion/google-fonts/Inter";
+```tsx
+loadFont({
+  family: "MyFont", // Required: name to use in CSS
+  url: staticFile("font.woff2"), // Required: font file URL
+  format: "woff2", // Optional: auto-detected from extension
+  weight: "400", // Optional: font weight
+  style: "normal", // Optional: normal or italic
+  display: "block", // Optional: font-display behavior
+});
 ```
 
-## Important notes
+## Using in components
+
+Call `loadFont()` at the top level of your component or in a separate file that's imported early:
+
+```tsx
+import { loadFont } from "@remotion/google-fonts/Montserrat";
 
-- Always use `loadFont()` before rendering - fonts must be loaded synchronously
-- Google Fonts are automatically subsetted for performance
-- For custom fonts, ensure all font weights and styles are loaded
+const { fontFamily } = loadFont("normal", {
+  weights: ["400", "700"],
+  subsets: ["latin"],
+});
+
+export const Title: React.FC<{ text: string }> = ({ text }) => {
+  return (
+    <h1
+      style={{
+        fontFamily,
+        fontSize: 80,
+        fontWeight: "bold",
+      }}
+    >
+      {text}
+    </h1>
+  );
+};
+```

package/templates/.agent/skills/remotion-best-practices/rules/get-audio-duration.md

@@ -0,0 +1,58 @@
+---
+name: get-audio-duration
+description: Getting the duration of an audio file in seconds with Mediabunny
+metadata:
+  tags: duration, audio, length, time, seconds, mp3, wav
+---
+
+# Getting audio duration with Mediabunny
+
+Mediabunny can extract the duration of an audio file. It works in browser, Node.js, and Bun environments.
+
+## Getting audio duration
+
+```tsx title="get-audio-duration.ts"
+import { Input, ALL_FORMATS, UrlSource } from "mediabunny";
+
+export const getAudioDuration = async (src: string) => {
+  const input = new Input({
+    formats: ALL_FORMATS,
+    source: new UrlSource(src, {
+      getRetryDelay: () => null,
+    }),
+  });
+
+  const durationInSeconds = await input.computeDuration();
+  return durationInSeconds;
+};
+```
+
+## Usage
+
+```tsx
+const duration = await getAudioDuration("https://remotion.media/audio.mp3");
+console.log(duration); // e.g. 180.5 (seconds)
+```
+
+## Using with staticFile in Remotion
+
+Make sure to wrap the file path in `staticFile()`:
+
+```tsx
+import { staticFile } from "remotion";
+
+const duration = await getAudioDuration(staticFile("audio.mp3"));
+```
+
+## In Node.js and Bun
+
+Use `FileSource` instead of `UrlSource`:
+
+```tsx
+import { Input, ALL_FORMATS, FileSource } from "mediabunny";
+
+const input = new Input({
+  formats: ALL_FORMATS,
+  source: new FileSource(file), // File object from input or drag-drop
+});
+```

package/templates/.agent/skills/remotion-best-practices/rules/get-video-dimensions.md

@@ -0,0 +1,68 @@
+---
+name: get-video-dimensions
+description: Getting the width and height of a video file with Mediabunny
+metadata:
+  tags: dimensions, width, height, resolution, size, video
+---
+
+# Getting video dimensions with Mediabunny
+
+Mediabunny can extract the width and height of a video file. It works in browser, Node.js, and Bun environments.
+
+## Getting video dimensions
+
+```tsx
+import { Input, ALL_FORMATS, UrlSource } from "mediabunny";
+
+export const getVideoDimensions = async (src: string) => {
+  const input = new Input({
+    formats: ALL_FORMATS,
+    source: new UrlSource(src, {
+      getRetryDelay: () => null,
+    }),
+  });
+
+  const videoTrack = await input.getPrimaryVideoTrack();
+  if (!videoTrack) {
+    throw new Error("No video track found");
+  }
+
+  return {
+    width: videoTrack.displayWidth,
+    height: videoTrack.displayHeight,
+  };
+};
+```
+
+## Usage
+
+```tsx
+const dimensions = await getVideoDimensions("https://remotion.media/video.mp4");
+console.log(dimensions.width); // e.g. 1920
+console.log(dimensions.height); // e.g. 1080
+```
+
+## Using with local files
+
+For local files, use `FileSource` instead of `UrlSource`:
+
+```tsx
+import { Input, ALL_FORMATS, FileSource } from "mediabunny";
+
+const input = new Input({
+  formats: ALL_FORMATS,
+  source: new FileSource(file), // File object from input or drag-drop
+});
+
+const videoTrack = await input.getPrimaryVideoTrack();
+const width = videoTrack.displayWidth;
+const height = videoTrack.displayHeight;
+```
+
+## Using with staticFile in Remotion
+
+```tsx
+import { staticFile } from "remotion";
+
+const dimensions = await getVideoDimensions(staticFile("video.mp4"));
+```

package/templates/.agent/skills/remotion-best-practices/rules/get-video-duration.md

@@ -0,0 +1,60 @@
+---
+name: get-video-duration
+description: Getting the duration of a video file in seconds with Mediabunny
+metadata:
+  tags: duration, video, length, time, seconds
+---
+
+# Getting video duration with Mediabunny
+
+Mediabunny can extract the duration of a video file. It works in browser, Node.js, and Bun environments.
+
+## Getting video duration
+
+```tsx
+import { Input, ALL_FORMATS, UrlSource } from "mediabunny";
+
+export const getVideoDuration = async (src: string) => {
+  const input = new Input({
+    formats: ALL_FORMATS,
+    source: new UrlSource(src, {
+      getRetryDelay: () => null,
+    }),
+  });
+
+  const durationInSeconds = await input.computeDuration();
+  return durationInSeconds;
+};
+```
+
+## Usage
+
+```tsx
+const duration = await getVideoDuration("https://remotion.media/video.mp4");
+console.log(duration); // e.g. 10.5 (seconds)
+```
+
+## Video files from the public/ directory
+
+Make sure to wrap the file path in `staticFile()`:
+
+```tsx
+import { staticFile } from "remotion";
+
+const duration = await getVideoDuration(staticFile("video.mp4"));
+```
+
+## In Node.js and Bun
+
+Use `FileSource` instead of `UrlSource`:
+
+```tsx
+import { Input, ALL_FORMATS, FileSource } from "mediabunny";
+
+const input = new Input({
+  formats: ALL_FORMATS,
+  source: new FileSource(file), // File object from input or drag-drop
+});
+
+const durationInSeconds = await input.computeDuration();
+```

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

@@ -12,17 +12,23 @@ metadata:
 Use `<AnimatedImage>` to display a GIF, APNG, AVIF or WebP image synchronized with Remotion's timeline:
 
 ```tsx
-import {AnimatedImage, staticFile} from 'remotion';
+import { AnimatedImage, staticFile } from "remotion";
 
 export const MyComposition = () => {
-  return <AnimatedImage src={staticFile('animation.gif')} width={500} height={500} />;
+  return (
+    <AnimatedImage src={staticFile("animation.gif")} width={500} height={500} />
+  );
 };
 ```
 
 Remote URLs are also supported (must have CORS enabled):
 
 ```tsx
-<AnimatedImage src="https://example.com/animation.gif" width={500} height={500} />
+<AnimatedImage
+  src="https://example.com/animation.gif"
+  width={500}
+  height={500}
+/>
 ```
 
 ## Sizing and fit
@@ -70,12 +76,12 @@ Use the `style` prop for additional CSS (use `width` and `height` props for sizi
 
 ```tsx
 <AnimatedImage
-  src={staticFile('animation.gif')}
+  src={staticFile("animation.gif")}
   width={500}
   height={500}
   style={{
     borderRadius: 20,
-    position: 'absolute',
+    position: "absolute",
     top: 100,
     left: 50,
   }}
@@ -87,28 +93,25 @@ Use the `style` prop for additional CSS (use `width` and `height` props for sizi
 Use `getGifDurationInSeconds()` from `@remotion/gif` to get the duration of a GIF.
 
 ```bash
-npx remotion add @remotion/gif # If project uses npm
-bunx remotion add @remotion/gif # If project uses bun
-yarn remotion add @remotion/gif # If project uses yarn
-pnpm exec remotion add @remotion/gif # If project uses pnpm
+npx remotion add @remotion/gif
 ```
 
 ```tsx
-import {getGifDurationInSeconds} from '@remotion/gif';
-import {staticFile} from 'remotion';
+import { getGifDurationInSeconds } from "@remotion/gif";
+import { staticFile } from "remotion";
 
-const duration = await getGifDurationInSeconds(staticFile('animation.gif'));
+const duration = await getGifDurationInSeconds(staticFile("animation.gif"));
 console.log(duration); // e.g. 2.5
 ```
 
 This is useful for setting the composition duration to match the GIF:
 
 ```tsx
-import {getGifDurationInSeconds} from '@remotion/gif';
-import {staticFile, CalculateMetadataFunction} from 'remotion';
+import { getGifDurationInSeconds } from "@remotion/gif";
+import { staticFile, CalculateMetadataFunction } from "remotion";
 
 const calculateMetadata: CalculateMetadataFunction = async () => {
-  const duration = await getGifDurationInSeconds(staticFile('animation.gif'));
+  const duration = await getGifDurationInSeconds(staticFile("animation.gif"));
   return {
     durationInFrames: Math.ceil(duration * 30),
   };
@@ -127,11 +130,11 @@ pnpm exec remotion add @remotion/gif # If project uses pnpm
 ```
 
 ```tsx
-import {Gif} from '@remotion/gif';
-import {staticFile} from 'remotion';
+import { Gif } from "@remotion/gif";
+import { staticFile } from "remotion";
 
 export const MyComposition = () => {
-  return <Gif src={staticFile('animation.gif')} width={500} height={500} />;
+  return <Gif src={staticFile("animation.gif")} width={500} height={500} />;
 };
 ```
 

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

@@ -46,7 +46,7 @@ my-video/
 ```tsx
 import { Img, staticFile } from "remotion";
 
-<Img src={staticFile("logo.png")} />
+<Img src={staticFile("logo.png")} />;
 ```
 
 ## Remote images
@@ -118,7 +118,11 @@ const { width, height } = await getImageDimensions(staticFile("photo.png"));
 This is useful for calculating aspect ratios or sizing compositions:
 
 ```tsx
-import { getImageDimensions, staticFile, CalculateMetadataFunction } from "remotion";
+import {
+  getImageDimensions,
+  staticFile,
+  CalculateMetadataFunction,
+} from "remotion";
 
 const calculateMetadata: CalculateMetadataFunction = async () => {
   const { width, height } = await getImageDimensions(staticFile("photo.png"));

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

@@ -0,0 +1,69 @@
+---
+name: import-srt-captions
+description: Importing .srt subtitle files into Remotion using @remotion/captions
+metadata:
+  tags: captions, subtitles, srt, import, parse
+---
+
+# Importing .srt subtitles into Remotion
+
+If you have an existing `.srt` subtitle file, you can import it into Remotion using `parseSrt()` from `@remotion/captions`.
+
+If you don't have a .srt file, read [Transcribing audio](transcribe-captions.md) for how to generate captions instead.
+
+## Prerequisites
+
+First, the @remotion/captions package needs to be installed.
+If it is not installed, use the following command:
+
+```bash
+npx remotion add @remotion/captions # If project uses npm
+bunx remotion add @remotion/captions # If project uses bun
+yarn remotion add @remotion/captions # If project uses yarn
+pnpm exec remotion add @remotion/captions # If project uses pnpm
+```
+
+## Reading an .srt file
+
+Use `staticFile()` to reference an `.srt` file in your `public` folder, then fetch and parse it:
+
+```tsx
+import { useState, useEffect, useCallback } from "react";
+import { AbsoluteFill, staticFile, useDelayRender } from "remotion";
+import { parseSrt } from "@remotion/captions";
+import type { Caption } from "@remotion/captions";
+
+export const MyComponent: React.FC = () => {
+  const [captions, setCaptions] = useState<Caption[] | null>(null);
+  const { delayRender, continueRender, cancelRender } = useDelayRender();
+  const [handle] = useState(() => delayRender());
+
+  const fetchCaptions = useCallback(async () => {
+    try {
+      const response = await fetch(staticFile("subtitles.srt"));
+      const text = await response.text();
+      const { captions: parsed } = parseSrt({ input: text });
+      setCaptions(parsed);
+      continueRender(handle);
+    } catch (e) {
+      cancelRender(e);
+    }
+  }, [continueRender, cancelRender, handle]);
+
+  useEffect(() => {
+    fetchCaptions();
+  }, [fetchCaptions]);
+
+  if (!captions) {
+    return null;
+  }
+
+  return <AbsoluteFill>{/* Use captions here */}</AbsoluteFill>;
+};
+```
+
+Remote URLs are also supported - you can `fetch()` a remote file via URL instead of using `staticFile()`.
+
+## Using imported captions
+
+Once parsed, the captions are in the `Caption` format and can be used with all `@remotion/captions` utilities.

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

@@ -0,0 +1,73 @@
+---
+name: light-leaks
+description: Light leak overlay effects for Remotion using @remotion/light-leaks.
+metadata:
+  tags: light-leaks, overlays, effects, transitions
+---
+
+## Light Leaks
+
+This only works from Remotion 4.0.415 and up. Use `npx remotion versions` to check your Remotion version and `npx remotion upgrade` to upgrade your Remotion version.
+
+`<LightLeak>` from `@remotion/light-leaks` renders a WebGL-based light leak effect. It reveals during the first half of its duration and retracts during the second half.
+
+Typically used inside a `<TransitionSeries.Overlay>` to play over the cut point between two scenes. See the **transitions** rule for `<TransitionSeries>` and overlay usage.
+
+## Prerequisites
+
+```bash
+npx remotion add @remotion/light-leaks
+```
+
+## Basic usage with TransitionSeries
+
+```tsx
+import { TransitionSeries } from "@remotion/transitions";
+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>;
+```
+
+## Props
+
+- `durationInFrames?` — defaults to the parent sequence/composition duration. The effect reveals during the first half and retracts during the second half.
+- `seed?` — determines the shape of the light leak pattern. Different seeds produce different patterns. Default: `0`.
+- `hueShift?` — rotates the hue in degrees (`0`–`360`). Default: `0` (yellow-to-orange). `120` = green, `240` = blue.
+
+## Customizing the look
+
+```tsx
+import { LightLeak } from "@remotion/light-leaks";
+
+// Blue-tinted light leak with a different pattern
+<LightLeak seed={5} hueShift={240} />;
+
+// Green-tinted light leak
+<LightLeak seed={2} hueShift={120} />;
+```
+
+## Standalone usage
+
+`<LightLeak>` can also be used outside of `<TransitionSeries>`, for example as a decorative overlay in any composition:
+
+```tsx
+import { AbsoluteFill } from "remotion";
+import { LightLeak } from "@remotion/light-leaks";
+
+const MyComp: React.FC = () => (
+  <AbsoluteFill>
+    <MyContent />
+    <LightLeak durationInFrames={60} seed={3} />
+  </AbsoluteFill>
+);
+```

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

@@ -29,17 +29,18 @@ To import a Lottie animation:
 - Render the Lottie animation using the `Lottie` component from the `@remotion/lottie` package
 
 ```tsx
-import {Lottie, LottieAnimationData} from '@remotion/lottie';
-import {useEffect, useState} from 'react';
-import {cancelRender, continueRender, delayRender} from 'remotion';
+import { Lottie, LottieAnimationData } from "@remotion/lottie";
+import { useEffect, useState } from "react";
+import { cancelRender, continueRender, delayRender } from "remotion";
 
 export const MyAnimation = () => {
-  const [handle] = useState(() => delayRender('Loading Lottie animation'));
+  const [handle] = useState(() => delayRender("Loading Lottie animation"));
 
-  const [animationData, setAnimationData] = useState<LottieAnimationData | null>(null);
+  const [animationData, setAnimationData] =
+    useState<LottieAnimationData | null>(null);
 
   useEffect(() => {
-    fetch('https://assets4.lottiefiles.com/packages/lf20_zyquagfl.json')
+    fetch("https://assets4.lottiefiles.com/packages/lf20_zyquagfl.json")
       .then((data) => data.json())
       .then((json) => {
         setAnimationData(json);
@@ -63,5 +64,7 @@ export const MyAnimation = () => {
 Lottie supports the `style` prop to allow styles and animations:
 
 ```tsx
-return <Lottie animationData={animationData} style={{width: 400, height: 400}} />;
+return (
+  <Lottie animationData={animationData} style={{ width: 400, height: 400 }} />
+);
 ```