菜单
Use when creating, rendering, and managing programmatic videos using Remotion (React-based video framework). Covers compositions, frame-driven animation, transitions, effects, captions, audio, voiceover, FFmpeg post-production, and professional SaaS-grade motion design.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/oyi77/1ai-skills --skill remotion命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Android and mobile application security testing — emulators, rooting, traffic interception, dynamic instrumentation. Use when testing mobile apps for vulnerabilities, reversing APKs, or bypassing security controls on Android.
Self-reflection + Self-criticism + Auto-learning from corrections + Self-organizing memory. Agent evaluates its own work, catches mistakes, and improves permanently. Use when working with self improving.
Plan and execute a comprehensive red team engagement covering reconnaissance through post-exploitation using MITRE ATT&CK-aligned TTPs to evaluate an organization's detection and response capabilities. Use when working with conducting full scope red team engagement.
基于 SOC 职业分类
正在显示 SKILL.md
| name | remotion |
| description | Use when creating, rendering, and managing programmatic videos using Remotion (React-based video framework). Covers compositions, frame-driven animation, transitions, effects, captions, audio, voiceover, FFmpeg post-production, and professional SaaS-grade motion design. |
| domain | content |
| author | oyi77 |
| license | Apache-2.0 |
| subdomain | content-creation |
| tags | ["content-creation","video-production","remotion","react","animation","motion-design","programmatic-video","ffmpeg","transitions"] |
| version | 1.0.0 |
Canonical source: remotion-dev/skills (401K+ installs on skills.sh). Companion skills: video-editor · video-gen · faceless-youtube · auto-clipper · b-roll-finder · Frontend: tailwind-advanced · frontend-design · shadcn-ui · design-tokens
Trigger phrases:
Use cases:
When NOT to use:
Remotion is a React-based framework for creating real MP4 videos programmatically. You write React components that read useCurrentFrame() and render what should appear at that instant. Remotion stitches every frame into a video file via headless Chromium + ffmpeg.
Key capabilities: frame-precise animation via interpolate/spring, timeline management via <Sequence>/, WebGL effects, captions (), audio visualization (), AI voiceover (ElevenLabs), bundled FFmpeg, and programmatic rendering via .
<TransitionSeries>@remotion/captions@remotion/media-utils@remotion/renderernpx create-video@latest my-video to bootstrap<Sequence> / <TransitionSeries> to orchestrate scenes@remotion/captionsnpx remotion render with fast settings (jpeg, high crf)Frame 0 Frame 1 Frame 2 ... Frame N
│ │ │ │
▼ ▼ ▼ ▼
React React React React
render render render render
│ │ │ │
▼ ▼ ▼ ▼
PNG PNG PNG ... PNG → ffmpeg → MP4
npx create-video@latest --yes --blank --no-tailwind my-video
cd my-video
npx remotion studio # Opens Remotion Studio preview
my-video/
├── src/
│ ├── Root.tsx # Register compositions
│ ├── MyVideo.tsx # Main composition component
│ └── components/ # Reusable animated components
├── public/ # Static assets (images, audio, fonts)
├── package.json
└── remotion.config.ts
import { Composition } from "remotion";
import { MyVideo } from "./MyVideo";
export const RemotionRoot: React.FC = () => (
<Composition
id="MyVideo"
component={MyVideo}
durationInFrames={900} // 30 seconds at 30fps
fps={30}
width={1920}
height={1080}
/>
);
calculateMetadataFor data-driven duration/dimensions/props:
import { CalculateMetadataFunction } from "remotion";
const calculateMetadata: CalculateMetadataFunction<MyProps> = async ({
props, abortSignal,
}) => {
const data = await fetch(`https://api.example.com/video/${props.id}`, {
signal: abortSignal,
}).then(r => r.json());
return {
durationInFrames: Math.ceil(data.duration * 30),
width: 1920,
height: 1080,
props: { ...props, videoUrl: data.url },
};
};
useCurrentFrame() — The ClockReturns the current frame number (0-indexed). Inside a <Sequence>, this is relative to the sequence start.
useVideoConfig() — The Constantsconst { fps, durationInFrames, width, height } = useVideoConfig();
interpolate() — The Mapper (PREFERRED)Your primary animation tool. Prefer interpolate() over spring() unless physics-based motion is explicitly needed.
import { interpolate, Easing } from "remotion";
// Basic fade — always clamp
const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
extrapolateRight: "clamp",
extrapolateLeft: "clamp",
});
// With Bézier easing (identical to CSS cubic-bezier)
const enter = interpolate(frame, [0, 45], [0, 1], {
easing: Easing.bezier(0.16, 1, 0.3, 1),
extrapolateLeft: "clamp",
extrapolateRight: "clamp",
});
Keep interpolate() inline in the style prop. Use individual CSS transform properties, NOT transform strings:
// ✅ CORRECT — editable in Remotion Studio
style={{
scale: interpolate(frame, [0, 100], [0, 1]),
translate: interpolate(frame, [0, 100], ["0px 0px", "100px 100px"]),
rotate: interpolate(frame, [0, 100], ["20deg", "90deg"]),
opacity: interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" }),
}}
// ❌ WRONG — not Studio-editable
const scale = interpolate(frame, [0, 100], [0, 1]);
style={{ transform: `scale(${scale})` }}
Only use transform strings for skew(), perspective(), or order-sensitive multi-transform chains.
| Curve | cubic-bezier | Use |
|---|---|---|
| Crisp UI entrance | (0.16, 1, 0.3, 1) | Strong ease-out, no overshoot |
| Editorial fade | (0.45, 0, 0.55, 1) | Balanced ease-in-out |
| Snappy pop | (0.34, 1.56, 0.64, 1) | Overshoot, then settle |
| Dramatic slow-in | (0.7, 0, 0.84, 0) | Long hold, fast release |
| Smooth decel | (0, 0, 0.2, 1) | Gentle landing |
spring() — The Physics EngineUse only when physics-based motion is explicitly needed. Always pass fps.
import { spring } from "remotion";
const scale = spring({
frame,
fps,
config: {
damping: 20,
stiffness: 200,
mass: 0.5,
overshootClamping: true,
},
});
| Style | damping | stiffness | mass | overshootClamping |
|---|---|---|---|---|
| Snappy (UI) | 20 | 200 | 0.5 | true |
| Smooth (text) | 15 | 100 | 1 | true |
| Bouncy (playful) | 8 | 180 | 1 | false |
| Gentle (bg) | 30 | 80 | 1.5 | true |
| Elastic (accent) | 5 | 150 | 0.8 | false |
Videos are watched differently than web pages are read. Design for quick understanding from the full frame.
<AbsoluteFill>Base layer for everything. Later children render on top.
import { AbsoluteFill } from "remotion";
<AbsoluteFill style={{
backgroundColor: "#FAFBFE",
justifyContent: "center",
alignItems: "center",
}}>
<MyContent />
</AbsoluteFill>
<Sequence> — Timeline ManagementUse sequences to mount/unmount components at specific times. Never use if (frame > X) for lifecycle.
import { Sequence } from "remotion";
<AbsoluteFill>
<Sequence durationInFrames={90}>
<Intro />
</Sequence>
<Sequence from={90} durationInFrames={630}>
<MainContent />
</Sequence>
<Sequence from={720} durationInFrames={180}>
<Outro />
</Sequence>
</AbsoluteFill>
useCurrentFrame() inside is relative to fromdurationInFrames (performance win)<AbsoluteFill>. Use layout="none" for flex/grid children.Remotion components are React — you can (and should) use frontend skills for styling, layout, and component design. But video has different constraints than web.
| Web Skill | How to use in Remotion |
|---|---|
| tailwind-advanced | Install via @remotion-dev/tailwind package. Use for rapid styling of cards, badges, layouts. |
| frontend-design | Typography hierarchy, spacing rhythm, visual hierarchy — all apply to video frames. |
| shadcn-ui | Use shadcn components (Card, Badge, Button) as visual building blocks in product demos and dashboard mockups. |
| design-tokens | Define brand colors, spacing, typography tokens once, use across all compositions. |
| styled-components | Works in Remotion. Good for dynamic styles driven by frame number. |
| Web Pattern | Why it fails in video |
|---|---|
@media queries / responsive breakpoints | Video has fixed dimensions (1920×1080). No responsive design. |
| CSS transitions / animations | FORBIDDEN — they desync from the frame clock. Use interpolate(). |
| Hover / focus states | No mouse in video. No interactive states. |
rem / em units | Use px — there's no root font-size to scale against. |
| Lazy loading / code splitting | Remotion renders every frame synchronously. No lazy loading. |
| Browser-specific hacks | Remotion uses headless Chromium. No cross-browser concerns. |
| SEO / accessibility | Not applicable to video output. |
px, never relative unitsinterpolate() calls in style prop for Studio editabilityscale, translate, rotate (not transform string)<AbsoluteFill>import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from "remotion";
const FeatureCard: React.FC<{ title: string; delay: number }> = ({ title, delay }) => {
const frame = useCurrentFrame();
const enter = interpolate(
Math.max(0, frame - delay),
[0, 20], [0, 1],
{ easing: Easing.bezier(0.16, 1, 0.3, 1), extrapolateRight: "clamp" }
);
return (
<div style={{
opacity: enter,
translate: `0px ${interpolate(enter, [0, 1], [30, 0])}px`,
background: "white",
borderRadius: 12,
padding: 32,
boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
maxWidth: 400,
}}>
<div style={{ fontSize: 28, fontWeight: 700, color: "#1a1a2e" }}>{title}</div>
</div>
);
};
<TransitionSeries>Install: npx remotion add @remotion/transitions
import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { fade } from "@remotion/transitions/fade";
<TransitionSeries>
<TransitionSeries.Sequence durationInFrames={90}>
<SceneA />
</TransitionSeries.Sequence>
<TransitionSeries.Transition
presentation={fade()}
timing={linearTiming({ durationInFrames: 15 })}
/>
<TransitionSeries.Sequence durationInFrames={90}>
<SceneB />
</TransitionSeries.Sequence>
</TransitionSeries>
| Transition | Import | Effect |
|---|---|---|
fade | @remotion/transitions/fade | Crossfade between scenes |
slide | @remotion/transitions/slide | Slide in direction |
wipe | @remotion/transitions/wipe | Wipe reveal |
clockWipe | @remotion/transitions/clock-wipe | Clock wipe |
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>
Install: npx remotion add @remotion/effects
Effects use WebGL2. Enable for renders:
import { Config } from '@remotion/cli/config';
Config.setChromiumOpenGlRenderer('angle');
import { Video } from '@remotion/media';
import { blur } from '@remotion/effects/blur';
<Video src="https://remotion.media/video.mp4" effects={[blur({ radius: 8 })]} />
blur · brightness · contrast · colorKey · duotone · grayscale · hue · invert · saturation · tint · thermalVision · linearProgressiveBlur · zoomBlur · dropShadow · glow · lightTrail · evolve · mirror · scale · chromaticAberration · fisheye · barrelDistortion · wave · pixelate · noise · vignette · scanlines · halftone · dotGrid · contourLines · whiteNoise · tvSignalOff
import { Audio } from "@remotion/media";
import { staticFile } from "remotion";
<Audio src={staticFile("bg-music.mp3")} volume={0.3} />
Use built-in SFX from @remotion/sfx:
import { Audio } from "@remotion/sfx";
<Audio src="https://remotion.media/whoosh.wav" />
Available SFX: whoosh · whip · page-turn · switch · mouse-click · shutter-modern · shutter-old · ding · snapchat-notification · record-scratch · anime-wow · wilhelm-scream · vine-boom · mac-quack · skedaddle + more at remotion.media
Install: npx remotion add @remotion/media-utils
import { useWindowedAudioData, visualizeAudio } from "@remotion/media-utils";
import { staticFile, useCurrentFrame, useVideoConfig } from "remotion";
const { audioData, dataOffsetInSeconds } = useWindowedAudioData({
src: staticFile("podcast.wav"),
frame, fps,
windowInSeconds: 30,
});
const frequencies = visualizeAudio({
fps, frame, audioData,
numberOfSamples: 256,
optimizeFor: "speed",
dataOffsetInSeconds,
});
// Render spectrum bars
<div style={{ display: "flex", alignItems: "flex-end", height: 200 }}>
{frequencies.map((v, i) => (
<div key={i} style={{
flex: 1, height: `${v * 100}%`,
backgroundColor: "#0b84f3", margin: "0 1px",
}} />
))}
</div>
Generate speech per scene, then use calculateMetadata to size the composition:
// generate-voiceover.ts
const response = await fetch(
`https://api.elevenlabs.io/v1/text-to-speech/${voiceId}`,
{
method: "POST",
headers: {
"xi-api-key": process.env.ELEVENLABS_API_KEY!,
"Content-Type": "application/json",
},
body: JSON.stringify({
text: "Welcome to the show.",
model_id: "eleven_multilingual_v2",
voice_settings: { stability: 0.5, similarity_boost: 0.75, style: 0.3 },
}),
},
);
const audioBuffer = Buffer.from(await response.arrayBuffer());
writeFileSync(`public/voiceover/scene-01.mp3`, audioBuffer);
Use calculateMetadata + getAudioDuration to dynamically set duration from audio length.
Install: npx remotion add @remotion/captions
import type { Caption } from "@remotion/captions";
type Caption = {
text: string;
startMs: number;
endMs: number;
timestampMs: number | null;
confidence: number | null;
};
.srt files into Caption[]<CaptionRenderer> for word-by-word highlightingNever use CSS @import or <link> — Remotion blocks rendering until loadFont() completes.
import { loadFont } from "@remotion/google-fonts/Inter";
const { fontFamily } = loadFont("normal", {
weights: ["400", "600", "700"],
subsets: ["latin"],
});
<AbsoluteFill style={{ fontFamily }}>
<h1 style={{ fontWeight: 700, fontSize: 84 }}>Hello</h1>
</AbsoluteFill>
staticFile() — Reference Public Assetsimport { Img, staticFile } from "remotion";
import { Video, Audio } from "@remotion/media";
<Img src={staticFile("logo.png")} style={{ width: 200 }} />
<Video src={staticFile("bg.mp4")} />
<Audio src={staticFile("music.mp3")} />
<Video src="https://remotion.media/video.mp4" />
FFmpeg is bundled with Remotion — no separate install needed.
npx remotion ffmpeg -i input.mp4 output.mp3
npx remotion ffprobe input.mp4
import { Video } from "@remotion/media";
<Video src={staticFile("video.mp4")} trimBefore={5 * fps} trimAfter={10 * fps} />
# Add captions
npx remotion ffmpeg -i input.mp4 -vf subtitles=captions.srt output.mp4
# Merge clips
npx remotion ffmpeg -f concat -safe 0 -i filelist.txt -c copy merged.mp4
# Optimize for platform
npx remotion ffmpeg -i input.mp4 -vf "scale=1080:1920" -c:v libx264 -preset slow -crf 22 tiktok.mp4
# Add watermark
npx remotion ffmpeg -i input.mp4 -i logo.png -filter_complex "overlay=W-w-10:H-h-10" watermarked.mp4
| Platform | Resolution | Aspect | Max Length | Format |
|---|---|---|---|---|
| YouTube | 1920×1080 | 16:9 | Unlimited | MP4 |
| Instagram Feed | 1080×1080 | 1:1 | 60s | MP4 |
| Instagram Reels | 1080×1920 | 9:16 | 90s | MP4 |
| TikTok | 1080×1920 | 9:16 | 10min | MP4 |
| 1920×1080 | 16:9 | 10min | MP4 | |
| X / Twitter | 1280×720 | 16:9 | 2:20 | MP4 |
Clean white background, dashboard mockups floating in with orchestrated timing.
// Brand reveal → dashboard showcase → CTA
<AbsoluteFill>
<Sequence from={0} durationInFrames={150}>
<BrandReveal /> {/* Logo + tagline fade in */}
</Sequence>
<Sequence from={150} durationInFrames={900}>
<DashboardScene /> {/* Sidebar + floating cards */}
</Sequence>
<Sequence from={1050} durationInFrames={300}>
<ClosingCTA /> {/* Fade to white, CTA */}
</Sequence>
</AbsoluteFill>
const FloatingCard: React.FC<{
delay: number;
direction: "left" | "right" | "up";
children: React.ReactNode;
}> = ({ delay, direction, children }) => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const enter = interpolate(
Math.max(0, frame - delay),
[0, 20], [0, 1],
{ easing: Easing.bezier(0.16, 1, 0.3, 1), extrapolateRight: "clamp" }
);
const offsets = { left: [-120, 0], right: [120, 0], up: [0, -80] };
const [dx, dy] = offsets[direction];
return (
<div style={{
opacity: enter,
translate: `${interpolate(enter, [0, 1], [dx, 0])}px ${interpolate(enter, [0, 1], [dy, 0])}px`,
scale: interpolate(enter, [0, 1], [0.95, 1]),
}}>
{children}
</div>
);
};
{items.map((item, i) => {
const delay = i * 8;
const enter = interpolate(
Math.max(0, frame - delay),
[0, 20], [0, 1],
{ easing: Easing.bezier(0.16, 1, 0.3, 1), extrapolateRight: "clamp" }
);
return (
<div key={i} style={{
opacity: enter,
translate: `0px ${interpolate(enter, [0, 1], [30, 0])}px`,
}}>
{item}
</div>
);
})}
const TypewriterText: React.FC<{ text: string; cps?: number; startFrame?: number }> = ({
text, cps = 30, startFrame = 0,
}) => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const elapsed = Math.max(0, frame - startFrame);
const chars = Math.min(text.length, Math.floor(elapsed * (cps / fps)));
return (
<span>
{text.slice(0, chars)}
<span style={{ opacity: frame % 16 < 8 ? 1 : 0 }}>|</span>
</span>
);
};
const ParallaxScene: React.FC = () => {
const frame = useCurrentFrame();
const { durationInFrames } = useVideoConfig();
return (
<AbsoluteFill>
<AbsoluteFill style={{ translate: `${interpolate(frame, [0, durationInFrames], [0, -200])}px 0` }}>
{/* Background — sky, gradient */}
</AbsoluteFill>
<AbsoluteFill style={{ translate: `${interpolate(frame, [0, durationInFrames], [0, -400])}px 0` }}>
{/* Mid-ground — buildings */}
</AbsoluteFill>
<AbsoluteFill style={{ translate: `${interpolate(frame, [0, durationInFrames], [0, -600])}px 0` }}>
{/* Foreground — text, CTA */}
</AbsoluteFill>
</AbsoluteFill>
);
};
const BeatPulse: React.FC<{ bpm: number }> = ({ bpm }) => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const framesPerBeat = (fps * 60) / bpm;
const beatPhase = (frame % framesPerBeat) / framesPerBeat;
const pulse = interpolate(beatPhase, [0, 0.1, 0.3], [1, 1.05, 1], { extrapolateRight: "clamp" });
return <div style={{ scale: pulse }}>{/* Content */}</div>;
};
{
background: "#FAFBFE", // Near-white with blue tint
surface: "#FFFFFF", // Pure white cards
dark: "#1A1A2E", // Dark navy
text: "#1A1A2E",
textSecondary: "#6B7280", // Gray-500
accent: "#DDF2EE", // Mint green
accentDark: "#10B981", // Emerald-500
danger: "#EF4444",
border: "#E5E7EB",
}
{
background: "#0F0F1A",
surface: "#1A1A2E",
text: "#F1F1F1",
textSecondary: "#9CA3AF",
accent: "#818CF8", // Indigo-400
accentDark: "#6366F1",
border: "#2D2D44",
}
npx remotion studio
npx remotion still MyVideo --scale=0.25 --frame=30
npx remotion render src/index.ts MyVideo out/video.mp4
import { bundle } from "@remotion/bundler";
import { renderMedia, selectComposition } from "@remotion/renderer";
const bundled = await bundle({ entryPoint: "./src/index.ts" });
const composition = await selectComposition({ serveUrl: bundled, id: "MyVideo" });
await renderMedia({
composition, serveUrl: bundled,
codec: "h264",
outputLocation: "out/video.mp4",
crf: 18,
concurrency: 8,
imageFormat: "jpeg",
});
Via halt-catch-fire__skills__remotion-render (262K installs):
npx skills add belt-sh/cli
belt login
belt render ./my-video --provider inference-sh
| Setting | Fast Draft | Production | Max Quality |
|---|---|---|---|
imageFormat | jpeg | jpeg | png |
crf | 28 | 18 | 10 |
concurrency | 16 | 8 | 4 |
jpegQuality | 50 | 80 | 100 |
For AI-generated clips to embed in Remotion compositions, use these skills.sh models via RunComfy CLI:
| Model | Best For | Installs |
|---|---|---|
| HappyHorse 1.0 | Arena #1, native audio | 272K |
| Kling 3.0 | 4K, multi-shot identity | 303K |
| Seedance 2.0 Pro | Multi-modal cinematic, lip-sync | 220K |
| Veo 3-1 | Physics-respecting, video extend | 220K |
| Wan 2.7 | Audio-driven lip-sync | 327K |
[Subject] + [Action] + [Camera] + [Style] + [Audio]
Camera vocabulary: tracking shot · dolly zoom · aerial view · close-up · slow motion · time-lapse · pan left/right · zoom in/out · static · handheld
Style vocabulary: cinematic · 4K · film grain · shallow DOF · golden hour · dramatic shadows · soft diffused light · Blade Runner aesthetic · moody · vibrant
| Rationalization | Reality |
|---|---|
| "CSS animations are simpler" | CSS animations desync from the frame clock. Every pixel will be wrong on render. |
"I'll use transform: scale()" | Not editable in Remotion Studio. Use individual scale, translate, rotate properties. |
| "spring() looks better" | Official guidance: prefer interpolate() unless physics is explicitly needed. |
| "I'll hardcode frame numbers" | Breaks when fps changes. Always use fps from useVideoConfig(). |
"Regular <img> is fine" | Doesn't block render. Images flicker. Use Remotion's <Img>. |
| "CSS @import for fonts" | Render starts before fonts load. Use @remotion/google-fonts. |
| "Small text looks clean" | Video is watched at distance. Main headline ≥84px at 1080p. |
| "Show everything at once" | Crowded frames lose viewers. Solve crowding with time — reveal sequentially. |
| "Good enough motion" | Jarring timing and amateur easing are immediately visible. Polish the motion. |
"I don't need extrapolateRight: clamp" | Values continue past range — elements fly off screen. |
useCurrentFrame() — zero CSS animations/transitionsfps from useVideoConfig() — zero hardcoded frame numbersinterpolate calls have extrapolateRight: "clamp"transform strings) where possibleinterpolate preferred over spring for standard animations@remotion/google-fonts, not CSS<Img> from Remotion, not <img><Video> from @remotion/mediastaticFile()if (frame > X)<TransitionSeries>, not manual opacity hacks