dsh-remotion 0.1.1 → 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 stardustlc
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.en.md

@@ -1,10 +1,16 @@
 [中文](README.md)
 
+![npm](https://img.shields.io/npm/v/dsh-remotion) ![downloads](https://img.shields.io/npm/dm/dsh-remotion) ![license](https://img.shields.io/github/license/STARDUSTLC666/dsh-remotion) ![stars](https://img.shields.io/github/stars/STARDUSTLC666/dsh-remotion?style=social)
+
 # dsh-remotion
 
 [![Awesome DSH Plugin](https://awesome-dsh-plugin.com/badge.svg)](https://awesome-dsh-plugin.com)
 
-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, and 38 rule files).
+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.519 twelve-skill structure).
+
+## Compatibility
+
+Verified against `@deepseek-ai/dsh@0.1.2-alpha.2` on 2026-08-31. Built for the cordis patch-bundle plugin model (`cordis.patch.yml` + `dsh.bundle.patch`). No runtime imports of `@deepseek-ai/*` internals.
 
 ## Installation
 
@@ -14,9 +20,18 @@ dsh plugin --profile web add dsh-remotion
 
 After restarting, say "make a video with Remotion" to trigger it.
 
+## Uninstall
+
+```bash
+dsh plugin --profile web remove dsh-remotion
+```
+
+Then restart the web service. To clean up fully, also remove the plugin entry from your profile `cordis.patch.yml` if you overrode it.
+
+
 ## Contents
 
-- **remotion**: Remotion best practices plus `rules/` with 38 rule files (animation/audio/captions/3D/charts/fonts/GIFs/Lottie/maps/transitions...)
+- **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.519
 
 ## Requirements
 
@@ -24,7 +39,7 @@ Node.js ≥ 20 + npx (npm registry); rendering needs ffmpeg (guided by the skill
 
 ## Porting notes
 
-Ported from the official OpenAI Codex Remotion plugin cache: frontmatter converted to the DSH format, Codex-only `agents/` stripped, and rule references verified.
+Synced from the official `remotion-dev/remotion` packages/skills (v4.0.519, 2026-08-31): hub symlinks materialized as real directories for cross-platform resolution.
 
 ## Multi-harness
 
@@ -43,4 +58,3 @@ Port once, use everywhere.
 ## License
 
 MIT for the porting arrangement; skill content copyright remains with Remotion.
-

package/README.md

@@ -9,7 +9,11 @@
 [![Awesome DSH Plugin](https://awesome-dsh-plugin.com/badge.svg)](https://awesome-dsh-plugin.com)
 
 
-DSH（DeepSeek Harness）视频创作技能插件：**安装即把 Remotion 官方移植技能注册进 DSH**（React 编程式视频：动画、音频、字幕、3D、图表、字体等，38 个规则文件）。
+DSH（DeepSeek Harness）视频创作技能插件：**安装即把 Remotion 官方移植技能注册进 DSH**（React 编程式视频：动画、音频、字幕、3D、图表、字体等；同步 Remotion 官方 v4.0.519 的 12 技能结构）。
+
+## 兼容性
+
+在 `@deepseek-ai/dsh@0.1.2-alpha.2` 上验证（2026-08-31）。遵循 cordis 组合包补丁模型（`cordis.patch.yml` + `dsh.bundle.patch`），运行时不 import 任何 `@deepseek-ai/*` 内部模块。
 
 ## 安装
 
@@ -19,9 +23,18 @@ dsh plugin --profile web add dsh-remotion
 
 重启后说「用 Remotion 做个视频」即可触发。
 
+## 卸载
+
+```bash
+dsh plugin --profile web remove dsh-remotion
+```
+
+卸载后重启 Web 服务。如需彻底清理，可再手动删除自己 profile `cordis.patch.yml` 中覆盖的插件行。
+
+
 ## 技能内容
 
-- **remotion**：Remotion 最佳实践 + `rules/` 38 个规则文件（动画/音频/字幕/3D/图表/字体/GIF/Lottie/地图/转场…）
+- **remotion-best-practices**（总纲路由）+ 11 个领域技能（captions/create/docs/interactivity/maps/markup/multimedia/render/saas/studio/upgrade），同步自 Remotion 官方 v4.0.519
 
 ## 依赖
 
@@ -48,5 +61,3 @@ Node.js ≥ 20 + npx（npm registry）；渲染需 ffmpeg（Remotion 自带指
 ## License
 
 MIT（移植编排）；技能内容版权归 Remotion。
-
-

package/lib/index.d.ts

@@ -1,4 +1,5 @@
 /** cordis 服务注入：apply 里要用 ctx.skills，必须显式声明。 */
+export declare const name = "remotion-skills";
 export declare const inject: string[];
 /** 技能注册定义（最小面）。 */
 export interface SkillRegistration {
@@ -16,12 +17,21 @@ export interface SkillsPluginContext {
     skills: {
         register(definition: SkillRegistration): () => void;
     };
+    tools?: {
+        register(definition: Record<string, unknown>): () => void;
+    };
     on?(event: string, listener: () => void): () => void;
 }
-/** 随包分发的技能清单。 */
-export declare const SKILL_NAMES: readonly ["remotion"];
+/** 随包分发的技能清单（Remotion 官方 v4.0.519：总纲路由 + 11 个领域技能）。 */
+export declare const SKILL_NAMES: readonly ["remotion-best-practices", "remotion-captions", "remotion-create", "remotion-docs", "remotion-interactivity", "remotion-maps", "remotion-markup", "remotion-multimedia", "remotion-render", "remotion-saas", "remotion-studio", "remotion-upgrade"];
 /** 打包技能目录的绝对路径。 */
 export declare function bundledSkillsDir(): string;
+/** 检查随包技能资源完整性：每个技能的 SKILL.md 是否存在。 */
+export declare function checkBundledSkills(): Array<{
+    name: string;
+    ok: boolean;
+    detail: string;
+}>;
 /** 拆分 SKILL.md 的 frontmatter 与正文。 */
 export declare function parseSkillFile(text: string): {
     name: string;

package/lib/index.js

@@ -6,18 +6,40 @@
  *
  * @module dsh-remotion
  */
-import { readFileSync } from 'node:fs';
+import { existsSync, readFileSync } from 'node:fs';
 import { fileURLToPath } from 'node:url';
 import { join } from 'node:path';
 import YAML from 'yaml';
 /** cordis 服务注入：apply 里要用 ctx.skills，必须显式声明。 */
-export const inject = ['skills'];
-/** 随包分发的技能清单。 */
-export const SKILL_NAMES = ["remotion"];
+export const name = 'remotion-skills';
+export const inject = ['skills', 'tools'];
+/** 随包分发的技能清单（Remotion 官方 v4.0.519：总纲路由 + 11 个领域技能）。 */
+export const SKILL_NAMES = [
+    "remotion-best-practices",
+    "remotion-captions",
+    "remotion-create",
+    "remotion-docs",
+    "remotion-interactivity",
+    "remotion-maps",
+    "remotion-markup",
+    "remotion-multimedia",
+    "remotion-render",
+    "remotion-saas",
+    "remotion-studio",
+    "remotion-upgrade",
+];
 /** 打包技能目录的绝对路径。 */
 export function bundledSkillsDir() {
     return fileURLToPath(new URL('../skills/', import.meta.url));
 }
+/** 检查随包技能资源完整性：每个技能的 SKILL.md 是否存在。 */
+export function checkBundledSkills() {
+    return SKILL_NAMES.map((skillName) => {
+        const file = join(bundledSkillsDir(), skillName, 'SKILL.md');
+        const ok = existsSync(file);
+        return { name: skillName, ok, detail: ok ? file : 'SKILL.md 缺失：' + file };
+    });
+}
 /** 拆分 SKILL.md 的 frontmatter 与正文。 */
 export function parseSkillFile(text) {
     const match = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?/.exec(text);
@@ -65,6 +87,30 @@ export function apply(ctx) {
             console.warn('[dsh-remotion] 技能 ' + skillName + ' 加载失败：' + (error instanceof Error ? error.message : String(error)));
         }
     }
+    if (typeof ctx.tools?.register === 'function') {
+        disposers.push(ctx.tools.register({
+            name: 'remotion_health',
+            description: 'dsh-remotion 自检：检查随包技能资源（SKILL.md）是否完整。遇到问题时先运行本工具定位。',
+            parameters: { type: 'object', properties: {} },
+            output: {
+                schema: { type: 'object', additionalProperties: true },
+                render(_args, value) {
+                    const rec = (value ?? {});
+                    const skills = Array.isArray(rec.skills) ? rec.skills : [];
+                    const lines = ['dsh-remotion 自检' + (rec.ok === true ? '：技能资源完整。' : '：发现缺失。')];
+                    for (const item of skills) {
+                        const s = (item ?? {});
+                        lines.push('- ' + String(s.name) + '：' + (s.ok === true ? '✅' : '❌ ' + String(s.detail ?? '')));
+                    }
+                    return [{ type: 'text', text: lines.join('\n') }];
+                },
+            },
+            async execute() {
+                const skills = checkBundledSkills();
+                return { ok: skills.every((s) => s.ok), plugin: 'dsh-remotion', skills };
+            },
+        }));
+    }
     if (typeof ctx.on === 'function') {
         ctx.on('dispose', () => {
             for (const dispose of disposers)

package/package.json

@@ -1,64 +1,63 @@
-{
-  "name": "dsh-remotion",
-  "version": "0.1.1",
-  "description": "DSH 视频创作技能插件：注册 Remotion 官方移植技能（React 编程式视频：动画/音频/字幕/3D/图表/字体，38 个规则文件），安装即用。",
-  "type": "module",
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./lib/index.d.ts",
-      "default": "./lib/index.js"
-    },
-    "./cordis.patch.yml": "./cordis.patch.yml",
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "lib",
-    "skills",
-    "cordis.patch.yml",
-    "README.md",
-    "README.en.md"
-  ],
-  "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "prepare": "tsc -p tsconfig.json",
-    "typecheck": "tsc -p tsconfig.json --noEmit",
-    "test": "pnpm run build && node --test \"test/*.test.mjs\"",
-    "prepublishOnly": "pnpm run build"
-  },
-  "dsh": {
-    "bundle": {
-      "patch": "./cordis.patch.yml"
-    }
-  },
-  "keywords": [
-    "dsh",
-    "deepseek-harness",
-    "plugin",
-    "skills",
-    "video",
-    "dsh-plugin"
-  ],
-  "license": "MIT",
-  "engines": {
-    "node": ">=20"
-  },
-  "dependencies": {
-    "yaml": "^2.9.0"
-  },
-  "devDependencies": {
-    "@types/node": "^24.0.0",
-    "typescript": "^5.6.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/STARDUSTLC666/dsh-remotion.git"
-  },
-  "bugs": {
-    "url": "https://github.com/STARDUSTLC666/dsh-remotion/issues"
-  },
-  "homepage": "https://github.com/STARDUSTLC666/dsh-remotion#readme",
-  "author": "stardustlc",
-  "packageManager": "pnpm@11.7.0"
-}
+{
+  "name": "dsh-remotion",
+  "version": "0.3.0",
+  "description": "DSH 视频创作技能插件：注册 Remotion 官方移植技能（React 编程式视频：动画/音频/字幕/3D/图表/字体，38 个规则文件），安装即用。",
+  "type": "module",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./cordis.patch.yml": "./cordis.patch.yml",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib",
+    "skills",
+    "cordis.patch.yml",
+    "README.md",
+    "README.en.md"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "pnpm run build && node --test \"test/*.test.mjs\"",
+    "prepublishOnly": "pnpm run build"
+  },
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    }
+  },
+  "keywords": [
+    "dsh",
+    "deepseek-harness",
+    "plugin",
+    "skills",
+    "video",
+    "dsh-plugin"
+  ],
+  "license": "MIT",
+  "engines": {
+    "node": ">=22"
+  },
+  "dependencies": {
+    "yaml": "^2.9.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.0",
+    "typescript": "^5.6.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/STARDUSTLC666/dsh-remotion.git"
+  },
+  "bugs": {
+    "url": "https://github.com/STARDUSTLC666/dsh-remotion/issues"
+  },
+  "homepage": "https://github.com/STARDUSTLC666/dsh-remotion#readme",
+  "author": "stardustlc",
+  "packageManager": "pnpm@11.7.0"
+}

package/skills/remotion-best-practices/SKILL.md

@@ -0,0 +1,59 @@
+---
+name: remotion-best-practices
+description: Router for all Remotion skills
+version: 4.0.519
+---
+
+## Preserve user changes
+
+Users may make edits in the code outside of the conversation.
+
+If you detect a surprising change made in the meanwhile, don't overwrite it, assume it was intentional or ask for confirmation.
+
+## Creating a video
+
+If the user asks to make, create, or build a new video or composition, load [Create a new Remotion video](./remotion-create/SKILL.md), whether or not a Remotion project already exists.
+
+## New project setup
+
+If no Remotion project currently exists, load [Create a new Remotion project](./remotion-create/SKILL.md)
+
+## React Markup Best Practices
+
+If you are writing Remotion React Markup, load [Remotion Markup Best Practices](./remotion-markup/SKILL.md)
+
+## Maps
+
+For static maps, animated routes and markers, geographic explainers, Mapbox, MapLibre, MapTiler, GeoJSON, or 3D geographic flyovers, load [Remotion Maps](./remotion-maps/SKILL.md).
+
+## Multimedia
+
+For achieving multimedia tasks in the browser, such as trimming, cropping videos, or getting metadata from them, load [Remotion Multimedia](./remotion-multimedia/SKILL.md)
+
+## Improving Interactivity
+
+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/SKILL.md)
+
+## Rendering
+
+For advanced rendering beyond simple `npx remotion render`, see: [Rendering Best Practices](./remotion-render/SKILL.md)
+
+## Opening Remotion Studio
+
+To launch a project in Remotion Studio, open its exact local URL, or configure Studio CLI flags, load [Remotion Studio](./remotion-studio/SKILL.md).
+
+## Captions
+
+When working with Captions, load [Remotion Captions](./remotion-captions/SKILL.md).
+
+## Creating a SaaS, automation or application
+
+Use the [Remotion SaaS skill](./remotion-saas/SKILL.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.
+
+## Looking up Remotion APIs and documentation
+
+To find and read current Remotion documentation, load [Remotion Docs](./remotion-docs/SKILL.md).
+
+## Upgrading
+
+To upgrade Remotion, related packages, compatible Mediabunny packages, and installed Remotion Agent Skills, load [Remotion Upgrade](./remotion-upgrade/SKILL.md).

package/skills/remotion-best-practices/agents/openai.yaml

@@ -0,0 +1,7 @@
+interface:
+  display_name: '/remotion-best-practices'
+  short_description: 'Route Remotion tasks to the right workflow'
+  icon_small: './assets/remotion-icon.png'
+  icon_large: './assets/remotion-icon.png'
+  brand_color: '#0B84F3'
+  default_prompt: '$remotion-best-practices: Make a promo video for my product'

package/skills/remotion-best-practices/remotion-captions/SKILL.md

@@ -0,0 +1,36 @@
+---
+name: remotion-captions
+description: Transcribing, displaying and animating captions
+version: 4.0.519
+---
+
+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:
+
+```ts
+import type { Caption } from "@remotion/captions";
+```
+
+This is the definition:
+
+```ts
+type Caption = {
+  text: string;
+  startMs: number;
+  endMs: number;
+  timestampMs: number | null;
+  confidence: number | null;
+  pageBreakAfter?: boolean;
+};
+```
+
+## Generating captions
+
+To transcribe video and audio files to generate captions, load the [transcribe-captions.md](transcribe-captions.md) file for more instructions.
+
+## Displaying captions
+
+To display captions in your video, load the [display-captions.md](display-captions.md) file for more instructions.
+
+## Importing captions
+
+To import captions from a .srt file, load the [import-srt-captions.md](import-srt-captions.md) file for more instructions.

package/skills/remotion-best-practices/remotion-captions/agents/openai.yaml

@@ -0,0 +1,7 @@
+interface:
+  display_name: '/remotion-captions'
+  short_description: 'Transcribe, display, and animate captions'
+  icon_small: './assets/remotion-icon.png'
+  icon_large: './assets/remotion-icon.png'
+  brand_color: '#0B84F3'
+  default_prompt: '$remotion-captions: Transcribe my video and display captions'

package/skills/{remotion/rules → remotion-best-practices/remotion-captions}/display-captions.md

@@ -54,7 +54,11 @@ export const MyComponent: React.FC = () => {
     return null;
   }
 
-  return <AbsoluteFill>{/* Render captions here */}</AbsoluteFill>;
+  return (
+    <AbsoluteFill>
+      {/* Render captions here */}
+    </AbsoluteFill>
+  );
 };
 ```
 
@@ -80,6 +84,8 @@ const { pages } = useMemo(() => {
 }, [captions]);
 ```
 
+If a caption has `pageBreakAfter: true`, the current page ends after that caption and the next caption starts a new page.
+
 ## Rendering with Sequences
 
 Map over the pages and render each one in a `<Sequence>`. Calculate the start frame and duration from the page timing:
@@ -152,13 +158,13 @@ const CaptionPage: React.FC<{ page: TikTokPage }> = ({ page }) => {
   return (
     <AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
       <div style={{ fontSize: 80, fontWeight: "bold", whiteSpace: "pre" }}>
-        {page.tokens.map((token) => {
+        {page.tokens.map((token, tokenIndex) => {
           const isActive =
             token.fromMs <= absoluteTimeMs && token.toMs > absoluteTimeMs;
 
           return (
             <span
-              key={token.fromMs}
+              key={`${token.fromMs}-${tokenIndex}`}
               style={{ color: isActive ? HIGHLIGHT_COLOR : "white" }}
             >
               {token.text}

package/skills/{remotion/rules → remotion-best-practices/remotion-captions}/import-srt-captions.md

@@ -58,7 +58,11 @@ export const MyComponent: React.FC = () => {
     return null;
   }
 
-  return <AbsoluteFill>{/* Use captions here */}</AbsoluteFill>;
+  return (
+    <AbsoluteFill>
+      {/* Use captions here */}
+    </AbsoluteFill>
+  );
 };
 ```
 

package/skills/remotion-best-practices/remotion-create/SKILL.md

@@ -0,0 +1,68 @@
+---
+name: remotion-create
+description: Create a new Remotion video
+version: 4.0.519
+---
+
+These are instructions for making a new Remotion project and composition.  
+If this is not the next task, see [Remotion Best Practices](../remotion-best-practices/SKILL.md)
+
+## Scaffold a project
+
+If a project already exists, skip this.
+Ensure Node.js and Git is installed, and the current folder is appropriate for starting a new project.
+
+Scaffold one using:
+
+```bash
+npx create-video@latest --yes --blank --no-tailwind my-video
+cd my-video
+npm i
+```
+
+Replace `my-video` with a suitable project name.
+
+## Designing a video
+
+Keep the scaffold and add React Markup.
+Follow [Remotion React Markup Best Practices](../remotion-markup/SKILL.md) and [Video Layout Rules](video-layout.md) for video-first layout and text sizing guidance.
+
+## Is this a multi-scene video?
+
+If this is a video with multiple subsequence videos, follow guidance at [Multi-scene videos](../remotion-markup/multi-scene-video.md).
+
+## Interactivity Best Practices
+
+By structuring the React Markup following [Remotion Interactivity Best Practices](../remotion-interactivity/SKILL.md), you allow the user to make edits in the Studio which write back to code.
+
+## TailwindCSS
+
+If Tailwind is requested, see [tailwind.md](tailwind.md) for using TailwindCSS in Remotion.
+
+## Open the preview
+
+Start the preview server after building the composition:
+
+```bash
+npx remotion studio --no-open
+```
+
+This will start a long-running process and print the server URL for the preview.  
+If the server is already started, it will print the URL.
+If an in-harness browser is available, open it there.
+You can visit a specific composition by navigating to `/[composition-id]`, for example `http://localhost:3000/MapAnimation`.
+
+## Render the video
+
+Only render if the user explicitly asks for it.
+
+```
+npx remotion render
+```
+
+For more options, see [Rendering](../remotion-render/SKILL.md).
+
+## Follow-up
+
+The video creation process has finished.
+For follow-up prompts, use [Remotion Best Practices](../remotion-best-practices/SKILL.md)

package/skills/remotion-best-practices/remotion-create/agents/openai.yaml

@@ -0,0 +1,7 @@
+interface:
+  display_name: '/remotion-create'
+  short_description: 'Create a new Remotion video project'
+  icon_small: './assets/remotion-icon.png'
+  icon_large: './assets/remotion-icon.png'
+  brand_color: '#0B84F3'
+  default_prompt: '$remotion-create: Create a Remotion video and make a promo for my product'

package/skills/{remotion/rules → remotion-best-practices/remotion-create}/tailwind.md

@@ -8,4 +8,4 @@ You can and should use TailwindCSS in Remotion, if TailwindCSS is installed in t
 
 Don't use `transition-*` or `animate-*` classes - always animate using the `useCurrentFrame()` hook.
 
-Tailwind must be installed and enabled first in a Remotion project - fetch https://www.remotion.dev/docs/tailwind using WebFetch for instructions.
+Tailwind must be installed and enabled first in a Remotion project - see https://www.remotion.dev/docs/tailwind.

package/skills/remotion-best-practices/remotion-create/video-layout.md

@@ -0,0 +1,9 @@
+You are designing a video, not a webpage.
+
+- Decide what the viewer should notice first in each scene. Build the frame around that one thing.
+- Keep important content inside a generous safe area. For 1080px-wide videos, keep key text at least 80px from the sides and 100px from the top and bottom.
+- Do not add redundant elements.
+- For 1080px-wide compositions, use these rough minimums:
+  - Main headline: 84px
+  - Important supporting text: 44px
+- Scale those values with the composition width.