diff --git a/bundled-skills/remotion/SKILL.md b/bundled-skills/remotion/SKILL.md index c124e38..7ddaa0f 100644 --- a/bundled-skills/remotion/SKILL.md +++ b/bundled-skills/remotion/SKILL.md @@ -1,328 +1,61 @@ --- -name: remotion -description: AI video production workflow using Remotion. Use when creating videos, short films, commercials, or motion graphics. Triggers on requests to make promotional videos, product demos, social media videos, animated explainers, or any programmatic video content. Produces polished motion graphics, not slideshows. +name: remotion-best-practices +description: Best practices for Remotion - Video creation in React +metadata: + tags: remotion, video, react, animation, composition --- -# Video Generator (Remotion) - -Create professional motion graphics videos programmatically with React and Remotion. - -## Default Workflow (ALWAYS follow this) - -1. **Scrape brand data** (if featuring a product) using Firecrawl -2. **Create the project** in `output//` -3. **Build all scenes** with proper motion graphics -4. **Install dependencies** with `npm install` -5. **Fix package.json scripts** to use `npx remotion` (not `bun`): - ```json - "scripts": { - "dev": "npx remotion studio", - "build": "npx remotion bundle" - } - ``` -5. **Start Remotion Studio** as a background process: - ```bash - cd output/ && npm run dev - ``` - Wait for "Server ready" on port 3000. -6. **Expose via Cloudflare tunnel** so user can access it: - ```bash - bash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000 - ``` -7. **Send the user the public URL** (e.g. `https://xxx.trycloudflare.com`) - -The user will preview in their browser, request changes, and you edit the source files. Remotion hot-reloads automatically. - -### Rendering (only when user explicitly asks to export): -```bash -cd output/ -npx remotion render CompositionName out/video.mp4 -``` - -## Quick Start - -```bash -# Scaffold project -cd output && npx --yes create-video@latest my-video --template blank -cd my-video && npm install - -# Add motion libraries -npm install lucide-react - -# Fix scripts in package.json (replace any "bun" references with "npx remotion") - -# Start dev server -npm run dev - -# Expose publicly -bash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000 -``` - -## Fetching Brand Data with Firecrawl - -**MANDATORY:** When a video mentions or features any product/company, use Firecrawl to scrape the product's website for brand data, colors, screenshots, and copy BEFORE designing the video. This ensures visual accuracy and brand consistency. - -API Key: Set `FIRECRAWL_API_KEY` in `.env` (see TOOLS.md). - -### Usage - -```bash -bash scripts/firecrawl.sh "https://example.com" -``` - -Returns structured brand data: brandName, tagline, headline, description, features, logoUrl, faviconUrl, primaryColors, ctaText, socialLinks, plus screenshot URL and OG image URL. - -### Download Assets After Scraping - -```bash -mkdir -p public/images/brand -curl -s "https://example.com/favicon.svg" -o public/images/brand/logo.svg -curl -s "${OG_IMAGE_URL}" -o public/images/brand/og-image.png -curl -sL "${SCREENSHOT_URL}" -o public/images/brand/screenshot.png -``` - -## Core Architecture - -### Scene Management - -Use scene-based architecture with proper transitions: - -```tsx -const SCENE_DURATIONS: Record = { - intro: 3000, // 3s hook - problem: 4000, // 4s dramatic - solution: 3500, // 3.5s reveal - features: 5000, // 5s showcase - cta: 3000, // 3s close -}; -``` - -### Video Structure Pattern - -```tsx -import { - AbsoluteFill, Sequence, useCurrentFrame, - useVideoConfig, interpolate, spring, - Img, staticFile, Audio, -} from "remotion"; - -export const MyVideo = () => { - const frame = useCurrentFrame(); - const { fps, durationInFrames } = useVideoConfig(); - - return ( - - {/* Background music */} - - ); -}; -``` - -## Motion Graphics Principles - -### AVOID (Slideshow patterns) - -- Fading to black between scenes -- Centered text on solid backgrounds -- Same transition for everything -- Linear/robotic animations -- Static screens -- `slideLeft`, `slideRight`, `crossDissolve`, `fadeBlur` presets -- Emoji icons — NEVER use emoji, always use Lucide React icons - -### PURSUE (Motion graphics) - -- Overlapping transitions (next starts BEFORE current ends) -- Layered compositions (background/midground/foreground) -- Spring physics for organic motion -- Varied timing (2-5s scenes, mixed rhythms) -- Continuous visual elements across scenes -- Custom transitions with clipPath, 3D transforms, morphs -- Lucide React for ALL icons (`npm install lucide-react`) — never emoji - -## Transition Techniques - -1. **Morph/Scale** - Element scales up to fill screen, becomes next scene's background -2. **Wipe** - Colored shape sweeps across, revealing next scene -3. **Zoom-through** - Camera pushes into element, emerges into new scene -4. **Clip-path reveal** - Circle/polygon grows from point to reveal -5. **Persistent anchor** - One element stays while surroundings change -6. **Directional flow** - Scene 1 exits right, Scene 2 enters from right -7. **Split/unfold** - Screen divides, panels slide apart -8. **Perspective flip** - Scene rotates on Y-axis in 3D - -## Animation Timing Reference - -```tsx -// Timing values (in seconds) -const timing = { - micro: 0.1-0.2, // Small shifts, subtle feedback - snappy: 0.2-0.4, // Element entrances, position changes - standard: 0.5-0.8, // Scene transitions, major reveals - dramatic: 1.0-1.5, // Hero moments, cinematic reveals -}; - -// Spring configs -const springs = { - snappy: { stiffness: 400, damping: 30 }, - bouncy: { stiffness: 300, damping: 15 }, - smooth: { stiffness: 120, damping: 25 }, -}; -``` - -## Visual Style Guidelines - -### Typography -- One display font + one body font max -- Massive headlines, tight tracking -- Mix weights for hierarchy -- Keep text SHORT (viewers can't pause) - -### Colors -- **Use brand colors from Firecrawl scrape** as the primary palette — match the product's actual look -- **Avoid purple/indigo gradients** unless the brand uses them or the user explicitly requests them -- Simple, clean backgrounds are generally best — a single dark tone or subtle gradient beats layered textures -- Intentional accent colors pulled from the brand - -### Layout -- Use asymmetric layouts, off-center type -- Edge-aligned elements create visual tension -- Generous whitespace as design element -- Use depth sparingly — a subtle backdrop blur or single gradient, not stacked textures - -## Remotion Essentials - -### Interpolation - -```tsx -const opacity = interpolate(frame, [0, 30], [0, 1], { - extrapolateLeft: "clamp", - extrapolateRight: "clamp" -}); - -const scale = spring({ - frame, fps, - from: 0.8, to: 1, - durationInFrames: 30, - config: { damping: 12 } -}); -``` - -### Sequences with Overlap - -```tsx - - - - - - -``` - -### Cross-Scene Continuity - -Place persistent elements OUTSIDE Sequence blocks: - -```tsx -const PersistentShape = ({ currentScene }: { currentScene: number }) => { - const positions = { - 0: { x: 100, y: 100, scale: 1, opacity: 0.3 }, - 1: { x: 800, y: 200, scale: 2, opacity: 0.5 }, - 2: { x: 400, y: 600, scale: 0.5, opacity: 1 }, - }; - - return ( - - ); -}; -``` - -## Quality Tests - -Before delivering, verify: - -- **Mute test:** Story follows visually without sound? -- **Squint test:** Hierarchy visible when squinting? -- **Timing test:** Motion feels natural, not robotic? -- **Consistency test:** Similar elements behave similarly? -- **Slideshow test:** Does NOT look like PowerPoint? -- **Loop test:** Video loops smoothly back to start? - -## Implementation Steps - -1. **Firecrawl brand scrape** — If featuring a product, scrape its site first -2. **Director's treatment** — Write vibe, camera style, emotional arc -3. **Visual direction** — Colors, fonts, brand feel, animation style -4. **Scene breakdown** — List every scene with description, duration, text, transitions -5. **Plan assets** — User assets + generated images/videos + brand scrape assets -9. **Define durations** — Vary pacing (2-3s punchy, 4-5s dramatic) -10. **Build persistent layer** — Animated background outside scenes -11. **Build scenes** — Each with enter/exit animations, 3-5 timed moments -12. **Open with hook** — High-impact first scene -13. **Develop narrative** — Content-driven middle scenes -14. **Strong ending** — Intentional, resolved close -15. **Start Remotion Studio** — `npm run dev` on port 3000 -16. **Expose via tunnel** — `bash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000` -17. **Send user the public URL** — They preview and request changes live -18. **Iterate** — Edit source, hot-reload, repeat -19. **Render** — Only when user says to export final video - -## File Structure - -``` -my-video/ -├── src/ -│ ├── Root.tsx # Composition definitions -│ ├── index.ts # Entry point -│ ├── index.css # Global styles -│ ├── MyVideo.tsx # Main video component -│ └── scenes/ # Scene components (optional) -├── public/ -│ ├── images/ -│ │ └── brand/ # Firecrawl-scraped assets -│ └── audio/ # Background music -├── remotion.config.ts -└── package.json -``` - -## Common Components - -See `references/components.md` for reusable: -- Animated backgrounds -- Terminal windows -- Feature cards -- Stats displays -- CTA buttons -- Text reveal animations - -## Tunnel Management - -```bash -# Start tunnel (exposes port 3000 publicly) -bash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000 - -# Check status -bash skills/cloudflare-tunnel/scripts/tunnel.sh status 3000 - -# List all tunnels -bash skills/cloudflare-tunnel/scripts/tunnel.sh list - -# Stop tunnel -bash skills/cloudflare-tunnel/scripts/tunnel.sh stop 3000 -``` \ No newline at end of file +## When to use + +Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge. + +## Captions + +When dealing with captions or subtitles, load the [./rules/subtitles.md](./rules/subtitles.md) file for more information. + +## Using FFmpeg + +For some video operations, such as trimming videos or detecting silence, FFmpeg should be used. Load the [./rules/ffmpeg.md](./rules/ffmpeg.md) file for more information. + +## Audio visualization + +When needing to visualize audio (spectrum bars, waveforms, bass-reactive effects), load the [./rules/audio-visualization.md](./rules/audio-visualization.md) file for more information. + +## Sound effects + +When needing to use sound effects, load the [./rules/sound-effects.md](./rules/sound-effects.md) file for more information. + +## How to use + +Read individual rule files for detailed explanations and code examples: + +- [rules/3d.md](rules/3d.md) - 3D content in Remotion using Three.js and React Three Fiber +- [rules/animations.md](rules/animations.md) - Fundamental animation skills for Remotion +- [rules/assets.md](rules/assets.md) - Importing images, videos, audio, and fonts into Remotion +- [rules/audio.md](rules/audio.md) - Using audio and sound in Remotion - importing, trimming, volume, speed, pitch +- [rules/calculate-metadata.md](rules/calculate-metadata.md) - Dynamically set composition duration, dimensions, and props +- [rules/can-decode.md](rules/can-decode.md) - Check if a video can be decoded by the browser using Mediabunny +- [rules/charts.md](rules/charts.md) - Chart and data visualization patterns for Remotion (bar, pie, line, stock charts) +- [rules/compositions.md](rules/compositions.md) - Defining compositions, stills, folders, default props and dynamic metadata +- [rules/extract-frames.md](rules/extract-frames.md) - Extract frames from videos at specific timestamps using Mediabunny +- [rules/fonts.md](rules/fonts.md) - Loading Google Fonts and local fonts in Remotion +- [rules/get-audio-duration.md](rules/get-audio-duration.md) - Getting the duration of an audio file in seconds with Mediabunny +- [rules/get-video-dimensions.md](rules/get-video-dimensions.md) - Getting the width and height of a video file with Mediabunny +- [rules/get-video-duration.md](rules/get-video-duration.md) - Getting the duration of a video file in seconds with Mediabunny +- [rules/gifs.md](rules/gifs.md) - Displaying GIFs synchronized with Remotion's timeline +- [rules/images.md](rules/images.md) - Embedding images in Remotion using the Img component +- [rules/light-leaks.md](rules/light-leaks.md) - Light leak overlay effects using @remotion/light-leaks +- [rules/lottie.md](rules/lottie.md) - Embedding Lottie animations in Remotion +- [rules/measuring-dom-nodes.md](rules/measuring-dom-nodes.md) - Measuring DOM element dimensions in Remotion +- [rules/measuring-text.md](rules/measuring-text.md) - Measuring text dimensions, fitting text to containers, and checking overflow +- [rules/sequencing.md](rules/sequencing.md) - Sequencing patterns for Remotion - delay, trim, limit duration of items +- [rules/tailwind.md](rules/tailwind.md) - Using TailwindCSS in Remotion +- [rules/text-animations.md](rules/text-animations.md) - Typography and text animation patterns for Remotion +- [rules/timing.md](rules/timing.md) - Interpolation curves in Remotion - linear, easing, spring animations +- [rules/transitions.md](rules/transitions.md) - Scene transition patterns for Remotion +- [rules/transparent-videos.md](rules/transparent-videos.md) - Rendering out a video with transparency +- [rules/trimming.md](rules/trimming.md) - Trimming patterns for Remotion - cut the beginning or end of animations +- [rules/videos.md](rules/videos.md) - Embedding videos in Remotion - trimming, volume, speed, looping, pitch +- [rules/parameters.md](rules/parameters.md) - Make a video parametrizable by adding a Zod schema +- [rules/maps.md](rules/maps.md) - Add a map using Mapbox and animate it +- [rules/voiceover.md](rules/voiceover.md) - Adding AI-generated voiceover to Remotion compositions using ElevenLabs TTS diff --git a/bundled-skills/remotion/references/components.md b/bundled-skills/remotion/references/components.md deleted file mode 100644 index 744f89a..0000000 --- a/bundled-skills/remotion/references/components.md +++ /dev/null @@ -1,217 +0,0 @@ -# Reusable Components - -## Animated Background - -```tsx -import { useCurrentFrame, interpolate } from "remotion"; - -export const AnimatedBackground = ({ frame }: { frame: number }) => { - const hueShift = interpolate(frame, [0, 300], [0, 360]); - const gradientAngle = interpolate(frame, [0, 300], [0, 180]); - - return ( -
- ); -}; -``` - -## Terminal Window - -```tsx -export const TerminalWindow = ({ - lines, - frame, - fps, -}: { - lines: string[]; - frame: number; - fps: number; -}) => { - const visibleLines = Math.floor(frame / (fps * 0.3)); - - return ( -
-
-
-
-
-
- {lines.slice(0, visibleLines).map((line, i) => ( -
- $ {line} -
- ))} - {visibleLines <= lines.length && ( - - )} -
- ); -}; -``` - -## Feature Card - -```tsx -import { spring, useCurrentFrame, useVideoConfig, interpolate } from "remotion"; - -// icon should be a Lucide React component, NEVER an emoji string -export const FeatureCard = ({ - icon: Icon, - title, - description, - delay = 0, -}: { - icon: React.FC<{ size?: number; color?: string }>; - title: string; - description: string; - delay?: number; -}) => { - const frame = useCurrentFrame(); - const { fps } = useVideoConfig(); - - const scale = spring({ - frame: frame - delay, - fps, - config: { stiffness: 300, damping: 20 }, - }); - - const opacity = interpolate(frame - delay, [0, 15], [0, 1], { - extrapolateLeft: "clamp", - extrapolateRight: "clamp", - }); - - return ( -
-
-

