跳到主内容
智客 ZICQ
EN 登录 / 注册

技能库 智客分类：设计创意 remotion-render

Remotion Render

React/Remotion组件代码的渲染视频通过推论.sh. 通过 TSX 代码,获得 MP4. 支持所有的Remotion API:使用CurrentFrame,使用VideoConfig,弹簧,插管,绝对Fill,序列. 可配置分辨率,FPS,持续时间,编码. 用于:程序视频生成,动画图形,运动设计,数据驱动视频,回放动画到视频. 触发器:回放,将视频从代码,tsx到视频,反应视频,程序视频,回放渲染,代码到视频,动画视频,动画代码,反应动画视频

14 安装量

官方网址：skills.sh

技能介绍

先看中文介绍；官方 description 原文单独保留，不改写 SKILL.md。

做什么

React/Remotion组件代码的渲染视频通过推论.sh. 通过 TSX 代码,获得 MP4. 支持所有的Remotion API:使用CurrentFrame,使用VideoConfig,弹簧,插管,绝对Fill,序列. 可配置分辨率,FPS,持续时间,编码. 用于:程序视频生成,动画图形,运动设计,数据驱动视频,回放动画到视频. 触发器:回放,将视频从代码,tsx到视频,反应视频,程序视频,回放渲染,代码到视频,动画视频,动画代码,反应动画视频

何时用

官方 description 未单独写出 Use when。按规范，代理会在用户任务与这段 description 的关键词匹配时激活本技能。

代理如何加载

按 Agent Skills 渐进披露：启动时只加载 name 与 description（约 100 token）；任务匹配后才读入整份 SKILL.md 正文；scripts/、references/、assets/ 仅在需要时再读。 本文件正文结构：Remotion Render、Quick Start、Render a simple animation、Input Schema、Available Imports、Examples。 其中含规范建议的小节：输入输出示例。

文件分析

文件分析：这是一份仅含 SKILL.md 的指令型技能，代理激活后整份正文进入上下文。

官方 description（原文）

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

Remotion RenderQuick StartRender a simple animationInput SchemaAvailable ImportsExamplesFade-In TextAnimated CounterSpring AnimationWith PropsSequence AnimationPython SDK

· allowed-tools：Bash(belt *)

来源分类：skills.sh agent-skill

来源与网址

市场来源：skills.sh

GitHub 完整包

开源榜 Skill 分类

SKILL.md 与 Agent 调用

官方规范 ↗
name
remotion-render
description
Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video
allowed-tools
Bash(belt *)实验字段，支持情况取决于客户端；字段声明本身不会授予工具权限。
  1. 发现技能客户端向 Agent 提供名称与描述目录。
  2. 匹配与调用用户指定或任务匹配后，载入 SKILL.md 指令。
  3. 按需加载按步骤读取参考文档、使用脚本与素材。

具体调用语法与可用工具以目标 Agent 客户端为准。 查看调用机制说明 ↗

安装这个技能

Skills CLI ↗

先选择目标 Agent 和安装范围，保留技能包的附属文件，安装后检查客户端能否发现该技能。

交给 Agent 安装

复制安装指令给支持 Agent Skills 的代理，确认其中的目标目录与客户端匹配。

把 Agent Skill「remotion-render」安装到我的项目：SKILL.md 原文与官方 description 见 https://zicq.com/zh/skills/skl-4a0bdc17f308ec08-Remotion-Render.html
请存为 .cursor/skills/remotion-render/SKILL.md 或 .claude/skills/remotion-render/SKILL.md，frontmatter 的 name 与 description 保持原样，不要改写。

GitHub 完整包 ↗

终端安装 · Skills CLI

需要 Node.js 与 npx。先查看仓库技能列表，确认实际名称。

npx skills add 'https://github.com/inference-sh/skills' --list

npx skills add 'https://github.com/inference-sh/skills' --skill 'remotion-render'

CLI 会交互选择目标 Agent，默认安装到项目；用户级安装使用 -g。先通过查看命令核对仓库内容，再用 npx skills list 检查已安装技能。

阅读排版
--- name: remotion-render description: "Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video" allowed-tools: Bash(belt *) --- > **Install the belt CLI skill:** `npx skills add belt-sh/cli` # Remotion Render Render videos from React/Remotion component code via [inference.sh](https://inference.sh) CLI. ![Remotion Render](https://cloud.inference.sh/app/files/u/4mg21r6ta37mpaz6ktzwtt8krr/01kg2c0egyg243mnyth4y6g51q.jpeg) ## Quick Start > Requires inference.sh CLI (`belt`). [Install instructions](https://raw.githubusercontent.com/inference-sh/skills/refs/heads/main/cli-install.md) ```bash belt login # Render a simple animation belt app run infsh/remotion-render --input '{ "code": "import { useCurrentFrame, AbsoluteFill } from \"remotion\"; export default function Main() { const frame = useCurrentFrame(); return

Hello World

