重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
remotion-component-gen by ncklrs/startup-os-skills
npx skills add https://github.com/ncklrs/startup-os-skills --skill remotion-component-gen根据视觉指导和动画规范生成可用于生产的 Remotion 场景组件实现。此技能专注于创建完整、可运行的场景组件。
生成以下场景组件代码:
范围内:
范围外:
/remotion-animation)/remotion-composition)/remotion-scaffold)/remotion-asset-coordinator)广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
接受包含视觉和动画细节的场景描述:
来自动效规范:
## 场景 1:Logo 展示 (0s - 5s)
**视觉描述:**
- 深色背景上居中的 Logo
- Logo 使用平滑 spring 从 0.8 缩放到 1.0
- Logo 下方淡入副标题文本
- 背景色:#0A0A0A(黑色)
- Logo 颜色:#FF6B35(主色)
**动画细节:**
- Logo 入场:帧 0-30
- Spring 配置:smooth (damping: 200)
- 缩放:0.8 → 1.0
- 不透明度:0 → 1
- 副标题显示:帧 20-50
- 带轻微向上移动的淡入效果
- TranslateY:20px → 0
- 不透明度:0 → 1
**资源:**
- Logo:public/images/logo.svg
来自自然语言:
创建 Scene1Intro,包含居中的 Logo,使用 spring 动画从 0.8 缩放到 1.0。
在 Logo 下方添加淡入的副标题文本。
Logo 使用平滑 spring 动画,文本使用线性淡入。
生成完整的场景组件实现:
# 场景组件:Scene1Intro
## 状态
✅ 组件实现完成
⏳ 准备集成到合成中
## 组件代码
文件:`scenes/Scene1Intro.tsx`
```typescript
import {
AbsoluteFill,
spring,
interpolate,
useCurrentFrame,
useVideoConfig,
Img,
staticFile,
} from "remotion";
import { COLORS, SPRING_CONFIGS } from "../constants";
export function Scene1Intro() {
const frame = useCurrentFrame();
const { fps, width, height } = useVideoConfig();
// Logo 入场动画(帧 0-30)
const logoProgress = spring({
frame,
fps,
config: SPRING_CONFIGS.smooth,
});
const logoScale = interpolate(logoProgress, [0, 1], [0.8, 1]);
const logoOpacity = logoProgress;
// 副标题显示动画(帧 20-50)
const subtitleProgress = interpolate(
frame,
[20, 50],
[0, 1],
{
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp',
}
);
const subtitleTranslateY = interpolate(subtitleProgress, [0, 1], [20, 0]);
const subtitleOpacity = subtitleProgress;
return (
<AbsoluteFill
style={{
backgroundColor: COLORS.background,
justifyContent: "center",
alignItems: "center",
}}
>
{/* Logo */}
<div
style={{
transform: `scale(${logoScale})`,
opacity: logoOpacity,
}}
>
<Img
src={staticFile("images/logo.svg")}
style={{
width: 400,
height: 400,
}}
/>
</div>
{/* 副标题 */}
<div
style={{
position: "absolute",
top: height / 2 + 250,
transform: `translateY(${subtitleTranslateY}px)`,
opacity: subtitleOpacity,
}}
>
<h2
style={{
color: COLORS.text,
fontSize: 48,
fontWeight: 600,
margin: 0,
}}
>
Innovation in Motion
</h2>
</div>
</AbsoluteFill>
);
}
export interface Scene1IntroProps {
// 如果场景需要自定义,在此处添加 props
}
// 更新组件:
export function Scene1Intro({}: Scene1IntroProps) {
// ...
}
import { Scene1Intro } from "./scenes/Scene1Intro";
// 在主合成中:
<Sequence
from={SCENE_TIMING.intro.start}
durationInFrames={SCENE_TIMING.intro.duration}
>
<Scene1Intro />
</Sequence>
public/images/logo.svg (400x400)/remotion-component-gen 调用进入下一个场景组件已实现
动画逻辑已集成
资源导入已配置
TypeScript 类型已定义
资源已添加到项目
已在预览中测试
基于 spring 的基本入场动画,包含缩放和淡入:
export function Scene() {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const progress = spring({
frame,
fps,
config: SPRING_CONFIGS.smooth,
});
const scale = interpolate(progress, [0, 1], [0.8, 1]);
return (
<AbsoluteFill
style={{
transform: `scale(${scale})`,
opacity: progress,
}}
>
{/* 内容 */}
</AbsoluteFill>
);
}
多个元素带有延迟动画:
export function Scene() {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const items = ['Feature 1', 'Feature 2', 'Feature 3'];
const STAGGER_DELAY = 10;
return (
<AbsoluteFill>
{items.map((item, index) => {
const itemProgress = spring({
frame: frame - (index * STAGGER_DELAY),
fps,
config: SPRING_CONFIGS.snappy,
});
const translateX = interpolate(itemProgress, [0, 1], [-50, 0]);
return (
<div
key={index}
style={{
transform: `translateX(${translateX}px)`,
opacity: itemProgress,
marginBottom: 20,
}}
>
<h3>{item}</h3>
</div>
);
})}
</AbsoluteFill>
);
}
逐字符或逐词显示:
export function Scene() {
const frame = useCurrentFrame();
const text = "Hello World";
const CHARS_PER_FRAME = 2;
const charsToShow = Math.min(
text.length,
Math.floor(frame / CHARS_PER_FRAME)
);
return (
<AbsoluteFill>
<h1 style={{ fontSize: 72 }}>
{text.slice(0, charsToShow)}
{charsToShow < text.length && (
<span style={{ opacity: Math.sin(frame * 0.3) * 0.5 + 0.5 }}>
|
</span>
)}
</h1>
</AbsoluteFill>
);
}
此技能在以下流程中工作:
remotion-component-gen(此技能)
↓ 输出:SCENE_COMPONENT.md(每个场景)
↓ 使用:ANIMATION_CONFIG.md(来自 remotion-animation)
↓ 使用:COMPOSITION_STRUCTURE.md(用于时序上下文)
与以下技能协同工作:
/motion-designer — 来自设计规范的视觉指导/remotion-animation — 使用来自此技能的 spring 配置和时序/remotion-composition — 场景适配来自此技能的时序结构/remotion-scaffold — 组件添加到脚手架项目/remotion-asset-coordinator — 资源获取并准备导入/remotion-spec-translator — 由此技能编排以实现完整翻译此技能生成可用于生产的场景组件实现,将动效设计规范在 Remotion 中变为现实。
每周安装量
55
仓库
GitHub 星标数
13
首次出现
2026年1月27日
安全审计
安装于
opencode51
codex49
gemini-cli49
github-copilot49
cursor46
claude-code45
Generates production-ready Remotion scene component implementations from visual direction and animation specifications. This skill focuses on creating complete, working scene components.
Generates scene component code for:
IN SCOPE:
OUT OF SCOPE:
/remotion-animation)/remotion-composition)/remotion-scaffold)/remotion-asset-coordinator)Accepts scene description with visual and animation details:
From Motion Spec:
## Scene 1: Logo Reveal (0s - 5s)
**Visual Description:**
- Centered logo on dark background
- Logo scales from 0.8 to 1.0 with smooth spring
- Subtitle text fades in below logo
- Background: #0A0A0A (Black)
- Logo color: #FF6B35 (Primary)
**Animation Details:**
- Logo entrance: Frames 0-30
- Spring config: smooth (damping: 200)
- Scale: 0.8 → 1.0
- Opacity: 0 → 1
- Subtitle reveal: Frames 20-50
- Fade in with slight upward movement
- TranslateY: 20px → 0
- Opacity: 0 → 1
**Assets:**
- Logo: public/images/logo.svg
From Natural Language:
Create Scene1Intro with centered logo that springs in from 0.8 scale to 1.0.
Add subtitle text below that fades in after logo.
Use smooth spring animation for logo, linear fade for text.
Generates complete scene component implementation:
# Scene Component: Scene1Intro
## Status
✅ Component implementation complete
⏳ Ready for integration into composition
## Component Code
File: `scenes/Scene1Intro.tsx`
```typescript
import {
AbsoluteFill,
spring,
interpolate,
useCurrentFrame,
useVideoConfig,
Img,
staticFile,
} from "remotion";
import { COLORS, SPRING_CONFIGS } from "../constants";
export function Scene1Intro() {
const frame = useCurrentFrame();
const { fps, width, height } = useVideoConfig();
// Logo entrance animation (frames 0-30)
const logoProgress = spring({
frame,
fps,
config: SPRING_CONFIGS.smooth,
});
const logoScale = interpolate(logoProgress, [0, 1], [0.8, 1]);
const logoOpacity = logoProgress;
// Subtitle reveal animation (frames 20-50)
const subtitleProgress = interpolate(
frame,
[20, 50],
[0, 1],
{
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp',
}
);
const subtitleTranslateY = interpolate(subtitleProgress, [0, 1], [20, 0]);
const subtitleOpacity = subtitleProgress;
return (
<AbsoluteFill
style={{
backgroundColor: COLORS.background,
justifyContent: "center",
alignItems: "center",
}}
>
{/* Logo */}
<div
style={{
transform: `scale(${logoScale})`,
opacity: logoOpacity,
}}
>
<Img
src={staticFile("images/logo.svg")}
style={{
width: 400,
height: 400,
}}
/>
</div>
{/* Subtitle */}
<div
style={{
position: "absolute",
top: height / 2 + 250,
transform: `translateY(${subtitleTranslateY}px)`,
opacity: subtitleOpacity,
}}
>
<h2
style={{
color: COLORS.text,
fontSize: 48,
fontWeight: 600,
margin: 0,
}}
>
Innovation in Motion
</h2>
</div>
</AbsoluteFill>
);
}
export interface Scene1IntroProps {
// Add props here if scene needs customization
}
// Update component:
export function Scene1Intro({}: Scene1IntroProps) {
// ...
}
import { Scene1Intro } from "./scenes/Scene1Intro";
// In main composition:
<Sequence
from={SCENE_TIMING.intro.start}
durationInFrames={SCENE_TIMING.intro.duration}
>
<Scene1Intro />
</Sequence>
public/images/logo.svg (400x400)/remotion-component-gen callComponent implemented
Animation logic integrated
Asset imports configured
TypeScript types defined
Asset added to project
Tested in preview
Basic spring-based entrance with scale and fade:
export function Scene() {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const progress = spring({
frame,
fps,
config: SPRING_CONFIGS.smooth,
});
const scale = interpolate(progress, [0, 1], [0.8, 1]);
return (
<AbsoluteFill
style={{
transform: `scale(${scale})`,
opacity: progress,
}}
>
{/* Content */}
</AbsoluteFill>
);
}
Multiple elements with delayed animations:
export function Scene() {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const items = ['Feature 1', 'Feature 2', 'Feature 3'];
const STAGGER_DELAY = 10;
return (
<AbsoluteFill>
{items.map((item, index) => {
const itemProgress = spring({
frame: frame - (index * STAGGER_DELAY),
fps,
config: SPRING_CONFIGS.snappy,
});
const translateX = interpolate(itemProgress, [0, 1], [-50, 0]);
return (
<div
key={index}
style={{
transform: `translateX(${translateX}px)`,
opacity: itemProgress,
marginBottom: 20,
}}
>
<h3>{item}</h3>
</div>
);
})}
</AbsoluteFill>
);
}
Character-by-character or word-by-word reveal:
export function Scene() {
const frame = useCurrentFrame();
const text = "Hello World";
const CHARS_PER_FRAME = 2;
const charsToShow = Math.min(
text.length,
Math.floor(frame / CHARS_PER_FRAME)
);
return (
<AbsoluteFill>
<h1 style={{ fontSize: 72 }}>
{text.slice(0, charsToShow)}
{charsToShow < text.length && (
<span style={{ opacity: Math.sin(frame * 0.3) * 0.5 + 0.5 }}>
|
</span>
)}
</h1>
</AbsoluteFill>
);
}
This skill works within the pipeline:
remotion-component-gen (this skill)
↓ outputs: SCENE_COMPONENT.md (per scene)
↓ uses: ANIMATION_CONFIG.md (from remotion-animation)
↓ uses: COMPOSITION_STRUCTURE.md (for timing context)
Works with:
/motion-designer — Visual direction from design specs/remotion-animation — Uses spring configs and timing from this skill/remotion-composition — Scene fits within timing structure from this skill/remotion-scaffold — Components added to scaffolded project/remotion-asset-coordinator — Assets sourced and prepared for import/remotion-spec-translator — Orchestrated by this skill for full translationThis skill generates production-ready scene component implementations that bring motion design specs to life in Remotion.
Weekly Installs
55
Repository
GitHub Stars
13
First Seen
Jan 27, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode51
codex49
gemini-cli49
github-copilot49
cursor46
claude-code45
AI设计简报生成器shape:UX/UI设计规划工具,提升AI代码实现质量
6,900 周安装
社交媒体营销专家指南:Instagram、TikTok、LinkedIn平台策略与内容创作优化
833 周安装
钉钉消息发送技能指南:Webhook机器人、企业应用、工作通知、sessionWebhook全解析
804 周安装
OpenAI Skill Creator 指南:创建高效技能模块,扩展AI代理能力
832 周安装
uni-app跨平台开发框架:基于Vue.js一键发布iOS、Android、小程序和Web应用
819 周安装
Go语言学习指南:官方资源、社区与开发者动态,保持技术更新
845 周安装
stop-slop:AI写作优化工具 - 消除陈词滥调,提升文本真实性与可读性
834 周安装