{title}

-

{description}

-
- ); -}; -``` - -## Stats Display - -```tsx -import { interpolate } from "remotion"; - -export const StatsDisplay = ({ - value, - label, - frame, - fps, -}: { - value: number; - label: string; - frame: number; - fps: number; -}) => { - const progress = interpolate(frame, [0, fps * 1.5], [0, 1], { - extrapolateRight: "clamp", - }); - const displayValue = Math.round(value * progress); - - return ( -
-
- {displayValue.toLocaleString()} -
-
- {label} -
-
- ); -}; -``` - -## CTA Button - -```tsx -import { spring, useCurrentFrame, useVideoConfig, interpolate } from "remotion"; - -export const CTAButton = ({ - text, - frame, - fps, -}: { - text: string; - frame: number; - fps: number; -}) => { - const scale = spring({ - frame, - fps, - config: { stiffness: 200, damping: 15 }, - }); - - const shimmer = interpolate(frame, [0, fps * 2], [-100, 200]); - - return ( -
- {text} -
-
- ); -}; -``` - -## Text Reveal - -```tsx -import { interpolate } from "remotion"; - -export const TextReveal = ({ - text, - frame, - fps, - charDelay = 2, -}: { - text: string; - frame: number; - fps: number; - charDelay?: number; -}) => { - return ( -
- {text.split("").map((char, i) => { - const charFrame = frame - i * charDelay; - const opacity = interpolate(charFrame, [0, 8], [0, 1], { - extrapolateLeft: "clamp", - extrapolateRight: "clamp", - }); - const y = interpolate(charFrame, [0, 8], [20, 0], { - extrapolateLeft: "clamp", - extrapolateRight: "clamp", - }); - - return ( - - {char === " " ? "\u00A0" : char} - - ); - })} -
- ); -}; -``` \ No newline at end of file diff --git a/bundled-skills/remotion/references/composition-patterns.md b/bundled-skills/remotion/references/composition-patterns.md deleted file mode 100644 index 9a7e2f8..0000000 --- a/bundled-skills/remotion/references/composition-patterns.md +++ /dev/null @@ -1,144 +0,0 @@ -# Remotion Composition Patterns - -## Project Structure - -``` -my-video/ -├── src/ -│ ├── index.ts # registerRoot entry point -│ ├── Root.tsx # declarations -│ └── MyVideo/ -│ ├── index.tsx # Main component -│ └── styles.ts # Optional styles -├── public/ # Static assets (images, fonts, audio) -├── remotion.config.ts # Remotion config -├── package.json -└── tsconfig.json -``` - -## Basic Composition (Root.tsx) - -```tsx -import { Composition } from "remotion"; -import { MyVideo } from "./MyVideo"; - -export const RemotionRoot = () => ( - <> - - -); -``` - -## Common Aspect Ratios - -- **16:9 landscape (YouTube):** 1920x1080 or 1280x720 -- **9:16 vertical (Reels/TikTok/Shorts):** 1080x1920 -- **4:5 Instagram feed:** 1080x1350 -- **1:1 square:** 1080x1080 - -## Key Remotion APIs - -```tsx -import { - useCurrentFrame, // Current frame number - useVideoConfig, // { fps, width, height, durationInFrames } - interpolate, // Map frame ranges to values - spring, // Physics-based spring animation - Sequence, // Time-offset children - AbsoluteFill, // Full-frame container - Img, // Image component (preloads) - Audio, // Audio component - Video, // Video component - staticFile, // Reference files in public/ - delayRender, // Hold render until async ready - continueRender, // Resume after delayRender -} from "remotion"; -``` - -## Animation Example - -```tsx -import { useCurrentFrame, interpolate, spring, useVideoConfig, AbsoluteFill } from "remotion"; - -export const FadeInText: React.FC<{ text: string }> = ({ text }) => { - const frame = useCurrentFrame(); - const { fps } = useVideoConfig(); - - const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" }); - const scale = spring({ frame, fps, config: { damping: 200 } }); - - return ( - -