; }", "duration_seconds": 3, "fps": 30, "width": 1920, "height": 1080 }' ``` ## Input Schema | Parameter | Type | Required | Description | |-----------|------|----------|-------------| | `code` | string | Yes | React component TSX code. Must export default a component. | | `composition_id` | string | No | Composition ID to render | | `props` | object | No | Props passed to the component | | `width` | number | No | Video width in pixels | | `height` | number | No | Video height in pixels | | `fps` | number | No | Frames per second | | `duration_seconds` | number | No | Video duration in seconds | | `codec` | string | No | Output codec | ## Available Imports Your TSX code can import from `remotion` and `react`: ```tsx // Remotion APIs import { useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence, Audio, Video, Img } from "remotion"; // React import React, { useState, useEffect } from "react"; ``` ## Examples ### Fade-In Text ```bash belt app run infsh/remotion-render --input '{ "code": "import { useCurrentFrame, AbsoluteFill, interpolate } from \"remotion\"; export default function Main() { const frame = useCurrentFrame(); const opacity = interpolate(frame, [0, 30], [0, 1]); return

Welcome

; }", "duration_seconds": 2, "fps": 30, "width": 1920, "height": 1080 }' ``` ### Animated Counter ```bash belt app run infsh/remotion-render --input '{ "code": "import { useCurrentFrame, useVideoConfig, AbsoluteFill } from \"remotion\"; export default function Main() { const frame = useCurrentFrame(); const { fps, durationInFrames } = useVideoConfig(); const progress = Math.floor((frame / durationInFrames) * 100); return

{progress}%

Loading...

; }", "duration_seconds": 5, "fps": 60, "width": 1080, "height": 1080 }' ``` ### Spring Animation ```bash belt app run infsh/remotion-render --input '{ "code": "import { useCurrentFrame, useVideoConfig, spring, AbsoluteFill } from \"remotion\"; export default function Main() { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const scale = spring({ frame, fps, config: { damping: 10, stiffness: 100 } }); return
; }", "duration_seconds": 2, "fps": 60, "width": 1080, "height": 1080 }' ``` ### With Props ```bash belt app run infsh/remotion-render --input '{ "code": "import { AbsoluteFill } from \"remotion\"; export default function Main({ title, subtitle }) { return

{title}

{subtitle}

; }", "props": {"title": "My Video", "subtitle": "Created with Remotion"}, "duration_seconds": 3, "fps": 30, "width": 1920, "height": 1080 }' ``` ### Sequence Animation ```bash belt app run infsh/remotion-render --input '{ "code": "import { useCurrentFrame, AbsoluteFill, Sequence, interpolate } from \"remotion\"; function FadeIn({ children }) { const frame = useCurrentFrame(); const opacity = interpolate(frame, [0, 20], [0, 1]); return
{children}
; } export default function Main() { return

First

Second

Third

; }", "duration_seconds": 4, "fps": 30, "width": 1920, "height": 1080 }' ``` ## Python SDK ```python from inferencesh import inference client = inference() result = client.run({ "app": "infsh/remotion-render", "input": { "code": """ import { useCurrentFrame, AbsoluteFill, interpolate } from "remotion"; export default function Main() { const frame = useCurrentFrame(); const opacity = interpolate(frame, [0, 30], [0, 1]); return (

Hello from Python

); } """, "duration_seconds": 3, "fps": 30, "width": 1920, "height": 1080 } }) print(result["output"]["video"]) ``` ### Streaming Progress ```python for update in client.run({ "app": "infsh/remotion-render", "input": { "code": "...", "duration_seconds": 10 } }, stream=True): if update.get("progress"): print(f"Rendering: {update['progress']}%") if update.get("output"): print(f"Video: {update['output']['video']}") ``` ## Related Skills ```bash # Remotion best practices (component patterns) npx skills add remotion-dev/skills@remotion-best-practices # AI video generation (for AI-generated clips) npx skills add inference-sh/skills@ai-video-generation # Image generation (for video assets) npx skills add inference-sh/skills@ai-image-generation # Python SDK reference npx skills add inference-sh/skills@python-sdk # Full platform skill npx skills add inference-sh/skills@infsh-cli ``` ## Documentation - [Remotion Documentation](https://www.remotion.dev/docs) - Official Remotion docs - [Running Apps](https://inference.sh/docs/apps/running) - How to run apps via CLI - [Streaming Results](https://inference.sh/docs/api/sdk/streaming) - Real-time progress updates

相关技能

设计创意

Automation Workflows

设计和实施自动化工作流程,以节省时间和规模化操作作为独家. 用于识别重复任务实现自动化,构建跨工具的工作流程,设置触发器和行动,或优化现有自动化. 包括自动化机会识别,工作流程设计,工具选择(Zapier,Make,n8n),测试,和维护. 触发"自动","自动","工作流程自动…

设计创意

Ui Ux Pro Max

UI/UX设计智能及建筑抛光接口实施指导. 当用户要求UI设计,UX流量,信息架构,视觉风格方向,设计系统/托盘,组件规格,副本/显微镜,可访问性,或生成/critique/refine前端UI(HTML/CSS/JS,React,Next.js,Vue,Svelte,Tailw…

设计创意

Frontend Design

创建美丽现代UI的专家前端设计指南. 在构建起落架页面,仪表板,或任何用户界面时使用.

设计创意

N8n Workflow Automation

设计和输出 n8n 工作流程 JSON 有强力触发器, idempotency, 错误处理, 记录, 重试, 以及 人入"一站"审查队列. 当您需要可审计的自动化时使用.