dsh-remotion 0.3.2 → 0.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.en.md +4 -4
- package/README.md +4 -4
- package/package.json +4 -3
- package/scripts/.skill-port-meta.json +50 -0
- package/scripts/sync-skills.mjs +65 -0
- package/skills/remotion-best-practices/SKILL.md +18 -17
- package/skills/remotion-best-practices/agents/openai.yaml +2 -2
- package/skills/remotion-best-practices/assets/remotion-icon.svg +4 -0
- package/skills/remotion-best-practices/remotion-captions/{SKILL.md → REFERENCE.md} +1 -1
- package/skills/remotion-best-practices/remotion-captions/agents/openai.yaml +2 -2
- package/skills/remotion-best-practices/remotion-captions/assets/remotion-icon.svg +4 -0
- package/skills/remotion-best-practices/remotion-create/{SKILL.md → REFERENCE.md} +26 -9
- package/skills/remotion-best-practices/remotion-create/agents/openai.yaml +2 -2
- package/skills/remotion-best-practices/remotion-create/assets/remotion-icon.svg +4 -0
- package/skills/remotion-best-practices/remotion-docs/{SKILL.md → REFERENCE.md} +2 -2
- package/skills/remotion-best-practices/remotion-docs/agents/openai.yaml +2 -2
- package/skills/remotion-best-practices/remotion-docs/assets/remotion-icon.svg +4 -0
- package/skills/remotion-best-practices/remotion-interactivity/{SKILL.md → REFERENCE.md} +69 -1
- package/skills/remotion-best-practices/remotion-interactivity/agents/openai.yaml +2 -2
- package/skills/remotion-best-practices/remotion-interactivity/assets/remotion-icon.svg +4 -0
- package/skills/{remotion-markup/remotion-maps/SKILL.md → remotion-best-practices/remotion-maps/REFERENCE.md} +1 -1
- package/skills/remotion-best-practices/remotion-maps/agents/openai.yaml +2 -2
- package/skills/remotion-best-practices/remotion-maps/assets/remotion-icon.svg +4 -0
- package/skills/remotion-best-practices/remotion-maps/techniques/maplibre/TECHNIQUE.md +21 -2
- package/skills/remotion-best-practices/remotion-maps/techniques/static-map/TECHNIQUE.md +1 -1
- package/skills/remotion-best-practices/remotion-markup/{SKILL.md → REFERENCE.md} +19 -26
- package/skills/remotion-best-practices/remotion-markup/agents/openai.yaml +2 -2
- package/skills/remotion-best-practices/remotion-markup/assets/remotion-icon.svg +4 -0
- package/skills/remotion-best-practices/remotion-markup/audio.md +3 -5
- package/skills/remotion-best-practices/remotion-markup/compositions.md +11 -5
- package/skills/remotion-best-practices/remotion-markup/connected-compositions.md +79 -0
- package/skills/remotion-best-practices/remotion-markup/cropping.md +1 -1
- package/skills/remotion-best-practices/remotion-markup/embedding-videos.md +3 -5
- package/skills/remotion-best-practices/remotion-markup/motion-blur.md +60 -0
- package/skills/remotion-best-practices/remotion-markup/multi-scene-video.md +64 -64
- package/skills/remotion-best-practices/{remotion-maps/SKILL.md → remotion-markup/remotion-maps/REFERENCE.md} +1 -1
- package/skills/remotion-best-practices/remotion-markup/remotion-maps/agents/openai.yaml +2 -2
- package/skills/remotion-best-practices/remotion-markup/remotion-maps/assets/remotion-icon.svg +4 -0
- package/skills/remotion-best-practices/remotion-markup/remotion-maps/techniques/maplibre/TECHNIQUE.md +21 -2
- package/skills/remotion-best-practices/remotion-markup/remotion-maps/techniques/static-map/TECHNIQUE.md +1 -1
- package/skills/remotion-best-practices/remotion-markup/text-highlights.md +1 -1
- package/skills/remotion-best-practices/remotion-multimedia/{SKILL.md → REFERENCE.md} +1 -1
- package/skills/remotion-best-practices/remotion-multimedia/agents/openai.yaml +2 -2
- package/skills/remotion-best-practices/remotion-multimedia/assets/remotion-icon.svg +4 -0
- package/skills/remotion-best-practices/remotion-render/{SKILL.md → REFERENCE.md} +9 -1
- package/skills/remotion-best-practices/remotion-render/agents/openai.yaml +2 -2
- package/skills/remotion-best-practices/remotion-render/assets/remotion-icon.svg +4 -0
- package/skills/remotion-best-practices/remotion-saas/{SKILL.md → REFERENCE.md} +1 -1
- package/skills/remotion-best-practices/remotion-saas/agents/openai.yaml +2 -2
- package/skills/remotion-best-practices/remotion-saas/assets/remotion-icon.svg +4 -0
- package/skills/remotion-best-practices/remotion-saas/framework.md +1 -3
- package/skills/remotion-best-practices/remotion-studio/{SKILL.md → REFERENCE.md} +1 -1
- package/skills/remotion-best-practices/remotion-studio/agents/openai.yaml +2 -2
- package/skills/remotion-best-practices/remotion-studio/assets/remotion-icon.svg +4 -0
- package/skills/remotion-best-practices/remotion-upgrade/{SKILL.md → REFERENCE.md} +3 -3
- package/skills/remotion-best-practices/remotion-upgrade/agents/openai.yaml +2 -2
- package/skills/remotion-best-practices/remotion-upgrade/assets/remotion-icon.svg +4 -0
- package/skills/remotion-captions/SKILL.md +6 -5
- package/skills/remotion-captions/agents/openai.yaml +2 -2
- package/skills/remotion-captions/assets/remotion-icon.svg +4 -0
- package/skills/remotion-create/SKILL.md +32 -14
- package/skills/remotion-create/agents/openai.yaml +2 -2
- package/skills/remotion-create/assets/remotion-icon.svg +4 -0
- package/skills/remotion-docs/SKILL.md +7 -6
- package/skills/remotion-docs/agents/openai.yaml +2 -2
- package/skills/remotion-docs/assets/remotion-icon.svg +4 -0
- package/skills/remotion-interactivity/SKILL.md +75 -6
- package/skills/remotion-interactivity/agents/openai.yaml +2 -2
- package/skills/remotion-interactivity/assets/remotion-icon.svg +4 -0
- package/skills/remotion-maps/SKILL.md +6 -5
- package/skills/remotion-maps/agents/openai.yaml +2 -2
- package/skills/remotion-maps/assets/remotion-icon.svg +4 -0
- package/skills/remotion-maps/techniques/maplibre/TECHNIQUE.md +21 -2
- package/skills/remotion-maps/techniques/static-map/TECHNIQUE.md +1 -1
- package/skills/remotion-markup/SKILL.md +24 -30
- package/skills/remotion-markup/agents/openai.yaml +2 -2
- package/skills/remotion-markup/assets/remotion-icon.svg +4 -0
- package/skills/remotion-markup/audio.md +3 -5
- package/skills/remotion-markup/calculate-metadata.md +2 -2
- package/skills/remotion-markup/compositions.md +11 -5
- package/skills/remotion-markup/connected-compositions.md +79 -0
- package/skills/remotion-markup/cropping.md +1 -1
- package/skills/remotion-markup/embedding-videos.md +3 -5
- package/skills/remotion-markup/motion-blur.md +60 -0
- package/skills/remotion-markup/multi-scene-video.md +64 -64
- package/skills/{remotion-best-practices/remotion-markup/remotion-maps/SKILL.md → remotion-markup/remotion-maps/REFERENCE.md} +1 -1
- package/skills/remotion-markup/remotion-maps/agents/openai.yaml +2 -2
- package/skills/remotion-markup/remotion-maps/assets/remotion-icon.svg +4 -0
- package/skills/remotion-markup/remotion-maps/techniques/maplibre/TECHNIQUE.md +21 -2
- package/skills/remotion-markup/remotion-maps/techniques/static-map/TECHNIQUE.md +1 -1
- package/skills/remotion-markup/text-highlights.md +1 -1
- package/skills/remotion-markup/voiceover.md +1 -1
- package/skills/remotion-multimedia/SKILL.md +6 -5
- package/skills/remotion-multimedia/agents/openai.yaml +2 -2
- package/skills/remotion-multimedia/assets/remotion-icon.svg +4 -0
- package/skills/remotion-render/SKILL.md +14 -5
- package/skills/remotion-render/agents/openai.yaml +2 -2
- package/skills/remotion-render/assets/remotion-icon.svg +4 -0
- package/skills/remotion-saas/SKILL.md +6 -5
- package/skills/remotion-saas/agents/openai.yaml +2 -2
- package/skills/remotion-saas/assets/remotion-icon.svg +4 -0
- package/skills/remotion-saas/framework.md +1 -3
- package/skills/remotion-studio/SKILL.md +6 -5
- package/skills/remotion-studio/agents/openai.yaml +2 -2
- package/skills/remotion-studio/assets/remotion-icon.svg +4 -0
- package/skills/remotion-upgrade/SKILL.md +8 -7
- package/skills/remotion-upgrade/agents/openai.yaml +2 -2
- package/skills/remotion-upgrade/assets/remotion-icon.svg +4 -0
- package/skills/remotion-best-practices/assets/remotion-icon.png +0 -0
- package/skills/remotion-best-practices/remotion-captions/assets/remotion-icon.png +0 -0
- package/skills/remotion-best-practices/remotion-create/assets/remotion-icon.png +0 -0
- package/skills/remotion-best-practices/remotion-docs/assets/remotion-icon.png +0 -0
- package/skills/remotion-best-practices/remotion-interactivity/assets/remotion-icon.png +0 -0
- package/skills/remotion-best-practices/remotion-maps/assets/remotion-icon.png +0 -0
- package/skills/remotion-best-practices/remotion-markup/assets/remotion-icon.png +0 -0
- package/skills/remotion-best-practices/remotion-markup/remotion-maps/assets/remotion-icon.png +0 -0
- package/skills/remotion-best-practices/remotion-multimedia/assets/remotion-icon.png +0 -0
- package/skills/remotion-best-practices/remotion-render/assets/remotion-icon.png +0 -0
- package/skills/remotion-best-practices/remotion-saas/assets/remotion-icon.png +0 -0
- package/skills/remotion-best-practices/remotion-studio/assets/remotion-icon.png +0 -0
- package/skills/remotion-best-practices/remotion-upgrade/assets/remotion-icon.png +0 -0
- package/skills/remotion-captions/assets/remotion-icon.png +0 -0
- package/skills/remotion-create/assets/remotion-icon.png +0 -0
- package/skills/remotion-docs/assets/remotion-icon.png +0 -0
- package/skills/remotion-interactivity/assets/remotion-icon.png +0 -0
- package/skills/remotion-maps/assets/remotion-icon.png +0 -0
- package/skills/remotion-markup/assets/remotion-icon.png +0 -0
- package/skills/remotion-markup/remotion-maps/assets/remotion-icon.png +0 -0
- package/skills/remotion-multimedia/assets/remotion-icon.png +0 -0
- package/skills/remotion-render/assets/remotion-icon.png +0 -0
- package/skills/remotion-saas/assets/remotion-icon.png +0 -0
- package/skills/remotion-studio/assets/remotion-icon.png +0 -0
- package/skills/remotion-upgrade/assets/remotion-icon.png +0 -0
package/README.en.md
CHANGED
|
@@ -6,11 +6,11 @@
|
|
|
6
6
|
|
|
7
7
|
[](https://awesome-dsh-plugin.com)
|
|
8
8
|
|
|
9
|
-
DSH (DeepSeek Harness) video-creation skill plugin: installing it registers the official Remotion skill into DSH (programmatic video with React: animation, audio, captions, 3D, charts, fonts; synced with the official Remotion v4.0.
|
|
9
|
+
DSH (DeepSeek Harness) video-creation skill plugin: installing it registers the official Remotion skill into DSH (programmatic video with React: animation, audio, captions, 3D, charts, fonts; synced with the official Remotion v4.0.529 twelve-skill structure).
|
|
10
10
|
|
|
11
11
|
## Compatibility
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
Validation host: Harness `0.2.0-rc.1` built from official sources (commit `407e65c8`) with Node `24.16.0` on 2026-09-28. All 23 plugin tests pass in an isolated environment; all 18 plugins mount together in one host registering 12 skills and 1 tools, with tool schemas and health-check contracts passing. No live ports or external services were exercised in this round.
|
|
14
14
|
|
|
15
15
|
## Installation
|
|
16
16
|
|
|
@@ -31,7 +31,7 @@ Then restart the web service. To clean up fully, also remove the plugin entry fr
|
|
|
31
31
|
|
|
32
32
|
## Contents
|
|
33
33
|
|
|
34
|
-
- **remotion-best-practices** (router hub) + 11 domain skills (captions/create/docs/interactivity/maps/markup/multimedia/render/saas/studio/upgrade), synced from official Remotion v4.0.
|
|
34
|
+
- **remotion-best-practices** (router hub) + 11 domain skills (captions/create/docs/interactivity/maps/markup/multimedia/render/saas/studio/upgrade), synced from official Remotion v4.0.529
|
|
35
35
|
|
|
36
36
|
## Requirements
|
|
37
37
|
|
|
@@ -39,7 +39,7 @@ Node.js ≥ 22 + npx (npm registry); rendering needs ffmpeg (guided by the skill
|
|
|
39
39
|
|
|
40
40
|
## Porting notes
|
|
41
41
|
|
|
42
|
-
Synced from the official `remotion-dev/
|
|
42
|
+
Synced from the official `remotion-dev/skills` checkout at v4.0.529 (2026-09-25): upstream skill bodies are vendored as-is, including the embedded reference copies under `remotion-best-practices/` and `remotion-markup/`, with `scripts/sync-skills.mjs` making the port repeatable and checkable. Only the frontmatter is ours (`name`/`description` plus the upstream `version`).
|
|
43
43
|
|
|
44
44
|
## Multi-harness
|
|
45
45
|
|
package/README.md
CHANGED
|
@@ -9,11 +9,11 @@
|
|
|
9
9
|
[](https://awesome-dsh-plugin.com)
|
|
10
10
|
|
|
11
11
|
|
|
12
|
-
DSH(DeepSeek Harness)视频创作技能插件:**安装即把 Remotion 官方移植技能注册进 DSH**(React 编程式视频:动画、音频、字幕、3D、图表、字体等;同步 Remotion 官方 v4.0.
|
|
12
|
+
DSH(DeepSeek Harness)视频创作技能插件:**安装即把 Remotion 官方移植技能注册进 DSH**(React 编程式视频:动画、音频、字幕、3D、图表、字体等;同步 Remotion 官方 v4.0.529 的 12 技能结构)。
|
|
13
13
|
|
|
14
14
|
## 兼容性
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
验证宿主:官方源码构建的 Harness `0.2.0-rc.1`(commit `407e65c8`)+ Node `24.16.0`(2026-09-28)。23 项插件测试在隔离环境全部通过;同一个宿主里 18 个插件共同加载,注册 12 个技能、1 个工具,工具 schema 与健康检查契约通过。本轮未启用真实端口与外部服务。
|
|
17
17
|
|
|
18
18
|
## 安装
|
|
19
19
|
|
|
@@ -34,7 +34,7 @@ dsh plugin --profile web remove dsh-remotion
|
|
|
34
34
|
|
|
35
35
|
## 技能内容
|
|
36
36
|
|
|
37
|
-
- **remotion-best-practices**(总纲路由)+ 11 个领域技能(captions/create/docs/interactivity/maps/markup/multimedia/render/saas/studio/upgrade),同步自 Remotion 官方 v4.0.
|
|
37
|
+
- **remotion-best-practices**(总纲路由)+ 11 个领域技能(captions/create/docs/interactivity/maps/markup/multimedia/render/saas/studio/upgrade),同步自 Remotion 官方 v4.0.529
|
|
38
38
|
|
|
39
39
|
## 依赖
|
|
40
40
|
|
|
@@ -42,7 +42,7 @@ Node.js ≥ 22 + npx(npm registry);渲染需 ffmpeg(Remotion 自带指
|
|
|
42
42
|
|
|
43
43
|
## 移植说明
|
|
44
44
|
|
|
45
|
-
|
|
45
|
+
技能同步自官方 `remotion-dev/skills` 检出 v4.0.529(2026-09-25):上游正文原样引入(含 `remotion-best-practices/`、`remotion-markup/` 下的内嵌引用副本),仅把 frontmatter 换成本包的 `name`/`description` + 上游 `version`;`scripts/sync-skills.mjs` 让移植可复现、可校验(`--check`)。
|
|
46
46
|
|
|
47
47
|
## 跨平台使用
|
|
48
48
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "dsh-remotion",
|
|
3
|
-
"version": "0.3.
|
|
4
|
-
"description": "DSH 视频创作技能插件:注册 Remotion
|
|
3
|
+
"version": "0.3.4",
|
|
4
|
+
"description": "DSH 视频创作技能插件:注册 Remotion 官方 12 个技能(React 编程式视频:动画/音频/字幕/3D/地图/图表),安装即用。",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"types": "lib/index.d.ts",
|
|
@@ -18,7 +18,8 @@
|
|
|
18
18
|
"skills",
|
|
19
19
|
"cordis.patch.yml",
|
|
20
20
|
"README.md",
|
|
21
|
-
"README.en.md"
|
|
21
|
+
"README.en.md",
|
|
22
|
+
"scripts"
|
|
22
23
|
],
|
|
23
24
|
"scripts": {
|
|
24
25
|
"build": "tsc -p tsconfig.json",
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
{
|
|
2
|
+
"remotion-best-practices": {
|
|
3
|
+
"name": "remotion-best-practices",
|
|
4
|
+
"description": "Router for all Remotion skills"
|
|
5
|
+
},
|
|
6
|
+
"remotion-captions": {
|
|
7
|
+
"name": "remotion-captions",
|
|
8
|
+
"description": "Transcribing, displaying and animating captions"
|
|
9
|
+
},
|
|
10
|
+
"remotion-create": {
|
|
11
|
+
"name": "remotion-create",
|
|
12
|
+
"description": "Create a new Remotion video"
|
|
13
|
+
},
|
|
14
|
+
"remotion-docs": {
|
|
15
|
+
"name": "remotion-docs",
|
|
16
|
+
"description": "Search Remotion documentation"
|
|
17
|
+
},
|
|
18
|
+
"remotion-interactivity": {
|
|
19
|
+
"name": "remotion-interactivity",
|
|
20
|
+
"description": "Structure Remotion markup for interactivity"
|
|
21
|
+
},
|
|
22
|
+
"remotion-maps": {
|
|
23
|
+
"name": "remotion-maps",
|
|
24
|
+
"description": "Remotion Map animation knowledge"
|
|
25
|
+
},
|
|
26
|
+
"remotion-markup": {
|
|
27
|
+
"name": "remotion-markup",
|
|
28
|
+
"description": "Content, animation and effects best practices"
|
|
29
|
+
},
|
|
30
|
+
"remotion-multimedia": {
|
|
31
|
+
"name": "remotion-multimedia",
|
|
32
|
+
"description": "Interacting with Mediabunny"
|
|
33
|
+
},
|
|
34
|
+
"remotion-render": {
|
|
35
|
+
"name": "remotion-render",
|
|
36
|
+
"description": "Export a Remotion video"
|
|
37
|
+
},
|
|
38
|
+
"remotion-saas": {
|
|
39
|
+
"name": "remotion-saas",
|
|
40
|
+
"description": "Build an app with Remotion"
|
|
41
|
+
},
|
|
42
|
+
"remotion-studio": {
|
|
43
|
+
"name": "remotion-studio",
|
|
44
|
+
"description": "Preview a Remotion video"
|
|
45
|
+
},
|
|
46
|
+
"remotion-upgrade": {
|
|
47
|
+
"name": "remotion-upgrade",
|
|
48
|
+
"description": "Upgrade Remotion, and related packages"
|
|
49
|
+
}
|
|
50
|
+
}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
/**
|
|
3
|
+
* Vendor the official Remotion Agent Skills into this package.
|
|
4
|
+
*
|
|
5
|
+
* Source of truth: https://github.com/remotion-dev/skills at a pinned version.
|
|
6
|
+
* The upstream skill bodies are the product content; only the frontmatter is
|
|
7
|
+
* ours: an Agent Skills `name`/`description` plus the upstream `version`, with
|
|
8
|
+
* every other upstream key (e.g. allowed-tools) dropped so DSH registration
|
|
9
|
+
* stays on the documented keys.
|
|
10
|
+
*
|
|
11
|
+
* Usage:
|
|
12
|
+
* node scripts/sync-skills.mjs --upstream <path-to-remotion-dev/skills> [--check]
|
|
13
|
+
*/
|
|
14
|
+
import { cpSync, existsSync, mkdirSync, readFileSync, readdirSync, rmSync, writeFileSync } from 'node:fs'
|
|
15
|
+
import { join, resolve } from 'node:path'
|
|
16
|
+
import { fileURLToPath } from 'node:url'
|
|
17
|
+
import { parseArgs } from 'node:util'
|
|
18
|
+
|
|
19
|
+
const packageRoot = resolve(fileURLToPath(new URL('..', import.meta.url)))
|
|
20
|
+
const { values } = parseArgs({ options: { upstream: { type: 'string' }, check: { type: 'boolean', default: false } } })
|
|
21
|
+
if (!values.upstream) throw new Error('--upstream <path to a remotion-dev/skills checkout> is required')
|
|
22
|
+
|
|
23
|
+
const upstreamSkills = resolve(values.upstream, 'skills')
|
|
24
|
+
if (!existsSync(upstreamSkills)) throw new Error('No skills/ directory under ' + values.upstream)
|
|
25
|
+
const targetSkills = join(packageRoot, 'skills')
|
|
26
|
+
const meta = JSON.parse(readFileSync(join(packageRoot, 'scripts', '.skill-port-meta.json'), 'utf8'))
|
|
27
|
+
|
|
28
|
+
/** Upstream frontmatter -> our frontmatter: keep only the documented keys. */
|
|
29
|
+
const portFrontmatter = (text, fallback) => {
|
|
30
|
+
const match = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?/.exec(text)
|
|
31
|
+
if (!match) throw new Error('Missing frontmatter for ' + fallback.name)
|
|
32
|
+
const version = /^version:\s*(.+)$/m.exec(match[1])?.[1]?.trim()
|
|
33
|
+
const name = /^name:\s*(.+)$/m.exec(match[1])?.[1]?.trim() ?? fallback.name
|
|
34
|
+
const description = /^description:\s*(.+)$/m.exec(match[1])?.[1]?.trim() ?? fallback.description
|
|
35
|
+
if (!version) throw new Error('Missing upstream version for ' + name)
|
|
36
|
+
return ['---', 'name: ' + name, 'description: ' + description, 'version: ' + version, '---', '', text.slice(match[0].length).replace(/^\n+/, '')].join('\n')
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
if (!values.check) rmSync(targetSkills, { recursive: true, force: true })
|
|
40
|
+
mkdirSync(targetSkills, { recursive: true })
|
|
41
|
+
|
|
42
|
+
const skills = readdirSync(upstreamSkills, { withFileTypes: true }).filter((e) => e.isDirectory()).map((e) => e.name).sort()
|
|
43
|
+
const drift = []
|
|
44
|
+
for (const skill of skills) {
|
|
45
|
+
const from = join(upstreamSkills, skill)
|
|
46
|
+
const to = join(targetSkills, skill)
|
|
47
|
+
if (!values.check) cpSync(from, to, { recursive: true })
|
|
48
|
+
const fallback = meta[skill]
|
|
49
|
+
if (!fallback) throw new Error('No port metadata for upstream skill ' + skill + '; add it to scripts/.skill-port-meta.json')
|
|
50
|
+
const skillFile = join(to, 'SKILL.md')
|
|
51
|
+
if (!values.check) writeFileSync(skillFile, portFrontmatter(readFileSync(skillFile, 'utf8'), fallback))
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
// --check: the ported tree must match a fresh port of the same upstream
|
|
55
|
+
if (values.check) {
|
|
56
|
+
for (const skill of skills) {
|
|
57
|
+
const ported = readFileSync(join(targetSkills, skill, 'SKILL.md'), 'utf8')
|
|
58
|
+
const expected = portFrontmatter(readFileSync(join(upstreamSkills, skill, 'SKILL.md'), 'utf8'), meta[skill])
|
|
59
|
+
if (ported.replace(/\r\n/g, '\n') !== expected.replace(/\r\n/g, '\n')) drift.push(skill)
|
|
60
|
+
}
|
|
61
|
+
if (drift.length) throw new Error('Ported skills drift from upstream: ' + drift.join(', '))
|
|
62
|
+
console.log('Ported skills match upstream ' + join(values.upstream, 'package.json') + ' (' + skills.length + ' skills).')
|
|
63
|
+
} else {
|
|
64
|
+
console.log('Ported ' + skills.length + ' skills from ' + upstreamSkills + '. Rebuild and publish.')
|
|
65
|
+
}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: remotion-best-practices
|
|
3
|
-
description: Router for all Remotion skills
|
|
4
|
-
version: 4.0.
|
|
5
|
-
---
|
|
1
|
+
---
|
|
2
|
+
name: remotion-best-practices
|
|
3
|
+
description: Router for all Remotion skills
|
|
4
|
+
version: 4.0.529
|
|
5
|
+
---
|
|
6
|
+
|
|
6
7
|
|
|
7
8
|
## Preserve user changes
|
|
8
9
|
|
|
@@ -12,48 +13,48 @@ If you detect a surprising change made in the meanwhile, don't overwrite it, ass
|
|
|
12
13
|
|
|
13
14
|
## Creating a video
|
|
14
15
|
|
|
15
|
-
If the user asks to make, create, or build a new video or composition, load [Create a new Remotion video](./remotion-create/
|
|
16
|
+
If the user asks to make, create, or build a new video or composition, load [Create a new Remotion video](./remotion-create/REFERENCE.md), whether or not a Remotion project already exists.
|
|
16
17
|
|
|
17
18
|
## New project setup
|
|
18
19
|
|
|
19
|
-
If no Remotion project currently exists, load [Create a new Remotion project](./remotion-create/
|
|
20
|
+
If no Remotion project currently exists, load [Create a new Remotion project](./remotion-create/REFERENCE.md)
|
|
20
21
|
|
|
21
22
|
## React Markup Best Practices
|
|
22
23
|
|
|
23
|
-
If you are writing Remotion React Markup, load [Remotion Markup Best Practices](./remotion-markup/
|
|
24
|
+
If you are writing Remotion React Markup, load [Remotion Markup Best Practices](./remotion-markup/REFERENCE.md)
|
|
24
25
|
|
|
25
26
|
## Maps
|
|
26
27
|
|
|
27
|
-
For static maps, animated routes and markers, geographic explainers, Mapbox, MapLibre, MapTiler, GeoJSON, or 3D geographic flyovers, load [Remotion Maps](./remotion-maps/
|
|
28
|
+
For static maps, animated routes and markers, geographic explainers, Mapbox, MapLibre, MapTiler, GeoJSON, or 3D geographic flyovers, load [Remotion Maps](./remotion-maps/REFERENCE.md).
|
|
28
29
|
|
|
29
30
|
## Multimedia
|
|
30
31
|
|
|
31
|
-
For achieving multimedia tasks in the browser, such as trimming, cropping videos, or getting metadata from them, load [Remotion Multimedia](./remotion-multimedia/
|
|
32
|
+
For achieving multimedia tasks in the browser, such as trimming, cropping videos, or getting metadata from them, load [Remotion Multimedia](./remotion-multimedia/REFERENCE.md)
|
|
32
33
|
|
|
33
34
|
## Improving Interactivity
|
|
34
35
|
|
|
35
|
-
By structuring the Remotion markup well, we can allow users to interactively change things in the Studio and write back to code. If relevant: [Interactivity Best Practices](./remotion-interactivity/
|
|
36
|
+
By structuring the Remotion markup well, we can allow users to interactively change things in the Studio and write back to code. If relevant: [Interactivity Best Practices](./remotion-interactivity/REFERENCE.md)
|
|
36
37
|
|
|
37
38
|
## Rendering
|
|
38
39
|
|
|
39
|
-
For advanced rendering beyond simple `npx remotion render`, see: [Rendering Best Practices](./remotion-render/
|
|
40
|
+
For advanced rendering beyond simple `npx remotion render`, see: [Rendering Best Practices](./remotion-render/REFERENCE.md)
|
|
40
41
|
|
|
41
42
|
## Opening Remotion Studio
|
|
42
43
|
|
|
43
|
-
To launch a project in Remotion Studio, open its exact local URL, or configure Studio CLI flags, load [Remotion Studio](./remotion-studio/
|
|
44
|
+
To launch a project in Remotion Studio, open its exact local URL, or configure Studio CLI flags, load [Remotion Studio](./remotion-studio/REFERENCE.md).
|
|
44
45
|
|
|
45
46
|
## Captions
|
|
46
47
|
|
|
47
|
-
When working with Captions, load [Remotion Captions](./remotion-captions/
|
|
48
|
+
When working with Captions, load [Remotion Captions](./remotion-captions/REFERENCE.md).
|
|
48
49
|
|
|
49
50
|
## Creating a SaaS, automation or application
|
|
50
51
|
|
|
51
|
-
Use the [Remotion SaaS skill](./remotion-saas/
|
|
52
|
+
Use the [Remotion SaaS skill](./remotion-saas/REFERENCE.md) for knowledge about Remotion-powered SaaS apps, such as `<Player>`, rendering on Lambda, Vercel, Cloudflare, via Express.js, client-side rendering, or for finding the right SaaS template.
|
|
52
53
|
|
|
53
54
|
## Looking up Remotion APIs and documentation
|
|
54
55
|
|
|
55
|
-
To find and read current Remotion documentation, load [Remotion Docs](./remotion-docs/
|
|
56
|
+
To find and read current Remotion documentation, load [Remotion Docs](./remotion-docs/REFERENCE.md).
|
|
56
57
|
|
|
57
58
|
## Upgrading
|
|
58
59
|
|
|
59
|
-
To upgrade Remotion, related packages, compatible Mediabunny packages, and installed Remotion Agent Skills, load [Remotion Upgrade](./remotion-upgrade/
|
|
60
|
+
To upgrade Remotion, related packages, compatible Mediabunny packages, and installed Remotion Agent Skills, load [Remotion Upgrade](./remotion-upgrade/REFERENCE.md).
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
interface:
|
|
2
2
|
display_name: '/remotion-best-practices'
|
|
3
3
|
short_description: 'Route Remotion tasks to the right workflow'
|
|
4
|
-
icon_small: './assets/remotion-icon.
|
|
5
|
-
icon_large: './assets/remotion-icon.
|
|
4
|
+
icon_small: './assets/remotion-icon.svg'
|
|
5
|
+
icon_large: './assets/remotion-icon.svg'
|
|
6
6
|
brand_color: '#0B84F3'
|
|
7
7
|
default_prompt: '$remotion-best-practices: Make a promo video for my product'
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<title>Remotion</title>
|
|
3
|
+
<path d="M148.332 92.9015C143.307 93.1742 139.259 93.9713 135.179 95.5236C133.144 96.2893 129.809 97.957 127.973 99.1108C120.295 103.925 114.443 111.162 111.391 119.584C110.782 121.252 109.136 126.57 108.076 130.23C101.018 154.7 97.0112 181.456 96.1511 209.776C96.0148 214.286 96.0148 225.026 96.1511 229.463C96.728 248.237 98.5216 265.187 101.773 282.472C103.095 289.468 105.213 298.866 106.44 303.135C108.947 311.809 114.065 319.193 121.344 324.605C126.221 328.234 131.759 330.668 137.895 331.863C140.853 332.44 144.755 332.702 147.629 332.514C151.604 332.251 159.491 331.192 165.9 330.049C194.786 324.899 221.469 315.679 245.666 302.485C260.99 294.125 274.09 285.074 286.729 274.092C299.326 263.163 310.066 251.405 319.516 238.21C321.708 235.158 322.81 233.375 323.911 231.131C326.743 225.341 328.075 219.583 328.064 213.143C328.064 207.143 326.932 201.815 324.488 196.361C323.313 193.728 322.191 191.84 319.674 188.253C310.402 175.048 300.112 163.542 287.568 152.361C268.122 135.034 245.026 120.822 219.235 110.302C213.644 108.026 208.138 106.022 201.509 103.851C187.475 99.2681 170.106 95.2929 155.411 93.3105C153.104 92.9959 149.968 92.8176 148.332 92.9015Z" fill="#0B84F3"/>
|
|
4
|
+
</svg>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: remotion-captions
|
|
3
3
|
description: Transcribing, displaying and animating captions
|
|
4
|
-
version: 4.0.
|
|
4
|
+
version: 4.0.529
|
|
5
5
|
---
|
|
6
6
|
|
|
7
7
|
All captions must be processed in JSON. The captions must use the [`Caption`](https://www.remotion.dev/docs/captions/caption.md) type which is the following:
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
interface:
|
|
2
2
|
display_name: '/remotion-captions'
|
|
3
3
|
short_description: 'Transcribe, display, and animate captions'
|
|
4
|
-
icon_small: './assets/remotion-icon.
|
|
5
|
-
icon_large: './assets/remotion-icon.
|
|
4
|
+
icon_small: './assets/remotion-icon.svg'
|
|
5
|
+
icon_large: './assets/remotion-icon.svg'
|
|
6
6
|
brand_color: '#0B84F3'
|
|
7
7
|
default_prompt: '$remotion-captions: Transcribe my video and display captions'
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<title>Remotion</title>
|
|
3
|
+
<path d="M148.332 92.9015C143.307 93.1742 139.259 93.9713 135.179 95.5236C133.144 96.2893 129.809 97.957 127.973 99.1108C120.295 103.925 114.443 111.162 111.391 119.584C110.782 121.252 109.136 126.57 108.076 130.23C101.018 154.7 97.0112 181.456 96.1511 209.776C96.0148 214.286 96.0148 225.026 96.1511 229.463C96.728 248.237 98.5216 265.187 101.773 282.472C103.095 289.468 105.213 298.866 106.44 303.135C108.947 311.809 114.065 319.193 121.344 324.605C126.221 328.234 131.759 330.668 137.895 331.863C140.853 332.44 144.755 332.702 147.629 332.514C151.604 332.251 159.491 331.192 165.9 330.049C194.786 324.899 221.469 315.679 245.666 302.485C260.99 294.125 274.09 285.074 286.729 274.092C299.326 263.163 310.066 251.405 319.516 238.21C321.708 235.158 322.81 233.375 323.911 231.131C326.743 225.341 328.075 219.583 328.064 213.143C328.064 207.143 326.932 201.815 324.488 196.361C323.313 193.728 322.191 191.84 319.674 188.253C310.402 175.048 300.112 163.542 287.568 152.361C268.122 135.034 245.026 120.822 219.235 110.302C213.644 108.026 208.138 106.022 201.509 103.851C187.475 99.2681 170.106 95.2929 155.411 93.3105C153.104 92.9959 149.968 92.8176 148.332 92.9015Z" fill="#0B84F3"/>
|
|
4
|
+
</svg>
|
|
@@ -1,31 +1,48 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: remotion-create
|
|
3
3
|
description: Create a new Remotion video
|
|
4
|
-
version: 4.0.
|
|
4
|
+
version: 4.0.529
|
|
5
5
|
---
|
|
6
6
|
|
|
7
7
|
These are instructions for making a new Remotion project and composition.
|
|
8
|
-
If this is not the next task, see [Remotion Best Practices](../
|
|
8
|
+
If this is not the next task, see [Remotion Best Practices](../SKILL.md)
|
|
9
9
|
|
|
10
10
|
## Scaffold a project
|
|
11
11
|
|
|
12
12
|
If a project already exists, skip this.
|
|
13
13
|
Ensure Node.js and Git is installed, and the current folder is appropriate for starting a new project.
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
Inspect the current folder, including hidden files, before choosing where to scaffold.
|
|
16
|
+
|
|
17
|
+
### Empty folder
|
|
18
|
+
|
|
19
|
+
If it is empty, or contains only disposable operating-system metadata such as `.DS_Store`, create the project directly in the current folder.
|
|
20
|
+
Remove only those disposable metadata files first, since `create-video` rejects non-empty folders.
|
|
21
|
+
Do not treat all hidden files as disposable: files such as `.env` and directories such as `.git` are meaningful contents.
|
|
22
|
+
|
|
23
|
+
Scaffold in existing folder:
|
|
16
24
|
|
|
17
25
|
```bash
|
|
18
|
-
npx create-video@latest --yes --blank --no-tailwind
|
|
19
|
-
cd my-video
|
|
26
|
+
npx create-video@latest --yes --blank --no-tailwind .
|
|
20
27
|
npm i
|
|
21
28
|
```
|
|
22
29
|
|
|
30
|
+
### Non-empty folder
|
|
31
|
+
|
|
32
|
+
If the current folder contains meaningful contents and no project already exists, scaffold into a new subfolder.
|
|
23
33
|
Replace `my-video` with a suitable project name.
|
|
24
34
|
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
npx create-video@latest --yes --blank --no-tailwind my-video
|
|
38
|
+
cd my-video
|
|
39
|
+
npm i
|
|
40
|
+
```
|
|
41
|
+
|
|
25
42
|
## Designing a video
|
|
26
43
|
|
|
27
44
|
Keep the scaffold and add React Markup.
|
|
28
|
-
Follow [Remotion React Markup Best Practices](../remotion-markup/
|
|
45
|
+
Follow [Remotion React Markup Best Practices](../remotion-markup/REFERENCE.md) and [Video Layout Rules](video-layout.md) for video-first layout and text sizing guidance.
|
|
29
46
|
|
|
30
47
|
## Is this a multi-scene video?
|
|
31
48
|
|
|
@@ -33,7 +50,7 @@ If this is a video with multiple subsequence videos, follow guidance at [Multi-s
|
|
|
33
50
|
|
|
34
51
|
## Interactivity Best Practices
|
|
35
52
|
|
|
36
|
-
By structuring the React Markup following [Remotion Interactivity Best Practices](../remotion-interactivity/
|
|
53
|
+
By structuring the React Markup following [Remotion Interactivity Best Practices](../remotion-interactivity/REFERENCE.md), you allow the user to make edits in the Studio which write back to code.
|
|
37
54
|
|
|
38
55
|
## TailwindCSS
|
|
39
56
|
|
|
@@ -60,9 +77,9 @@ Only render if the user explicitly asks for it.
|
|
|
60
77
|
npx remotion render
|
|
61
78
|
```
|
|
62
79
|
|
|
63
|
-
For more options, see [Rendering](../remotion-render/
|
|
80
|
+
For more options, see [Rendering](../remotion-render/REFERENCE.md).
|
|
64
81
|
|
|
65
82
|
## Follow-up
|
|
66
83
|
|
|
67
84
|
The video creation process has finished.
|
|
68
|
-
For follow-up prompts, use [Remotion Best Practices](../
|
|
85
|
+
For follow-up prompts, use [Remotion Best Practices](../SKILL.md)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
interface:
|
|
2
2
|
display_name: '/remotion-create'
|
|
3
3
|
short_description: 'Create a new Remotion video project'
|
|
4
|
-
icon_small: './assets/remotion-icon.
|
|
5
|
-
icon_large: './assets/remotion-icon.
|
|
4
|
+
icon_small: './assets/remotion-icon.svg'
|
|
5
|
+
icon_large: './assets/remotion-icon.svg'
|
|
6
6
|
brand_color: '#0B84F3'
|
|
7
7
|
default_prompt: '$remotion-create: Create a Remotion video and make a promo for my product'
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<title>Remotion</title>
|
|
3
|
+
<path d="M148.332 92.9015C143.307 93.1742 139.259 93.9713 135.179 95.5236C133.144 96.2893 129.809 97.957 127.973 99.1108C120.295 103.925 114.443 111.162 111.391 119.584C110.782 121.252 109.136 126.57 108.076 130.23C101.018 154.7 97.0112 181.456 96.1511 209.776C96.0148 214.286 96.0148 225.026 96.1511 229.463C96.728 248.237 98.5216 265.187 101.773 282.472C103.095 289.468 105.213 298.866 106.44 303.135C108.947 311.809 114.065 319.193 121.344 324.605C126.221 328.234 131.759 330.668 137.895 331.863C140.853 332.44 144.755 332.702 147.629 332.514C151.604 332.251 159.491 331.192 165.9 330.049C194.786 324.899 221.469 315.679 245.666 302.485C260.99 294.125 274.09 285.074 286.729 274.092C299.326 263.163 310.066 251.405 319.516 238.21C321.708 235.158 322.81 233.375 323.911 231.131C326.743 225.341 328.075 219.583 328.064 213.143C328.064 207.143 326.932 201.815 324.488 196.361C323.313 193.728 322.191 191.84 319.674 188.253C310.402 175.048 300.112 163.542 287.568 152.361C268.122 135.034 245.026 120.822 219.235 110.302C213.644 108.026 208.138 106.022 201.509 103.851C187.475 99.2681 170.106 95.2929 155.411 93.3105C153.104 92.9959 149.968 92.8176 148.332 92.9015Z" fill="#0B84F3"/>
|
|
4
|
+
</svg>
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: remotion-docs
|
|
3
3
|
description: Search Remotion documentation
|
|
4
|
-
version: 4.0.
|
|
4
|
+
version: 4.0.529
|
|
5
5
|
---
|
|
6
6
|
|
|
7
7
|
This skill teaches you how to discover and read current Remotion documentation.
|
|
8
|
-
If this is not relevant, load [Remotion Best Practices](../
|
|
8
|
+
If this is not relevant, load [Remotion Best Practices](../SKILL.md) instead.
|
|
9
9
|
|
|
10
10
|
## Searching the docs
|
|
11
11
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
interface:
|
|
2
2
|
display_name: '/remotion-docs'
|
|
3
3
|
short_description: 'Search current Remotion documentation'
|
|
4
|
-
icon_small: './assets/remotion-icon.
|
|
5
|
-
icon_large: './assets/remotion-icon.
|
|
4
|
+
icon_small: './assets/remotion-icon.svg'
|
|
5
|
+
icon_large: './assets/remotion-icon.svg'
|
|
6
6
|
brand_color: '#0B84F3'
|
|
7
7
|
default_prompt: '$remotion-docs: What server-side rendering options does Remotion have?'
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<title>Remotion</title>
|
|
3
|
+
<path d="M148.332 92.9015C143.307 93.1742 139.259 93.9713 135.179 95.5236C133.144 96.2893 129.809 97.957 127.973 99.1108C120.295 103.925 114.443 111.162 111.391 119.584C110.782 121.252 109.136 126.57 108.076 130.23C101.018 154.7 97.0112 181.456 96.1511 209.776C96.0148 214.286 96.0148 225.026 96.1511 229.463C96.728 248.237 98.5216 265.187 101.773 282.472C103.095 289.468 105.213 298.866 106.44 303.135C108.947 311.809 114.065 319.193 121.344 324.605C126.221 328.234 131.759 330.668 137.895 331.863C140.853 332.44 144.755 332.702 147.629 332.514C151.604 332.251 159.491 331.192 165.9 330.049C194.786 324.899 221.469 315.679 245.666 302.485C260.99 294.125 274.09 285.074 286.729 274.092C299.326 263.163 310.066 251.405 319.516 238.21C321.708 235.158 322.81 233.375 323.911 231.131C326.743 225.341 328.075 219.583 328.064 213.143C328.064 207.143 326.932 201.815 324.488 196.361C323.313 193.728 322.191 191.84 319.674 188.253C310.402 175.048 300.112 163.542 287.568 152.361C268.122 135.034 245.026 120.822 219.235 110.302C213.644 108.026 208.138 106.022 201.509 103.851C187.475 99.2681 170.106 95.2929 155.411 93.3105C153.104 92.9959 149.968 92.8176 148.332 92.9015Z" fill="#0B84F3"/>
|
|
4
|
+
</svg>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: remotion-interactivity
|
|
3
3
|
description: Structure Remotion markup for interactivity
|
|
4
|
-
version: 4.0.
|
|
4
|
+
version: 4.0.529
|
|
5
5
|
---
|
|
6
6
|
|
|
7
7
|
By writing Remotion markup in a specific way, the Remotion Studio is able to recognize the structure of the code and makes it interactive:
|
|
@@ -147,6 +147,72 @@ const translateY = interpolate(frame, [0, 30], [0, 120]); // ❌ Math should be
|
|
|
147
147
|
/>
|
|
148
148
|
```
|
|
149
149
|
|
|
150
|
+
## Keep SVG paths editable with `Interactive.Path`
|
|
151
|
+
|
|
152
|
+
Use `<Interactive.Path>` from `remotion` instead of `<path>` inside an SVG to make the path visually editable.
|
|
153
|
+
|
|
154
|
+
Install `@remotion/paths` for path interpolation and Studio path keyframes:
|
|
155
|
+
|
|
156
|
+
```sh
|
|
157
|
+
bunx remotion add @remotion/paths
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
If the geometry is meant to be static, put the path string directly in the `d` prop. Do not extract it into a constant.
|
|
161
|
+
|
|
162
|
+
```tsx title="Editable static path"
|
|
163
|
+
import {Interactive} from 'remotion';
|
|
164
|
+
|
|
165
|
+
<Interactive.Svg width={300} height={300} viewBox="0 0 300 300">
|
|
166
|
+
<Interactive.Path
|
|
167
|
+
name="Triangle"
|
|
168
|
+
d="M 40 40 L 260 40 L 150 260 Z"
|
|
169
|
+
fill="#0b84f3"
|
|
170
|
+
/>
|
|
171
|
+
</Interactive.Svg>
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
### Morph paths using inline `interpolatePaths()`
|
|
175
|
+
|
|
176
|
+
Use `interpolatePaths()` from `@remotion/paths` directly in `d`.
|
|
177
|
+
It accepts a frame, an input range, an equally sized array of path strings, and options for easing, extrapolation, and posterization.
|
|
178
|
+
Keep the output paths, ranges, and options inline, following the same input-range rules as `interpolate()` above.
|
|
179
|
+
Do not use `interpolatePath()` API or extract the interpolated result into a variable when the path keyframes should remain editable in Studio.
|
|
180
|
+
|
|
181
|
+
```tsx title="Editable path keyframes"
|
|
182
|
+
import {interpolatePaths} from '@remotion/paths';
|
|
183
|
+
import {Easing, Interactive, useCurrentFrame} from 'remotion';
|
|
184
|
+
|
|
185
|
+
export const MorphingPath = () => {
|
|
186
|
+
const frame = useCurrentFrame();
|
|
187
|
+
|
|
188
|
+
return (
|
|
189
|
+
<Interactive.Svg width={300} height={300} viewBox="0 0 300 300">
|
|
190
|
+
<Interactive.Path
|
|
191
|
+
name="Morphing triangle"
|
|
192
|
+
d={interpolatePaths(
|
|
193
|
+
frame,
|
|
194
|
+
[0, 30, 60],
|
|
195
|
+
[
|
|
196
|
+
'M 40 40 L 260 40 L 150 260 Z',
|
|
197
|
+
'M 40 150 L 150 40 L 260 150 Z',
|
|
198
|
+
'M 40 260 L 150 40 L 260 260 Z',
|
|
199
|
+
],
|
|
200
|
+
{
|
|
201
|
+
easing: Easing.bezier(0.42, 0, 0.58, 1),
|
|
202
|
+
extrapolateLeft: 'clamp',
|
|
203
|
+
extrapolateRight: 'clamp',
|
|
204
|
+
},
|
|
205
|
+
)}
|
|
206
|
+
fill="#0b84f3"
|
|
207
|
+
/>
|
|
208
|
+
</Interactive.Svg>
|
|
209
|
+
);
|
|
210
|
+
};
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
Studio can edit the path at the current frame, add or move keyframes, and adjust their easing.
|
|
214
|
+
Use `strokeDasharray` and `strokeDashoffset` to evolve paths.
|
|
215
|
+
|
|
150
216
|
## Use `scale`, `translate`, `rotate` CSS properties
|
|
151
217
|
|
|
152
218
|
Avoid the `transform` CSS property.
|
|
@@ -239,6 +305,8 @@ Render separate elements if one version should have effects and another should n
|
|
|
239
305
|
|
|
240
306
|
## Making your own component interactive
|
|
241
307
|
|
|
308
|
+
When using `Interactive.withSchema()`, include `Interactive.baseSchema` in the schema so standard timeline controls such as trimming and visibility remain available.
|
|
309
|
+
|
|
242
310
|
To make a custom userland component interactive, use:
|
|
243
311
|
[Make a component interactive](https://www.remotion.dev/docs/studio/make-component-interactive.md)
|
|
244
312
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
interface:
|
|
2
2
|
display_name: '/remotion-interactivity'
|
|
3
3
|
short_description: 'Make compositions editable in Remotion Studio'
|
|
4
|
-
icon_small: './assets/remotion-icon.
|
|
5
|
-
icon_large: './assets/remotion-icon.
|
|
4
|
+
icon_small: './assets/remotion-icon.svg'
|
|
5
|
+
icon_large: './assets/remotion-icon.svg'
|
|
6
6
|
brand_color: '#0B84F3'
|
|
7
7
|
default_prompt: '$remotion-interactivity: Make the markup in MyComp.tsx interactive'
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<title>Remotion</title>
|
|
3
|
+
<path d="M148.332 92.9015C143.307 93.1742 139.259 93.9713 135.179 95.5236C133.144 96.2893 129.809 97.957 127.973 99.1108C120.295 103.925 114.443 111.162 111.391 119.584C110.782 121.252 109.136 126.57 108.076 130.23C101.018 154.7 97.0112 181.456 96.1511 209.776C96.0148 214.286 96.0148 225.026 96.1511 229.463C96.728 248.237 98.5216 265.187 101.773 282.472C103.095 289.468 105.213 298.866 106.44 303.135C108.947 311.809 114.065 319.193 121.344 324.605C126.221 328.234 131.759 330.668 137.895 331.863C140.853 332.44 144.755 332.702 147.629 332.514C151.604 332.251 159.491 331.192 165.9 330.049C194.786 324.899 221.469 315.679 245.666 302.485C260.99 294.125 274.09 285.074 286.729 274.092C299.326 263.163 310.066 251.405 319.516 238.21C321.708 235.158 322.81 233.375 323.911 231.131C326.743 225.341 328.075 219.583 328.064 213.143C328.064 207.143 326.932 201.815 324.488 196.361C323.313 193.728 322.191 191.84 319.674 188.253C310.402 175.048 300.112 163.542 287.568 152.361C268.122 135.034 245.026 120.822 219.235 110.302C213.644 108.026 208.138 106.022 201.509 103.851C187.475 99.2681 170.106 95.2929 155.411 93.3105C153.104 92.9959 149.968 92.8176 148.332 92.9015Z" fill="#0B84F3"/>
|
|
4
|
+
</svg>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
interface:
|
|
2
2
|
display_name: '/remotion-maps'
|
|
3
3
|
short_description: 'Create animated maps in Remotion videos'
|
|
4
|
-
icon_small: './assets/remotion-icon.
|
|
5
|
-
icon_large: './assets/remotion-icon.
|
|
4
|
+
icon_small: './assets/remotion-icon.svg'
|
|
5
|
+
icon_large: './assets/remotion-icon.svg'
|
|
6
6
|
brand_color: '#0B84F3'
|
|
7
7
|
default_prompt: '$remotion-maps: Animate a dot from Zurich to New York.'
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<title>Remotion</title>
|
|
3
|
+
<path d="M148.332 92.9015C143.307 93.1742 139.259 93.9713 135.179 95.5236C133.144 96.2893 129.809 97.957 127.973 99.1108C120.295 103.925 114.443 111.162 111.391 119.584C110.782 121.252 109.136 126.57 108.076 130.23C101.018 154.7 97.0112 181.456 96.1511 209.776C96.0148 214.286 96.0148 225.026 96.1511 229.463C96.728 248.237 98.5216 265.187 101.773 282.472C103.095 289.468 105.213 298.866 106.44 303.135C108.947 311.809 114.065 319.193 121.344 324.605C126.221 328.234 131.759 330.668 137.895 331.863C140.853 332.44 144.755 332.702 147.629 332.514C151.604 332.251 159.491 331.192 165.9 330.049C194.786 324.899 221.469 315.679 245.666 302.485C260.99 294.125 274.09 285.074 286.729 274.092C299.326 263.163 310.066 251.405 319.516 238.21C321.708 235.158 322.81 233.375 323.911 231.131C326.743 225.341 328.075 219.583 328.064 213.143C328.064 207.143 326.932 201.815 324.488 196.361C323.313 193.728 322.191 191.84 319.674 188.253C310.402 175.048 300.112 163.542 287.568 152.361C268.122 135.034 245.026 120.822 219.235 110.302C213.644 108.026 208.138 106.022 201.509 103.851C187.475 99.2681 170.106 95.2929 155.411 93.3105C153.104 92.9959 149.968 92.8176 148.332 92.9015Z" fill="#0B84F3"/>
|
|
4
|
+
</svg>
|