- {text} -

- - ); -}; -``` - -## Sequences (Timing) - -```tsx - - - - - - - - - - - -``` - -## Input Props (Dynamic Data) - -Pass data via `--props` flag or `defaultProps`: - -```tsx -// Component -export const MyVideo: React.FC<{ title: string; items: string[] }> = ({ title, items }) => { ... }; - -// Render with props -// npx remotion render MyVideo --props='{"title":"Demo","items":["a","b"]}' -``` - -## Audio - -```tsx -import { Audio, staticFile, Sequence } from "remotion"; - - - -``` - -## Fetching Data (delayRender) - -```tsx -const [data, setData] = useState(null); -const [handle] = useState(() => delayRender()); - -useEffect(() => { - fetch("https://api.example.com/data") - .then((r) => r.json()) - .then((d) => { setData(d); continueRender(handle); }); -}, []); -``` - -## TailwindCSS - -Remotion supports Tailwind out of the box when scaffolded with `--tailwind`. Use className as normal on any element. \ No newline at end of file diff --git a/bundled-skills/remotion/references/remotion.sh b/bundled-skills/remotion/references/remotion.sh deleted file mode 100644 index 2c5b5fd..0000000 --- a/bundled-skills/remotion/references/remotion.sh +++ /dev/null @@ -1,98 +0,0 @@ -#!/usr/bin/env bash -# remotion.sh - Wrapper for common Remotion operations -# Usage: remotion.sh [args...] -# -# Commands: -# init - Scaffold a new Remotion project (blank + tailwind) -# render [comp] [output] [--props '{}'] [--width N] [--height N] -# still [comp] [output] [--props '{}'] [--frame N] -# preview - Start Remotion Studio dev server -# list - List available compositions -# upgrade - Upgrade Remotion packages to latest - -set -euo pipefail - -CMD="${1:-help}" -shift || true - -case "$CMD" in - init) - PROJECT_NAME="${1:?Usage: remotion.sh init }" - echo "Creating Remotion project: $PROJECT_NAME" - npx --yes create-video@latest --blank --tailwind --no-skills "$PROJECT_NAME" 2>&1 || { - # Fallback: manual scaffold if create-video doesn't support flags - echo "Trying interactive scaffold..." - echo -e "blank\ny\nn" | npx --yes create-video@latest "$PROJECT_NAME" 2>&1 - } - echo "Project created at ./$PROJECT_NAME" - echo "Next: cd $PROJECT_NAME && npm install && npm run dev" - ;; - - render) - PROJECT_DIR="${1:?Usage: remotion.sh render [composition] [output] [flags...]}" - shift - COMP="${1:-}" - shift 2>/dev/null || true - OUTPUT="${1:-}" - shift 2>/dev/null || true - - cd "$PROJECT_DIR" - - ARGS=() - if [ -n "$COMP" ]; then ARGS+=("$COMP"); fi - if [ -n "$OUTPUT" ]; then ARGS+=("$OUTPUT"); fi - - # Pass remaining flags through - ARGS+=("$@") - - npx remotion render "${ARGS[@]}" 2>&1 - ;; - - still) - PROJECT_DIR="${1:?Usage: remotion.sh still [composition] [output] [flags...]}" - shift - COMP="${1:-}" - shift 2>/dev/null || true - OUTPUT="${1:-}" - shift 2>/dev/null || true - - cd "$PROJECT_DIR" - - ARGS=() - if [ -n "$COMP" ]; then ARGS+=("$COMP"); fi - if [ -n "$OUTPUT" ]; then ARGS+=("$OUTPUT"); fi - ARGS+=("$@") - - npx remotion still "${ARGS[@]}" 2>&1 - ;; - - preview) - PROJECT_DIR="${1:?Usage: remotion.sh preview }" - cd "$PROJECT_DIR" - npm run dev 2>&1 - ;; - - list) - PROJECT_DIR="${1:?Usage: remotion.sh list }" - cd "$PROJECT_DIR" - npx remotion compositions 2>&1 - ;; - - upgrade) - PROJECT_DIR="${1:?Usage: remotion.sh upgrade }" - cd "$PROJECT_DIR" - npx remotion upgrade 2>&1 - ;; - - help|*) - echo "remotion.sh - Remotion video toolkit" - echo "" - echo "Commands:" - echo " init Scaffold new project" - echo " render [comp] [out] Render video (mp4/webm/gif)" - echo " still [comp] [out] Render single frame" - echo " preview Start dev server" - echo " list List compositions" - echo " upgrade Upgrade Remotion" - ;; -esac \ No newline at end of file diff --git a/bundled-skills/remotion/rules/3d.md b/bundled-skills/remotion/rules/3d.md new file mode 100644 index 0000000..c9d254f --- /dev/null +++ b/bundled-skills/remotion/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 `` and include proper lighting. +`` MUST have a `width` and `height` prop. + +```tsx +import { ThreeCanvas } from "@remotion/three"; +import { useVideoConfig } from "remotion"; + +const { width, height } = useVideoConfig(); + + + + + + + + +; +``` + +## 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; + + + + +; +``` + +## Using `` inside `` + +The `layout` prop of any `` inside a `` must be set to `none`. + +```tsx +import { Sequence } from "remotion"; +import { ThreeCanvas } from "@remotion/three"; + +const { width, height } = useVideoConfig(); + + + + + + + + +; +``` diff --git a/bundled-skills/remotion/rules/animations.md b/bundled-skills/remotion/rules/animations.md new file mode 100644 index 0000000..619591e --- /dev/null +++ b/bundled-skills/remotion/rules/animations.md @@ -0,0 +1,27 @@ +--- +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 } from "remotion"; + +export const FadeIn = () => { + const frame = useCurrentFrame(); + const { fps } = useVideoConfig(); + + const opacity = interpolate(frame, [0, 2 * fps], [0, 1], { + extrapolateRight: "clamp", + }); + + return
Hello World!
; +}; +``` + +CSS transitions or animations are FORBIDDEN - they will not render correctly. +Tailwind animation class names are FORBIDDEN - they will not render correctly. diff --git a/bundled-skills/remotion/rules/assets.md b/bundled-skills/remotion/rules/assets.md new file mode 100644 index 0000000..a5d4015 --- /dev/null +++ b/bundled-skills/remotion/rules/assets.md @@ -0,0 +1,78 @@ +--- +name: assets +description: Importing images, videos, audio, and fonts into Remotion +metadata: + tags: assets, staticFile, images, fonts, public +--- + +# Importing assets in Remotion + +## The public folder + +Place assets in the `public/` folder at your project root. + +## Using staticFile() + +You MUST use `staticFile()` to reference files from the `public/` folder: + +```tsx +import { Img, staticFile } from "remotion"; + +export const MyComposition = () => { + return ; +}; +``` + +The function returns an encoded URL that works correctly when deploying to subdirectories. + +## Using with components + +**Images:** + +```tsx +import { Img, staticFile } from "remotion"; + +; +``` + +**Videos:** + +```tsx +import { Video } from "@remotion/media"; +import { staticFile } from "remotion"; + +