@nguyenphp/antigravity-marketing 1.0.7 → 1.0.9

package/README.md

@@ -1,6 +1,6 @@
 # 🚀 Antigravity Marketing Kit
 
-> **24 marketing skills, 4 agents, and 4 workflows** for AI-powered marketing with Gemini CLI.
+> **26 marketing skills, 4 agents, and 4 workflows** for AI-powered marketing with Gemini CLI.
 
 ## 📋 Table of Contents
 
@@ -31,6 +31,7 @@ This project is built upon and includes skills from:
 - 🚀 **[Antigravity Kit](https://github.com/vudovn/antigravity-kit)** - Base CLI structure and core skills
 - 🎨 **[UI UX Pro Max](https://ui-ux-pro-max-skill.nextlevelbuilder.io/)** - Design intelligence skills (`ui-ux-pro-max`, `frontend-design`, `tailwind-patterns`)
 - 🛠️ **[ClaudeKit](https://claudekit.cc/)** - Production-ready skills (`seo-fundamentals`, `documentation-templates`)
+- 🎬 **[Remotion Dev Skills](https://github.com/remotion-dev/skills)** - Official Remotion best practices (`remotion-best-practices`)
 
 ## 🎥 Video Showcase (Automated via [Remotion](https://www.remotion.dev/))
 
@@ -40,7 +41,7 @@ This project is built upon and includes skills from:
 |:---:|:---:|
 | <video src="https://github.com/nguyenphp/antigravity-marketing/raw/main/docs/assets/videos/antigravity-promo-169.mp4" width="100%" controls></video> | <video src="https://github.com/nguyenphp/antigravity-marketing/raw/main/docs/assets/videos/antigravity-promo-916.mp4" width="100%" controls></video> |
 
-## 🧠 Skills (25)
+## 🧠 Skills (26)
 
 ### Content & Creative
 | Skill | Description |
@@ -94,6 +95,7 @@ This project is built upon and includes skills from:
 | `frontend-design` | Landing page & web design |
 | `tailwind-patterns` | Utility-first CSS patterns |
 | `documentation-templates` | Marketing documentation templates |
+| `remotion-best-practices` | **Official Remotion video production rules** |
 
 ## 🤖 Agents (4)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nguyenphp/antigravity-marketing",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "Marketing-focused AI agent skills kit for Gemini CLI",
   "main": "bin/index.js",
   "type": "module",
@@ -44,4 +44,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/templates/.agent/skills/remotion-best-practices/SKILL.md

@@ -0,0 +1,127 @@
+---
+name: remotion-best-practices
+description: Comprehensive Remotion best practices covering animations, 3D, audio, video, captions, charts, transitions, and more.
+allowed-tools: Read, RunCommand, Write
+---
+
+# Remotion Best Practices
+
+> Official Remotion development best practices integrated into the Antigravity Marketing Kit. Use this skill whenever you are dealing with Remotion code to obtain domain-specific knowledge.
+
+---
+
+## How to use
+
+Read individual rule files for detailed explanations and code examples:
+
+| Rule | Description |
+|------|-------------|
+| [3d.md](rules/3d.md) | 3D content using Three.js and React Three Fiber |
+| [animations.md](rules/animations.md) | Fundamental animation skills |
+| [audio.md](rules/audio.md) | Audio/sound - importing, trimming, volume, speed, pitch |
+| [calculate-metadata.md](rules/calculate-metadata.md) | Dynamically set duration, dimensions, and props |
+| [charts.md](rules/charts.md) | Chart and data visualization patterns |
+| [compositions.md](rules/compositions.md) | Compositions, stills, folders, default props |
+| [display-captions.md](rules/display-captions.md) | TikTok-style captions with word highlighting |
+| [fonts.md](rules/fonts.md) | Loading Google Fonts and local fonts |
+| [gifs.md](rules/gifs.md) | Displaying GIFs synchronized with timeline |
+| [images.md](rules/images.md) | Embedding images using `<Img>` component |
+| [lottie.md](rules/lottie.md) | Embedding Lottie animations |
+| [sequencing.md](rules/sequencing.md) | Sequence patterns - delay, trim, duration |
+| [text-animations.md](rules/text-animations.md) | Typography and text animation patterns |
+| [timing.md](rules/timing.md) | Interpolation curves - linear, easing, spring |
+| [transitions.md](rules/transitions.md) | Fullscreen scene transitions |
+| [videos.md](rules/videos.md) | Embedding videos - trimming, volume, speed, looping |
+
+---
+
+## Core Rules (CRITICAL)
+
+### 1. All animations MUST be driven by `useCurrentFrame()`
+
+```tsx
+const frame = useCurrentFrame();
+const { fps } = useVideoConfig();
+
+const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
+  extrapolateRight: 'clamp',
+});
+```
+
+### 2. CSS animations/transitions are FORBIDDEN
+
+- ❌ CSS `transition` or `animation`
+- ❌ Tailwind animation classes
+- ❌ Third-party animation libraries with internal timing
+- ✅ Only `interpolate()` and `spring()` from Remotion
+
+### 3. Always use Remotion media components
+
+```tsx
+// ✅ Correct
+import { Img, staticFile } from "remotion";
+import { Video, Audio } from "@remotion/media";
+
+<Img src={staticFile("photo.png")} />
+<Video src={staticFile("video.mp4")} />
+<Audio src={staticFile("audio.mp3")} />
+
+// ❌ Wrong
+<img src="photo.png" />
+<video src="video.mp4" />
+```
+
+### 4. Always premount Sequences
+
+```tsx
+const { fps } = useVideoConfig();
+
+<Sequence from={60} durationInFrames={90} premountFor={1 * fps}>
+  <MyScene />
+</Sequence>
+```
+
+### 5. Use seconds × fps for timing
+
+```tsx
+const { fps } = useVideoConfig();
+
+// ✅ Easy to understand: 2 seconds
+const startFrame = 2 * fps;
+
+// ❌ Hard to understand
+const startFrame = 60;
+```
+
+---
+
+## Quick Reference
+
+### Spring Configurations
+
+```tsx
+const smooth = { damping: 200 };              // No bounce
+const snappy = { damping: 20, stiffness: 200 }; // Minimal bounce
+const bouncy = { damping: 8 };                // Playful
+const heavy  = { damping: 15, stiffness: 80, mass: 2 }; // Slow, heavy
+```
+
+### Package Installation
+
+```bash
+# Core packages
+npx remotion add @remotion/media        # Video & Audio
+npx remotion add @remotion/transitions  # Scene transitions
+npx remotion add @remotion/captions     # TikTok-style captions
+npx remotion add @remotion/three        # 3D with Three.js
+npx remotion add @remotion/lottie       # Lottie animations
+npx remotion add @remotion/gif          # GIF support
+npx remotion add @remotion/google-fonts # Google Fonts
+```
+
+---
+
+## Credits
+
+Based on [remotion-dev/skills](https://github.com/remotion-dev/skills) - official Remotion best practices.
+Integrated into Antigravity Marketing Kit for AI-assisted video production.

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

@@ -0,0 +1,86 @@
+---
+name: 3d
+description: 3D content in Remotion using Three.js and React Three Fiber.
+metadata:
+  tags: 3d, three, threejs
+---
+
+# Using Three.js and React Three Fiber in Remotion
+
+Follow React Three Fiber and Three.js best practices.  
+Only the following Remotion-specific rules need to be followed:
+
+## Prerequisites
+
+First, the `@remotion/three` package needs to be installed.  
+If it is not, use the following command:
+
+```bash
+npx remotion add @remotion/three # If project uses npm
+bunx remotion add @remotion/three # If project uses bun
+yarn remotion add @remotion/three # If project uses yarn
+pnpm exec remotion add @remotion/three # If project uses pnpm
+```
+
+## Using ThreeCanvas
+
+You MUST wrap 3D content in `<ThreeCanvas>` and include proper lighting.  
+`<ThreeCanvas>` MUST have a `width` and `height` prop.
+
+```tsx
+import { ThreeCanvas } from "@remotion/three";
+import { useVideoConfig } from "remotion";
+
+const { width, height } = useVideoConfig();
+
+<ThreeCanvas width={width} height={height}>
+  <ambientLight intensity={0.4} />
+  <directionalLight position={[5, 5, 5]} intensity={0.8} />
+  <mesh>
+    <sphereGeometry args={[1, 32, 32]} />
+    <meshStandardMaterial color="red" />
+  </mesh>
+</ThreeCanvas>
+```
+
+## No animations not driven by `useCurrentFrame()`
+
+Shaders, models etc MUST NOT animate by themselves.  
+No animations are allowed unless they are driven by `useCurrentFrame()`.  
+Otherwise, it will cause flickering during rendering.  
+
+Using `useFrame()` from `@react-three/fiber` is forbidden.
+
+## Animate using `useCurrentFrame()`
+
+Use `useCurrentFrame()` to perform animations.
+
+```tsx
+const frame = useCurrentFrame();
+const rotationY = frame * 0.02;
+
+<mesh rotation={[0, rotationY, 0]}>
+  <boxGeometry args={[2, 2, 2]} />
+  <meshStandardMaterial color="#4a9eff" />
+</mesh>
+```
+
+## Using `<Sequence>` inside `<ThreeCanvas>`
+
+The `layout` prop of any `<Sequence>` inside a `<ThreeCanvas>` must be set to `none`.
+
+```tsx
+import { Sequence } from "remotion";
+import { ThreeCanvas } from "@remotion/three";
+
+const { width, height } = useVideoConfig();
+
+<ThreeCanvas width={width} height={height}>
+  <Sequence layout="none">
+    <mesh>
+      <boxGeometry args={[2, 2, 2]} />
+      <meshStandardMaterial color="#4a9eff" />
+    </mesh>
+  </Sequence>
+</ThreeCanvas>
+```

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

@@ -0,0 +1,29 @@
+---
+name: animations
+description: Fundamental animation skills for Remotion
+metadata:
+  tags: animations, transitions, frames, useCurrentFrame
+---
+
+All animations MUST be driven by the `useCurrentFrame()` hook.  
+Write animations in seconds and multiply them by the `fps` value from `useVideoConfig()`.
+
+```tsx
+import { useCurrentFrame, useVideoConfig, interpolate } from "remotion";
+
+export const FadeIn = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
+    extrapolateRight: 'clamp',
+  });
+ 
+  return (
+    <div style={{ opacity }}>Hello World!</div>
+  );
+};
+```
+
+CSS transitions or animations are FORBIDDEN - they will not render correctly.  
+Tailwind animation class names are FORBIDDEN - they will not render correctly.  

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

@@ -0,0 +1,172 @@
+---
+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 # 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
+```
+
+## 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/templates/.agent/skills/remotion-best-practices/rules/calculate-metadata.md

@@ -0,0 +1,104 @@
+---
+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 `getMediaMetadata()` function to get the video duration:
+
+```tsx
+import {CalculateMetadataFunction} from 'remotion';
+import {getMediaMetadata} from '../get-media-metadata';
+
+const calculateMetadata: CalculateMetadataFunction<Props> = async ({props}) => {
+  const {durationInSeconds} = await getMediaMetadata(props.videoSrc);
+
+  return {
+    durationInFrames: Math.ceil(durationInSeconds * 30),
+  };
+};
+```
+
+## Matching dimensions of a video
+
+```tsx
+const calculateMetadata: CalculateMetadataFunction<Props> = async ({props}) => {
+  const {durationInSeconds, dimensions} = await getMediaMetadata(props.videoSrc);
+
+  return {
+    durationInFrames: Math.ceil(durationInSeconds * 30),
+    width: dimensions?.width ?? 1920,
+    height: dimensions?.height ?? 1080,
+  };
+};
+```
+
+## Setting duration based on multiple videos
+
+```tsx
+const calculateMetadata: CalculateMetadataFunction<Props> = async ({props}) => {
+  const metadataPromises = props.videos.map((video) => getMediaMetadata(video.src));
+  const allMetadata = await Promise.all(metadataPromises);
+
+  const totalDuration = allMetadata.reduce((sum, meta) => sum + meta.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

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

@@ -0,0 +1,88 @@
+---
+name: charts
+description: Chart and data visualization patterns for Remotion. Use when creating bar charts, pie charts, histograms, progress bars, or any data-driven animations.
+metadata:
+  tags: charts, data, visualization, bar-chart, pie-chart, graphs
+---
+
+# Charts in Remotion
+
+You can create bar charts in Remotion by using regular React code - HTML and SVG is allowed, as well as D3.js.
+
+## No animations not powered by `useCurrentFrame()`
+
+Disable all animations by third party libraries.  
+They will cause flickering during rendering.  
+Instead, drive all animations from `useCurrentFrame()`.
+
+## Bar Chart Animations
+
+### Staggered Bars
+
+You can animate the height of the bars and stagger them like this:
+
+```tsx
+const STAGGER_DELAY = 5;
+const frame = useCurrentFrame();
+const {fps} = useVideoConfig();
+
+const bars = data.map((item, i) => {
+  const delay = i * STAGGER_DELAY;
+  const height = spring({
+    frame,
+    fps,
+    delay,
+    config: {damping: 200},
+  });
+  return <div style={{height: height * item.value}} />;
+});
+```
+
+## Pie Chart Animation
+
+Animate segments using stroke-dashoffset, starting from 12 o'clock.
+
+```tsx
+const frame = useCurrentFrame();
+const {fps} = useVideoConfig();
+
+const progress = interpolate(frame, [0, 100], [0, 1]);
+
+const circumference = 2 * Math.PI * radius;
+const segmentLength = (value / total) * circumference;
+const offset = interpolate(progress, [0, 1], [segmentLength, 0]);
+
+<circle 
+  r={radius} 
+  cx={center} 
+  cy={center} 
+  fill="none" 
+  stroke={color} 
+  strokeWidth={strokeWidth} 
+  strokeDasharray={`${segmentLength} ${circumference}`} 
+  strokeDashoffset={offset} 
+  transform={`rotate(-90 ${center} ${center})`} 
+/>;
+```
+
+## Progress Bar Animation
+
+```tsx
+const frame = useCurrentFrame();
+const { fps } = useVideoConfig();
+
+const progress = spring({
+  frame,
+  fps,
+  config: { damping: 200 },
+});
+
+const width = interpolate(progress, [0, 1], [0, targetPercentage]);
+
+<div style={{
+  width: `${width}%`,
+  height: 20,
+  backgroundColor: '#00f2ff',
+  borderRadius: 10,
+}} />;
+```