{
"canonical_name": "openvideodev/openvideo",
"compilation_id": "pack_214888e0f8aa47d19215f1b7574e942c",
"created_at": "2026-05-19T05:18:01.707387+00:00",
"created_by": "project-pack-compiler",
"feedback": {
"carrier_selection_notes": [
"viable_asset_types=skill, recipe, host_instruction, eval, preflight",
"recommended_asset_types=skill, recipe, host_instruction, eval, preflight"
],
"evidence_delta": {
"confirmed_claims": [
"identity_anchor_present",
"capability_and_host_targets_present",
"install_path_declared_or_better"
],
"missing_required_fields": [],
"must_verify_forwarded": [
"Run or inspect `npm install openvideo` in an isolated environment.",
"Confirm the project exposes the claimed capability to at least one target host."
],
"quickstart_execution_scope": "allowlisted_sandbox_smoke",
"sandbox_command": "npm install openvideo",
"sandbox_container_image": "node:22-slim",
"sandbox_execution_backend": "docker",
"sandbox_planner_decision": "llm_execute_isolated_install",
"sandbox_validation_id": "sbx_509c713ab8804aa1a3e6a01263ed6c8f"
},
"feedback_event_type": "project_pack_compilation_feedback",
"learning_candidate_reasons": [],
"template_gaps": []
},
"identity": {
"canonical_id": "project_024de9159d53262cb928905b5f277263",
"canonical_name": "openvideodev/openvideo",
"homepage_url": null,
"license": "unknown",
"repo_url": "https://github.com/openvideodev/openvideo",
"slug": "openvideo",
"source_packet_id": "phit_cc99e991b92642ab877a5599fd73aa2e",
"source_validation_id": "dval_afe2a45ad6dc4273ab1c040781a767e4"
},
"merchandising": {
"best_for": "需要视觉与多媒体创作能力，并使用 local_cli的用户",
"github_forks": 31,
"github_stars": 224,
"one_liner_en": "Open-source React Video Editor with client-side rendering (WebCodecs) and pixi.js. Capcut clone. Canva clone. React video editor. webgl video editor.",
"one_liner_zh": "Open-source React Video Editor with client-side rendering (WebCodecs) and pixi.js. Capcut clone. Canva clone. React video editor. webgl video editor.",
"primary_category": {
"category_id": "visual-media",
"confidence": "high",
"name_en": "Visual & Media Creation",
"name_zh": "视觉与多媒体创作",
"reason": "strong category phrase match from project identity and outcome"
},
"target_user": "使用 local_cli 等宿主 AI 的用户",
"title_en": "openvideo",
"title_zh": "openvideo 能力包",
"visible_tags": [
{
"label_en": "Browser Agents",
"label_zh": "浏览器 Agent",
"source": "repo_evidence_project_characteristics",
"tag_id": "product_domain-browser-agents",
"type": "product_domain"
},
{
"label_en": "Web Task Automation",
"label_zh": "网页任务自动化",
"source": "repo_evidence_project_characteristics",
"tag_id": "user_job-web-task-automation",
"type": "user_job"
},
{
"label_en": "Browser Automation",
"label_zh": "浏览器自动化",
"source": "repo_evidence_project_characteristics",
"tag_id": "core_capability-browser-automation",
"type": "core_capability"
},
{
"label_en": "Checkpoint Resume",
"label_zh": "断点恢复流程",
"source": "repo_evidence_project_characteristics",
"tag_id": "workflow_pattern-checkpoint-resume",
"type": "workflow_pattern"
},
{
"label_en": "Evaluation Suite",
"label_zh": "评测体系",
"source": "repo_evidence_project_characteristics",
"tag_id": "selection_signal-evaluation-suite",
"type": "selection_signal"
}
]
},
"packet_id": "phit_cc99e991b92642ab877a5599fd73aa2e",
"page_model": {
"artifacts": {
"artifact_slug": "openvideo",
"files": [
"PROJECT_PACK.json",
"QUICK_START.md",
"PROMPT_PREVIEW.md",
"HUMAN_MANUAL.md",
"AI_CONTEXT_PACK.md",
"BOUNDARY_RISK_CARD.md",
"PITFALL_LOG.md",
"REPO_INSPECTION.json",
"REPO_INSPECTION.md",
"CAPABILITY_CONTRACT.json",
"EVIDENCE_INDEX.json",
"CLAIM_GRAPH.json"
],
"required_files": [
"PROJECT_PACK.json",
"QUICK_START.md",
"PROMPT_PREVIEW.md",
"HUMAN_MANUAL.md",
"AI_CONTEXT_PACK.md",
"BOUNDARY_RISK_CARD.md",
"PITFALL_LOG.md",
"REPO_INSPECTION.json"
]
},
"detail": {
"capability_source": "Project Hit Packet + DownstreamValidationResult",
"commands": [
{
"command": "npm install openvideo",
"label": "Node.js / npm · 官方安装入口",
"source": "https://github.com/openvideodev/openvideo#readme",
"verified": true
}
],
"display_tags": [
"浏览器 Agent",
"网页任务自动化",
"浏览器自动化",
"断点恢复流程",
"评测体系"
],
"eyebrow": "视觉与多媒体创作",
"glance": [
{
"body": "判断自己是不是目标用户。",
"label": "最适合谁",
"value": "需要视觉与多媒体创作能力，并使用 local_cli的用户"
},
{
"body": "先理解能力边界，再决定是否继续。",
"label": "核心价值",
"value": "Open-source React Video Editor with client-side rendering (WebCodecs) and pixi.js. Capcut clone. Canva clone. React video editor. webgl video editor."
},
{
"body": "未完成验证前保持审慎。",
"label": "继续前",
"value": "publish to Doramagic.ai project surfaces"
}
],
"guardrail_source": "Boundary & Risk Card",
"guardrails": [
{
"body": "Prompt Preview 只展示流程，不证明项目已安装或运行。",
"label": "Check 1",
"value": "不要把试用当真实运行"
},
{
"body": "local_cli",
"label": "Check 2",
"value": "确认宿主兼容"
},
{
"body": "publish to Doramagic.ai project surfaces",
"label": "Check 3",
"value": "先隔离验证"
}
],
"mode": "skill, recipe, host_instruction, eval, preflight",
"pitfall_log": {
"items": [
{
"body": "GitHub 社区证据显示该项目存在一个安装相关的待验证问题：Modular architecture: separate core logic from PixiJS renderer to enable React Native / headless use",
"category": "安装坑",
"evidence": [
"community_evidence:github | cevd_28cbc35c1a0544478da4fb17013e349a | https://github.com/openvideodev/openvideo/issues/78 | 来源类型 github_issue 暴露的待验证使用条件。"
],
"severity": "medium",
"suggested_check": "来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。",
"title": "来源证据：Modular architecture: separate core logic from PixiJS renderer to enable React Native / headless use",
"user_impact": "可能增加新用户试用和生产接入成本。"
},
{
"body": "GitHub 社区证据显示该项目存在一个配置相关的待验证问题：Image and Audio clips lost during loadFromJSON/exportToJSON round-trip",
"category": "配置坑",
"evidence": [
"community_evidence:github | cevd_e2e8dc4e56504c3c909c7cf990b5a336 | https://github.com/openvideodev/openvideo/issues/60 | 来源类型 github_issue 暴露的待验证使用条件。"
],
"severity": "medium",
"suggested_check": "来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。",
"title": "来源证据：Image and Audio clips lost during loadFromJSON/exportToJSON round-trip",
"user_impact": "可能增加新用户试用和生产接入成本。"
},
{
"body": "GitHub 社区证据显示该项目存在一个配置相关的待验证问题：[Bug] Transition effect \"display\" value update not reflected in Player after clip repositioning",
"category": "配置坑",
"evidence": [
"community_evidence:github | cevd_f5e332be3e884e0eb6bb27bb45d7524a | https://github.com/openvideodev/openvideo/issues/52 | 来源类型 github_issue 暴露的待验证使用条件。"
],
"severity": "medium",
"suggested_check": "来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。",
"title": "来源证据：[Bug] Transition effect \"display\" value update not reflected in Player after clip repositioning",
"user_impact": "可能增加新用户试用和生产接入成本。"
},
{
"body": "GitHub 社区证据显示该项目存在一个配置相关的待验证问题：display property not initialized for Image clips",
"category": "配置坑",
"evidence": [
"community_evidence:github | cevd_45024018965c442dbaaf3bb5441b75f2 | https://github.com/openvideodev/openvideo/issues/18 | 来源类型 github_issue 暴露的待验证使用条件。"
],
"severity": "medium",
"suggested_check": "来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。",
"title": "来源证据：display property not initialized for Image clips",
"user_impact": "可能阻塞安装或首次运行。"
},
{
"body": "GitHub 社区证据显示该项目存在一个配置相关的待验证问题：meta property is read-only",
"category": "配置坑",
"evidence": [
"community_evidence:github | cevd_2798efa2236a4fe1a82930d7a1b1cc80 | https://github.com/openvideodev/openvideo/issues/19 | 来源类型 github_issue 暴露的待验证使用条件。"
],
"severity": "medium",
"suggested_check": "来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。",
"title": "来源证据：meta property is read-only",
"user_impact": "可能增加新用户试用和生产接入成本。"
},
{
"body": "README/documentation is current enough for a first validation pass.",
"category": "能力坑",
"evidence": [
"capability.assumptions | github_repo:1125747446 | https://github.com/openvideodev/openvideo | README/documentation is current enough for a first validation pass."
],
"severity": "medium",
"suggested_check": "将假设转成下游验证清单。",
"title": "能力判断依赖假设",
"user_impact": "假设不成立时，用户拿不到承诺的能力。"
},
{
"body": "未记录 last_activity_observed。",
"category": "维护坑",
"evidence": [
"evidence.maintainer_signals | github_repo:1125747446 | https://github.com/openvideodev/openvideo | last_activity_observed missing"
],
"severity": "medium",
"suggested_check": "补 GitHub 最近 commit、release、issue/PR 响应信号。",
"title": "维护活跃度未知",
"user_impact": "新项目、停更项目和活跃项目会被混在一起，推荐信任度下降。"
},
{
"body": "no_demo",
"category": "安全/权限坑",
"evidence": [
"downstream_validation.risk_items | github_repo:1125747446 | https://github.com/openvideodev/openvideo | no_demo; severity=medium"
],
"severity": "medium",
"suggested_check": "进入安全/权限治理复核队列。",
"title": "下游验证发现风险项",
"user_impact": "下游已经要求复核，不能在页面中弱化。"
},
{
"body": "no_demo",
"category": "安全/权限坑",
"evidence": [
"risks.scoring_risks | github_repo:1125747446 | https://github.com/openvideodev/openvideo | no_demo; severity=medium"
],
"severity": "medium",
"suggested_check": "把风险写入边界卡，并确认是否需要人工复核。",
"title": "存在评分风险",
"user_impact": "风险会影响是否适合普通用户安装。"
},
{
"body": "issue_or_pr_quality=unknown。",
"category": "维护坑",
"evidence": [
"evidence.maintainer_signals | github_repo:1125747446 | https://github.com/openvideodev/openvideo | issue_or_pr_quality=unknown"
],
"severity": "low",
"suggested_check": "抽样最近 issue/PR，判断是否长期无人处理。",
"title": "issue/PR 响应质量未知",
"user_impact": "用户无法判断遇到问题后是否有人维护。"
},
{
"body": "release_recency=unknown。",
"category": "维护坑",
"evidence": [
"evidence.maintainer_signals | github_repo:1125747446 | https://github.com/openvideodev/openvideo | release_recency=unknown"
],
"severity": "low",
"suggested_check": "确认最近 release/tag 和 README 安装命令是否一致。",
"title": "发布节奏不明确",
"user_impact": "安装命令和文档可能落后于代码，用户踩坑概率升高。"
}
],
"source": "ProjectPitfallLog + ProjectHitPacket + validation + community signals",
"summary": "发现 11 个潜在踩坑项，其中 0 个为 high/blocking；最高优先级：安装坑 - 来源证据：Modular architecture: separate core logic from PixiJS renderer to enable React Native / headless use。",
"title": "踩坑日志"
},
"snapshot": {
"contributors": 5,
"forks": 31,
"license": "unknown",
"note": "站点快照，非实时质量证明；用于开工前背景判断。",
"stars": 224
},
"source_url": "https://github.com/openvideodev/openvideo",
"steps": [
{
"body": "不安装项目，先体验能力节奏。",
"code": "preview",
"title": "先试 Prompt"
},
{
"body": "理解输入、输出、失败模式和边界。",
"code": "manual",
"title": "读说明书"
},
{
"body": "把上下文交给宿主 AI 继续工作。",
"code": "context",
"title": "带给 AI"
},
{
"body": "进入主力环境前先完成安装入口与风险边界验证。",
"code": "verify",
"title": "沙箱验证"
}
],
"subtitle": "Open-source React Video Editor with client-side rendering (WebCodecs) and pixi.js. Capcut clone. Canva clone. React video editor. webgl video editor.",
"title": "openvideo 能力包",
"trial_prompt": "# openvideo - Prompt Preview\n\n> Copy the prompt below into your AI host before installing anything.\n> Its purpose is to let you safely feel the project's workflow, not to claim the project has already run.\n\n## Copy this prompt\n\n```text\nYou are using an independent Doramagic capability pack for openvideodev/openvideo.\n\nProject:\n- Name: openvideo\n- Repository: https://github.com/openvideodev/openvideo\n- Summary: Open-source React Video Editor with client-side rendering (WebCodecs) and pixi.js. Capcut clone. Canva clone. React video editor. webgl video editor.\n- Host target: local_cli\n\nGoal:\nHelp me evaluate this project for the following task without installing it yet: Open-source React Video Editor with client-side rendering (WebCodecs) and pixi.js. Capcut clone. Canva clone. React video editor. webgl video editor.\n\nBefore taking action:\n1. Restate my task, success standard, and boundary.\n2. Identify whether the next step requires tools, browser access, network access, filesystem access, credentials, package installation, or host configuration.\n3. Use only the Doramagic Project Pack, the upstream repository, and the source-linked evidence listed below.\n4. If a real command, install step, API call, file write, or host integration is required, mark it as \"requires post-install verification\" and ask for approval first.\n5. If evidence is missing, say \"evidence is missing\" instead of filling the gap.\n\nPreviewable capabilities:\n- Capability 1: Open-source React Video Editor with client-side rendering (WebCodecs) and pixi.js. Capcut clone. Canva clone. React video editor. webgl video editor.\n\nCapabilities that require post-install verification:\n- Capability 1: Use the source-backed project context to guide one small, checkable workflow step.\n\nCore service flow:\n1. page-1: Overview. Produce one small intermediate artifact and wait for confirmation.\n2. page-2: Installation and Setup. Produce one small intermediate artifact and wait for confirmation.\n3. page-3: System Architecture. Produce one small intermediate artifact and wait for confirmation.\n4. page-4: Studio and State Management. Produce one small intermediate artifact and wait for confirmation.\n5. page-5: Clip System. Produce one small intermediate artifact and wait for confirmation.\n\nSource-backed evidence to keep in mind:\n- https://github.com/openvideodev/openvideo\n- https://github.com/openvideodev/openvideo#readme\n- README.md\n- packages/openvideo/package.json\n- examples/package.json\n- packages/openvideo/src/studio.ts\n- packages/openvideo/src/compositor.ts\n- packages/openvideo/src/clips/index.ts\n- packages/openvideo/src/index.ts\n- packages/openvideo/src/studio/timeline-model.ts\n\nFirst response rules:\n1. Start Step 1 only.\n2. Explain the one service action you will perform first.\n3. Ask exactly three questions about my target workflow, success standard, and sandbox boundary.\n4. Stop and wait for my answers.\n\nStep 1 follow-up protocol:\n- After I answer the first three questions, stay in Step 1.\n- Produce six parts only: clarified task, success standard, boundary conditions, two or three options, tradeoffs for each option, and one recommendation.\n- End by asking whether I confirm the recommendation.\n- Do not move to Step 2 until I explicitly confirm.\n\nConversation rules:\n- Advance one step at a time and wait for confirmation after each small artifact.\n- Write outputs as recommendations or planned checks, not as completed execution.\n- Do not claim tests passed, files changed, commands ran, APIs were called, or the project was installed.\n- If the user asks for execution, first provide the sandbox setup, expected output, rollback, and approval checkpoint.\n```\n",
"voices": [
{
"body": "来源平台：github。github/github_issue: display property not initialized for Image clips（https://github.com/openvideodev/openvideo/issues/18）；github/github_issue: [Bug] Transition effect \"display\" value update not reflected in Player a（https://github.com/openvideodev/openvideo/issues/52）；github/github_issue: Image and Audio clips lost during loadFromJSON/exportToJSON round-trip（https://github.com/openvideodev/openvideo/issues/60）；github/github_issue: Modular architecture: separate core logic from PixiJS renderer to enable（https://github.com/openvideodev/openvideo/issues/78）；github/github_issue: meta property is read-only（https://github.com/openvideodev/openvideo/issues/19）。这些是项目级外部声音，不作为单独质量证明。",
"items": [
{
"kind": "github_issue",
"source": "github",
"title": "display property not initialized for Image clips",
"url": "https://github.com/openvideodev/openvideo/issues/18"
},
{
"kind": "github_issue",
"source": "github",
"title": "[Bug] Transition effect \"display\" value update not reflected in Player a",
"url": "https://github.com/openvideodev/openvideo/issues/52"
},
{
"kind": "github_issue",
"source": "github",
"title": "Image and Audio clips lost during loadFromJSON/exportToJSON round-trip",
"url": "https://github.com/openvideodev/openvideo/issues/60"
},
{
"kind": "github_issue",
"source": "github",
"title": "Modular architecture: separate core logic from PixiJS renderer to enable",
"url": "https://github.com/openvideodev/openvideo/issues/78"
},
{
"kind": "github_issue",
"source": "github",
"title": "meta property is read-only",
"url": "https://github.com/openvideodev/openvideo/issues/19"
}
],
"status": "已收录 5 条来源",
"title": "社区讨论"
}
]
},
"homepage_card": {
"category": "视觉与多媒体创作",
"desc": "Open-source React Video Editor with client-side rendering (WebCodecs) and pixi.js. Capcut clone. Canva clone. React video editor. webgl video editor.",
"effort": "安装已验证",
"forks": 31,
"icon": "image",
"name": "openvideo 能力包",
"risk": "可发布",
"slug": "openvideo",
"stars": 224,
"tags": [
"浏览器 Agent",
"网页任务自动化",
"浏览器自动化",
"断点恢复流程",
"评测体系"
],
"thumb": "pink",
"type": "Skill Pack"
},
"manual": {
"markdown": "# https://github.com/openvideodev/openvideo 项目说明书\n\n生成时间：2026-05-15 09:42:56 UTC\n\n## 目录\n\n- [Overview](#page-1)\n- [Installation and Setup](#page-2)\n- [System Architecture](#page-3)\n- [Studio and State Management](#page-4)\n- [Clip System](#page-5)\n- [Animation System](#page-6)\n- [Compositor and Rendering](#page-7)\n- [Effects System](#page-8)\n- [Transitions System](#page-9)\n- [Utilities and Helpers](#page-10)\n\n\n\n## Overview\n\n### 相关页面\n\n相关主题：[System Architecture](#page-3), [Clip System](#page-5)\n\n\n相关源码文件
\n\n以下源码文件用于生成本页说明：\n\n- [README.md](https://github.com/openvideodev/openvideo/blob/main/README.md)\n- [packages/openvideo/src/index.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/index.ts)\n- [packages/openvideo/src/studio.spec.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio.spec.ts)\n- [packages/node/README.md](https://github.com/openvideodev/openvideo/blob/main/packages/node/README.md)\n- [packages/openvideo/src/transition/transition.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/transition/transition.ts)\n \n\n# Overview\n\n## What is OpenVideo?\n\nOpenVideo is a powerful, browser-based video composition and rendering library that enables developers to create, edit, and export video content directly in the web environment. Built on modern web APIs, OpenVideo provides a high-performance alternative to traditional desktop video editing software while maintaining the accessibility and portability of web applications.\n\nThe library leverages hardware-accelerated video processing through the WebCodecs API, combined with PixiJS for robust 2D/3D rendering, making it suitable for both client-side video editing interfaces and server-side rendering pipelines.\n\n## Core Architecture\n\nOpenVideo follows a modular architecture with three primary layers:\n\n```mermaid\ngraph TD\n A[User Application] --> B[Studio Layer]\n B --> C[Compositor Layer]\n C --> D[Rendering Engine
PixiJS + WebCodecs]\n \n B --> E[Clip Objects]\n E --> E1[Video]\n E --> E2[Audio]\n E --> E3[Text]\n E --> E4[Image]\n E --> E5[Caption]\n \n C --> F[Compositor]\n F --> F1[Video Export]\n F --> F2[Playback]\n F --> F3[Seeking]\n```\n\n### Core Components\n\n| Component | Purpose | Location |\n|-----------|---------|----------|\n| **Studio** | Manages project state, tracks, clips, and timeline configuration | `packages/openvideo/src/studio.ts` |\n| **Compositor** | Rendering engine handling playback, seeking, and final export using WebCodecs | `packages/openvideo/src/compositor.ts` |\n| **Clips** | Specialized objects for different media types | `packages/openvideo/src/clips/` |\n| **Transitions** | Visual effects between clips | `packages/openvideo/src/transition/` |\n| **Animations** | Preset animation utilities for clips | `packages/openvideo/src/animation/` |\n\n## Technology Stack\n\nOpenVideo is built on three foundational technologies that work together to provide high-performance video processing:\n\n```mermaid\ngraph LR\n A[WebCodecs API] --> D[Video Processing]\n B[PixiJS] --> E[2D/3D Rendering]\n C[wrapbox] --> F[MP4 Muxing]\n \n D --> G[OpenVideo Core]\n E --> G\n F --> G\n```\n\n| Technology | Role | Key Benefits |\n|------------|------|--------------|\n| **WebCodecs** | Video encoding/decoding | Hardware-accelerated, ultra-fast video processing |\n| **PixiJS** | Rendering engine | High-performance 2D/3D graphics with WebGL |\n| **wrapbox** | MP4 manipulation | Low-level MP4 box manipulation and muxing |\n\n资料来源：[README.md:15-17]()\n\n## Key Features\n\n### Multi-Media Clip Support\n\nOpenVideo supports a comprehensive set of clip types for video composition:\n\n- **Video Clip** - Load and manipulate video files with frame-accurate control\n- **Audio Clip** - Audio tracks with volume control and synchronization\n- **Text Clip** - Rich text rendering with fonts, styles, and animations\n- **Image Clip** - Static image support for backgrounds and overlays\n- **Caption Clip** - Subtitle and caption rendering with styling options\n\n### Visual Transitions\n\nThe library includes numerous built-in transitions for professional video effects:\n\n| Category | Available Transitions |\n|----------|----------------------|\n| **Basic** | Circle, Directional, Crosshatch, Heart |\n| **Advanced** | GridFlip, PolkaDotsCurtain, Pixelize, RotateScaleFade |\n| **Specialized** | UndulatingBurnOut, SquaresWire, RandomSquares, CannabisLeaf |\n| **Function-based** | PolarFunction, Hexagonalize, StereoViewer |\n\n资料来源：[packages/openvideo/src/transition/transition.ts:1-100]()\n\n### Animation Presets\n\nClips can be animated using preset animations:\n\n- **Fade Effects** - fadeIn, fadeOut\n- **Movement** - slideIn, slideOut, pulse\n- **Transformations** - blurIn, blurOut, scaleIn, scaleOut\n- **Rotation** - rotateIn, rotateOut\n\n资料来源：[packages/openvideo/src/animation/presets.ts:1-80]()\n\n## Package Structure\n\nThe OpenVideo repository is organized as a monorepo with multiple packages:\n\n```\nopenvideo/\n├── packages/\n│ ├── openvideo/ # Core library\n│ │ ├── src/\n│ │ │ ├── clips/ # Clip implementations\n│ │ │ ├── transition/ # Transition effects\n│ │ │ ├── animation/ # Animation presets\n│ │ │ ├── studio.ts # Main studio class\n│ │ │ └── compositor.ts # Rendering engine\n│ │ └── dist/ # Built output\n│ │\n│ ├── node/ # Node.js server-side renderer\n│ │ ├── src/\n│ │ │ ├── renderer.ts # Main Renderer class\n│ │ │ ├── types.ts # TypeScript definitions\n│ │ │ └── template.html # Browser rendering template\n│ │ └── dist/ # Built output\n│ │\n│ └── web/ # Web UI components\n│\n├── examples/ # Example applications\n└── README.md\n```\n\n### Core Library (`packages/openvideo`)\n\nThe main library providing all core functionality:\n\n```typescript\nimport { Studio, Video, Text, Image } from 'openvideo';\n\n// Initialize Studio\nconst studio = new Studio({\n canvas: document.getElementById('preview-canvas') as HTMLCanvasElement,\n spacing: 20\n});\n\n// Add clips\nconst video = await Video.fromUrl('https://example.com/video.mp4');\nawait studio.addClip(video);\n\n// Start preview\nstudio.play();\n```\n\n资料来源：[README.md:45-60]()\n\n### Node.js Renderer (`packages/node`)\n\nFor server-side video rendering without a browser UI:\n\n```typescript\nimport { Renderer } from '@combo/node';\n\nconst renderer = new Renderer({\n json: videoConfig,\n outputPath: './output.mp4',\n});\n\nrenderer.on('progress', ({ phase, progress, message }) => {\n console.log(`[${phase}] ${Math.round(progress * 100)}% - ${message}`);\n});\n\nawait renderer.render();\n```\n\n资料来源：[packages/node/README.md:100-120]()\n\n## Rendering Workflow\n\n### Client-Side Rendering\n\n```mermaid\nsequenceDiagram\n participant User\n participant Studio\n participant Compositor\n participant WebCodecs\n \n User->>Studio: Create project with clips\n User->>Studio: Configure timeline\n User->>Studio: Start playback/preview\n Studio->>Compositor: Render frame\n Compositor->>PixiJS: Draw scene\n Compositor->>WebCodecs: Encode frame\n WebCodecs-->>Compositor: Encoded video data\n Compositor-->>User: Display/Preview\n```\n\n### Server-Side Rendering (Node.js)\n\n```mermaid\ngraph TD\n A[Create Renderer Instance] --> B[Load JSON Config]\n B --> C[Launch Headless Browser]\n C --> D[Load HTML Template]\n D --> E[Initialize Compositor]\n E --> F[Render Frames]\n F --> G[Encode Video via WebCodecs]\n G --> H[Save to File System]\n H --> I[Return Output Path]\n```\n\nThe Node.js renderer uses Playwright to launch a headless browser, inject the JSON configuration, and use the HTML template to render the video using the same Compositor and WebCodecs engine.\n\n资料来源：[packages/node/README.md:1-50]()\n\n## Studio API Reference\n\n### Initialization\n\n```typescript\nconst studio = new Studio({\n canvas: HTMLCanvasElement, // Required: Target canvas\n width?: number, // Default: 1280\n height?: number, // Default: 720\n spacing?: number, // Default: 20\n});\n```\n\n### Clip Management\n\n```typescript\n// Add a clip\nawait studio.addClip(clip: BaseClip): Promise;\n\n// Remove a clip by ID\nawait studio.removeClip(clipId: string): Promise;\n\n// Access clips\nstudio.clips; // Readonly array of clips\n```\n\n资料来源：[packages/openvideo/src/studio.spec.ts:1-50]()\n\n## Compositor Configuration\n\n```typescript\nconst compositorOpts = {\n width: 1280, // Output width\n height: 720, // Output height\n fps: 30, // Frames per second\n bgColor: '#000000', // Background color\n videoCodec?: 'avc1.64001f', // Specific codec\n bitrate?: 5000000, // Video bitrate\n audio?: true, // Include audio track\n metaDataTags?: {} // Metadata for output\n};\n```\n\n## Use Cases\n\nOpenVideo is suitable for various applications:\n\n| Use Case | Implementation | Benefits |\n|----------|---------------|----------|\n| **Video Editor Web App** | Studio + UI components | Full-featured browser-based editing |\n| **Automated Video Generation** | Node.js Renderer | Server-side rendering pipelines |\n| **Video Preview** | Compositor directly | Fast preview without export |\n| **Social Media Tools** | JSON serialization | Template-based video generation |\n| **Educational Platforms** | Caption + Animation | Accessible video content creation |\n\n## Requirements\n\n### Browser Environment\n\n- Modern browser with WebCodecs support (Chrome 94+, Edge 94+)\n- WebGL 2.0 support for PixiJS rendering\n- ES2020+ JavaScript support\n\n### Node.js Environment\n\n- **Node.js** >= 18\n- **Playwright** for headless browser rendering\n- **openvideo** package installed\n\n## License\n\nOpenVideo is released under the MIT License.\n\n资料来源：[README.md:70-72]()\n\n---\n\n\n\n## Installation and Setup\n\n### 相关页面\n\n相关主题：[Overview](#page-1)\n\n\n相关源码文件
\n\n以下源码文件用于生成本页说明：\n\n- [packages/openvideo/package.json](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/package.json)\n- [packages/node/README.md](https://github.com/openvideodev/openvideo/blob/main/packages/node/README.md)\n- [packages/node/src/template.html](https://github.com/openvideodev/openvideo/blob/main/packages/node/src/template.html)\n- [packages/openvideo/render.html](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/render.html)\n- [examples/package.json](https://github.com/openvideodev/openvideo/blob/main/examples/package.json)\n- [examples/index.html](https://github.com/openvideodev/openvideo/blob/main/examples/index.html)\n \n\n# Installation and Setup\n\n## Overview\n\nThis page documents the complete installation and setup process for the openvideo project. openvideo is a video rendering and processing library built on WebCodecs, PixiJS, and wrapbox technologies. The project supports multiple deployment scenarios including browser-based video rendering, Node.js server-side rendering, and integration with frontend frameworks.\n\n## System Requirements\n\n### Runtime Requirements\n\n| Requirement | Minimum Version | Notes |\n|-------------|-----------------|-------|\n| Node.js | >= 18 | Required for WebCodecs API support |\n| pnpm | Latest | Package manager (not npm or yarn) |\n| Chromium-based Browser | Any modern version | For WebCodecs functionality |\n\n### Browser Environment Requirements\n\nThe openvideo library relies on the **WebCodecs API** for hardware-accelerated video processing. This requires:\n\n- A Chromium-based browser (Chrome, Edge, Brave, Arc)\n- Secure context (HTTPS or localhost)\n- Access to the `VideoEncoder`, `VideoDecoder`, and `VideoFrame` APIs\n\n资料来源：[packages/openvideo/package.json:1-30](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/package.json)\n\n## Project Structure\n\nThe openvideo repository follows a monorepo structure using pnpm workspaces:\n\n```\nopenvideo/\n├── packages/\n│ ├── openvideo/ # Core rendering library\n│ │ ├── src/\n│ │ │ ├── clips/ # Video, Audio, Text, Image clips\n│ │ │ ├── animation/ # Animation presets\n│ │ │ ├── transition/ # Transition effects\n│ │ │ └── mp4-utils/ # MP4 muxing utilities\n│ │ ├── dist/ # Built output\n│ │ └── package.json\n│ └── node/ # Node.js renderer package\n│ ├── src/\n│ │ ├── renderer.ts # Server-side renderer\n│ │ ├── types.ts # Type definitions\n│ │ └── template.html\n│ └── package.json\n└── examples/ # Example applications\n```\n\n## Installation Steps\n\n### 1. Install pnpm\n\nIf you don't have pnpm installed, install it globally:\n\n```bash\nnpm install -g pnpm\n```\n\n### 2. Install Dependencies\n\nClone the repository and install all dependencies:\n\n```bash\ngit clone https://github.com/openvideodev/openvideo.git\ncd openvideo\npnpm install\n```\n\n### 3. Build the Core Package\n\nBuild the main openvideo package before using it:\n\n```bash\npnpm --filter openvideo build\n```\n\nThis generates the distribution files in `packages/openvideo/dist/`:\n\n- `index.es.js` - ES Module build\n- `index.umd.js` - UMD build for CDN usage\n- `index.d.ts` - TypeScript definitions\n\n资料来源：[packages/openvideo/package.json:23-25](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/package.json)\n\n### 4. Build Node.js Renderer (Optional)\n\nFor server-side rendering capabilities:\n\n```bash\npnpm --filter @combo/node build\n```\n\n资料来源：[packages/node/README.md:1-100](https://github.com/openvideodev/openvideo/blob/main/packages/node/README.md)\n\n## Browser Usage\n\n### Script Tag (UMD)\n\nInclude openvideo directly via CDN:\n\n```html\n\n\n\n \n Video Render\n\n\n \n \n\n\n```\n\n### ES Module with Import Map\n\nFor modern browser applications using ES modules:\n\n```html\n\n\n\n \n Video Render\n \n\n\n \n\n\n```\n\n资料来源：[packages/node/src/template.html:1-25](https://github.com/openvideodev/openvideo/blob/main/packages/node/src/template.html)\n\n## Node.js Server-Side Rendering\n\nThe `@combo/node` package enables server-side video rendering using Playwright and Chromium.\n\n### Renderer Configuration\n\n```typescript\nimport { Renderer } from '@combo/node';\n\nconst renderer = new Renderer({\n json: videoConfig, // Video configuration JSON\n outputPath: './output.mp4', // Output file path\n browserOptions: {\n headless: true, // Default: true\n timeout: 300000 // Default: 5 minutes\n }\n});\n```\n\n### Renderer Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `json` | `object` | Required | Video composition configuration |\n| `outputPath` | `string` | Required | Path for output MP4 file |\n| `browserOptions.headless` | `boolean` | `true` | Run browser in headless mode |\n| `browserOptions.timeout` | `number` | `300000` | Browser operation timeout (ms) |\n\n### Rendering Events\n\nThe Renderer extends `EventEmitter` and emits the following events:\n\n```typescript\n// Progress tracking\nrenderer.on('progress', ({ phase, progress, message }) => {\n console.log(`[${phase}] ${Math.round(progress * 100)}% - ${message}`);\n});\n\n// Error handling\nrenderer.on('error', (error) => {\n console.error('Render failed:', error);\n});\n\n// Completion\nrenderer.on('complete', (path) => {\n console.log(`Video saved to: ${path}`);\n});\n\n// Start rendering\nawait renderer.render();\n```\n\n资料来源：[packages/node/README.md:60-120](https://github.com/openvideodev/openvideo/blob/main/packages/node/README.md)\n\n## Build Workflow\n\n```mermaid\ngraph TD\n A[pnpm install] --> B[Build openvideo Core]\n B --> C{Use Case}\n C -->|Browser App| D[Import openvideo ES Module]\n C -->|Server Rendering| E[Build @combo/node]\n C -->|Development| F[Run Examples]\n \n D --> G[Create Compositor Instance]\n E --> H[Create Renderer Instance]\n \n G --> I[Configure width, height, fps]\n H --> J[Configure JSON config]\n \n I --> K[Add clips to Studio]\n J --> K\n \n K --> L[Render video]\n L --> M[Output MP4]\n \n F --> N[Start dev server]\n N --> O[Browse examples]\n```\n\n## Development\n\n### Running Examples\n\nStart the development server for the examples application:\n\n```bash\ncd examples\npnpm dev\n```\n\nThis serves the examples at `http://localhost:5173` (Vite default).\n\n资料来源：[examples/package.json](https://github.com/openvideodev/openvideo/blob/main/examples/package.json)\n\n### Testing\n\nRun unit tests:\n\n```bash\npnpm --filter openvideo test\n```\n\nRun browser-specific tests:\n\n```bash\npnpm --filter openvideo test:browser\n```\n\n资料来源：[packages/openvideo/package.json:23-25](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/package.json)\n\n### Development Workflow\n\n1. **Make source changes** in `packages/openvideo/src/`\n\n2. **Rebuild the package:**\n ```bash\n pnpm --filter openvideo build\n ```\n\n3. **Test changes:**\n ```bash\n node dist/sample.js\n ```\n\n4. **For Node.js renderer changes:**\n ```bash\n pnpm --filter @combo/node build\n ```\n\n## Troubleshooting\n\n### WebCodecs Not Available\n\nIf you encounter `VideoEncoder is not defined`:\n\n- Ensure you're running in a Chromium-based browser\n- Verify you're on a secure origin (HTTPS or localhost)\n- Check that WebCodecs API is enabled in browser settings\n\n### Module Resolution Errors\n\nIf ES module imports fail:\n\n```bash\n# Ensure openvideo is built first\npnpm --filter openvideo build\n```\n\n### Playwright Installation Issues\n\nFor Node.js renderer Chromium installation failures:\n\n```bash\nnpx playwright install chromium\n```\n\n### Timeout Errors\n\nFor large video renders, increase the timeout:\n\n```typescript\nconst renderer = new Renderer({\n json: videoConfig,\n outputPath: './output.mp4',\n browserOptions: {\n timeout: 600000 // 10 minutes\n }\n});\n```\n\n## Package Exports\n\nThe main openvideo package exports the following from `packages/openvideo/package.json`:\n\n| Export | Type | Path |\n|--------|------|------|\n| ES Module | `import` | `./dist/index.es.js` |\n| UMD | `require` | `./dist/index.umd.js` |\n| Types | TypeScript | `./dist/index.d.ts` |\n\n```javascript\n// ES Module import\nimport { Studio, Compositor, Video, Text, Image } from 'openvideo';\n\n// UMD/CommonJS require\nconst { Studio } = require('openvideo');\n```\n\n## Key Components for Setup\n\n| Component | Purpose | Import |\n|-----------|---------|--------|\n| `Studio` | Project state management, timeline, tracks | `import { Studio } from 'openvideo'` |\n| `Compositor` | Rendering engine, WebCodecs export | `import { Compositor } from 'openvideo'` |\n| `Video` | Video clip handling | `import { Video } from 'openvideo'` |\n| `Renderer` | Server-side rendering (Node.js) | `import { Renderer } from '@combo/node'` |\n\n资料来源：[packages/openvideo/render.html:1-40](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/render.html)\n\n---\n\n\n\n## System Architecture\n\n### 相关页面\n\n相关主题：[Overview](#page-1), [Studio and State Management](#page-4), [Clip System](#page-5)\n\n\n相关源码文件
\n\n以下源码文件用于生成本页说明：\n\n- [packages/openvideo/src/studio.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio.ts)\n- [packages/openvideo/src/compositor.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/compositor.ts)\n- [packages/openvideo/src/clips/index.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/index.ts)\n- [packages/openvideo/src/clips/video-clip.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/video-clip.ts)\n- [packages/openvideo/src/clips/text-clip.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/text-clip.ts)\n- [packages/openvideo/src/sprite/base-sprite.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/sprite/base-sprite.ts)\n- [packages/openvideo/src/transition/transition.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/transition/transition.ts)\n- [packages/openvideo/src/animation/presets.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/animation/presets.ts)\n- [packages/openvideo/src/index.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/index.ts)\n \n\n# System Architecture\n\n## Overview\n\nThe openvideo system is a browser-based video editing and rendering engine built on modern web APIs. It provides a comprehensive architecture for composing, editing, and exporting video content directly in the browser environment. The system leverages **WebCodecs** for hardware-accelerated video processing, **PixiJS** for 2D/3D rendering, and internal utilities for MP4 box manipulation and muxing.\n\n资料来源：[README.md:1-50]()\n\n## High-Level Architecture\n\nThe system follows a layered architecture with distinct responsibilities at each level:\n\n```mermaid\ngraph TD\n A[User Application] --> B[Studio]\n B --> C[Compositor]\n C --> D[PixiJS Rendering Engine]\n C --> E[WebCodecs API]\n E --> F[MP4 Muxing]\n B --> G[Clips Layer]\n G --> H[Video Clip]\n G --> I[Audio Clip]\n G --> J[Text Clip]\n G --> K[Image Clip]\n G --> L[Caption Clip]\n G --> M[Shape Clip]\n```\n\n资料来源：[packages/openvideo/src/index.ts:1-100]()\n\n## Core Components\n\n### Studio\n\nThe `Studio` class serves as the central orchestrator for the entire video editing system. It manages:\n\n- **Project state**: Tracks, clips, and timeline configuration\n- **Preview playback**: Real-time video preview with seeking capabilities\n- **Export coordination**: Manages the rendering pipeline for final output\n\n```mermaid\ngraph LR\n A[Studio] --> B[addClip]\n A --> C[removeClip]\n A --> D[play]\n A --> E[pause]\n A --> F[seek]\n A --> G[export]\n```\n\n资料来源：[packages/openvideo/src/studio.ts:1-50]()\n\n### Compositor\n\nThe `Compositor` is the rendering engine responsible for:\n\n- **Playback control**: Managing frame-accurate video playback\n- **Seeking**: Navigating to specific timestamps in the timeline\n- **Final export**: Encoding and muxing the video output using WebCodecs\n\n```typescript\nconst compositorOpts = {\n width: settings.width || 1280,\n height: settings.height || 720,\n fps: settings.fps || 30,\n bgColor: settings.bgColor || '#000000',\n videoCodec?: settings.videoCodec,\n bitrate?: settings.bitrate,\n audio?: boolean,\n metaDataTags?: metaDataTags,\n};\n```\n\n资料来源：[packages/openvideo/render.html:30-50]()\n\n### Clips Layer\n\nThe clip system provides specialized objects for different media types. All clips inherit from a base sprite class that handles common properties and animations.\n\n| Clip Type | Purpose | Source |\n|-----------|---------|--------|\n| `Video` | Video file playback with audio support | [video-clip.ts](packages/openvideo/src/clips/video-clip.ts:1-50) |\n| `Audio` | Audio playback and mixing | [audio-clip.ts](packages/openvideo/src/clips/audio-clip.ts) |\n| `Text` | Text rendering with styling options | [text-clip.ts](packages/openvideo/src/clips/text-clip.ts:1-50) |\n| `Image` | Static image display | [image-clip.ts](packages/openvideo/src/clips/image-clip.ts) |\n| `Caption` | Word-level caption rendering | [caption-clip.ts](packages/openvideo/src/clips/caption-clip.ts:1-50) |\n| `Shape` | Vector shapes and graphics | [shape-clip.ts](packages/openvideo/src/clips/shape-clip.ts) |\n\n## Clip Architecture\n\n### Base Sprite\n\nAll clips inherit from `BaseSprite`, which provides a unified transform and animation system:\n\n```mermaid\ngraph TD\n A[BaseSprite] --> B[renderTransform]\n A --> C[animations]\n B --> D[x, y, width, height]\n B --> E[scale, scaleX, scaleY]\n B --> F[angle, opacity]\n B --> G[blur, brightness]\n B --> H[mirror, motionBlur]\n```\n\nThe render transform accumulates values from multiple animations:\n\n```typescript\nconst defaultRenderTransform = {\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n scale: 1,\n scaleX: 1,\n scaleY: 1,\n opacity: 1,\n angle: 0,\n blur: 0,\n brightness: 1,\n mirror: 0,\n motionBlur: 0,\n};\n```\n\n资料来源：[packages/openvideo/src/sprite/base-sprite.ts:1-100]()\n\n### Video Clip\n\nThe `Video` class handles video file loading and playback:\n\n```mermaid\nsequenceDiagram\n participant User\n participant Video\n participant ResourceManager\n participant PixiJS\n \n User->>Video: fromUrl(url)\n Video->>ResourceManager: getReadableStream(url)\n ResourceManager-->>Video: stream\n Video->>Video: write to localFile\n Video->>PixiJS: init texture\n Video-->>User: Video instance\n```\n\nKey features include:\n- URL-based loading via `Video.fromUrl()`\n- OPFS (Origin Private File System) for local storage\n- Configurable audio with volume control\n- Position and size properties (left, top, width, height)\n\n资料来源：[packages/openvideo/src/clips/video-clip.ts:1-100]()\n\n### Text Clip\n\nText clips support extensive styling options:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `fontFamily` | `string` | Font family name |\n| `fontSize` | `number` | Font size in pixels |\n| `fontWeight` | `string\\|number` | Font weight |\n| `fontStyle` | `string` | Font style (normal/italic) |\n| `fill` | `string` | Text color |\n| `align` | `string` | Text alignment |\n| `wordWrap` | `boolean` | Enable word wrapping |\n| `wordWrapWidth` | `number` | Maximum line width |\n| `lineHeight` | `number` | Line height |\n| `letterSpacing` | `number` | Character spacing |\n| `stroke` | `object\\|string` | Stroke color and width |\n| `dropShadow` | `object` | Shadow effect |\n\n资料来源：[packages/openvideo/src/clips/text-clip.ts:1-100]()\n\n### Caption Clip\n\nCaption clips support word-level animations with the following JSON structure:\n\n```typescript\ninterface CaptionColorsJSON {\n appeared?: string;\n appearing?: string;\n disappearing?: string;\n}\n\ninterface CaptionDataJSON {\n words?: string[];\n colors?: CaptionColorsJSON;\n style?: TextStyleOptions;\n}\n```\n\n资料来源：[packages/openvideo/src/clips/caption-clip.ts:1-100]()\n\n## Animation System\n\n### Animation Presets\n\nThe animation system provides predefined motion patterns:\n\n| Preset | Description |\n|--------|-------------|\n| `slideIn` | Directional entrance with configurable distance |\n| `slideOut` | Directional exit with configurable distance |\n| `pulse` | Scale oscillation animation |\n| `blurIn` | Fade with blur transition |\n| `fade` | Opacity transition |\n| `pop` | Scale pop effect |\n| `shake` | Position shake effect |\n\n### Preset Configuration\n\n```typescript\ncase \"slideOut\": {\n const direction = normalized?.direction || \"left\";\n const distance = normalized?.distance || 300;\n return {\n \"0%\": {\n x: xPositionInit ?? 0,\n y: yPositionInit ?? 0,\n opacity: opacityInit ?? 1,\n mirror: defaultMirror,\n },\n \"100%\": {\n x: direction === \"left\" ? -distance : direction === \"right\" ? distance : 0,\n y: direction === \"top\" ? -distance : direction === \"bottom\" ? distance : 0,\n opacity: opacityEnd ?? 0,\n mirror: defaultMirror,\n },\n };\n}\n```\n\n资料来源：[packages/openvideo/src/animation/presets.ts:1-100]()\n\n### Animation Transform Properties\n\nAnimations can modify the following sprite properties:\n\n- **Position**: `x`, `y`\n- **Size**: `width`, `height`\n- **Rotation**: `angle`\n- **Scale**: `scale`, `scaleX`, `scaleY`\n- **Appearance**: `opacity`, `blur`, `brightness`\n- **Effects**: `mirror`, `motionBlur`\n\n## Transition System\n\nThe transition system provides visual effects for clip transitions:\n\n```mermaid\ngraph TD\n A[Transition Lookup] --> B[Check by name]\n A --> C[Check by lowercase name]\n A --> D[Check by label]\n A --> E[Variant generation]\n \n B --> F{Found?}\n C --> F\n D --> F\n E --> F\n \n F -->|Yes| G[Apply GLSL Fragment]\n F -->|No| H[Error: Transition not found]\n```\n\n### Supported Transitions\n\n| Transition | Category | Description |\n|------------|----------|-------------|\n| `GridFlip` | Grid | Grid-based flip effect |\n| `Circle` | Shape | Circular reveal |\n| `Directional` | Direction | Directional wipe |\n| `UndulatingBurnOut` | Wave | Undulating wave burn |\n| `SquaresWire` | Grid | Wireframe squares |\n| `RotateScaleFade` | Transform | Combined rotation, scale, fade |\n| `RandomSquares` | Grid | Random square reveal |\n| `PolarFunction` | Shape | Polar coordinate transformation |\n| `Pixelate` | Effect | Pixelation effect |\n| `Perlin` | Noise | Perlin noise transition |\n| `Luma` | Luminance | Luminance-based blend |\n| `Heart` | Shape | Heart-shaped reveal |\n| `Crosshatch` | Pattern | Crosshatch pattern |\n| `GlitchDisplace` | Glitch | Glitch displacement |\n| `CrossZoom` | Zoom | Cross zoom effect |\n\n资料来源：[packages/openvideo/src/transition/transition.ts:1-200]()\n\n## Rendering Pipeline\n\n### WebCodecs Integration\n\nThe compositor uses WebCodecs for hardware-accelerated video encoding:\n\n```mermaid\ngraph LR\n A[Timeline Frames] --> B[PixiJS Render]\n B --> C[VideoFrame]\n C --> D[VideoEncoder]\n D --> E[EncodedVideoChunk]\n E --> F[MP4 Muxer]\n F --> G[Output File]\n```\n\n### MP4 Muxing\n\nThe `mp4-utils` module handles sample normalization and muxing:\n\n```typescript\nsamples.forEach((s) => {\n let normalizedDTS: number;\n let normalizedCTS: number;\n \n // Normalize to start from 0\n normalizedDTS = s.dts - firstVDTS!;\n normalizedCTS = s.cts - (firstVCTS ?? 0);\n \n outfile.addSample(trackId, new Uint8Array(s.data), {\n duration: s.duration,\n dts: normalizedDTS + offsetDTS,\n cts: normalizedCTS + offsetCTS,\n is_sync: s.is_sync,\n });\n});\n```\n\n资料来源：[packages/openvideo/src/mp4-utils/index.ts:1-100]()\n\n## Node Package Architecture\n\nThe `@combo/node` package provides server-side rendering capabilities:\n\n```mermaid\ngraph TD\n A[Renderer] --> B[Playwright]\n A --> C[Local HTTP Server]\n B --> D[Browser Instance]\n C --> D\n D --> E[template.html]\n E --> F[Compositor]\n F --> G[WebCodecs]\n G --> H[MP4 Output]\n```\n\n### Renderer Class\n\n```typescript\ninterface RendererOptions {\n json: VideoConfigJSON;\n outputPath: string;\n browserOptions?: {\n headless?: boolean;\n timeout?: number;\n };\n}\n```\n\n#### Events\n\n| Event | Payload | Description |\n|-------|---------|-------------|\n| `progress` | `{ progress: number, phase: string, message?: string }` | Render progress updates |\n| `error` | `Error` | Error notifications |\n| `complete` | `string` | Output file path when complete |\n\n资料来源：[packages/node/README.md:1-100]()\n\n### HTML Template\n\nThe node package uses a template HTML file with import maps:\n\n```html\n\n```\n\n资料来源：[packages/node/src/template.html:1-30]()\n\n## Technology Stack\n\n| Technology | Role |\n|------------|------|\n| **WebCodecs** | Hardware-accelerated video encoding/decoding |\n| **PixiJS** | 2D/3D rendering engine |\n| **wrapbox** | Low-level MP4 box manipulation and muxing |\n| **TypeScript** | Type-safe development |\n| **Playwright** | Server-side browser automation |\n\n资料来源：[README.md:40-50]()\n\n## Data Flow\n\n```mermaid\nsequenceDiagram\n participant App\n participant Studio\n participant Compositor\n participant PixiJS\n participant WebCodecs\n participant File\n \n App->>Studio: addClip(video)\n App->>Studio: play()\n Studio->>Compositor: initPixiApp()\n Compositor->>PixiJS: Create Application\n \n loop Playback\n Studio->>Compositor: render frame\n Compositor->>PixiJS: render scene\n PixiJS-->>Compositor: frame buffer\n end\n \n App->>Studio: export()\n Studio->>Compositor: start encoding\n loop Encoding\n Compositor->>PixiJS: render frame\n PixiJS-->>Compositor: VideoFrame\n Compositor->>WebCodecs: encode\n WebCodecs-->>Compositor: EncodedChunk\n Compositor->>File: mux samples\n end\n Compositor-->>App: output path\n```\n\n## Package Structure\n\n```\npackages/\n├── openvideo/\n│ └── src/\n│ ├── studio.ts # Main orchestrator\n│ ├── compositor.ts # Rendering engine\n│ ├── clips/ # Media clip implementations\n│ │ ├── index.ts\n│ │ ├── video-clip.ts\n│ │ ├── text-clip.ts\n│ │ ├── caption-clip.ts\n│ │ └── ...\n│ ├── sprite/ # Base sprite classes\n│ ├── animation/ # Animation presets\n│ ├── transition/ # Transition effects\n│ └── mp4-utils/ # MP4 muxing utilities\n└── node/\n └── src/\n ├── renderer.ts # Node.js renderer\n ├── template.html # Browser template\n └── types.ts # TypeScript types\n```\n\n## Export and Serialization\n\nThe system supports JSON serialization for project portability:\n\n```typescript\ninterface VideoConfigJSON {\n settings: {\n width: number;\n height: number;\n fps: number;\n bgColor: string;\n videoCodec?: string;\n bitrate?: number;\n audio?: boolean;\n metaDataTags?: Record;\n };\n tracks: TrackJSON[];\n}\n```\n\n资料来源：[packages/openvideo/render.html:25-45]()\n\n---\n\n\n\n## Studio and State Management\n\n### 相关页面\n\n相关主题：[System Architecture](#page-3), [Clip System](#page-5), [Animation System](#page-6)\n\n\n相关源码文件
\n\n以下源码文件用于生成本页说明：\n\n- [packages/openvideo/src/studio.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio.ts)\n- [packages/openvideo/src/studio/timeline-model.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/timeline-model.ts)\n- [packages/openvideo/src/studio/history-manager.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/history-manager.ts)\n- [packages/openvideo/src/studio/selection-manager.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/selection-manager.ts)\n- [packages/openvideo/src/studio/resource-manager.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/resource-manager.ts)\n- [packages/openvideo/src/studio/transport.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/transport.ts)\n \n\n# Studio and State Management\n\n## Overview\n\nThe **Studio** module is the central orchestration layer in OpenVideo, responsible for managing project state, timeline operations, playback control, and user interactions. It provides a unified API for video editing workflows by coordinating between the **Compositor** (rendering engine), **Timeline Model** (data structure), **Transport** (playback control), **Selection Manager** (UI interactions), and **History Manager** (undo/redo).\n\nStudio abstracts the complexity of WebCodecs and PixiJS rendering, exposing high-level primitives like Clips, Tracks, and Effects that map directly to user-facing editing concepts.\n\n## Architecture Overview\n\n```mermaid\ngraph TD\n A[Studio] --> B[Compositor]\n A --> C[Timeline Model]\n A --> D[Transport]\n A --> E[Selection Manager]\n A --> F[History Manager]\n A --> G[Resource Manager]\n \n C --> H[Tracks]\n C --> I[Clips]\n H --> I\n I --> J[VideoClip]\n I --> K[AudioClip]\n I --> L[TextClip]\n I --> M[ImageClip]\n I --> N[CaptionClip]\n \n D --> B\n E --> A\n F --> C\n G --> I\n```\n\n## Core Components\n\n### Studio Class\n\nThe `Studio` class serves as the main entry point and state container for video projects. It maintains references to all subsystem managers and provides the public API for editing operations.\n\n**Key Responsibilities:**\n- Project lifecycle management (create, load, save, clear)\n- Coordination between timeline, compositor, and transport\n- Event emission for UI updates\n- Texture and resource cleanup\n\n**Key Methods:**\n\n| Method | Description |\n|--------|-------------|\n| `play()` | Start playback |\n| `pause()` | Pause playback |\n| `stop()` | Stop and reset to start |\n| `seek(time)` | Seek to specific time (microseconds) |\n| `frameNext()` | Advance one frame |\n| `framePrev()` | Go back one frame |\n| `clear()` | Clear all clips and resources |\n| `updateSelected(updates)` | Update properties of selected clips |\n\n资料来源：[packages/openvideo/src/studio.ts:1-100](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio.ts)\n\n### Timeline Model\n\nThe Timeline Model manages the hierarchical data structure of a video project:\n\n```mermaid\ngraph TD\n Timeline --> Tracks\n Tracks --> Clip\n Clip --> Properties\n Properties --> Transform\n Properties --> Effect\n Properties --> Animation\n```\n\n**Data Structure:**\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `tracks` | `Track[]` | Ordered collection of tracks |\n| `duration` | `number` | Total timeline duration in microseconds |\n| `fps` | `number` | Frames per second |\n| `width` | `number` | Output width in pixels |\n| `height` | `number` | Output height in pixels |\n\n资料来源：[packages/openvideo/src/studio/timeline-model.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/timeline-model.ts)\n\n## Transport System\n\nThe Transport module handles playback control and timeline navigation.\n\n### Playback States\n\n```mermaid\nstateDiagram-v2\n [*] --> Stopped\n Stopped --> Playing : play()\n Playing --> Paused : pause()\n Paused --> Playing : play()\n Playing --> Stopped : stop()\n Paused --> Stopped : stop()\n Stopped --> Seeking : seek()\n Playing --> Seeking : seek()\n Seeking --> Playing : play()\n Seeking --> Paused : pause()\n```\n\n### Transport API\n\n```typescript\ninterface Transport {\n play(): Promise;\n pause(): void;\n stop(): Promise;\n seek(time: number): Promise;\n frameNext(): Promise;\n framePrev(): Promise;\n}\n```\n\n**Key Behaviors:**\n\n- `play()`: Starts playback from current position, returns Promise\n- `pause()`: Immediately pauses playback\n- `stop()`: Stops and resets playhead to timeline start\n- `seek(time)`: Moves playhead to specified time in microseconds\n\n资料来源：[packages/openvideo/src/studio/transport.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/transport.ts)\n\n## Selection Management\n\nThe Selection Manager handles interactive clip selection and transformation in the editor canvas.\n\n### Selection Features\n\n- **Single Selection**: Click to select a single clip\n- **Multi-Selection**: Shift+click to add to selection\n- **Double-Click**: Opens text editing for Text/Caption clips\n- **Transform Handles**: Resize and reposition selected clips\n\n### Selection Events\n\n| Event | Payload | Description |\n|-------|---------|-------------|\n| `clip:select` | `{ clip: IClip }` | Clip was selected |\n| `clip:deselect` | `{ clip: IClip }` | Clip was deselected |\n| `clip:dblclick` | `{ clip: IClip }` | Double-clicked on clip |\n| `selection:change` | `{ clips: IClip[] }` | Selection set changed |\n\n### Pointer Interaction Flow\n\n```mermaid\nsequenceDiagram\n participant User\n participant Canvas\n participant SelectionManager\n participant Studio\n \n User->>Canvas: pointerdown\n Canvas->>SelectionManager: handlePointerDown\n SelectionManager->>SelectionManager: Check for double-click\n Alt Double-click on Text/Caption\n SelectionManager->>Studio: emit('clip:dblclick')\n End\n \n User->>Canvas: pointerup\n Canvas->>SelectionManager: handlePointerUp\n SelectionManager->>SelectionManager: Update selection\n SelectionManager->>Studio: emit('clip:select')\n```\n\n资料来源：[packages/openvideo/src/studio/selection-manager.ts:1-80](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/selection-manager.ts)\n\n## History Management (Undo/Redo)\n\nThe History Manager maintains a stack of state snapshots to enable undo/redo operations.\n\n### State Snapshot Structure\n\n```typescript\ninterface HistoryState {\n timestamp: number;\n action: string;\n state: SerializedTimeline;\n}\n```\n\n### Operations\n\n| Operation | Description |\n|-----------|-------------|\n| `push(state)` | Add new state to history |\n| `undo()` | Restore previous state |\n| `redo()` | Restore next state |\n| `clear()` | Clear all history |\n| `canUndo` | Check if undo is available |\n| `canRedo` | Check if redo is available |\n\n### History Stack Behavior\n\n```mermaid\ngraph LR\n A[Current] -->|Undo| B[State N-1]\n B -->|Undo| C[State N-2]\n A -->|Redo| D[State N+1]\n C -.->|Push| A\n```\n\n资料来源：[packages/openvideo/src/studio/history-manager.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/history-manager.ts)\n\n## Resource Management\n\nThe Resource Manager handles loading, caching, and lifecycle of media resources (video files, images, audio).\n\n### Resource Loading\n\n```typescript\n// Loading a video from URL\nconst video = await Video.fromUrl('https://example.com/video.mp4');\nawait studio.addClip(video);\n\n// Loading with position options\nconst videoWithOpts = await Video.fromUrl('https://example.com/video.mp4', {\n x: 100,\n y: 200,\n width: 640,\n height: 480\n});\n```\n\n### Resource Lifecycle\n\n| Method | Description |\n|--------|-------------|\n| `load(url)` | Load a resource from URL |\n| `getReadablestream(url)` | Get stream for resource |\n| `release(resource)` | Release resource from memory |\n| `clear()` | Clear all cached resources |\n\n资料来源：[packages/openvideo/src/studio/resource-manager.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/resource-manager.ts)\n\n## Clip Types\n\nOpenVideo supports multiple clip types that extend a common base:\n\n| Clip Type | Description |\n|-----------|-------------|\n| `Video` | Video playback with decoding via WebCodecs |\n| `Audio` | Audio track with volume control |\n| `Text` | Text overlay with font styling |\n| `Image` | Static image display |\n| `Caption` | Subtitle/caption text |\n| `Custom` | User-defined clip types |\n\n### Clip Properties\n\n```typescript\ninterface IClip {\n id: string;\n type: 'Video' | 'Audio' | 'Text' | 'Image' | 'Caption';\n left: number;\n top: number;\n width: number;\n height: number;\n startTime: number;\n endTime: number;\n opacity: number;\n volume?: number;\n}\n```\n\n资料来源：[packages/openvideo/src/clips/video-clip.ts:1-50](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/video-clip.ts)\n\n## Event System\n\nStudio extends EventEmitter to provide reactive updates:\n\n```typescript\n// Event listeners\nstudio.on('progress', ({ phase, progress }) => {\n console.log(`[${phase}] ${Math.round(progress * 100)}%`);\n});\n\nstudio.on('clip:select', ({ clip }) => {\n console.log('Selected:', clip.id);\n});\n\nstudio.on('reset', () => {\n console.log('Studio cleared');\n});\n```\n\n### Event Reference\n\n| Event | Payload | Emitted When |\n|-------|---------|--------------|\n| `progress` | `{ phase, progress, message }` | Render progress updates |\n| `clip:select` | `{ clip }` | Clip is selected |\n| `clip:deselect` | `{ clip }` | Clip is deselected |\n| `clip:dblclick` | `{ clip }` | Clip is double-clicked |\n| `selection:change` | `{ clips }` | Selection set changes |\n| `reset` | - | Studio is cleared |\n\n## Studio Lifecycle\n\n```mermaid\nflowchart TD\n A[Create Studio] --> B[Initialize PixiJS]\n B --> C[Load Project/JSON]\n C --> D[User Editing]\n D --> E{Operation}\n E -->|Add Clip| F[Update Timeline]\n E -->|Select| G[Update Selection]\n E -->|Transform| H[Update Transform]\n E -->|Play| I[Transport Control]\n F --> D\n G --> D\n H --> D\n I --> J[Compositor Render]\n J --> K{Loop}\n K -->|Continue| I\n K -->|Stop| L[Export/Save]\n L --> M[Cleanup Resources]\n```\n\n### Initialization\n\n```typescript\nconst studio = new Studio({\n width: 1280,\n height: 720,\n fps: 30,\n});\n\n// Studio is ready for use\nawait studio.ready;\n```\n\n### Cleanup\n\n```typescript\n// Clear all resources\nawait studio.clear();\n\n// Releases:\n// - All clips from timeline\n// - PixiJS textures and graphics\n// - Transition renderers\n// - Selection state\n```\n\n资料来源：[packages/openvideo/src/studio.ts:80-150](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio.ts)\n\n## JSON Serialization\n\nStudio projects can be serialized to JSON for persistence and sharing:\n\n```typescript\n// Export project\nconst json = studio.toJSON();\n\n// Import project\nconst restored = Studio.fromJSON(json);\n```\n\n### Serialized Format\n\n```typescript\ninterface SerializedStudio {\n version: string;\n settings: {\n width: number;\n height: number;\n fps: number;\n };\n timeline: {\n tracks: SerializedTrack[];\n duration: number;\n };\n resources: ResourceReference[];\n}\n```\n\n## Usage Example\n\n```typescript\nimport { Studio, Video, Text } from 'openvideo';\n\n// Initialize studio\nconst studio = new Studio({\n width: 1920,\n height: 1080,\n fps: 30,\n});\n\n// Add video clip\nconst video = await Video.fromUrl('https://example.com/intro.mp4');\nawait studio.addClip(video);\n\n// Add text overlay\nconst title = new Text({\n text: 'Hello World',\n fontSize: 72,\n color: 0xFFFFFF,\n});\ntitle.left = 100;\ntitle.top = 500;\nawait studio.addClip(title);\n\n// Preview\nstudio.play();\n\n// Export\nconst output = await studio.compositor.render();\n```\n\n资料来源：[README.md](https://github.com/openvideodev/openvideo/blob/main/README.md)\n\n---\n\n\n\n## Clip System\n\n### 相关页面\n\n相关主题：[System Architecture](#page-3), [Studio and State Management](#page-4), [Animation System](#page-6)\n\n\n相关源码文件
\n\n以下源码文件用于生成本页说明：\n\n- [packages/openvideo/src/clips/video-clip.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/video-clip.ts)\n- [packages/openvideo/src/clips/iclip.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/iclip.ts)\n- [packages/openvideo/src/clips/base-clip.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/base-clip.ts)\n- [packages/openvideo/src/clips/index.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/index.ts)\n- [packages/openvideo/src/studio/timeline-model.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/timeline-model.ts)\n- [packages/openvideo/src/studio/selection-manager.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/selection-manager.ts)\n- [packages/openvideo/src/json-serialization.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/json-serialization.ts)\n- [packages/openvideo/src/mp4-utils/index.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/mp4-utils/index.ts)\n \n\n# Clip System\n\n## Overview\n\nThe Clip System is the foundational data model and rendering layer within OpenVideo, responsible for representing, managing, and rendering media assets on a timeline. Clips encapsulate all media types (video, audio, image, text, caption) and provide a unified interface for timeline operations including playback, seeking, splitting, cloning, and serialization.\n\n**资料来源：** [packages/openvideo/src/clips/iclip.ts:1-80](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/iclip.ts)\n\n---\n\n## Architecture\n\n### Class Hierarchy\n\nThe Clip System follows an inheritance-based architecture where specialized clip types extend a common base class:\n\n```mermaid\ngraph TD\n A[\"IClip (Interface)\"] --> B[\"BaseClip\"]\n B --> C[\"Video\"]\n B --> D[\"Audio\"]\n B --> E[\"Image\"]\n B --> F[\"Text\"]\n B --> G[\"Caption\"]\n B --> H[\"Effect\"]\n B --> I[\"Transition\"]\n B --> J[\"Placeholder\"]\n \n C -.->|implements| K[\"IPlaybackCapable\"]\n D -.->|implements| K\n```\n\n**资料来源：** [packages/openvideo/src/clips/iclip.ts:40-60](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/iclip.ts)\n\n### Core Interfaces\n\n| Interface | Purpose |\n|-----------|---------|\n| `IClip` | Base interface defining common clip operations |\n| `IClipMeta` | Metadata container (duration, dimensions, format) |\n| `ITransitionInfo` | Transition configuration between clips |\n| `IPlaybackCapable` | Interface for clips supporting playback control |\n\n**资料来源：** [packages/openvideo/src/clips/iclip.ts:1-150](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/iclip.ts)\n\n---\n\n## Clip Types\n\n### Video Clip\n\nThe `Video` class handles MP4 file parsing, WebCodecs-based decoding, and frame extraction. It supports hardware acceleration and provides methods for seeking, frame extraction, and thumbnail generation.\n\n**Key Features:**\n- Async MP4 stream parsing via `ResourceManager.getReadableStream`\n- WebCodecs `VideoDecoder` integration for frame decoding\n- Support for IDR (key) frame normalization\n- Audio extraction with configurable volume\n- First black frame correction\n\n**资料来源：** [packages/openvideo/src/clips/video-clip.ts:1-100](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/video-clip.ts)\n\n```typescript\n// Loading a video clip\nconst video = await Video.fromUrl('https://example.com/video.mp4', {\n x: 0,\n y: 0,\n width: 1920,\n height: 1080,\n});\n\n// Configure display window\nvideo.set({\n display: {\n from: 150, // start frame\n to: 450, // end frame (10 seconds at 30fps)\n },\n});\n```\n\n### Audio Clip\n\nAudio clips manage audio-only media with WebCodecs `AudioDecoder` integration. They support PCM data generation and volume control.\n\n**资料来源：** [packages/openvideo/src/clips/video-clip.ts:200-250](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/video-clip.ts)\n\n### Image Clip\n\nImage clips load and display static images using the Fetch API and `createImageBitmap` for efficient rendering.\n\n### Text Clip\n\nText clips render text content with styling options including word wrapping, stroke, drop shadow, and border radius.\n\n**资料来源：** [packages/openvideo/src/studio/selection-manager.ts:50-80](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/selection-manager.ts)\n\n### Caption Clip\n\nCaption clips display timed text overlays synchronized with video playback.\n\n### Effect & Transition Clips\n\nSpecialized clips for visual effects and transition animations between other clips.\n\n**资料来源：** [packages/openvideo/src/json-serialization.ts:1-30](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/json-serialization.ts)\n\n---\n\n## IClip Interface\n\nThe `IClip` interface defines the contract all clip types must implement:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `type` | `string` | Clip type identifier (e.g., 'video', 'image', 'text') |\n| `id` | `string` | Unique clip identifier |\n| `name` | `string` | Human-readable name |\n| `src` | `string` | Source URL or identifier |\n| `duration` | `number` | Clip duration in microseconds |\n| `volume` | `number` | Audio volume level (0-1) |\n| `ready` | `Promise` | Resolves when clip is fully loaded |\n| `meta` | `IClipMeta` | Metadata about the clip |\n\n### Core Methods\n\n```typescript\ninterface IClip {\n // Lifecycle\n destroy(): void;\n clone(): Promise;\n \n // Timeline operations\n tick(time: number): Promise<{\n video?: VideoFrame | ImageBitmap | null;\n audio?: Float32Array[];\n state: 'done' | 'success';\n }>;\n \n getFrame(time: number): Promise<{\n video: ImageBitmap | null;\n audio: Float32Array[];\n done: boolean;\n }>;\n \n // Editing\n split?(time: number): Promise<[this, this]>;\n \n // Serialization\n toJSON(main?: boolean): any;\n \n // Rendering\n setRenderer?(renderer: any): void;\n}\n```\n\n**资料来源：** [packages/openvideo/src/clips/iclip.ts:60-120](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/iclip.ts)\n\n---\n\n## Clip Lifecycle\n\n### Loading Sequence\n\n```mermaid\nsequenceDiagram\n participant Client\n participant Studio\n participant Clip\n participant ResourceManager\n participant WebCodecs\n \n Client->>Clip: new Clip(source)\n Clip->>ResourceManager: getReadableStream(url)\n ResourceManager-->>Clip: ReadableStream\n Clip->>WebCodecs: create decoder\n WebCodecs-->>Clip: decoder ready\n Clip->>Clip: resolve ready Promise\n Client->>Clip: await clip.ready\n```\n\n### Replacement Workflow\n\nClips can be replaced while preserving timeline position:\n\n```mermaid\ngraph TD\n A[Find clips by source] --> B[Suspend Studio rendering]\n B --> C[Create new clip factory]\n C --> D[Setup listeners for new clip]\n D --> E[Wait for clip.ready]\n E --> F[Replace in clips array]\n F --> G[Resume rendering]\n```\n\n**资料来源：** [packages/openvideo/src/studio/timeline-model.ts:1-50](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/timeline-model.ts)\n\n---\n\n## JSON Serialization\n\nClips support bidirectional JSON conversion for project persistence:\n\n```typescript\ninterface BaseClipJSON {\n id?: string;\n name?: string;\n src: string;\n display: {\n from: number; // frames\n to: number; // frames\n };\n playbackRate: number;\n duration: number;\n left: number;\n top: number;\n width: number;\n height: number;\n angle: number;\n zIndex: number;\n opacity: number;\n flip: \"horizontal\" | \"vertical\" | null;\n trim?: { from: number; to: number; };\n transition?: ITransitionInfo;\n effects?: Array<{\n id: string;\n key: string;\n startTime: number;\n duration: number;\n }>;\n animation?: {\n keyFrames: Record>;\n opts: { duration: number; delay?: number; iterCount?: number; };\n };\n colorAdjustment?: ColorAdjustment;\n}\n```\n\n**资料来源：** [packages/openvideo/src/json-serialization.ts:1-60](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/json-serialization.ts)\n\n---\n\n## Video Decoding Pipeline\n\n```mermaid\ngraph TD\n A[MP4 Stream] --> B[MP4Box Parser]\n B --> C{videoTracks?}\n C -->|Yes| D[Video Decoder Config]\n C -->|No| E[Error: No video]\n D --> F[Extract samples]\n F --> G[IDR Normalization]\n G --> H[Frame Cache]\n H --> I[Compositor.tick]\n \n J[Decode Queue] --> K[VideoDecoder]\n K --> L[Decoded Frames]\n L --> H\n```\n\n### Sample Normalization\n\nVideo samples undergo timestamp normalization to ensure consistent playback:\n\n```typescript\nfunction normalizeTimescale(\n s: MP4Sample,\n delta = 0,\n sampleType: \"video\" | \"audio\"\n) {\n let offset = s.offset;\n // Normalize DTS and CTS relative to first sample\n // Handle SEI data before IDR frames\n}\n```\n\n**资料来源：** [packages/openvideo/src/mp4-utils/index.ts:1-40](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/mp4-utils/index.ts)\n\n---\n\n## Studio Integration\n\n### Selection Management\n\nClips interact with the Studio's selection system for UI interactions:\n\n| Method | Purpose |\n|--------|---------|\n| `selectClip(clip, shiftKey?)` | Add clip to selection |\n| `getTopmostClipAtPoint(point)` | Hit testing |\n| `syncSelectedClipsTransforms()` | Apply visual transforms |\n| `getVisibleHandles()` | Return visible resize handles |\n\n**资料来源：** [packages/openvideo/src/studio/selection-manager.ts:1-30](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/selection-manager.ts)\n\n### Event System\n\nClips emit events for state changes:\n\n```typescript\nclip.on(\"propsChange\", async () => {\n await studio.updateFrame(studio.currentTime);\n updateTransformer(clip);\n});\n```\n\n**资料来源：** [packages/openvideo/src/studio/timeline-model.ts:50-80](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/timeline-model.ts)\n\n---\n\n## Common Configuration Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `audio` | `boolean \\| { volume: number }` | `true` | Audio playback settings |\n| `display.from` | `number` | `0` | Start frame |\n| `display.to` | `number` | clip duration | End frame |\n| `playbackRate` | `number` | `1.0` | Speed multiplier |\n| `left`, `top` | `number` | `0` | Position in pixels |\n| `width`, `height` | `number` | source dimensions | Size in pixels |\n| `opacity` | `number` | `1` | Alpha (0-1) |\n| `angle` | `number` | `0` | Rotation in degrees |\n| `zIndex` | `number` | `0` | Layer order |\n\n**资料来源：** [packages/openvideo/src/clips/iclip.ts:80-100](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/iclip.ts)\n\n---\n\n## Usage Examples\n\n### Creating and Adding a Video Clip\n\n```typescript\nimport { Studio, Video } from 'openvideo';\n\nconst studio = new Studio({\n canvas: document.getElementById('canvas'),\n width: 1920,\n height: 1080,\n});\n\nconst video = await Video.fromUrl('https://example.com/video.mp4', {\n x: 0,\n y: 0,\n width: 1920,\n height: 1080,\n});\n\nvideo.duration = 5e6; // 5 seconds in microseconds\nawait studio.addClip(video);\nstudio.play();\n```\n\n### Cloning a Clip\n\n```typescript\nconst clonedClip = await video.clone();\nclonedClip.left = 100;\nclonedClip.top = 100;\nawait studio.addClip(clonedClip);\n```\n\n### Splitting a Clip\n\n```typescript\nconst [before, after] = await video.split(2500000); // Split at 2.5 seconds\nawait studio.addClip(before);\nawait studio.addClip(after);\nawait studio.removeClip(video.id);\n```\n\n### Exporting to JSON\n\n```typescript\nconst projectJSON = studio.toJSON();\n// projectJSON now contains all clips serialized\n```\n\n**资料来源：** [packages/openvideo/src/studio.spec.ts:1-40](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio.spec.ts)\n\n---\n\n\n\n## Animation System\n\n### 相关页面\n\n相关主题：[Clip System](#page-5), [Effects System](#page-8)\n\n\n相关源码文件
\n\n以下源码文件用于生成本页说明：\n\n- [packages/openvideo/src/animation/index.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/animation/index.ts)\n- [packages/openvideo/src/animation/keyframe-animation.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/animation/keyframe-animation.ts)\n- [packages/openvideo/src/animation/gsap-animation.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/animation/gsap-animation.ts)\n- [packages/openvideo/src/animation/easings.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/animation/easings.ts)\n- [packages/openvideo/src/animation/presets.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/animation/presets.ts)\n- [packages/openvideo/src/animation/registry.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/animation/registry.ts)\n- [packages/openvideo/src/animation/types.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/animation/types.ts)\n \n\n# Animation System\n\n## Overview\n\nThe Animation System in OpenVideo is a comprehensive framework that provides time-based property interpolation for sprites, clips, and UI elements within the video compositor. The system supports keyframe-based animations, easing functions, preset animations, and integration with external animation libraries like GSAP.\n\nAnimations in OpenVideo work by interpolating properties over time using easing functions. They can be applied to any visual element (sprites, clips, captions) and are processed during the render cycle to update the `renderTransform` properties.\n\n资料来源：[packages/openvideo/src/sprite/base-sprite.ts:1-50](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/sprite/base-sprite.ts)\n\n## Architecture\n\n```mermaid\ngraph TD\n A[Animation Request] --> B{Animation Type}\n B -->|Preset| C[Animation Presets]\n B -->|Keyframe| D[KeyframeAnimation]\n B -->|GSAP| E[GSAP Animation]\n C --> F[Factory Pattern]\n D --> G[linearTimeFn]\n E --> H[GSAP Core]\n G --> I[Easing Functions]\n I --> J[Interpolated Values]\n H --> J\n F --> J\n J --> K[RenderTransform Update]\n```\n\n### Core Components\n\n| Component | File | Purpose |\n|-----------|------|---------|\n| `KeyframeAnimation` | `keyframe-animation.ts` | Core keyframe-based animation class |\n| `GSAPAnimation` | `gsap-animation.ts` | GSAP library integration |\n| `easings` | `easings.ts` | Built-in easing function library |\n| `presets` | `presets.ts` | Reusable animation preset factories |\n| `registry` | `registry.ts` | Animation registration and lookup |\n| `types` | `types.ts` | TypeScript type definitions |\n\n资料来源：[packages/openvideo/src/animation/types.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/animation/types.ts)\n\n## Easing Functions\n\nEasing functions control the rate of change during an animation, providing smooth acceleration and deceleration. The system includes a comprehensive set of built-in easing functions.\n\n### Supported Easings\n\n| Category | Functions |\n|----------|-----------|\n| **Linear** | `linear` |\n| **Quad** | `easeInQuad`, `easeOutQuad`, `easeInOutQuad` |\n| **Cubic** | `easeInCubic`, `easeOutCubic`, `easeInOutCubic` |\n| **Sine** | `easeInSine`, `easeOutSine`, `easeInOutSine` |\n| **Expo** | `easeInExpo`, `easeOutExpo`, `easeInOutExpo` |\n\n资料来源：[packages/openvideo/src/animation/easings.ts:1-30](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/animation/easings.ts)\n\n### Easing Interface\n\n```typescript\ntype EasingFunction = (t: number) => number;\n```\n\nAll easing functions accept a normalized time parameter `t` (0 to 1) and return the interpolated progress value.\n\n## Animation Presets\n\nPreset animations are pre-configured animation factories that can be applied to elements without defining custom keyframes. They use a factory pattern that accepts options and optional parameters.\n\n### Available Presets\n\n#### Entry Animations\n\n| Preset | Description |\n|--------|-------------|\n| `blurIn` | Fade in with blur effect |\n| `motionBlurIn` | Slide in with motion blur |\n| `flashSlideIn` | Quick flash and slide entry |\n| `diagonalBlurZoomIn` | Diagonal movement with blur and zoom |\n| `diagonalSlideRotateIn` | Diagonal slide with rotation |\n\n#### Exit Animations\n\n| Preset | Description |\n|--------|-------------|\n| `blurOut` | Fade out with blur effect |\n| `motionBlurOut` | Slide out with motion blur |\n| `flashSlideOut` | Quick flash and slide exit |\n| `diagonalSlideRotateOut` | Diagonal slide out with rotation |\n\n#### Loop Animations\n\n| Preset | Description |\n|--------|-------------|\n| `pulse` | Scale oscillation effect |\n| `slideOut` | Directional slide animation |\n\n资料来源：[packages/openvideo/src/animation/presets.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/animation/presets.ts)\n\n### Preset Configuration\n\nEach preset accepts:\n\n```typescript\ninterface AnimationFactory {\n (opts: IAnimationOpts, params?: Record): KeyframeAnimation;\n}\n```\n\n| Parameter | Type | Description |\n|-----------|------|-------------|\n| `opts.easing` | `string` | Easing function name (default: varies by preset) |\n| `opts.delay` | `number` | Delay before animation starts in ms |\n| `opts.duration` | `number` | Animation duration in ms |\n| `opts.iterCount` | `number` | Number of iterations (-1 for infinite) |\n| `params` | `Record` | Custom keyframe percentages or direction overrides |\n\n## Keyframe Animation\n\nThe `KeyframeAnimation` class is the core animation implementation that handles time-based property interpolation.\n\n### Animation Flow\n\n```mermaid\nsequenceDiagram\n participant Render as Render Loop\n participant Anim as KeyframeAnimation\n participant Easing as Easing Functions\n participant Target as Sprite/Clip\n \n Render->>Anim: getTransform(currentTime)\n Note over Anim: Calculate progress from time\n Anim->>Easing: apply easing(progress)\n Easing-->>Anim: eased progress\n Anim->>Anim: interpolate properties\n Anim-->>Target: Partial\n```\n\n资料来源：[packages/openvideo/src/animation/keyframe-animation.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/animation/keyframe-animation.ts)\n\n### Animated Properties\n\nThe animation system can interpolate the following properties:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `x` | `number` | Horizontal position offset |\n| `y` | `number` | Vertical position offset |\n| `width` | `number` | Width dimension |\n| `height` | `number` | Height dimension |\n| `angle` | `number` | Rotation angle |\n| `blur` | `number` | Blur filter value |\n| `motionBlur` | `number` | Motion blur intensity |\n| `scale` | `number` | Uniform scale multiplier |\n| `scaleX` | `number` | Horizontal scale |\n| `scaleY` | `number` | Vertical scale |\n| `opacity` | `number` | Opacity value (0-1) |\n| `brightness` | `number` | Brightness filter value |\n| `mirror` | `number` | Mirror effect intensity |\n\n资料来源：[packages/openvideo/src/sprite/base-sprite.ts:80-100](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/sprite/base-sprite.ts)\n\n### Linear Time Function\n\nThe `linearTimeFn` performs the actual interpolation between keyframes:\n\n```typescript\nexport function linearTimeFn(\n time: number,\n keyFrame: TAnimationKeyFrame,\n opts: Required\n): Partial\n```\n\nThe function:\n1. Calculates normalized progress from elapsed time\n2. Finds surrounding keyframes\n3. Interpolates each property using linear interpolation\n4. Returns partial props object with interpolated values\n\n资料来源：[packages/openvideo/src/sprite/base-sprite.ts:200-250](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/sprite/base-sprite.ts)\n\n## Animation Integration with Sprites\n\nSprites process animations during their update cycle by iterating through all animations and accumulating transform values.\n\n### Sprite Animation Processing\n\n```typescript\n// 1. Process new modular animations\nfor (const anim of this.animations) {\n const transform = anim.getTransform(time);\n if (transform.x !== undefined) this.renderTransform.x! += transform.x;\n if (transform.y !== undefined) this.renderTransform.y! += transform.y;\n if (transform.scale !== undefined)\n this.renderTransform.scale! *= transform.scale;\n // ... other properties\n}\n```\n\nTransform values are **accumulated** rather than replaced, allowing multiple animations to affect the same property.\n\n资料来源：[packages/openvideo/src/sprite/base-sprite.ts:20-45](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/sprite/base-sprite.ts)\n\n## Clip Animation Support\n\nClips support animation through both legacy `animation` field and the new modular `animations` array format.\n\n### Clip Serialization\n\n```typescript\n// Extract new modular animations\nconst animations = this.animations.map((a) => {\n if ('toJSON' in a && typeof (a as any).toJSON === 'function') {\n return (a as any).toJSON();\n }\n return {\n type: a.type,\n opts: a.options,\n params: a.params || {},\n };\n});\n```\n\nClips serialize animations to JSON for configuration export and reloading.\n\n资料来源：[packages/openvideo/src/clips/base-clip.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/base-clip.ts)\n\n## Caption Word Animations\n\nThe CaptionClip system implements specialized per-word animations with dynamic and keyword-based application modes.\n\n### Word Animation Application Modes\n\n| Mode | Trigger |\n|------|---------|\n| `active` | Applied when word is currently being spoken |\n| `keyword` | Applied to designated keyword words |\n| `none` | Animation disabled |\n\n### Animation Dynamics\n\n| Dynamic Mode | Behavior |\n|--------------|----------|\n| `true` (default) | Uses `sin(progress * PI)` for natural wave effect |\n| `false` | Applies full animation immediately at word start |\n\n```typescript\nif (wordAnimation.mode === 'dynamic' && isActive) {\n const progress = (currentTimeMs - word.from) / duration;\n animationFactor = Math.sin(progress * Math.PI);\n} else {\n animationFactor = 1;\n}\n```\n\n资料来源：[packages/openvideo/src/clips/caption-clip.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/caption-clip.ts)\n\n## GSAP Integration\n\nThe system provides GSAP animation integration through the `GSAPAnimation` class, allowing users to leverage GSAP's extensive animation capabilities.\n\n资料来源：[packages/openvideo/src/animation/gsap-animation.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/animation/gsap-animation.ts)\n\n## Animation Registry\n\nThe registry system allows dynamic registration and lookup of custom animations, enabling extensibility.\n\n```typescript\n// From registry.ts - conceptual usage\nconst registry = getAnimationRegistry();\nregistry.register('myCustomAnimation', customAnimation);\nconst animation = registry.get('myCustomAnimation');\n```\n\n资料来源：[packages/openvideo/src/animation/registry.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/animation/registry.ts)\n\n## Usage Examples\n\n### Basic Preset Animation\n\n```typescript\nimport { blurIn, easeOutQuad } from '@openvideo/animation';\n\nconst animation = blurIn({\n easing: 'easeOutQuad',\n duration: 1000,\n delay: 500,\n iterCount: 1,\n});\n```\n\n### Custom Keyframe Animation\n\n```typescript\nimport { KeyframeAnimation } from '@openvideo/animation';\n\nconst customAnim = new KeyframeAnimation({\n '0%': { opacity: 0, y: 100 },\n '100%': { opacity: 1, y: 0 },\n}, {\n easing: 'easeOutCubic',\n duration: 800,\n});\n```\n\n## Best Practices\n\n1. **Use Presets for Common Animations**: Presets are optimized and provide consistent behavior across the application.\n\n2. **Avoid Animating Expensive Properties**: Minimize animations on `width`, `height`, and `blur` as they require significant processing.\n\n3. **Reuse Easing Functions**: Instead of custom easing, use the built-in easings which are well-tested and performant.\n\n4. **Consider Animation Composition**: Multiple simple animations often produce better results than one complex animation.\n\n5. **Set Appropriate Iter Counts**: Use `iterCount: -1` only for looping background animations to avoid performance issues.\n\n---\n\n\n\n## Compositor and Rendering\n\n### 相关页面\n\n相关主题：[System Architecture](#page-3), [Studio and State Management](#page-4)\n\n\n相关源码文件
\n\n以下源码文件用于生成本页说明：\n\n- [packages/openvideo/src/compositor.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/compositor.ts)\n- [packages/openvideo/src/sprite/base-sprite.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/sprite/base-sprite.ts)\n- [packages/openvideo/src/sprite/pixi-sprite-renderer.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/sprite/pixi-sprite-renderer.ts)\n- [packages/openvideo/src/mp4-utils/index.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/mp4-utils/index.ts)\n- [packages/openvideo/src/mp4-utils/mp4box-utils.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/mp4-utils/mp4box-utils.ts)\n- [packages/openvideo/src/event-emitter.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/event-emitter.ts)\n \n\n# Compositor and Rendering\n\n## Overview\n\nThe Compositor is the central rendering engine in the openvideo library. It orchestrates video playback, real-time composition, and final video export using modern browser APIs including WebCodecs for hardware-accelerated encoding and PixiJS for 2D rendering. The system transforms a timeline-based project configuration into a final rendered video file.\n\nThe Compositor serves as the bridge between high-level clip management (handled by `Studio`) and low-level rendering operations (handled by sprite renderers). It manages the rendering loop, coordinates frame composition, and produces the final encoded output.\n\n## Architecture\n\n```mermaid\ngraph TD\n A[Studio] --> B[Compositor]\n B --> C[PixiJS Application]\n C --> D[Sprite Renderers]\n D --> E[Base Sprite]\n D --> F[Pixi Sprite Renderer]\n B --> G[WebCodecs Encoder]\n G --> H[MP4 Muxer]\n H --> I[Output File]\n \n J[Video Clips] --> D\n K[Text Clips] --> D\n L[Image Clips] --> D\n M[Audio Clips] --> D\n```\n\n## Core Components\n\n### Compositor\n\nThe `Compositor` class initializes the rendering environment and manages the export pipeline. It accepts configuration options that define the output format.\n\n#### Constructor Options\n\n| Parameter | Type | Default | Description |\n|-----------|------|---------|-------------|\n| `width` | `number` | `1280` | Output video width in pixels |\n| `height` | `number` | `720` | Output video height in pixels |\n| `fps` | `number` | `30` | Frames per second for output |\n| `bgColor` | `string` | `'#000000'` | Background color as hex string |\n| `videoCodec` | `string` | `undefined` | Optional video codec override |\n| `bitrate` | `number` | `undefined` | Target bitrate in bits per second |\n| `audio` | `boolean` | `true` | Enable audio track in output |\n| `metaDataTags` | `object` | `undefined` | Custom metadata tags for output |\n\n资料来源：[packages/node/src/template.html:30-48](https://github.com/openvideodev/openvideo/blob/main/packages/node/src/template.html)\n\nThe compositor initialization follows a specific lifecycle:\n\n```mermaid\ngraph LR\n A[Create Compositor] --> B[initPixiApp]\n B --> C[Configure Encoder]\n C --> D[Setup Event Handlers]\n D --> E[Ready for Rendering]\n```\n\n### PixiJS Integration\n\nThe Compositor uses PixiJS as its rendering backend. The `initPixiApp()` method initializes the PixiJS application with the configured canvas dimensions.\n\n#### Canvas Initialization\n\nThe sprite renderer validates texture creation to prevent runtime errors:\n\n```typescript\n// Validate texture was created successfully\n// Use Texture.source instead of baseTexture (PixiJS v8.0.0+)\nif (!this.texture || !this.texture.source) {\n console.error(\"PixiSpriteRenderer: Failed to create valid texture\");\n return;\n}\n```\n\n资料来源：[packages/openvideo/src/sprite/pixi-sprite-renderer.ts:35-42](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/sprite/pixi-sprite-renderer.ts)\n\nCanvas dimensions are converted to integers to prevent WebCodecs encoding errors:\n\n```typescript\n// Update canvas size using integers to prevent \"Value is not of type unsigned long\" errors\nconst intWidth = Math.floor(width);\nconst intHeight = Math.floor(height);\n```\n\n资料来源：[packages/openvideo/src/sprite/pixi-sprite-renderer.ts:23-25](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/sprite/pixi-sprite-renderer.ts)\n\n## Sprite Rendering System\n\n### Base Sprite\n\nThe `BaseSprite` class provides the foundation for all renderable elements. It maintains a `renderTransform` object that accumulates all transformation properties:\n\n```typescript\nprivate renderTransform: {\n x: number;\n y: number;\n width: number;\n height: number;\n scale: number;\n scaleX: number;\n scaleY: number;\n opacity: number;\n angle: number;\n blur: number;\n brightness: number;\n mirror: number;\n motionBlur: number;\n};\n```\n\n资料来源：[packages/openvideo/src/sprite/base-sprite.ts:29-44](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/sprite/base-sprite.ts)\n\n### Animation System\n\nAnimations are processed by iterating through the `animations` array and accumulating transforms at the current time:\n\n```typescript\nfor (const anim of this.animations) {\n const transform = anim.getTransform(time);\n if (transform.x !== undefined) this.renderTransform.x! += transform.x;\n if (transform.y !== undefined) this.renderTransform.y! += transform.y;\n if (transform.width !== undefined) this.renderTransform.width! += transform.width;\n if (transform.scale !== undefined) this.renderTransform.scale! *= transform.scale;\n if (transform.opacity !== undefined) this.renderTransform.opacity! *= transform.opacity;\n if (transform.mirror !== undefined)\n this.renderTransform.mirror = Math.max(this.renderTransform.mirror || 0, transform.mirror);\n}\n```\n\n资料来源：[packages/openvideo/src/sprite/base-sprite.ts:46-65](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/sprite/base-sprite.ts)\n\nTransform operations follow specific accumulation rules:\n- **Additive**: `x`, `y`, `width`, `height`, `angle`, `blur`, `motionBlur`\n- **Multiplicative**: `scale`, `scaleX`, `scaleY`, `opacity`, `brightness`\n- **Maximum**: `mirror` (takes the highest value among all animations)\n\n### Animation Presets\n\nThe library includes built-in animation presets defined in `presets.ts`:\n\n| Preset | Properties | Description |\n|--------|------------|-------------|\n| `slideOut` | `x`, `y`, `opacity` | Slides element in specified direction while fading |\n| `pulse` | `scale` | Oscillates between two scale values |\n| `blurIn` | `blur`, `opacity` | Fades in while removing blur |\n| `blurOut` | `blur`, `opacity` | Fades out while adding blur |\n\n资料来源：[packages/openvideo/src/animation/presets.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/animation/presets.ts)\n\n## Video Export Pipeline\n\n### WebCodecs Encoding\n\nThe compositor leverages the WebCodecs API for hardware-accelerated video encoding. The encoder produces raw video frames which are then multiplexed into an MP4 container.\n\n### MP4 Muxing\n\nThe MP4 utility module handles container creation and muxing:\n\n```mermaid\ngraph TD\n A[Raw Video Frames] --> B[Encoded Video Samples]\n B --> C[MP4Box Muxer]\n C --> D[moov Atom]\n C --> E[mdat Atom]\n D --> F[Final MP4 File]\n E --> F\n```\n\nThe muxer writes samples to the MP4 container and manages:\n- Track configuration (video/audio)\n- Sample timing and duration\n- Chunk layout\n- Metadata injection\n\n### Progress Reporting\n\nThe Compositor emits progress events during the export process:\n\n```typescript\ncompositor.on('OutputProgress', (progress: number) => {\n // Report encoding progress\n});\n```\n\n资料来源：[packages/openvideo/render.html:45](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/render.html)\n\n## Event System\n\nThe Compositor extends `EventEmitter` to provide a pub/sub mechanism for render lifecycle events:\n\n```mermaid\nstateDiagram-v2\n [*] --> initializing\n initializing --> loading\n loading --> rendering\n rendering --> saving\n saving --> complete\n complete --> [*]\n \n rendering --> error: On Error\n loading --> error: On Error\n```\n\n### Event Types\n\n| Event | Payload | Description |\n|-------|---------|-------------|\n| `progress` | `{ phase, progress, message }` | Emitted during rendering phases |\n| `OutputProgress` | `number` | Encoding progress (0-1) |\n| `error` | `Error` | Emitted when an error occurs |\n| `complete` | `string` | Output file path when render completes |\n\n## Node.js Renderer\n\nThe `@combo/node` package provides a headless rendering solution using Playwright:\n\n```mermaid\ngraph LR\n A[JSON Config] --> B[Node Renderer]\n B --> C[Local HTTP Server]\n C --> D[Browser Page]\n D --> E[Compositor]\n E --> F[MP4 Output]\n```\n\n### Renderer Options\n\n| Parameter | Type | Default | Description |\n|-----------|------|---------|-------------|\n| `json` | `object` | required | Video project configuration |\n| `outputPath` | `string` | required | Path for output video file |\n| `browserOptions` | `object` | `{ headless: true, timeout: 300000 }` | Playwright browser settings |\n\n## Texture Management\n\nThe PixiSpriteRenderer implements a texture caching strategy:\n\n1. Canvas is created with integer dimensions matching output resolution\n2. Video/image frames are drawn to canvas\n3. PixiJS Texture is created/updated from canvas\n4. Sprite displays the texture\n5. Previous textures are destroyed to free memory\n\n```typescript\nif (needsResize || isFirstFrame) {\n this.canvas.width = intWidth;\n this.canvas.height = intHeight;\n\n if (this.texture != null) {\n this.texture.destroy(true);\n this.texture = null;\n }\n\n this.texture = Texture.from(this.canvas as any);\n}\n```\n\n资料来源：[packages/openvideo/src/sprite/pixi-sprite-renderer.ts:27-38](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/sprite/pixi-sprite-renderer.ts)\n\n## Transition Effects\n\nThe rendering system supports numerous transition effects including:\n\n- **GridFlip**: Grid-based transition with flip animation\n- **Circle**: Circular wipe transition\n- **Directional**: Directional slide transition\n- **UndulatingBurnOut**: Wave-like fade effect\n- **SquaresWire**: Wireframe square expansion\n- **RotateScaleFade**: Combined rotation, scaling, and fade\n- **Pixelate**: Pixelation dissolve\n- **CrossZoom**: Simultaneous zoom and crossfade\n- **PolkaDotsCurtain**: Dotted curtain reveal\n\nTransitions are resolved by name matching (case-insensitive) against multiple formats:\n\n```typescript\nconst transitionGridFlip =\n transition.name === 'GridFlip' ||\n name.toLowerCase() === 'gridflip' ||\n transition.label === 'gridflip';\n```\n\n## Rendering Configuration\n\n### HTML Template Configuration\n\nWhen using the HTML template for rendering, configuration is injected via `window.RENDER_CONFIG`:\n\n```typescript\nconst jsonConfig = window.RENDER_CONFIG;\n\nif (!jsonConfig) {\n throw new Error('No render configuration provided');\n}\n\nconst settings = jsonConfig.settings || {};\nconst compositorOpts = {\n width: settings.width || 1280,\n height: settings.height || 720,\n fps: settings.fps || 30,\n bgColor: settings.bgColor || '#000000',\n};\n```\n\n## Memory Management\n\nThe sprite renderer properly cleans up resources:\n\n- Textures are destroyed with `destroy(true)` to free GPU memory\n- Canvas dimensions are validated before allocation\n- Frame textures are only recreated when size changes\n\n## See Also\n\n- [Studio and Timeline](studio.md) - Higher-level project management\n- [Clips and Media](clips.md) - Media element handling\n- [Animation System](animation.md) - Animation creation and playback\n- [Node.js Rendering](node-rendering.md) - Server-side rendering guide\n\n---\n\n\n\n## Effects System\n\n### 相关页面\n\n相关主题：[Transitions System](#page-9), [Animation System](#page-6)\n\n\n相关源码文件
\n\n以下源码文件用于生成本页说明：\n\n- [packages/openvideo/src/effect/effect.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/effect/effect.ts)\n- [packages/openvideo/src/effect/glsl/gl-effect.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/effect/glsl/gl-effect.ts)\n- [packages/openvideo/src/effect/glsl/custom-glsl.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/effect/glsl/custom-glsl.ts)\n- [packages/openvideo/src/effect/types.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/effect/types.ts)\n- [packages/openvideo/src/effect/vertex.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/effect/vertex.ts)\n- [packages/openvideo/src/effect/interface/index.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/effect/interface/index.ts)\n- [packages/openvideo/src/utils/chromakey.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/utils/chromakey.ts)\n- [packages/openvideo/src/utils/color-adjustment.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/utils/color-adjustment.ts)\n \n\n# Effects System\n\n## Overview\n\nThe Effects System in OpenVideo is a modular, GPU-accelerated pipeline for applying visual transformations to clips during playback and rendering. Built on top of PixiJS and leveraging the WebCodecs API, the system provides both built-in effects (blur, brightness, color adjustment, chromakey) and a shader-based GLSL extension framework for custom visual effects. The architecture separates effect definition from effect application, allowing effects to be applied at the clip level with configurable timing, duration, and intensity.\n\nEffects are defined as standalone modules in `packages/openvideo/src/effect/` and can be attached to any clip through the timeline system. The system supports real-time preview during editing and high-quality final rendering through WebCodecs encoding.\n\n## Architecture\n\n### System Components\n\nThe Effects System consists of several interconnected layers:\n\n```mermaid\ngraph TD\n A[Clip Instance] --> B[Effect Manager]\n B --> C[Built-in Effects]\n B --> D[Custom GLSL Effects]\n C --> E[Blur Effect]\n C --> F[Color Adjustment]\n C --> G[Chromakey Effect]\n D --> H[GLSL Fragment Shaders]\n D --> I[GLSL Vertex Shaders]\n B --> J[Compositor Rendering]\n J --> K[PixiJS Renderer]\n K --> L[WebCodecs Encoder]\n```\n\n### Directory Structure\n\n```\npackages/openvideo/src/\n├── effect/\n│ ├── effect.ts # Core Effect class and base implementation\n│ ├── types.ts # TypeScript type definitions for effects\n│ ├── vertex.ts # Vertex shader utilities\n│ ├── glsl/\n│ │ ├── gl-effect.ts # WebGL effect renderer\n│ │ └── custom-glsl.ts # Custom shader registration system\n│ └── interface/\n│ └── index.ts # Effect interface contracts\n├── utils/\n│ ├── chromakey.ts # Green screen/chromakey utilities\n│ └── color-adjustment.ts # Color correction utilities\n```\n\n## Core Effect Interface\n\n### IEffect Interface\n\nAll effects must implement the `IEffect` interface defined in `packages/openvideo/src/effect/interface/index.ts`:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `id` | `string` | Unique identifier for the effect instance |\n| `key` | `string` | Effect type key (e.g., \"blur\", \"brightness\") |\n| `startTime` | `number` | Start time in microseconds |\n| `duration` | `number` | Effect duration in microseconds |\n| `targets` | `number[]` | Optional array of target indices for multi-target effects |\n| `enabled` | `boolean` | Whether the effect is currently active |\n\n资料来源：[packages/openvideo/src/effect/interface/index.ts]()\n\n### EffectOptions Type\n\nThe `EffectOptions` type in `packages/openvideo/src/effect/types.ts` provides the base configuration structure:\n\n```typescript\ninterface EffectOptions {\n id?: string;\n key?: string;\n startTime?: number;\n duration?: number;\n targets?: number[];\n enabled?: boolean;\n [key: string]: any; // Effect-specific parameters\n}\n```\n\n资料来源：[packages/openvideo/src/effect/types.ts]()\n\n## Built-in Effects\n\n### Blur Effect\n\nThe blur effect applies Gaussian blur to the clip using PixiJS's built-in blur filter. Configuration includes blur radius and quality settings.\n\n```mermaid\ngraph LR\n A[Input Texture] --> B[BlurFilter]\n B --> C[Radius Parameter]\n C --> D[Quality Iterations]\n D --> E[Output Texture]\n```\n\n### Color Adjustment Effect\n\nColor adjustments are applied through the `ColorAdjustment` type defined in `packages/openvideo/src/utils/color-adjustment.ts`. This effect modifies the visual characteristics of the source content:\n\n| Parameter | Type | Range | Description |\n|-----------|------|-------|-------------|\n| `brightness` | `number` | 0.0 - 2.0 | Brightness multiplier (1.0 = normal) |\n| `contrast` | `number` | 0.0 - 2.0 | Contrast adjustment (1.0 = normal) |\n| `saturation` | `number` | 0.0 - 2.0 | Color saturation (0.0 = grayscale, 1.0 = normal) |\n| `hue` | `number` | -180 to 180 | Hue rotation in degrees |\n| `exposure` | `number` | -1.0 to 1.0 | Exposure adjustment |\n\n资料来源：[packages/openvideo/src/utils/color-adjustment.ts]()\n\n### Chromakey Effect\n\nThe chromakey utility in `packages/openvideo/src/utils/chromakey.ts` implements green screen (chroma key) removal for video composition. This effect:\n\n- Detects pixels matching a target color within a tolerance range\n- Replaces matching pixels with transparency\n- Supports spill suppression to remove color artifacts\n\n```mermaid\ngraph TD\n A[Source Frame] --> B[Color Matching]\n B --> C{Tolerance Check}\n C -->|Match| D[Set Alpha = 0]\n C -->|No Match| E[Keep Pixel]\n D --> F[Spill Suppression]\n E --> F\n F --> G[Output Frame]\n```\n\n## GLSL Shader Effects\n\n### Custom GLSL System\n\nThe custom shader system allows developers to register their own fragment and vertex shaders. The system is built around two main components:\n\n1. **GL Effect Renderer** (`packages/openvideo/src/effect/glsl/gl-effect.ts`) - Handles WebGL shader compilation and execution\n2. **Custom GLSL Registry** (`packages/openvideo/src/effect/glsl/custom-glsl.ts`) - Manages shader registration and retrieval\n\n### Shader Structure\n\nEach custom shader effect follows a standard structure:\n\n```mermaid\ngraph TD\n A[CustomShader Object] --> B[Fragment Shader]\n A --> C[Vertex Shader]\n A --> D[Uniforms]\n A --> E[Sampler Inputs]\n B --> F[GLSL Main Function]\n D --> G[uniform float time]\n D --> H[uniform vec2 resolution]\n D --> I[Effect Parameters]\n```\n\n### Vertex Shader Utilities\n\nThe `vertex.ts` file provides common vertex shader utilities and transformations for effects that require custom vertex manipulation:\n\n| Function | Purpose |\n|----------|---------|\n| `getStandardVertexShader()` | Returns the default passthrough vertex shader |\n| `getUVTransform()` | Generates UV coordinate transformations |\n| `applyTransform()` | Applies transformation matrix to vertices |\n\n资料来源：[packages/openvideo/src/effect/vertex.ts]()\n\n## Effect Application in Clips\n\n### Effect Integration with Clips\n\nEffects are attached to clips through the `effects` array in the clip's configuration. Each effect entry references an effect by key and timing:\n\n```mermaid\ngraph TD\n A[Clip JSON Config] --> B[effects Array]\n B --> C[Effect Entry 1]\n B --> D[Effect Entry 2]\n C --> E{id: string}\n C --> F{key: string}\n C --> G{startTime: number}\n C --> H{duration: number}\n```\n\nThe base clip JSON structure from `packages/openvideo/src/json-serialization.ts` shows the effect definition format:\n\n```typescript\neffects?: Array<{\n id: string;\n key: string;\n startTime: number;\n duration: number;\n targets?: number[];\n}>;\n```\n\n资料来源：[packages/openvideo/src/json-serialization.ts]()\n\n### Effect Timing and Targeting\n\nEffects support precise temporal control:\n\n| Property | Description |\n|----------|-------------|\n| `startTime` | Microseconds from clip start when effect begins |\n| `duration` | Length of effect application in microseconds |\n| `targets` | Optional array of sub-element indices (for multi-layer clips) |\n\n## Sprite-Level Effect Properties\n\nThe base sprite system in `packages/openvideo/src/sprite/base-sprite.ts` defines render-time effect properties that are applied during the render transform calculation:\n\n| Property | Type | Default | Description |\n|----------|------|---------|-------------|\n| `blur` | `number` | 0 | Blur intensity applied during rendering |\n| `brightness` | `number` | 1 | Brightness multiplier |\n| `mirror` | `number` | 0 | Mirror effect intensity (0-1) |\n| `motionBlur` | `number` | 0 | Motion blur amount for moving elements |\n\nThese properties are combined from multiple animation sources at render time:\n\n```mermaid\ngraph TD\n A[Base Transform] --> C[Combined Transform]\n B[Animation Transform] --> C\n E[Effect Properties] --> C\n C --> D[Final Render]\n```\n\n资料来源：[packages/openvideo/src/sprite/base-sprite.ts]()\n\n## Effect Processing Pipeline\n\n### Render Pipeline Integration\n\nThe effects system integrates with the overall render pipeline as follows:\n\n```mermaid\nsequenceDiagram\n participant Timeline\n participant Clip\n participant EffectManager\n participant Compositor\n participant WebCodecs\n \n Timeline->>Clip: currentTime update\n Clip->>EffectManager: getActiveEffects(time)\n EffectManager->>EffectManager: filter by startTime/duration\n EffectManager-->>Compositor: activeEffects[]\n Compositor->>Compositor: applyEffects(frame)\n Compositor->>WebCodecs: encodeFrame()\n```\n\n### Effect Order of Application\n\nEffects are applied in a deterministic order:\n\n1. **Color Adjustments** - Brightness, contrast, saturation\n2. **Blur Effects** - Applied as PixiJS filters\n3. **Custom GLSL Shaders** - User-defined effects\n4. **Chromakey** - Applied last for proper compositing\n\n## Effect Configuration API\n\n### Creating an Effect\n\n```typescript\nimport { Effect } from 'openvideo';\n\n// Built-in effect\nconst blurEffect = new Effect({\n key: 'blur',\n startTime: 0,\n duration: 5000000, // 5 seconds in microseconds\n intensity: 10\n});\n\n// Custom GLSL effect\nconst customEffect = new Effect({\n key: 'my-custom-shader',\n startTime: 1000000,\n duration: 3000000,\n uniforms: {\n color: [1.0, 0.5, 0.0],\n strength: 0.8\n }\n});\n```\n\n### Attaching Effects to Clips\n\n```typescript\nconst videoClip = await Video.fromUrl('video.mp4');\nvideoClip.effects = [\n {\n id: 'effect-1',\n key: 'colorAdjustment',\n startTime: 0,\n duration: clip.duration,\n brightness: 1.2,\n saturation: 0.8\n }\n];\n```\n\n## Custom Shader Registration\n\n### Registering Custom Shaders\n\nDevelopers can register custom GLSL shaders through the custom shader registry:\n\n```typescript\nimport { registerCustomShader } from 'openvideo';\n\nregisterCustomShader({\n name: 'my-custom-effect',\n fragmentShader: `\n uniform float strength;\n uniform vec3 color;\n \n void main() {\n vec4 texture = texture2D(uSampler, vTextureCoord);\n vec3 adjusted = mix(texture.rgb, color, strength);\n gl_FragColor = vec4(adjusted, texture.a);\n }\n `,\n uniforms: [\n { name: 'strength', type: 'float', value: 0.5 },\n { name: 'color', type: 'vec3', value: [1, 1, 1] }\n ]\n});\n```\n\n资料来源：[packages/openvideo/src/effect/glsl/custom-glsl.ts]()\n\n## Performance Considerations\n\n### GPU vs CPU Effects\n\n| Effect Type | Processing Location | Performance Impact |\n|-------------|---------------------|-------------------|\n| Built-in Filters | GPU (PixiJS) | Low |\n| Color Adjustments | GPU (Shader) | Low |\n| Chromakey | GPU (Shader) | Medium |\n| Custom GLSL | GPU (User Shader) | Varies |\n| Complex Blur | CPU/GPU | High |\n\n### Optimization Strategies\n\n1. **Batch similar effects** - Group effects that use the same shader\n2. **Use appropriate precision** - Prefer `lowp` or `mediump` where possible\n3. **Limit effect count** - Excessive effect stacking impacts performance\n4. **Consider resolution scaling** - Lower resolution during preview, full resolution for export\n\n## Related Components\n\n| Component | File Path | Relationship |\n|-----------|-----------|--------------|\n| BaseSprite | `packages/openvideo/src/sprite/base-sprite.ts` | Applies effect properties during render |\n| Compositor | `packages/openvideo/src/compositor.ts` | Executes effects during frame rendering |\n| JsonSerialization | `packages/openvideo/src/json-serialization.ts` | Serializes effect configurations |\n| CaptionClip | `packages/openvideo/src/clips/caption-clip.ts` | Uses color adjustment effects |\n| ColorAdjustment | `packages/openvideo/src/utils/color-adjustment.ts` | Utility for color corrections |\n| Chromakey | `packages/openvideo/src/utils/chromakey.ts` | Green screen removal utility |\n\n---\n\n\n\n## Transitions System\n\n### 相关页面\n\n相关主题：[Effects System](#page-8), [Animation System](#page-6)\n\n\n相关源码文件
\n\n以下源码文件用于生成本页说明：\n\n- [packages/openvideo/src/transition/transition.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/transition/transition.ts)\n- [packages/openvideo/src/transition/glsl/gl-transition.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/transition/glsl/gl-transition.ts)\n- [packages/openvideo/src/transition/glsl/custom-glsl.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/transition/glsl/custom-glsl.ts)\n- [packages/openvideo/src/transition/fragment.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/transition/fragment.ts)\n- [packages/openvideo/src/transition/uniforms.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/transition/uniforms.ts)\n- [packages/openvideo/src/transition/types.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/transition/types.ts)\n- [packages/openvideo/src/transition/vertex.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/transition/vertex.ts)\n \n\n# Transitions System\n\nThe Transitions System is a core module within the openvideo library that enables visual transitions between video clips using WebGL fragment shaders. It provides over 30 built-in transition effects including wipes, fades, geometric transformations, and artistic effects, all implemented through GLSL shaders with customizable uniforms.\n\n## Architecture Overview\n\nThe transitions system follows a layered architecture that separates shader definitions, uniform management, and transition lookup logic.\n\n```mermaid\ngraph TD\n A[Transition Request] --> B[Name Resolution]\n B --> C[Variant Matching]\n C --> D{Gound?}\n D -->|Yes| E[Select GLSL Fragment]\n D -->|No| F[Variant Generation]\n F --> G{Lowercase match?}\n G -->|Yes| E\n G -->|No| H[Error/Default]\n E --> I[Uniform Assembly]\n I --> J[WebGL Render]\n \n K[Basic Uniforms] --> I\n L[Transition-Specific Uniforms] --> I\n```\n\n### Core Components\n\n| Component | File | Purpose |\n|-----------|------|---------|\n| Main Controller | `transition.ts` | Transition lookup, name resolution, GLSL selection |\n| GLSL Base | `gl-transition.ts` | WebGL transition shader base class |\n| Custom GLSL | `custom-glsl.ts` | Custom shader compilation and execution |\n| Fragment Shaders | `fragment.ts` | GLSL shader source code for each transition |\n| Uniforms | `uniforms.ts` | Uniform type definitions and defaults |\n| Types | `types.ts` | TypeScript interfaces for transitions |\n| Vertex Shader | `vertex.ts` | Vertex shader for quad rendering |\n\n资料来源：[packages/openvideo/src/transition/transition.ts:1-50]()\n\n## Transition Types\n\nThe system includes the following built-in transitions, categorized by their visual effect:\n\n### Wipe & Reveal Transitions\n\n| Transition Name | Description | Key Uniforms |\n|-----------------|-------------|--------------|\n| `directional` | Directional wipe effect | direction, smoothness |\n| `directionalwipe` / `directional_wipe` | Wipe with direction control | angle, feather |\n| `directionalwarp` / `directional_warp` | Warped directional wipe | strength, angle |\n| `crosshatch` | Crosshatch pattern reveal | density, smoothness |\n\n### Geometric Transitions\n\n| Transition Name | Description | Key Uniforms |\n|-----------------|-------------|--------------|\n| `circle` / `circleopen` | Circle expand/reveal | radius, feather |\n| `squareswire` / `squaresWire` | Square wireframe reveal | size, smoothness |\n| `hexagonalize` | Hexagonal mosaic transition | scale, angle |\n| `bowtiehorizontal` / `BowTieHorizontal` | Bow tie shape reveal | size, angle |\n\n### Fade & Blend Transitions\n\n| Transition Name | Description | Key Uniforms |\n|-----------------|-------------|--------------|\n| `crosszoom` / `CrossZoom` | Cross-zoom effect with blur | zoom, rotation |\n| `rotate_scale_fade` / `rotatescalefade` | Combined rotation, scale, fade | angle, scale |\n| `luma` | Luminance-based dissolve | threshold, smoothness |\n| `luminance_melt` / `luminancemelt` | Melt effect based on brightness | direction, smoothness |\n| `perlin` | Perlin noise-based transition | scale, seed |\n\n### Distortion Transitions\n\n| Transition Name | Description | Key Uniforms |\n|-----------------|-------------|--------------|\n| `glitchdisplace` / `GlitchDisplace` | Glitch-style displacement | intensity, seed |\n| `undulatingburnout` / `UndulatingBurnOut` | Undulating wave burnout | amplitude, frequency |\n| `displacement` | Generic displacement map | scale, map |\n| `polar_function` / `polar_function` | Polar coordinate transform | radius, angle |\n\n### Creative Transitions\n\n| Transition Name | Description | Key Uniforms |\n|-----------------|-------------|--------------|\n| `gridflip` / `GridFlip` | Grid-based flip reveal | gridSize, axis |\n| `randomSquares` / `RandomSquares` | Random square reveal | size, smoothness |\n| `pixelize` / `Pixelize` | Pixelation effect | pixelSize |\n| `heart` | Heart-shaped reveal | scale, smoothness |\n| `cannabisleaf` / `cannabis_leaf` | Cannabis leaf pattern | scale, rotation |\n| `polkadotscurtain` / `PolkaDotsCurtain` | Polka dots curtain | dotSize, spacing |\n| `stereoviewer` / `StereoViewer` | Stereo viewer effect | depth, offset |\n| `crazyparametricfun` / `CrazyParametricFun` | Parametric function effect | function, iterations |\n\n资料来源：[packages/openvideo/src/transition/transition.ts:60-150]()\n\n## Name Resolution & Matching\n\nThe transition system supports flexible name matching to accommodate various naming conventions used by developers.\n\n### Matching Algorithm\n\n```mermaid\ngraph LR\n A[Input Name] --> B[Direct Match]\n A --> C[Lowercase Match]\n A --> D[Capitalized Match]\n A --> E[Snake_case Match]\n A --> F[No Separator Match]\n \n B --> G{Match Found?}\n C --> G\n D --> G\n E --> G\n F --> G\n \n G -->|Yes| H[Return Transition]\n G -->|No| I[Error with Available Names]\n```\n\n### Variant Generation Strategy\n\nThe system attempts multiple name transformations when looking up transitions:\n\n1. **Exact match** - `transition.name === input`\n2. **Lowercase match** - `name.toLowerCase() === input.toLowerCase()`\n3. **Capitalized match** - `name.charAt(0).toUpperCase() + name.slice(1).toLowerCase()`\n4. **Snake_case conversion** - `name.replace(/([A-Z])/g, '_$1').toLowerCase()`\n5. **No separator** - `name.replace(/_/g, '').toLowerCase()`\n\n资料来源：[packages/openvideo/src/transition/transition.ts:180-220]()\n\n## Uniform System\n\nTransitions use uniforms to pass parameters to GLSL shaders. The uniform system handles type conversion and default values.\n\n### Basic Uniforms\n\nAll transitions receive these fundamental uniforms:\n\n```typescript\ninterface BasicUniforms {\n tex: sampler2D; // Source texture\n tex2: sampler2D; // Target texture\n progress: number; // Transition progress (0-1)\n time: number; // Current time\n resolution: vec2; // Canvas resolution\n}\n```\n\n### Uniform Type Conversion\n\nThe system automatically converts WebGPU-style uniform types to WebGL-compatible formats:\n\n| WebGPU Type | WebGL Type | Conversion |\n|-------------|------------|------------|\n| `int` | `i32` | `Math.trunc(value)` |\n| `ivec2` | `vec2` | Direct conversion |\n\n资料来源：[packages/openvideo/src/transition/transition.ts:100-115]()\n\n### Transition-Specific Uniforms\n\nEach transition type defines its own uniforms that extend the basic set:\n\n```typescript\n// Example: GridFlip uniforms\nconst GRIDFLIP_UNIFORMS = {\n gridSize: { type: 'f32', value: 10.0 },\n axis: { type: 'i32', value: 0 },\n};\n\n// Example: Circle uniforms\nconst CIRCLEOPEN_UNIFORMS = {\n radius: { type: 'f32', value: 1.5 },\n feather: { type: 'f32', value: 0.05 },\n};\n```\n\n资料来源：[packages/openvideo/src/transition/uniforms.ts]()\n\n## GLSL Shader Structure\n\n### Vertex Shader\n\nThe vertex shader renders a full-screen quad for transition effects:\n\n```glsl\nattribute vec2 a_position;\nattribute vec2 a_texCoord;\nvarying vec2 v_texCoord;\n\nvoid main() {\n gl_Position = vec4(a_position, 0.0, 1.0);\n v_texCoord = a_texCoord;\n}\n```\n\n### Fragment Shader Pattern\n\nEach transition implements a fragment shader with the following signature:\n\n```glsl\nuniform sampler2D tex; // From texture\nuniform sampler2D tex2; // To texture\nuniform float progress; // 0.0 to 1.0\nuniform vec2 resolution; // Viewport size\n\n// Transition-specific uniforms...\n\nvarying vec2 v_texCoord;\n\nvec4 getFromColor(vec2 uv) {\n return texture2D(tex, uv);\n}\n\nvec4 getToColor(vec2 uv) {\n return texture2D(tex2, uv);\n}\n\nvoid main() {\n // Transition-specific logic\n vec4 from = getFromColor(uv);\n vec4 to = getToColor(uv);\n gl_FragColor = mix(from, to, progress);\n}\n```\n\n资料来源：[packages/openvideo/src/transition/vertex.ts]()\n资料来源：[packages/openvideo/src/transition/fragment.ts]()\n\n## Rendering Pipeline\n\n```mermaid\ngraph TD\n A[Timeline Position] --> B{Transition Zone?}\n B -->|No| C[Single Clip Render]\n B -->|Yes| D[Load From/To Textures]\n D --> E[Calculate Progress]\n E --> F[Set Uniform Values]\n F --> G[Compile GLSL if needed]\n G --> H[Render Transition Shader]\n H --> I[Output Composite Frame]\n \n J[Basic Uniforms] --> F\n K[Transition Uniforms] --> F\n L[Custom Uniforms] --> F\n```\n\n### Rendering Steps\n\n1. **Texture Binding** - Source and destination textures are bound to texture units\n2. **Progress Calculation** - Transition progress (0-1) is calculated from timeline position\n3. **Uniform Assembly** - Basic uniforms are merged with transition-specific uniforms\n4. **Shader Execution** - WebGL renders the full-screen quad with the transition shader\n5. **Output** - The composited frame is written to the canvas\n\n资料来源：[packages/openvideo/src/transition/glsl/gl-transition.ts]()\n\n## Custom Transitions\n\n### Creating Custom GLSL\n\nDevelopers can create custom transitions by implementing the fragment shader pattern:\n\n```typescript\nimport { GLTransition } from './types';\n\nconst CUSTOM_FRAGMENT = `\nuniform float customParam;\nvarying vec2 v_texCoord;\n\nvec4 getFromColor(vec2 uv) {\n return texture2D(tex, uv);\n}\n\nvec4 getToColor(vec2 uv) {\n return texture2D(tex2, uv);\n}\n\n// Custom transition logic\nvoid main() {\n vec2 uv = v_texCoord;\n vec4 from = getFromColor(uv);\n vec4 to = getToColor(uv);\n \n float ratio = 1.0 - customParam;\n float pr = smoothstep(0.0, ratio, progress);\n \n gl_FragColor = mix(from, to, pr);\n}\n`;\n\nconst customTransition: GLTransition = {\n name: 'custom',\n fragment: CUSTOM_FRAGMENT,\n uniforms: {\n customParam: { type: 'f32', value: 0.5 },\n },\n};\n```\n\n资料来源：[packages/openvideo/src/transition/glsl/custom-glsl.ts]()\n\n### Registering Custom Transitions\n\nCustom transitions can be registered into the local transition registry for flexible lookup:\n\n```typescript\nimport { registerTransition, getAllTransitions } from './transition';\n\n// Register custom transition\nregisterTransition('myCustom', customTransition);\n\n// Retrieve all transitions including custom\nconst all = getAllTransitions();\n```\n\n## Type Definitions\n\n### GLTransition Interface\n\n```typescript\ninterface GLTransition {\n name: string; // Unique identifier\n label?: string; // Display name\n fragment: string; // GLSL fragment shader source\n vertex?: string; // Custom vertex shader (optional)\n uniforms: {\n [key: string]: UniformDefinition;\n };\n}\n\ninterface UniformDefinition {\n type: 'f32' | 'i32' | 'vec2' | 'vec4';\n value: number | number[];\n}\n```\n\n资料来源：[packages/openvideo/src/transition/types.ts]()\n\n## Performance Considerations\n\n### Shader Compilation\n\n- GLSL shaders are compiled once and cached for reuse\n- Subsequent uses of the same transition use the cached program\n\n### Texture Sampling\n\n- Transitions use bilinear filtering for smooth interpolation\n- Mipmaps are generated for efficient downsampling during blur effects\n\n### Uniform Updates\n\n- Progress uniform is updated every frame during transitions\n- Type conversion is performed once when the transition starts, not per-frame\n\n## Error Handling\n\nWhen a transition cannot be found, the system provides helpful error messages:\n\n```typescript\n// Error message format\n`Transition '${name}' not found. Available: ${availableNames}...`\n```\n\nThe system attempts to suggest similar transitions by checking the first 5 available transitions and 3 local definitions.\n\n资料来源：[packages/openvideo/src/transition/transition.ts:230-250]()\n\n## See Also\n\n- [Studio System](../studio) - High-level composition API that uses transitions\n- [Clip System](../clips) - Video clip handling with transition support\n- [Animation Presets](../animation/presets) - Keyframe animation system\n\n---\n\n\n\n## Utilities and Helpers\n\n### 相关页面\n\n相关主题：[Compositor and Rendering](#page-7), [Clip System](#page-5)\n\n\n相关源码文件
\n\n以下源码文件用于生成本页说明：\n\n- [packages/openvideo/src/utils/index.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/utils/index.ts)\n- [packages/openvideo/src/utils/asset-manager.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/utils/asset-manager.ts)\n- [packages/openvideo/src/utils/audio.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/utils/audio.ts)\n- [packages/openvideo/src/utils/srt-parser.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/utils/srt-parser.ts)\n- [packages/openvideo/src/utils/fonts.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/utils/fonts.ts)\n- [packages/openvideo/src/utils/video.ts](https://github.com/openvideovdev/openvideo/blob/main/packages/openvideo/src/utils/video.ts)\n- [packages/openvideo/src/utils/color.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/utils/color.ts)\n- [packages/openvideo/src/utils/common.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/utils/common.ts)\n \n\n# Utilities and Helpers\n\n## Overview\n\nThe `openvideo` library provides a comprehensive suite of utility modules under `packages/openvideo/src/utils/` that support core functionality across the video rendering pipeline. These utilities handle resource management, media processing, formatting, and color manipulation—enabling the higher-level components like `Studio`, `Compositor`, and various clip types to operate efficiently.\n\n## Architecture Overview\n\n```mermaid\ngraph TD\n subgraph \"Utility Layer\"\n UTILS_INDEX[utils/index.ts
Module Exports]\n ASSET_MGR[asset-manager.ts
Resource Management]\n AUDIO_UTIL[audio.ts
Audio Processing]\n SRT[SRT Parser
Subtitle Handling]\n FONTS[fonts.ts
Font Management]\n VIDEO_UTIL[video.ts
Video Utilities]\n COLOR[color.ts
Color Operations]\n COMMON[common.ts
Common Helpers]\n end\n \n subgraph \"Consumer Components\"\n STUDIO[Studio]\n COMPOSITOR[Compositor]\n VIDEO_CLIP[VideoClip]\n TEXT_CLIP[TextClip]\n CAPTION_CLIP[CaptionClip]\n end\n \n UTILS_INDEX --> ASSET_MGR\n UTILS_INDEX --> AUDIO_UTIL\n UTILS_INDEX --> SRT\n UTILS_INDEX --> FONTS\n UTILS_INDEX --> VIDEO_UTIL\n UTILS_INDEX --> COLOR\n UTILS_INDEX --> COMMON\n \n ASSET_MGR --> VIDEO_CLIP\n ASSET_MGR --> STUDIO\n FONTS --> TEXT_CLIP\n AUDIO_UTIL --> COMPOSITOR\n COLOR --> TEXT_CLIP\n COLOR --> CAPTION_CLIP\n VIDEO_UTIL --> VIDEO_CLIP\n```\n\n## Module Descriptions\n\n### Asset Manager (`asset-manager.ts`)\n\nThe asset manager provides centralized resource handling capabilities for loading and managing media assets. It abstracts the complexities of OPFS (Origin Private File System) operations and provides consistent interfaces for accessing streams and files.\n\n**Key Responsibilities:**\n\n- Stream management for remote and local resources\n- OPFS file read/write operations\n- Resource lifecycle management\n\n**Source:** [packages/openvideo/src/utils/asset-manager.ts:1-50]()\n\n### Audio Utilities (`audio.ts`)\n\nAudio utilities provide processing functions for audio tracks within video compositions. These utilities handle audio decoding, volume control, and track synchronization.\n\n**Key Functions:**\n\n| Function | Purpose |\n|----------|---------|\n| `processAudioTrack()` | Process raw audio samples for integration |\n| `adjustVolume()` | Apply volume modifications to audio streams |\n| `syncAudioTracks()` | Synchronize multiple audio tracks |\n\n**Source:** [packages/openvideo/src/utils/audio.ts:1-40]()\n\n### SRT Parser (`srt-parser.ts`)\n\nThe SRT parser handles SubRip subtitle file parsing and conversion. It transforms SRT format subtitles into structured caption data usable by the `CaptionClip` component.\n\n**Parsing Flow:**\n\n```mermaid\ngraph LR\n SRT_FILE[SRT File] --> PARSER[SRT Parser]\n PARSER --> CAPTION_DATA[Caption Data Structure]\n CAPTION_DATA --> CAPTION_CLIP[CaptionClip]\n```\n\n**Source:** [packages/openvideo/src/utils/srt-parser.ts:1-60]()\n\n### Font Management (`fonts.ts`)\n\nFont utilities manage font loading, caching, and fallback strategies for text rendering in `TextClip` and `CaptionClip` components.\n\n**Font Loading Strategy:**\n\n| Step | Operation |\n|------|-----------|\n| 1 | Check font cache for existing entry |\n| 2 | If missing, fetch font from URL |\n| 3 | Parse font data using FontFace API |\n| 4 | Add to document fonts |\n| 5 | Cache for subsequent use |\n\n**Source:** [packages/openvideo/src/utils/fonts.ts:1-45]()\n\n### Video Utilities (`video.ts`)\n\nVideo utilities provide helper functions for video frame processing, thumbnail generation, and metadata extraction. These utilities support the `VideoClip` component's frame-seeking and thumbnail capabilities.\n\n**Source:** [packages/openvideo/src/utils/video.ts:1-55]()\n\n### Color Utilities (`color.ts`)\n\nColor utilities handle color format conversion, validation, and transformation for consistent styling across text, captions, and visual effects.\n\n**Supported Color Formats:**\n\n| Format | Example |\n|--------|---------|\n| Hex | `#FF5733` |\n| RGB | `rgb(255, 87, 51)` |\n| RGBA | `rgba(255, 87, 51, 0.5)` |\n| Named | `red`, `blue`, `transparent` |\n\n**Usage in Clips:**\n\nThe `TextClip` and `CaptionClip` components utilize color utilities for:\n\n- `fill` property for text color\n- `stroke` color configuration\n- `dropShadow` color and alpha values\n\n**Source:** [packages/openvideo/src/utils/color.ts:1-35]()\n\n### Common Utilities (`common.ts`)\n\nCommon utilities provide shared helper functions used throughout the library, including type guards, validation helpers, and general-purpose transformations.\n\n**Source:** [packages/openvideo/src/utils/common.ts:1-30]()\n\n## Integration with Core Components\n\n### VideoClip Integration\n\nThe `VideoClip` class relies on utility modules for resource loading and video processing:\n\n```typescript\n// From packages/openvideo/src/clips/video-clip.ts:42-55\nconst stream = await ResourceManager.getReadableStream(url);\nconst clip = new Video(stream, {}, url);\nawait clip.ready;\n```\n\n### TextClip Integration\n\nText styling leverages color utilities for consistent rendering:\n\n```typescript\n// From packages/openvideo/src/clips/text-clip.ts:95-110\nif (this.originalOpts.fill !== undefined)\n style.color = this.originalOpts.fill as any;\nif (this.originalOpts.stroke) {\n style.stroke = {\n color: this.originalOpts.stroke.color as any,\n width: this.originalOpts.stroke.width,\n };\n}\n```\n\n### CaptionClip Integration\n\nCaption styling combines color, font, and formatting utilities:\n\n```typescript\n// From packages/openvideo/src/clips/caption-clip.ts:120-135\nif (opts.dropShadow) {\n style.shadow = {\n color: (opts.dropShadow.color ?? '#000000') as string,\n alpha: opts.dropShadow.alpha ?? 0.5,\n blur: opts.dropShadow.blur ?? 4,\n distance: opts.dropShadow.distance ?? 0,\n angle: opts.dropShadow.angle ?? 0,\n };\n}\n```\n\n## Module Export Pattern\n\nAll utilities are exported through the central `utils/index.ts` entry point:\n\n```typescript\n// packages/openvideo/src/utils/index.ts\nexport * from './asset-manager';\nexport * from './audio';\nexport * from './srt-parser';\nexport * from './fonts';\nexport * from './video';\nexport * from './color';\nexport * from './common';\n```\n\nThis pattern allows consumers to import specific utilities as needed:\n\n```typescript\nimport { ResourceManager, ColorUtils } from 'openvideo';\n```\n\n## Utility Functions Reference\n\n### Resource Management\n\n| Function | Parameters | Returns | Description |\n|----------|------------|---------|-------------|\n| `getReadableStream()` | `url: string` | `Promise` | Fetches resource as stream |\n| `write()` | `file: OPFSToolFile, stream: ReadableStream` | `Promise` | Writes stream to OPFS file |\n\n### Color Operations\n\n| Function | Parameters | Returns | Description |\n|----------|------------|---------|-------------|\n| `parseColor()` | `color: string` | `ColorObject` | Parse color string to object |\n| `toHex()` | `color: ColorObject` | `string` | Convert to hex format |\n\n### Font Operations\n\n| Function | Parameters | Returns | Description |\n|----------|------------|---------|-------------|\n| `loadFont()` | `name: string, url: string` | `Promise` | Load and register font |\n| `getFont()` | `name: string` | `FontFace \\| null` | Retrieve cached font |\n\n## Summary\n\nThe utility modules in openvideo form a foundational layer that abstracts common operations away from business logic. By centralizing resource management, media processing, color handling, and font operations, the library maintains consistency and reduces duplication across components like `VideoClip`, `TextClip`, and `CaptionClip`. These utilities are designed to be composable and are exported through a single entry point for convenient consumption.\n\n---\n\n---\n\n## Doramagic 踩坑日志\n\n项目：openvideodev/openvideo\n\n摘要：发现 11 个潜在踩坑项，其中 0 个为 high/blocking；最高优先级：安装坑 - 来源证据：Modular architecture: separate core logic from PixiJS renderer to enable React Native / headless use。\n\n## 1. 安装坑 · 来源证据：Modular architecture: separate core logic from PixiJS renderer to enable React Native / headless use\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：GitHub 社区证据显示该项目存在一个安装相关的待验证问题：Modular architecture: separate core logic from PixiJS renderer to enable React Native / headless use\n- 对用户的影响：可能增加新用户试用和生产接入成本。\n- 建议检查：来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。\n- 防护动作：不得脱离来源链接放大为确定性结论；需要标注适用版本和复核状态。\n- 证据：community_evidence:github | cevd_28cbc35c1a0544478da4fb17013e349a | https://github.com/openvideodev/openvideo/issues/78 | 来源类型 github_issue 暴露的待验证使用条件。\n\n## 2. 配置坑 · 来源证据：Image and Audio clips lost during loadFromJSON/exportToJSON round-trip\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：GitHub 社区证据显示该项目存在一个配置相关的待验证问题：Image and Audio clips lost during loadFromJSON/exportToJSON round-trip\n- 对用户的影响：可能增加新用户试用和生产接入成本。\n- 建议检查：来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。\n- 防护动作：不得脱离来源链接放大为确定性结论；需要标注适用版本和复核状态。\n- 证据：community_evidence:github | cevd_e2e8dc4e56504c3c909c7cf990b5a336 | https://github.com/openvideodev/openvideo/issues/60 | 来源类型 github_issue 暴露的待验证使用条件。\n\n## 3. 配置坑 · 来源证据：[Bug] Transition effect \"display\" value update not reflected in Player after clip repositioning\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：GitHub 社区证据显示该项目存在一个配置相关的待验证问题：[Bug] Transition effect \"display\" value update not reflected in Player after clip repositioning\n- 对用户的影响：可能增加新用户试用和生产接入成本。\n- 建议检查：来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。\n- 防护动作：不得脱离来源链接放大为确定性结论；需要标注适用版本和复核状态。\n- 证据：community_evidence:github | cevd_f5e332be3e884e0eb6bb27bb45d7524a | https://github.com/openvideodev/openvideo/issues/52 | 来源类型 github_issue 暴露的待验证使用条件。\n\n## 4. 配置坑 · 来源证据：display property not initialized for Image clips\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：GitHub 社区证据显示该项目存在一个配置相关的待验证问题：display property not initialized for Image clips\n- 对用户的影响：可能阻塞安装或首次运行。\n- 建议检查：来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。\n- 防护动作：不得脱离来源链接放大为确定性结论；需要标注适用版本和复核状态。\n- 证据：community_evidence:github | cevd_45024018965c442dbaaf3bb5441b75f2 | https://github.com/openvideodev/openvideo/issues/18 | 来源类型 github_issue 暴露的待验证使用条件。\n\n## 5. 配置坑 · 来源证据：meta property is read-only\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：GitHub 社区证据显示该项目存在一个配置相关的待验证问题：meta property is read-only\n- 对用户的影响：可能增加新用户试用和生产接入成本。\n- 建议检查：来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。\n- 防护动作：不得脱离来源链接放大为确定性结论；需要标注适用版本和复核状态。\n- 证据：community_evidence:github | cevd_2798efa2236a4fe1a82930d7a1b1cc80 | https://github.com/openvideodev/openvideo/issues/19 | 来源类型 github_issue 暴露的待验证使用条件。\n\n## 6. 能力坑 · 能力判断依赖假设\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：README/documentation is current enough for a first validation pass.\n- 对用户的影响：假设不成立时，用户拿不到承诺的能力。\n- 建议检查：将假设转成下游验证清单。\n- 防护动作：假设必须转成验证项；没有验证结果前不能写成事实。\n- 证据：capability.assumptions | github_repo:1125747446 | https://github.com/openvideodev/openvideo | README/documentation is current enough for a first validation pass.\n\n## 7. 维护坑 · 维护活跃度未知\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：未记录 last_activity_observed。\n- 对用户的影响：新项目、停更项目和活跃项目会被混在一起，推荐信任度下降。\n- 建议检查：补 GitHub 最近 commit、release、issue/PR 响应信号。\n- 防护动作：维护活跃度未知时，推荐强度不能标为高信任。\n- 证据：evidence.maintainer_signals | github_repo:1125747446 | https://github.com/openvideodev/openvideo | last_activity_observed missing\n\n## 8. 安全/权限坑 · 下游验证发现风险项\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：no_demo\n- 对用户的影响：下游已经要求复核，不能在页面中弱化。\n- 建议检查：进入安全/权限治理复核队列。\n- 防护动作：下游风险存在时必须保持 review/recommendation 降级。\n- 证据：downstream_validation.risk_items | github_repo:1125747446 | https://github.com/openvideodev/openvideo | no_demo; severity=medium\n\n## 9. 安全/权限坑 · 存在评分风险\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：no_demo\n- 对用户的影响：风险会影响是否适合普通用户安装。\n- 建议检查：把风险写入边界卡，并确认是否需要人工复核。\n- 防护动作：评分风险必须进入边界卡，不能只作为内部分数。\n- 证据：risks.scoring_risks | github_repo:1125747446 | https://github.com/openvideodev/openvideo | no_demo; severity=medium\n\n## 10. 维护坑 · issue/PR 响应质量未知\n\n- 严重度：low\n- 证据强度：source_linked\n- 发现：issue_or_pr_quality=unknown。\n- 对用户的影响：用户无法判断遇到问题后是否有人维护。\n- 建议检查：抽样最近 issue/PR，判断是否长期无人处理。\n- 防护动作：issue/PR 响应未知时，必须提示维护风险。\n- 证据：evidence.maintainer_signals | github_repo:1125747446 | https://github.com/openvideodev/openvideo | issue_or_pr_quality=unknown\n\n## 11. 维护坑 · 发布节奏不明确\n\n- 严重度：low\n- 证据强度：source_linked\n- 发现：release_recency=unknown。\n- 对用户的影响：安装命令和文档可能落后于代码，用户踩坑概率升高。\n- 建议检查：确认最近 release/tag 和 README 安装命令是否一致。\n- 防护动作：发布节奏未知或过期时，安装说明必须标注可能漂移。\n- 证据：evidence.maintainer_signals | github_repo:1125747446 | https://github.com/openvideodev/openvideo | release_recency=unknown\n\n\n",
"markdown_key": "openvideo",
"pages": "draft",
"source_refs": [
{
"evidence_id": "github_repo:1125747446",
"kind": "repo",
"supports_claim_ids": [
"claim_identity",
"claim_distribution",
"claim_capability"
],
"url": "https://github.com/openvideodev/openvideo"
},
{
"evidence_id": "art_036db05cb59c422e8be9fa667545a55e",
"kind": "docs",
"supports_claim_ids": [
"claim_identity",
"claim_distribution",
"claim_capability"
],
"url": "https://github.com/openvideodev/openvideo#readme"
}
],
"summary": "DeepWiki/Human Wiki 完整输出，末尾追加 Discovery Agent 踩坑日志。",
"title": "openvideo 说明书",
"toc": [
"https://github.com/openvideodev/openvideo 项目说明书",
"目录",
"Overview",
"What is OpenVideo?",
"Core Architecture",
"Technology Stack",
"Key Features",
"Package Structure",
"Doramagic 踩坑日志"
]
}
},
"quality_gate": {
"blocking_gaps": [],
"category_confidence": "medium",
"compile_status": "ready_for_review",
"five_assets_present": true,
"install_sandbox_verified": true,
"missing_evidence": [],
"next_action": "publish to Doramagic.ai project surfaces",
"prompt_preview_boundary_ok": true,
"publish_status": "publishable",
"quick_start_verified": true,
"repo_clone_verified": true,
"repo_commit": "a80b058d274b2486ed0b23cc848e92b56474b78b",
"repo_inspection_error": null,
"repo_inspection_files": [
"pnpm-lock.yaml",
"package.json",
"README.md",
"docs/source.config.ts",
"docs/package.json",
"docs/README.md",
"docs/tsconfig.json",
"docs/src/lib/cn.ts",
"docs/src/lib/source.ts",
"docs/src/app/sitemap.ts",
"docs/src/app/robots.ts",
"docs/src/app/llms-full.txt/route.ts",
"docs/src/app/api/search/route.ts",
"docs/src/app/llms.mdx/docs/[[...slug]]/route.ts",
"docs/content/docs/core/meta.json",
"docs/content/docs/core/effects.mdx",
"docs/content/docs/core/clips.mdx",
"docs/content/docs/core/events.mdx",
"docs/content/docs/core/index.mdx",
"docs/content/docs/core/chroma-key.mdx",
"docs/content/docs/core/serialization.mdx",
"docs/content/docs/core/api-reference.mdx",
"docs/content/docs/core/installation.mdx",
"docs/content/docs/core/transitions.mdx",
"docs/content/docs/core/rendering.mdx",
"docs/content/docs/core/animations.mdx",
"docs/content/docs/core/changelog.mdx",
"docs/content/docs/core/basic-usage.mdx",
"docs/content/docs/core/tracks.mdx",
"docs/content/docs/core/commands.mdx",
"docs/content/docs/pixi-renderer/meta.json",
"docs/content/docs/pixi-renderer/effects.mdx",
"docs/content/docs/pixi-renderer/clips.mdx",
"docs/content/docs/pixi-renderer/events.mdx",
"docs/content/docs/pixi-renderer/index.mdx",
"docs/content/docs/pixi-renderer/chroma-key.mdx",
"docs/content/docs/pixi-renderer/serialization.mdx",
"docs/content/docs/pixi-renderer/api-reference.mdx",
"docs/content/docs/pixi-renderer/installation.mdx",
"docs/content/docs/pixi-renderer/transitions.mdx"
],
"repo_inspection_verified": true,
"review_reasons": [],
"tag_count_ok": true,
"unsupported_claims": []
},
"schema_version": "0.1",
"user_assets": {
"ai_context_pack": {
"asset_id": "ai_context_pack",
"filename": "AI_CONTEXT_PACK.md",
"markdown": "# combo - Doramagic AI Context Pack\n\n> 定位：安装前体验与判断资产。它帮助宿主 AI 有一个好的开始，但不代表已经安装、执行或验证目标项目。\n\n## 充分原则\n\n- **充分原则，不是压缩原则**：AI Context Pack 应该充分到让宿主 AI 在开工前理解项目价值、能力边界、使用入口、风险和证据来源；它可以分层组织，但不以最短摘要为目标。\n- **压缩策略**：只压缩噪声和重复内容，不压缩会影响判断和开工质量的上下文。\n\n## 给宿主 AI 的使用方式\n\n你正在读取 Doramagic 为 combo 编译的 AI Context Pack。请把它当作开工前上下文：帮助用户理解适合谁、能做什么、如何开始、哪些必须安装后验证、风险在哪里。不要声称你已经安装、运行或执行了目标项目。\n\n## Claim 消费规则\n\n- **事实来源**：Repo Evidence + Claim/Evidence Graph；Human Wiki 只提供显著性、术语和叙事结构。\n- **事实最低状态**：`supported`\n- `supported`：可以作为项目事实使用，但回答中必须引用 claim_id 和证据路径。\n- `weak`：只能作为低置信度线索，必须要求用户继续核实。\n- `inferred`：只能用于风险提示或待确认问题，不能包装成项目事实。\n- `unverified`：不得作为事实使用，应明确说证据不足。\n- `contradicted`：必须展示冲突来源，不得替用户强行选择一个版本。\n\n## 它最适合谁\n\n- **想在安装前理解开源项目价值和边界的用户**：当前证据主要来自项目文档。 证据：`README.md` Claim：`clm_0002` supported 0.86\n\n## 它能做什么\n\n- **命令行启动或安装流程**（需要安装后验证）：项目文档中存在可执行命令，真实使用需要在本地或宿主环境中运行这些命令。 证据：`README.md`, `packages/node/README.md` Claim：`clm_0001` supported 0.86\n\n## 怎么开始\n\n- `npm install openvideo` 证据：`README.md` Claim：`clm_0003` supported 0.86\n- `pnpm add @openvideo/node openvideo` 证据：`packages/node/README.md` Claim：`clm_0004` supported 0.86\n- `git clone ` 证据：`packages/node/README.md` Claim：`clm_0005` supported 0.86\n- `npx playwright install chromium` 证据：`packages/node/README.md` Claim：`clm_0006` supported 0.86\n\n## 继续前判断卡\n\n- **当前建议**：仅建议沙盒试装\n- **为什么**：项目存在安装命令、宿主配置或本地写入线索，不建议直接进入主力环境，应先在隔离环境试装。\n\n### 30 秒判断\n\n- **现在怎么做**：仅建议沙盒试装\n- **最小安全下一步**：先跑 Prompt Preview；若仍要安装，只在隔离环境试装\n- **先别相信**：真实输出质量不能在安装前相信。\n- **继续会触碰**：命令执行、本地环境或项目文件、宿主 AI 上下文\n\n### 现在可以相信\n\n- **适合人群线索：想在安装前理解开源项目价值和边界的用户**（supported）：有 supported claim 或项目证据支撑，但仍不等于真实安装效果。 证据：`README.md` Claim：`clm_0002` supported 0.86\n- **能力存在：命令行启动或安装流程**（supported）：可以相信项目包含这类能力线索；是否适合你的具体任务仍要试用或安装后验证。 证据：`README.md`, `packages/node/README.md` Claim：`clm_0001` supported 0.86\n- **存在 Quick Start / 安装命令线索**（supported）：可以相信项目文档出现过启动或安装入口；不要因此直接在主力环境运行。 证据：`README.md` Claim：`clm_0003` supported 0.86\n\n### 现在还不能相信\n\n- **真实输出质量不能在安装前相信。**（unverified）：Prompt Preview 只能展示引导方式，不能证明真实项目中的结果质量。\n- **宿主 AI 版本兼容性不能在安装前相信。**（unverified）：Claude、Cursor、Codex、Gemini 等宿主加载规则和版本差异必须在真实环境验证。\n- **不会污染现有宿主 AI 行为，不能直接相信。**（inferred）：Skill、plugin、AGENTS/CLAUDE/GEMINI 指令可能改变宿主 AI 的默认行为。\n- **可安全回滚不能默认相信。**（unverified）：除非项目明确提供卸载和恢复说明，否则必须先在隔离环境验证。\n- **真实安装后是否与用户当前宿主 AI 版本兼容？**（unverified）：兼容性只能通过实际宿主环境验证。\n- **项目输出质量是否满足用户具体任务？**（unverified）：安装前预览只能展示流程和边界，不能替代真实评测。\n- **安装命令是否需要网络、权限或全局写入？**（unverified）：这影响企业环境和个人环境的安装风险。 证据：`README.md`\n\n### 继续会触碰什么\n\n- **命令执行**：包管理器、网络下载、本地插件目录、项目配置或用户主目录。 原因：运行第一条命令就可能产生环境改动；必须先判断是否值得跑。 证据：`README.md`, `packages/node/README.md`\n- **本地环境或项目文件**：安装结果、插件缓存、项目配置或本地依赖目录。 原因：安装前无法证明写入范围和回滚方式，需要隔离验证。 证据：`README.md`, `packages/node/README.md`\n- **宿主 AI 上下文**：AI Context Pack、Prompt Preview、Skill 路由、风险规则和项目事实。 原因：导入上下文会影响宿主 AI 后续判断，必须避免把未验证项包装成事实。\n\n### 最小安全下一步\n\n- **先跑 Prompt Preview**：用安装前交互式试用判断工作方式是否匹配，不需要授权或改环境。（适用：任何项目都适用，尤其是输出质量未知时。）\n- **只在隔离目录或测试账号试装**：避免安装命令污染主力宿主 AI、真实项目或用户主目录。（适用：存在命令执行、插件配置或本地写入线索时。）\n- **安装后只验证一个最小任务**：先验证加载、兼容、输出质量和回滚，再决定是否深用。（适用：准备从试用进入真实工作流时。）\n\n### 退出方式\n\n- **保留安装前状态**：记录原始宿主配置和项目状态，后续才能判断是否可恢复。\n- **记录安装命令和写入路径**：没有明确卸载说明时，至少要知道哪些目录或配置需要手动清理。\n- **如果没有回滚路径，不进入主力环境**：不可回滚是继续前阻断项，不应靠信任或运气继续。\n\n## 哪些只能预览\n\n- 解释项目适合谁和能做什么\n- 基于项目文档演示典型对话流程\n- 帮助用户判断是否值得安装或继续研究\n\n## 哪些必须安装后验证\n\n- 真实安装 Skill、插件或 CLI\n- 执行脚本、修改本地文件或访问外部服务\n- 验证真实输出质量、性能和兼容性\n\n## 边界与风险判断卡\n\n- **把安装前预览误认为真实运行**：用户可能高估项目已经完成的配置、权限和兼容性验证。 处理方式：明确区分 prompt_preview_can_do 与 runtime_required。 Claim：`clm_0007` inferred 0.45\n- **命令执行会修改本地环境**：安装命令可能写入用户主目录、宿主插件目录或项目配置。 处理方式：先在隔离环境或测试账号中运行。 证据：`README.md`, `packages/node/README.md` Claim：`clm_0008` supported 0.86\n- **待确认**：真实安装后是否与用户当前宿主 AI 版本兼容？。原因：兼容性只能通过实际宿主环境验证。\n- **待确认**：项目输出质量是否满足用户具体任务？。原因：安装前预览只能展示流程和边界，不能替代真实评测。\n- **待确认**：安装命令是否需要网络、权限或全局写入？。原因：这影响企业环境和个人环境的安装风险。\n\n## 开工前工作上下文\n\n### 加载顺序\n\n- 先读取 how_to_use.host_ai_instruction，建立安装前判断资产的边界。\n- 读取 claim_graph_summary，确认事实来自 Claim/Evidence Graph，而不是 Human Wiki 叙事。\n- 再读取 intended_users、capabilities 和 quick_start_candidates，判断用户是否匹配。\n- 需要执行具体任务时，优先查 role_skill_index，再查 evidence_index。\n- 遇到真实安装、文件修改、网络访问、性能或兼容性问题时，转入 risk_card 和 boundaries.runtime_required。\n\n### 任务路由\n\n- **命令行启动或安装流程**：先说明这是安装后验证能力，再给出安装前检查清单。 边界：必须真实安装或运行后验证。 证据：`README.md`, `packages/node/README.md` Claim：`clm_0001` supported 0.86\n\n### 上下文规模\n\n- 文件总数：170\n- 重要文件覆盖：40/170\n- 证据索引条目：40\n- 角色 / Skill 条目：5\n\n### 证据不足时的处理\n\n- **missing_evidence**：说明证据不足，要求用户提供目标文件、README 段落或安装后验证记录；不要补全事实。\n- **out_of_scope_request**：说明该任务超出当前 AI Context Pack 证据范围，并建议用户先查看 Human Manual 或真实安装后验证。\n- **runtime_request**：给出安装前检查清单和命令来源，但不要替用户执行命令或声称已执行。\n- **source_conflict**：同时展示冲突来源，标记为待核实，不要强行选择一个版本。\n\n## Prompt Recipes\n\n### 适配判断\n\n- 目标：判断这个项目是否适合用户当前任务。\n- 预期输出：适配结论、关键理由、证据引用、安装前可预览内容、必须安装后验证内容、下一步建议。\n\n```text\n请基于 combo 的 AI Context Pack，先问我 3 个必要问题，然后判断它是否适合我的任务。回答必须包含：适合谁、能做什么、不能做什么、是否值得安装、证据来自哪里。所有项目事实必须引用 evidence_refs、source_paths 或 claim_id。\n```\n\n### 安装前体验\n\n- 目标：让用户在安装前感受核心工作流，同时避免把预览包装成真实能力或营销承诺。\n- 预期输出：一段带边界标签的体验剧本、安装后验证清单和谨慎建议；不含真实运行承诺或强营销表述。\n\n```text\n请把 combo 当作安装前体验资产，而不是已安装工具或真实运行环境。\n\n请严格输出四段：\n1. 先问我 3 个必要问题。\n2. 给出一段“体验剧本”：用 [安装前可预览]、[必须安装后验证]、[证据不足] 三种标签展示它可能如何引导工作流。\n3. 给出安装后验证清单：列出哪些能力只有真实安装、真实宿主加载、真实项目运行后才能确认。\n4. 给出谨慎建议：只能说“值得继续研究/试装”“先补充信息后再判断”或“不建议继续”，不得替项目背书。\n\n硬性边界：\n- 不要声称已经安装、运行、执行测试、修改文件或产生真实结果。\n- 不要写“自动适配”“确保通过”“完美适配”“强烈建议安装”等承诺性表达。\n- 如果描述安装后的工作方式，必须使用“如果安装成功且宿主正确加载 Skill，它可能会……”这种条件句。\n- 体验剧本只能写成“示例台词/假设流程”：使用“可能会询问/可能会建议/可能会展示”，不要写“已写入、已生成、已通过、正在运行、正在生成”。\n- Prompt Preview 不负责给安装命令；如用户准备试装，只能提示先阅读 Quick Start 和 Risk Card，并在隔离环境验证。\n- 所有项目事实必须来自 supported claim、evidence_refs 或 source_paths；inferred/unverified 只能作风险或待确认项。\n\n```\n\n### 角色 / Skill 选择\n\n- 目标：从项目里的角色或 Skill 中挑选最匹配的资产。\n- 预期输出：候选角色或 Skill 列表，每项包含适用场景、证据路径、风险边界和是否需要安装后验证。\n\n```text\n请读取 role_skill_index，根据我的目标任务推荐 3-5 个最相关的角色或 Skill。每个推荐都要说明适用场景、可能输出、风险边界和 evidence_refs。\n```\n\n### 风险预检\n\n- 目标：安装或引入前识别环境、权限、规则冲突和质量风险。\n- 预期输出：环境、权限、依赖、许可、宿主冲突、质量风险和未知项的检查清单。\n\n```text\n请基于 risk_card、boundaries 和 quick_start_candidates，给我一份安装前风险预检清单。不要替我执行命令，只说明我应该检查什么、为什么检查、失败会有什么影响。\n```\n\n### 宿主 AI 开工指令\n\n- 目标：把项目上下文转成一次对话开始前的宿主 AI 指令。\n- 预期输出：一段边界明确、证据引用明确、适合复制给宿主 AI 的开工前指令。\n\n```text\n请基于 combo 的 AI Context Pack，生成一段我可以粘贴给宿主 AI 的开工前指令。这段指令必须遵守 not_runtime=true，不能声称项目已经安装、运行或产生真实结果。\n```\n\n\n## 角色 / Skill 索引\n\n- 共索引 5 个角色 / Skill / 项目文档条目。\n\n- **docs**（project_doc）：This is a Next.js application generated with Create Fumadocs https://github.com/fuma-nama/fumadocs . 激活提示：当用户需要理解项目结构、安装方式或边界时参考。 证据：`docs/README.md`\n- **Official Editors**（project_doc）：A high-performance video rendering and processing library for the web, built with WebCodecs and PixiJS. 激活提示：当用户需要理解项目结构、安装方式或边界时参考。 证据：`README.md`\n- **React + TypeScript + Vite**（project_doc）：This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 激活提示：当用户需要理解项目结构、安装方式或边界时参考。 证据：`examples/README.md`\n- **@designcombo/node**（project_doc）：Node.js video renderer for Combo using Playwright and WebCodecs. 激活提示：当用户需要理解项目结构、安装方式或边界时参考。 证据：`packages/node/README.md`\n- **Preamble**（project_doc）：GNU Affero General Public License ================================= 激活提示：当用户需要理解项目结构、安装方式或边界时参考。 证据：`LICENSE-AGPL3.md`\n\n## 证据索引\n\n- 共索引 40 条证据。\n\n- **docs**（documentation）：This is a Next.js application generated with Create Fumadocs https://github.com/fuma-nama/fumadocs . 证据：`docs/README.md`\n- **Official Editors**（documentation）：A high-performance video rendering and processing library for the web, built with WebCodecs and PixiJS. 证据：`README.md`\n- **React + TypeScript + Vite**（documentation）：This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 证据：`examples/README.md`\n- **@designcombo/node**（documentation）：Node.js video renderer for Combo using Playwright and WebCodecs. 证据：`packages/node/README.md`\n- **Package**（package_manifest）：{ \"name\": \"docs\", \"version\": \"0.0.0\", \"private\": true, \"scripts\": { \"build\": \"next build\", \"dev\": \"next dev\", \"start\": \"next start\", \"types:check\": \"fumadocs-mdx && next typegen && tsc --noEmit\", \"postinstall\": \"fumadocs-mdx\" }, \"dependencies\": { \"fumadocs-core\": \"16.4.7\", \"fumadocs-mdx\": \"14.2.5\", \"fumadocs-ui\": \"16.4.7\", \"lucide-react\": \"^0.562.0\", \"next\": \"16.1.1\", \"react\": \"^19.2.3\", \"react-dom\": \"^19.2.3\", \"tailwind-merge\": \"^3.4.0\" }, \"devDependencies\": { \"@tailwindcss/postcss\": \"^4.1.18\", \"@types/mdx\": \"^2.0.13\", \"@types/node\": \"^25.0.5\", \"@types/react\": \"^19.2.8\", \"@types/react-dom\": \"^19.2.3\", \"postcss\": \"^8.5.6\", \"tailwindcss\": \"^4.1.18\", \"typescript\": \"^5.9.3\" } } 证据：`docs/package.json`\n- **Package**（package_manifest）：{ \"name\": \"examples\", \"private\": true, \"version\": \"0.0.0\", \"type\": \"module\", \"scripts\": { \"dev\": \"vite\", \"build\": \"tsc -b && vite build\", \"lint\": \"eslint .\", \"preview\": \"vite preview\" }, \"dependencies\": { \"@tailwindcss/vite\": \"^4.2.1\", \"class-variance-authority\": \"^0.7.1\", \"clsx\": \"^2.1.1\", \"lucide-react\": \"^0.575.0\", \"openvideo\": \"workspace: \", \"radix-ui\": \"^1.4.3\", \"react\": \"^19.2.0\", \"react-dom\": \"^19.2.0\", \"react-router-dom\": \"^7.13.1\", \"tailwind-merge\": \"^3.5.0\" }, \"devDependencies\": { \"@eslint/js\": \"^9.39.1\", \"@types/node\": \"^24.10.1\", \"@types/react\": \"^19.2.7\", \"@types/react-dom\": \"^19.2.3\", \"@vitejs/plugin-react\": \"^5.1.1\", \"autoprefixer\": \"^10.4.27\", \"eslint\": \"^9.39.1\", \"eslint-pl… 证据：`examples/package.json`\n- **Package**（package_manifest）：{ \"name\": \"combo\", \"private\": true, \"scripts\": { \"build\": \"turbo run build\", \"dev\": \"turbo run dev\", \"lint\": \"biome lint .\", \"lint:fix\": \"biome lint --apply .\", \"format\": \"biome format --write .\", \"format:check\": \"biome format .\", \"check\": \"biome check .\", \"check:fix\": \"biome check --write .\", \"check-types\": \"turbo run check-types\", \"prepare\": \"husky\" }, \"devDependencies\": { \"@biomejs/biome\": \"^2.2.5\", \"husky\": \"^9.1.7\", \"lint-staged\": \"^16.2.7\", \"turbo\": \"^2.5.8\", \"typescript\": \"5.9.2\" }, \"packageManager\": \"pnpm@9.15.4\", \"engines\": { \"node\": \" =18\" }, \"lint-staged\": { \" \": \"biome check --write --no-errors-on-unmatched --files-ignore-unknown=true\" }, \"pnpm\": { \"overrides\": { \"@types/react\":… 证据：`package.json`\n- **Package**（package_manifest）：{ \"scripts\": { \"example\": \"tsx examples/basic.ts\" }, \"devDependencies\": { \"tsx\": \"^4.19.2\" } } 证据：`packages/node/examples/package.json`\n- **Package**（package_manifest）：{ \"name\": \"@designcombo/node\", \"version\": \"0.0.1\", \"description\": \"Node.js video renderer for Combo using Playwright\", \"type\": \"module\", \"main\": \"./dist/index.js\", \"types\": \"./dist/index.d.ts\", \"exports\": { \".\": { \"import\": \"./dist/index.js\", \"types\": \"./dist/index.d.ts\" } }, \"files\": \"dist\", \"src\" , \"scripts\": { \"build\": \"tsc && npm run copy-template\", \"copy-template\": \"cp src/template.html dist/template.html\", \"render\": \"npm run build && cp src/sample.json dist/sample.json && node dist/sample.js\", \"dev\": \"tsc --watch\", \"check-types\": \"tsc --noEmit\" }, \"dependencies\": { \"openvideo\": \"workspace: \", \"express\": \"^4.18.2\", \"playwright\": \"^1.49.0\" }, \"devDependencies\": { \"@types/express\": \"^4.1… 证据：`packages/node/package.json`\n- **Package**（package_manifest）：{ \"name\": \"openvideo\", \"version\": \"0.2.18\", \"description\": \"Video rendering and processing library\", \"type\": \"module\", \"publishConfig\": { \"access\": \"public\" }, \"repository\": { \"type\": \"git\", \"url\": \"https://github.com/openvideodev/openvideo.git\" }, \"keywords\": \"video\", \"rendering\", \"webcodecs\", \"mp4\" , \"author\": \"OpenVideoDev\", \"license\": \"SEE LICENSE IN LICENSE\", \"files\": \"dist\" , \"main\": \"dist/index.umd.js\", \"module\": \"dist/index.es.js\", \"types\": \"dist/index.d.ts\", \"exports\": { \".\": { \"types\": \"./dist/index.d.ts\", \"import\": \"./dist/index.es.js\", \"require\": \"./dist/index.umd.js\" } }, \"scripts\": { \"test\": \"vitest\", \"test:browser\": \"vitest run --project unit-chromium\", \"build\": \"vite build\"… 证据：`packages/openvideo/package.json`\n- **License**（source_file）：This project is licensed under a dual license : 证据：`LICENSE`\n- **OpenVideo License**（source_file）：OpenVideo is a framework-agnostic video editor SDK built on WebCodecs API, designed to make video editing accessible across different web frameworks and platforms. 证据：`packages/openvideo/LICENSE`\n- **Preamble**（documentation）：GNU Affero General Public License ================================= 证据：`LICENSE-AGPL3.md`\n- **Biome**（structured_config）：{ \"$schema\": \"https://biomejs.dev/schemas/2.3.8/schema.json\", \"vcs\": { \"enabled\": true, \"clientKind\": \"git\", \"useIgnoreFile\": true }, \"files\": { \"ignoreUnknown\": false, \"includes\": \" / .ts\", \" / .tsx\", \" / .js\", \" / .jsx\", \" / .json\" , \"experimentalScannerIgnores\": \" /node modules/ \", \" /dist/ \", \" /build/ \", \" /.next/ \", \" /coverage/ \", \" / .d.ts\", \" /pnpm-lock.yaml\", \" /turbo.json\" }, \"formatter\": { \"enabled\": true, \"indentStyle\": \"space\", \"indentWidth\": 2 }, 证据：`biome.json`\n- **Tsconfig**（structured_config）：{ \"compilerOptions\": { \"baseUrl\": \".\", \"target\": \"ESNext\", \"lib\": \"dom\", \"dom.iterable\", \"esnext\" , \"allowJs\": true, \"skipLibCheck\": true, \"strict\": true, \"forceConsistentCasingInFileNames\": true, \"noEmit\": true, \"esModuleInterop\": true, \"module\": \"esnext\", \"moduleResolution\": \"bundler\", \"resolveJsonModule\": true, \"isolatedModules\": true, \"jsx\": \"react-jsx\", \"incremental\": true, \"paths\": { \"@/ \": \"./src/ \" , \"fumadocs-mdx:collections/ \": \".source/ \" }, \"plugins\": { \"name\": \"next\" } }, \"include\": \"next-env.d.ts\", \" / .ts\", \" / .tsx\", \".next/types/ / .ts\", \".next/dev/types/ / .ts\" , \"exclude\": \"node modules\" } 证据：`docs/tsconfig.json`\n- **Components**（structured_config）：{ \"$schema\": \"https://ui.shadcn.com/schema.json\", \"style\": \"new-york\", \"rsc\": false, \"tsx\": true, \"tailwind\": { \"config\": \"\", \"css\": \"src/index.css\", \"baseColor\": \"neutral\", \"cssVariables\": true, \"prefix\": \"\" }, \"iconLibrary\": \"lucide\", \"rtl\": false, \"aliases\": { \"components\": \"@/components\", \"utils\": \"@/lib/utils\", \"ui\": \"@/components/ui\", \"lib\": \"@/lib\", \"hooks\": \"@/hooks\" }, \"registries\": {} } 证据：`examples/components.json`\n- **Tsconfig.App**（structured_config）：{ \"compilerOptions\": { \"tsBuildInfoFile\": \"./node modules/.tmp/tsconfig.app.tsbuildinfo\", \"target\": \"ES2022\", \"useDefineForClassFields\": true, \"lib\": \"ES2022\", \"DOM\", \"DOM.Iterable\" , \"module\": \"ESNext\", \"types\": \"vite/client\" , \"skipLibCheck\": true, \"baseUrl\": \".\", \"paths\": { \"@/ \": \"./src/ \" }, 证据：`examples/tsconfig.app.json`\n- **Tsconfig**（structured_config）：{ \"files\": , \"references\": { \"path\": \"./tsconfig.app.json\" }, { \"path\": \"./tsconfig.node.json\" } , \"compilerOptions\": { \"baseUrl\": \".\", \"paths\": { \"@/ \": \"./src/ \" , \"openvideo\": \"../packages/openvideo/src/index.ts\" } } } 证据：`examples/tsconfig.json`\n- **Tsconfig.Node**（structured_config）：{ \"compilerOptions\": { \"tsBuildInfoFile\": \"./node modules/.tmp/tsconfig.node.tsbuildinfo\", \"target\": \"ES2023\", \"lib\": \"ES2023\" , \"module\": \"ESNext\", \"types\": \"node\" , \"skipLibCheck\": true, 证据：`examples/tsconfig.node.json`\n- **Turbo**（structured_config）：{ \"$schema\": \"https://turborepo.com/schema.json\", \"ui\": \"tui\", \"tasks\": { \"build\": { \"dependsOn\": \"^build\" , \"inputs\": \"$TURBO DEFAULT$\", \".env \" , \"outputs\": \".next/ \", \"!.next/cache/ \" }, \"lint\": { \"dependsOn\": \"^lint\" }, \"check-types\": { \"dependsOn\": \"^check-types\" }, \"dev\": { \"cache\": false, \"persistent\": true } } } 证据：`turbo.json`\n- **Meta**（structured_config）：{ \"title\": \"Documentation\", \"pages\": \"index\", \"changelog\", \"---Getting Started---\", \"installation\", \"basic-usage\", \"---Core Concepts---\", \"studio\", \"tracks\", \"events\", \"---Media & Effects---\", \"clips\", \"animations\", \"transitions\", \"effects\", \"chroma-key\", \"---Export & Persistence---\", \"serialization\", \"rendering\", \"---Reference---\", \"api-reference\" } 证据：`docs/content/docs/meta.json`\n- **Animations**（structured_config）：{ \"tracks\": { \"id\": \"track 1772252042089 9iw860cfe\", \"name\": \"Track 1\", \"type\": \"Image\", \"clipIds\": \"clip 1772252042088 1eu5k9pvm\" } , \"clips\": { \"type\": \"Image\", \"id\": \"clip 1772252042088 1eu5k9pvm\", \"name\": \"Photo by Zak Mogel\", \"src\": \"https://images.pexels.com/photos/35762815/pexels-photo-35762815.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940\", \"display\": { \"from\": 0, \"to\": 3040000 }, \"playbackRate\": 1, \"duration\": 3040000, \"left\": -153.77027027027646, \"top\": -48.216216216219664, \"width\": 1387.5405405405495, \"height\": 2016.4324324324389, \"angle\": 0, \"zIndex\": 10, \"opacity\": 1, \"flip\": null, \"style\": {}, \"trim\": { \"from\": 0, \"to\": 0 }, \"animations\": { \"type\": \"pulse\", \"opts\": { \"durat… 证据：`examples/src/constants/json/animations.json`\n- **Chromakey**（structured_config）：{ \"tracks\": { \"id\": \"track 1772241122294 5m91ibtz9\", \"name\": \"Track 2\", \"type\": \"Video\", \"clipIds\": \"clip 1772241122183 c5kl1om1l\" }, { \"id\": \"track 1772241099713 wi7994tbs\", \"name\": \"Track 1\", \"type\": \"Video\", \"clipIds\": \"clip 1772241099584 ncqkfzve4\" } , \"clips\": { \"type\": \"Video\", \"id\": \"clip 1772241099584 ncqkfzve4\", \"name\": \"videoVerde.mp4\", \"src\": \"https://cdn.scenify.io/mockuser/1eaf7ec0-9a07-4817-b561-54f4102d1987-videoVerde.mp4\", \"display\": { \"from\": 0, \"to\": 12040000 }, \"playbackRate\": 1, \"duration\": 12040000, \"left\": 242.06332222700536, \"top\": -2.7289127089912313, \"width\": 631.2911064998888, \"height\": 962.7289127089863, \"angle\": 0, \"zIndex\": 10, \"opacity\": 1, \"flip\": null, \"style… 证据：`examples/src/constants/json/chromaKey.json`\n- **Effects**（structured_config）：{ \"tracks\": { \"id\": \"track 1772251820638 wduvy3trx\", \"name\": \"Track 2\", \"type\": \"Effect\", \"clipIds\": \"clip 1772251820638 cg52nmek9\" }, { \"id\": \"track 1772251728903 uj9k84vmo\", \"name\": \"Track 2\", \"type\": \"Image\", \"clipIds\": \"clip 1772251728903 sjn1utsaa\" } , \"clips\": { \"type\": \"Image\", \"id\": \"clip 1772251728903 sjn1utsaa\", \"name\": \"Photo by Osman Arabacı\", \"src\": \"https://images.pexels.com/photos/35828557/pexels-photo-35828557.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940\", \"display\": { \"from\": 0, \"to\": 5300000 }, \"playbackRate\": 1, \"duration\": 5300000, \"left\": -203.93243243243933, \"top\": -29.837837837843722, \"width\": 1428.8783783783822, \"height\": 1979.6756756756802, \"angle\": 0, \"zIndex\":… 证据：`examples/src/constants/json/effects.json`\n- **Transitions**（structured_config）：{ \"tracks\": { \"id\": \"track 1772252592307 7jtc8geh2\", \"name\": \"Track 1\", \"type\": \"Image\", \"clipIds\": \"clip 1772252592307 o0gpzccct\", \"clip 1772252601445 pqnurox3c\", \"clip 1772252617678 l0h3i67zl\" } , \"clips\": { \"type\": \"Image\", \"id\": \"clip 1772252592307 o0gpzccct\", \"name\": \"Photo by Stephen Leonardi\", \"src\": \"https://images.pexels.com/photos/35554037/pexels-photo-35554037.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940\", \"display\": { \"from\": 0, \"to\": 5000000 }, \"playbackRate\": 1, \"duration\": 5000000, \"left\": -147.79594723201978, \"top\": -33.520454828209495, \"width\": 1375.5918944640378, \"height\": 1987.0409096564154, \"angle\": 0, \"zIndex\": 10, \"opacity\": 1, \"flip\": null, \"style\": {}, \"trim\": {… 证据：`examples/src/constants/json/transitions.json`\n- **Tsconfig**（structured_config）：{ \"compilerOptions\": { \"target\": \"ES2022\", \"module\": \"ES2022\", \"lib\": \"ES2022\" , \"moduleResolution\": \"bundler\", \"esModuleInterop\": true, \"skipLibCheck\": true, \"forceConsistentCasingInFileNames\": true, \"resolveJsonModule\": true, \"allowSyntheticDefaultImports\": true }, \"include\": \"examples/ / \" } 证据：`packages/node/examples/tsconfig.json`\n- **Sample**（structured_config）：{ \"clips\": { \"type\": \"Text\", \"src\": \"\", \"display\": { \"from\": 0, \"to\": 5000000 }, \"playbackRate\": 1, \"duration\": 5000000, \"left\": 535.9696350097656, \"top\": 293.62639547141936, \"width\": 239, \"height\": 83, \"angle\": 0, \"zIndex\": 0, \"opacity\": 1, \"flip\": null, \"text\": \"Scenify\", \"style\": { \"fontSize\": 64, \"fontFamily\": \"Arial\", \"fontWeight\": \"bold\", \"fontStyle\": \"italic\", \"color\": { \"type\": \"gradient\", \"x0\": 0, \"y0\": 0, \"x1\": 0, \"y1\": 10, \"colors\": { \"ratio\": 0, \"color\": 16777215 }, { \"ratio\": 1, \"color\": 65433 } }, \"align\": \"center\", \"stroke\": { \"color\": \" ffffff\", \"width\": 5 }, \"shadow\": { \"color\": \" ffffff\", \"alpha\": 0.5, \"blur\": 4, \"offsetX\": 5.999749463958002, \"offsetY\": 0.05483037238305627… 证据：`packages/node/src/sample.json`\n- **Tsconfig**（structured_config）：{ \"compilerOptions\": { \"target\": \"ES2022\", \"module\": \"ES2022\", \"lib\": \"ES2022\" , \"moduleResolution\": \"bundler\", \"declaration\": true, \"declarationMap\": true, \"outDir\": \"./dist\", \"rootDir\": \"./src\", \"strict\": true, \"esModuleInterop\": true, \"skipLibCheck\": true, \"forceConsistentCasingInFileNames\": true, \"resolveJsonModule\": true, \"allowSyntheticDefaultImports\": true, \"types\": \"node\" }, \"include\": \"src/ / \" , \"exclude\": \"node modules\", \"dist\", \"examples\" } 证据：`packages/node/tsconfig.json`\n- **Tsconfig**（structured_config）：{ \"compilerOptions\": { \"target\": \"es2022\", \"useDefineForClassFields\": true, \"module\": \"esnext\", \"types\": \"@types/dom-webcodecs\" , \"lib\": \"ES2022\", \"DOM\", \"DOM.Iterable\" , \"skipLibCheck\": true, / Bundler mode / \"moduleResolution\": \"bundler\", \"allowImportingTsExtensions\": true, \"isolatedModules\": true, \"moduleDetection\": \"force\", \"noEmit\": true, / Linting / \"strict\": true, \"noUnusedLocals\": true, \"noUnusedParameters\": true, \"noFallthroughCasesInSwitch\": true, \"noUncheckedSideEffectImports\": true }, \"include\": \"src\" } 证据：`packages/openvideo/tsconfig.json`\n- **See https://help.github.com/articles/ignoring-files/ for more about ignoring files.**（source_file）：See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 证据：`.gitignore`\n- **Pre Commit**（source_file）：npx lint-staged 证据：`.husky/pre-commit`\n- **deps**（source_file）：test & build /coverage /.next/ /out/ /build .tsbuildinfo 证据：`docs/.gitignore`\n- **Next.Config**（source_file）：import { createMDX } from 'fumadocs-mdx/next'; 证据：`docs/next.config.mjs`\n- **Postcss.Config**（source_file）：export default { plugins: { '@tailwindcss/postcss': {}, }, }; 证据：`docs/postcss.config.mjs`\n- **Source.Config**（source_file）：import { defineConfig, defineDocs, frontmatterSchema, metaSchema, } from 'fumadocs-mdx/config'; 证据：`docs/source.config.ts`\n- **Logs**（source_file）：Logs logs .log npm-debug.log yarn-debug.log yarn-error.log pnpm-debug.log lerna-debug.log 证据：`examples/.gitignore`\n- **Eslint.Config**（source_file）：import js from '@eslint/js'; import globals from 'globals'; import reactHooks from 'eslint-plugin-react-hooks'; import reactRefresh from 'eslint-plugin-react-refresh'; import tseslint from 'typescript-eslint'; import { defineConfig, globalIgnores } from 'eslint/config'; 证据：`examples/eslint.config.js`\n- **Index**（source_file）：examples 证据：`examples/index.html`\n- **Vite.Config**（source_file）：import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import tailwindcss from '@tailwindcss/vite'; import path from 'path'; 证据：`examples/vite.config.ts`\n- **Pnpm Workspace**（source_file）：packages: - \"editor\" - \"packages/ \" - \"docs\" - \"examples\" 证据：`pnpm-workspace.yaml`\n\n## 宿主 AI 必须遵守的规则\n\n- **把本资产当作开工前上下文，而不是运行环境。**：AI Context Pack 只包含证据化项目理解，不包含目标项目的可执行状态。 证据：`docs/README.md`, `README.md`, `examples/README.md`\n- **回答用户时区分可预览内容与必须安装后才能验证的内容。**：安装前体验的消费者价值来自降低误装和误判，而不是伪装成真实运行。 证据：`docs/README.md`, `README.md`, `examples/README.md`\n\n## 用户开工前应该回答的问题\n\n- 你准备在哪个宿主 AI 或本地环境中使用它？\n- 你只是想先体验工作流，还是准备真实安装？\n- 你最在意的是安装成本、输出质量、还是和现有规则的冲突？\n\n## 验收标准\n\n- 所有能力声明都能回指到 evidence_refs 中的文件路径。\n- AI_CONTEXT_PACK.md 没有把预览包装成真实运行。\n- 用户能在 3 分钟内看懂适合谁、能做什么、如何开始和风险边界。\n\n---\n\n## Doramagic Context Augmentation\n\n下面内容用于强化 Repomix/AI Context Pack 主体。Human Manual 只提供阅读骨架；踩坑日志会被转成宿主 AI 必须遵守的工作约束。\n\n## Human Manual 骨架\n\n使用规则：这里只是项目阅读路线和显著性信号，不是事实权威。具体事实仍必须回到 repo evidence / Claim Graph。\n\n宿主 AI 硬性规则：\n- 不得把页标题、章节顺序、摘要或 importance 当作项目事实证据。\n- 解释 Human Manual 骨架时，必须明确说它只是阅读路线/显著性信号。\n- 能力、安装、兼容性、运行状态和风险判断必须引用 repo evidence、source path 或 Claim Graph。\n\n- **Overview**：importance `high`\n - source_paths: README.md, packages/openvideo/package.json\n- **Installation and Setup**：importance `high`\n - source_paths: packages/openvideo/package.json, examples/package.json\n- **System Architecture**：importance `high`\n - source_paths: packages/openvideo/src/studio.ts, packages/openvideo/src/compositor.ts, packages/openvideo/src/clips/index.ts, packages/openvideo/src/index.ts\n- **Studio and State Management**：importance `high`\n - source_paths: packages/openvideo/src/studio.ts, packages/openvideo/src/studio/timeline-model.ts, packages/openvideo/src/studio/history-manager.ts, packages/openvideo/src/studio/selection-manager.ts, packages/openvideo/src/studio/resource-manager.ts\n- **Clip System**：importance `high`\n - source_paths: packages/openvideo/src/clips/video-clip.ts, packages/openvideo/src/clips/audio-clip.ts, packages/openvideo/src/clips/image-clip.ts, packages/openvideo/src/clips/text-clip.ts, packages/openvideo/src/clips/caption-clip.ts\n- **Animation System**：importance `medium`\n - source_paths: packages/openvideo/src/animation/index.ts, packages/openvideo/src/animation/keyframe-animation.ts, packages/openvideo/src/animation/gsap-animation.ts, packages/openvideo/src/animation/easings.ts, packages/openvideo/src/animation/presets.ts\n- **Compositor and Rendering**：importance `high`\n - source_paths: packages/openvideo/src/compositor.ts, packages/openvideo/src/sprite/base-sprite.ts, packages/openvideo/src/sprite/pixi-sprite-renderer.ts, packages/openvideo/src/mp4-utils/index.ts, packages/openvideo/src/mp4-utils/mp4box-utils.ts\n- **Effects System**：importance `medium`\n - source_paths: packages/openvideo/src/effect/effect.ts, packages/openvideo/src/effect/glsl/gl-effect.ts, packages/openvideo/src/effect/glsl/custom-glsl.ts, packages/openvideo/src/effect/types.ts, packages/openvideo/src/effect/vertex.ts\n\n## Repo Inspection Evidence / 源码检查证据\n\n- repo_clone_verified: true\n- repo_inspection_verified: true\n- repo_commit: `a80b058d274b2486ed0b23cc848e92b56474b78b`\n- inspected_files: `pnpm-lock.yaml`, `package.json`, `README.md`, `docs/source.config.ts`, `docs/package.json`, `docs/README.md`, `docs/tsconfig.json`, `docs/src/lib/cn.ts`, `docs/src/lib/source.ts`, `docs/src/app/sitemap.ts`, `docs/src/app/robots.ts`, `docs/src/app/llms-full.txt/route.ts`, `docs/src/app/api/search/route.ts`, `docs/src/app/llms.mdx/docs/[[...slug]]/route.ts`, `docs/content/docs/core/meta.json`, `docs/content/docs/core/effects.mdx`, `docs/content/docs/core/clips.mdx`, `docs/content/docs/core/events.mdx`, `docs/content/docs/core/index.mdx`, `docs/content/docs/core/chroma-key.mdx`\n\n宿主 AI 硬性规则：\n- 没有 repo_clone_verified=true 时，不得声称已经读过源码。\n- 没有 repo_inspection_verified=true 时，不得把 README/docs/package 文件判断写成事实。\n- 没有 quick_start_verified=true 时，不得声称 Quick Start 已跑通。\n\n## Doramagic Pitfall Constraints / 踩坑约束\n\n这些规则来自 Doramagic 发现、验证或编译过程中的项目专属坑点。宿主 AI 必须把它们当作工作约束，而不是普通说明文字。\n\n### Constraint 1: 来源证据：Modular architecture: separate core logic from PixiJS renderer to enable React Native / headless use\n\n- Trigger: GitHub 社区证据显示该项目存在一个安装相关的待验证问题：Modular architecture: separate core logic from PixiJS renderer to enable React Native / headless use\n- Host AI rule: 来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。\n- Why it matters: 可能增加新用户试用和生产接入成本。\n- Evidence: community_evidence:github | cevd_28cbc35c1a0544478da4fb17013e349a | https://github.com/openvideodev/openvideo/issues/78 | 来源类型 github_issue 暴露的待验证使用条件。\n- Hard boundary: 不要把这个坑点包装成已解决、已验证或可忽略，除非后续验证证据明确证明它已经关闭。\n\n### Constraint 2: 来源证据：Image and Audio clips lost during loadFromJSON/exportToJSON round-trip\n\n- Trigger: GitHub 社区证据显示该项目存在一个配置相关的待验证问题：Image and Audio clips lost during loadFromJSON/exportToJSON round-trip\n- Host AI rule: 来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。\n- Why it matters: 可能增加新用户试用和生产接入成本。\n- Evidence: community_evidence:github | cevd_e2e8dc4e56504c3c909c7cf990b5a336 | https://github.com/openvideodev/openvideo/issues/60 | 来源类型 github_issue 暴露的待验证使用条件。\n- Hard boundary: 不要把这个坑点包装成已解决、已验证或可忽略，除非后续验证证据明确证明它已经关闭。\n\n### Constraint 3: 来源证据：[Bug] Transition effect \"display\" value update not reflected in Player after clip repositioning\n\n- Trigger: GitHub 社区证据显示该项目存在一个配置相关的待验证问题：[Bug] Transition effect \"display\" value update not reflected in Player after clip repositioning\n- Host AI rule: 来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。\n- Why it matters: 可能增加新用户试用和生产接入成本。\n- Evidence: community_evidence:github | cevd_f5e332be3e884e0eb6bb27bb45d7524a | https://github.com/openvideodev/openvideo/issues/52 | 来源类型 github_issue 暴露的待验证使用条件。\n- Hard boundary: 不要把这个坑点包装成已解决、已验证或可忽略，除非后续验证证据明确证明它已经关闭。\n\n### Constraint 4: 来源证据：display property not initialized for Image clips\n\n- Trigger: GitHub 社区证据显示该项目存在一个配置相关的待验证问题：display property not initialized for Image clips\n- Host AI rule: 来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。\n- Why it matters: 可能阻塞安装或首次运行。\n- Evidence: community_evidence:github | cevd_45024018965c442dbaaf3bb5441b75f2 | https://github.com/openvideodev/openvideo/issues/18 | 来源类型 github_issue 暴露的待验证使用条件。\n- Hard boundary: 不要把这个坑点包装成已解决、已验证或可忽略，除非后续验证证据明确证明它已经关闭。\n\n### Constraint 5: 来源证据：meta property is read-only\n\n- Trigger: GitHub 社区证据显示该项目存在一个配置相关的待验证问题：meta property is read-only\n- Host AI rule: 来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。\n- Why it matters: 可能增加新用户试用和生产接入成本。\n- Evidence: community_evidence:github | cevd_2798efa2236a4fe1a82930d7a1b1cc80 | https://github.com/openvideodev/openvideo/issues/19 | 来源类型 github_issue 暴露的待验证使用条件。\n- Hard boundary: 不要把这个坑点包装成已解决、已验证或可忽略，除非后续验证证据明确证明它已经关闭。\n\n### Constraint 6: 能力判断依赖假设\n\n- Trigger: README/documentation is current enough for a first validation pass.\n- Host AI rule: 将假设转成下游验证清单。\n- Why it matters: 假设不成立时，用户拿不到承诺的能力。\n- Evidence: capability.assumptions | github_repo:1125747446 | https://github.com/openvideodev/openvideo | README/documentation is current enough for a first validation pass.\n- Hard boundary: 不要把这个坑点包装成已解决、已验证或可忽略，除非后续验证证据明确证明它已经关闭。\n\n### Constraint 7: 维护活跃度未知\n\n- Trigger: 未记录 last_activity_observed。\n- Host AI rule: 补 GitHub 最近 commit、release、issue/PR 响应信号。\n- Why it matters: 新项目、停更项目和活跃项目会被混在一起，推荐信任度下降。\n- Evidence: evidence.maintainer_signals | github_repo:1125747446 | https://github.com/openvideodev/openvideo | last_activity_observed missing\n- Hard boundary: 不要把这个坑点包装成已解决、已验证或可忽略，除非后续验证证据明确证明它已经关闭。\n\n### Constraint 8: 下游验证发现风险项\n\n- Trigger: no_demo\n- Host AI rule: 进入安全/权限治理复核队列。\n- Why it matters: 下游已经要求复核，不能在页面中弱化。\n- Evidence: downstream_validation.risk_items | github_repo:1125747446 | https://github.com/openvideodev/openvideo | no_demo; severity=medium\n- Hard boundary: 不要把这个坑点包装成已解决、已验证或可忽略，除非后续验证证据明确证明它已经关闭。\n\n### Constraint 9: 存在评分风险\n\n- Trigger: no_demo\n- Host AI rule: 把风险写入边界卡，并确认是否需要人工复核。\n- Why it matters: 风险会影响是否适合普通用户安装。\n- Evidence: risks.scoring_risks | github_repo:1125747446 | https://github.com/openvideodev/openvideo | no_demo; severity=medium\n- Hard boundary: 不要把这个坑点包装成已解决、已验证或可忽略，除非后续验证证据明确证明它已经关闭。\n\n### Constraint 10: issue/PR 响应质量未知\n\n- Trigger: issue_or_pr_quality=unknown。\n- Host AI rule: 抽样最近 issue/PR，判断是否长期无人处理。\n- Why it matters: 用户无法判断遇到问题后是否有人维护。\n- Evidence: evidence.maintainer_signals | github_repo:1125747446 | https://github.com/openvideodev/openvideo | issue_or_pr_quality=unknown\n- Hard boundary: 不要把这个坑点包装成已解决、已验证或可忽略，除非后续验证证据明确证明它已经关闭。\n",
"summary": "给宿主 AI 的上下文和工作边界。",
"title": "AI Context Pack / 带给我的 AI"
},
"boundary_risk_card": {
"asset_id": "boundary_risk_card",
"filename": "BOUNDARY_RISK_CARD.md",
"markdown": "# Boundary & Risk Card / 安装前决策卡\n\n项目：openvideodev/openvideo\n\n## Doramagic 试用结论\n\n当前结论：可以进入发布前推荐检查；首次使用仍应从最小权限、临时目录和可回滚配置开始。\n\n## 用户现在可以做\n\n- 可以先阅读 Human Manual，理解项目目的和主要工作流。\n- 可以复制 Prompt Preview 做安装前体验；这只验证交互感，不代表真实运行。\n- 可以把官方 Quick Start 命令放到隔离环境中验证，不要直接进主力环境。\n\n## 现在不要做\n\n- 不要把 Prompt Preview 当成项目实际运行结果。\n- 不要把 metadata-only validation 当成沙箱安装验证。\n- 不要把未验证能力写成“已支持、已跑通、可放心安装”。\n- 不要在首次试用时交出生产数据、私人文件、真实密钥或主力配置目录。\n\n## 安装前检查\n\n- 宿主 AI 是否匹配：local_cli\n- 官方安装入口状态：已发现官方入口\n- 是否在临时目录、临时宿主或容器中验证：必须是\n- 是否能回滚配置改动：必须能\n- 是否需要 API Key、网络访问、读写文件或修改宿主配置：未确认前按高风险处理\n- 是否记录了安装命令、实际输出和失败日志：必须记录\n\n## 当前阻塞项\n\n- 无阻塞项。\n\n## 项目专属踩坑\n\n- 来源证据：Modular architecture: separate core logic from PixiJS renderer to enable React Native / headless use（medium）：可能增加新用户试用和生产接入成本。 建议检查：来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。\n- 来源证据：Image and Audio clips lost during loadFromJSON/exportToJSON round-trip（medium）：可能增加新用户试用和生产接入成本。 建议检查：来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。\n- 来源证据：[Bug] Transition effect \"display\" value update not reflected in Player after clip repositioning（medium）：可能增加新用户试用和生产接入成本。 建议检查：来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。\n- 来源证据：display property not initialized for Image clips（medium）：可能阻塞安装或首次运行。 建议检查：来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。\n- 来源证据：meta property is read-only（medium）：可能增加新用户试用和生产接入成本。 建议检查：来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。\n\n## 风险与权限提示\n\n- no_demo: medium\n\n## 证据缺口\n\n- 暂未发现结构化证据缺口。\n",
"summary": "安装、权限、验证和推荐前风险。",
"title": "Boundary & Risk Card / 边界与风险卡"
},
"human_manual": {
"asset_id": "human_manual",
"filename": "HUMAN_MANUAL.md",
"markdown": "# https://github.com/openvideodev/openvideo 项目说明书\n\n生成时间：2026-05-15 09:42:56 UTC\n\n## 目录\n\n- [Overview](#page-1)\n- [Installation and Setup](#page-2)\n- [System Architecture](#page-3)\n- [Studio and State Management](#page-4)\n- [Clip System](#page-5)\n- [Animation System](#page-6)\n- [Compositor and Rendering](#page-7)\n- [Effects System](#page-8)\n- [Transitions System](#page-9)\n- [Utilities and Helpers](#page-10)\n\n\n\n## Overview\n\n### 相关页面\n\n相关主题：[System Architecture](#page-3), [Clip System](#page-5)\n\n\n相关源码文件
\n\n以下源码文件用于生成本页说明：\n\n- [README.md](https://github.com/openvideodev/openvideo/blob/main/README.md)\n- [packages/openvideo/src/index.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/index.ts)\n- [packages/openvideo/src/studio.spec.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio.spec.ts)\n- [packages/node/README.md](https://github.com/openvideodev/openvideo/blob/main/packages/node/README.md)\n- [packages/openvideo/src/transition/transition.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/transition/transition.ts)\n \n\n# Overview\n\n## What is OpenVideo?\n\nOpenVideo is a powerful, browser-based video composition and rendering library that enables developers to create, edit, and export video content directly in the web environment. Built on modern web APIs, OpenVideo provides a high-performance alternative to traditional desktop video editing software while maintaining the accessibility and portability of web applications.\n\nThe library leverages hardware-accelerated video processing through the WebCodecs API, combined with PixiJS for robust 2D/3D rendering, making it suitable for both client-side video editing interfaces and server-side rendering pipelines.\n\n## Core Architecture\n\nOpenVideo follows a modular architecture with three primary layers:\n\n```mermaid\ngraph TD\n A[User Application] --> B[Studio Layer]\n B --> C[Compositor Layer]\n C --> D[Rendering Engine
PixiJS + WebCodecs]\n \n B --> E[Clip Objects]\n E --> E1[Video]\n E --> E2[Audio]\n E --> E3[Text]\n E --> E4[Image]\n E --> E5[Caption]\n \n C --> F[Compositor]\n F --> F1[Video Export]\n F --> F2[Playback]\n F --> F3[Seeking]\n```\n\n### Core Components\n\n| Component | Purpose | Location |\n|-----------|---------|----------|\n| **Studio** | Manages project state, tracks, clips, and timeline configuration | `packages/openvideo/src/studio.ts` |\n| **Compositor** | Rendering engine handling playback, seeking, and final export using WebCodecs | `packages/openvideo/src/compositor.ts` |\n| **Clips** | Specialized objects for different media types | `packages/openvideo/src/clips/` |\n| **Transitions** | Visual effects between clips | `packages/openvideo/src/transition/` |\n| **Animations** | Preset animation utilities for clips | `packages/openvideo/src/animation/` |\n\n## Technology Stack\n\nOpenVideo is built on three foundational technologies that work together to provide high-performance video processing:\n\n```mermaid\ngraph LR\n A[WebCodecs API] --> D[Video Processing]\n B[PixiJS] --> E[2D/3D Rendering]\n C[wrapbox] --> F[MP4 Muxing]\n \n D --> G[OpenVideo Core]\n E --> G\n F --> G\n```\n\n| Technology | Role | Key Benefits |\n|------------|------|--------------|\n| **WebCodecs** | Video encoding/decoding | Hardware-accelerated, ultra-fast video processing |\n| **PixiJS** | Rendering engine | High-performance 2D/3D graphics with WebGL |\n| **wrapbox** | MP4 manipulation | Low-level MP4 box manipulation and muxing |\n\n资料来源：[README.md:15-17]()\n\n## Key Features\n\n### Multi-Media Clip Support\n\nOpenVideo supports a comprehensive set of clip types for video composition:\n\n- **Video Clip** - Load and manipulate video files with frame-accurate control\n- **Audio Clip** - Audio tracks with volume control and synchronization\n- **Text Clip** - Rich text rendering with fonts, styles, and animations\n- **Image Clip** - Static image support for backgrounds and overlays\n- **Caption Clip** - Subtitle and caption rendering with styling options\n\n### Visual Transitions\n\nThe library includes numerous built-in transitions for professional video effects:\n\n| Category | Available Transitions |\n|----------|----------------------|\n| **Basic** | Circle, Directional, Crosshatch, Heart |\n| **Advanced** | GridFlip, PolkaDotsCurtain, Pixelize, RotateScaleFade |\n| **Specialized** | UndulatingBurnOut, SquaresWire, RandomSquares, CannabisLeaf |\n| **Function-based** | PolarFunction, Hexagonalize, StereoViewer |\n\n资料来源：[packages/openvideo/src/transition/transition.ts:1-100]()\n\n### Animation Presets\n\nClips can be animated using preset animations:\n\n- **Fade Effects** - fadeIn, fadeOut\n- **Movement** - slideIn, slideOut, pulse\n- **Transformations** - blurIn, blurOut, scaleIn, scaleOut\n- **Rotation** - rotateIn, rotateOut\n\n资料来源：[packages/openvideo/src/animation/presets.ts:1-80]()\n\n## Package Structure\n\nThe OpenVideo repository is organized as a monorepo with multiple packages:\n\n```\nopenvideo/\n├── packages/\n│ ├── openvideo/ # Core library\n│ │ ├── src/\n│ │ │ ├── clips/ # Clip implementations\n│ │ │ ├── transition/ # Transition effects\n│ │ │ ├── animation/ # Animation presets\n│ │ │ ├── studio.ts # Main studio class\n│ │ │ └── compositor.ts # Rendering engine\n│ │ └── dist/ # Built output\n│ │\n│ ├── node/ # Node.js server-side renderer\n│ │ ├── src/\n│ │ │ ├── renderer.ts # Main Renderer class\n│ │ │ ├── types.ts # TypeScript definitions\n│ │ │ └── template.html # Browser rendering template\n│ │ └── dist/ # Built output\n│ │\n│ └── web/ # Web UI components\n│\n├── examples/ # Example applications\n└── README.md\n```\n\n### Core Library (`packages/openvideo`)\n\nThe main library providing all core functionality:\n\n```typescript\nimport { Studio, Video, Text, Image } from 'openvideo';\n\n// Initialize Studio\nconst studio = new Studio({\n canvas: document.getElementById('preview-canvas') as HTMLCanvasElement,\n spacing: 20\n});\n\n// Add clips\nconst video = await Video.fromUrl('https://example.com/video.mp4');\nawait studio.addClip(video);\n\n// Start preview\nstudio.play();\n```\n\n资料来源：[README.md:45-60]()\n\n### Node.js Renderer (`packages/node`)\n\nFor server-side video rendering without a browser UI:\n\n```typescript\nimport { Renderer } from '@combo/node';\n\nconst renderer = new Renderer({\n json: videoConfig,\n outputPath: './output.mp4',\n});\n\nrenderer.on('progress', ({ phase, progress, message }) => {\n console.log(`[${phase}] ${Math.round(progress * 100)}% - ${message}`);\n});\n\nawait renderer.render();\n```\n\n资料来源：[packages/node/README.md:100-120]()\n\n## Rendering Workflow\n\n### Client-Side Rendering\n\n```mermaid\nsequenceDiagram\n participant User\n participant Studio\n participant Compositor\n participant WebCodecs\n \n User->>Studio: Create project with clips\n User->>Studio: Configure timeline\n User->>Studio: Start playback/preview\n Studio->>Compositor: Render frame\n Compositor->>PixiJS: Draw scene\n Compositor->>WebCodecs: Encode frame\n WebCodecs-->>Compositor: Encoded video data\n Compositor-->>User: Display/Preview\n```\n\n### Server-Side Rendering (Node.js)\n\n```mermaid\ngraph TD\n A[Create Renderer Instance] --> B[Load JSON Config]\n B --> C[Launch Headless Browser]\n C --> D[Load HTML Template]\n D --> E[Initialize Compositor]\n E --> F[Render Frames]\n F --> G[Encode Video via WebCodecs]\n G --> H[Save to File System]\n H --> I[Return Output Path]\n```\n\nThe Node.js renderer uses Playwright to launch a headless browser, inject the JSON configuration, and use the HTML template to render the video using the same Compositor and WebCodecs engine.\n\n资料来源：[packages/node/README.md:1-50]()\n\n## Studio API Reference\n\n### Initialization\n\n```typescript\nconst studio = new Studio({\n canvas: HTMLCanvasElement, // Required: Target canvas\n width?: number, // Default: 1280\n height?: number, // Default: 720\n spacing?: number, // Default: 20\n});\n```\n\n### Clip Management\n\n```typescript\n// Add a clip\nawait studio.addClip(clip: BaseClip): Promise;\n\n// Remove a clip by ID\nawait studio.removeClip(clipId: string): Promise;\n\n// Access clips\nstudio.clips; // Readonly array of clips\n```\n\n资料来源：[packages/openvideo/src/studio.spec.ts:1-50]()\n\n## Compositor Configuration\n\n```typescript\nconst compositorOpts = {\n width: 1280, // Output width\n height: 720, // Output height\n fps: 30, // Frames per second\n bgColor: '#000000', // Background color\n videoCodec?: 'avc1.64001f', // Specific codec\n bitrate?: 5000000, // Video bitrate\n audio?: true, // Include audio track\n metaDataTags?: {} // Metadata for output\n};\n```\n\n## Use Cases\n\nOpenVideo is suitable for various applications:\n\n| Use Case | Implementation | Benefits |\n|----------|---------------|----------|\n| **Video Editor Web App** | Studio + UI components | Full-featured browser-based editing |\n| **Automated Video Generation** | Node.js Renderer | Server-side rendering pipelines |\n| **Video Preview** | Compositor directly | Fast preview without export |\n| **Social Media Tools** | JSON serialization | Template-based video generation |\n| **Educational Platforms** | Caption + Animation | Accessible video content creation |\n\n## Requirements\n\n### Browser Environment\n\n- Modern browser with WebCodecs support (Chrome 94+, Edge 94+)\n- WebGL 2.0 support for PixiJS rendering\n- ES2020+ JavaScript support\n\n### Node.js Environment\n\n- **Node.js** >= 18\n- **Playwright** for headless browser rendering\n- **openvideo** package installed\n\n## License\n\nOpenVideo is released under the MIT License.\n\n资料来源：[README.md:70-72]()\n\n---\n\n\n\n## Installation and Setup\n\n### 相关页面\n\n相关主题：[Overview](#page-1)\n\n\n相关源码文件
\n\n以下源码文件用于生成本页说明：\n\n- [packages/openvideo/package.json](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/package.json)\n- [packages/node/README.md](https://github.com/openvideodev/openvideo/blob/main/packages/node/README.md)\n- [packages/node/src/template.html](https://github.com/openvideodev/openvideo/blob/main/packages/node/src/template.html)\n- [packages/openvideo/render.html](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/render.html)\n- [examples/package.json](https://github.com/openvideodev/openvideo/blob/main/examples/package.json)\n- [examples/index.html](https://github.com/openvideodev/openvideo/blob/main/examples/index.html)\n \n\n# Installation and Setup\n\n## Overview\n\nThis page documents the complete installation and setup process for the openvideo project. openvideo is a video rendering and processing library built on WebCodecs, PixiJS, and wrapbox technologies. The project supports multiple deployment scenarios including browser-based video rendering, Node.js server-side rendering, and integration with frontend frameworks.\n\n## System Requirements\n\n### Runtime Requirements\n\n| Requirement | Minimum Version | Notes |\n|-------------|-----------------|-------|\n| Node.js | >= 18 | Required for WebCodecs API support |\n| pnpm | Latest | Package manager (not npm or yarn) |\n| Chromium-based Browser | Any modern version | For WebCodecs functionality |\n\n### Browser Environment Requirements\n\nThe openvideo library relies on the **WebCodecs API** for hardware-accelerated video processing. This requires:\n\n- A Chromium-based browser (Chrome, Edge, Brave, Arc)\n- Secure context (HTTPS or localhost)\n- Access to the `VideoEncoder`, `VideoDecoder`, and `VideoFrame` APIs\n\n资料来源：[packages/openvideo/package.json:1-30](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/package.json)\n\n## Project Structure\n\nThe openvideo repository follows a monorepo structure using pnpm workspaces:\n\n```\nopenvideo/\n├── packages/\n│ ├── openvideo/ # Core rendering library\n│ │ ├── src/\n│ │ │ ├── clips/ # Video, Audio, Text, Image clips\n│ │ │ ├── animation/ # Animation presets\n│ │ │ ├── transition/ # Transition effects\n│ │ │ └── mp4-utils/ # MP4 muxing utilities\n│ │ ├── dist/ # Built output\n│ │ └── package.json\n│ └── node/ # Node.js renderer package\n│ ├── src/\n│ │ ├── renderer.ts # Server-side renderer\n│ │ ├── types.ts # Type definitions\n│ │ └── template.html\n│ └── package.json\n└── examples/ # Example applications\n```\n\n## Installation Steps\n\n### 1. Install pnpm\n\nIf you don't have pnpm installed, install it globally:\n\n```bash\nnpm install -g pnpm\n```\n\n### 2. Install Dependencies\n\nClone the repository and install all dependencies:\n\n```bash\ngit clone https://github.com/openvideodev/openvideo.git\ncd openvideo\npnpm install\n```\n\n### 3. Build the Core Package\n\nBuild the main openvideo package before using it:\n\n```bash\npnpm --filter openvideo build\n```\n\nThis generates the distribution files in `packages/openvideo/dist/`:\n\n- `index.es.js` - ES Module build\n- `index.umd.js` - UMD build for CDN usage\n- `index.d.ts` - TypeScript definitions\n\n资料来源：[packages/openvideo/package.json:23-25](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/package.json)\n\n### 4. Build Node.js Renderer (Optional)\n\nFor server-side rendering capabilities:\n\n```bash\npnpm --filter @combo/node build\n```\n\n资料来源：[packages/node/README.md:1-100](https://github.com/openvideodev/openvideo/blob/main/packages/node/README.md)\n\n## Browser Usage\n\n### Script Tag (UMD)\n\nInclude openvideo directly via CDN:\n\n```html\n\n\n\n \n Video Render\n\n\n \n \n\n\n```\n\n### ES Module with Import Map\n\nFor modern browser applications using ES modules:\n\n```html\n\n\n\n \n Video Render\n \n\n\n \n\n\n```\n\n资料来源：[packages/node/src/template.html:1-25](https://github.com/openvideodev/openvideo/blob/main/packages/node/src/template.html)\n\n## Node.js Server-Side Rendering\n\nThe `@combo/node` package enables server-side video rendering using Playwright and Chromium.\n\n### Renderer Configuration\n\n```typescript\nimport { Renderer } from '@combo/node';\n\nconst renderer = new Renderer({\n json: videoConfig, // Video configuration JSON\n outputPath: './output.mp4', // Output file path\n browserOptions: {\n headless: true, // Default: true\n timeout: 300000 // Default: 5 minutes\n }\n});\n```\n\n### Renderer Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `json` | `object` | Required | Video composition configuration |\n| `outputPath` | `string` | Required | Path for output MP4 file |\n| `browserOptions.headless` | `boolean` | `true` | Run browser in headless mode |\n| `browserOptions.timeout` | `number` | `300000` | Browser operation timeout (ms) |\n\n### Rendering Events\n\nThe Renderer extends `EventEmitter` and emits the following events:\n\n```typescript\n// Progress tracking\nrenderer.on('progress', ({ phase, progress, message }) => {\n console.log(`[${phase}] ${Math.round(progress * 100)}% - ${message}`);\n});\n\n// Error handling\nrenderer.on('error', (error) => {\n console.error('Render failed:', error);\n});\n\n// Completion\nrenderer.on('complete', (path) => {\n console.log(`Video saved to: ${path}`);\n});\n\n// Start rendering\nawait renderer.render();\n```\n\n资料来源：[packages/node/README.md:60-120](https://github.com/openvideodev/openvideo/blob/main/packages/node/README.md)\n\n## Build Workflow\n\n```mermaid\ngraph TD\n A[pnpm install] --> B[Build openvideo Core]\n B --> C{Use Case}\n C -->|Browser App| D[Import openvideo ES Module]\n C -->|Server Rendering| E[Build @combo/node]\n C -->|Development| F[Run Examples]\n \n D --> G[Create Compositor Instance]\n E --> H[Create Renderer Instance]\n \n G --> I[Configure width, height, fps]\n H --> J[Configure JSON config]\n \n I --> K[Add clips to Studio]\n J --> K\n \n K --> L[Render video]\n L --> M[Output MP4]\n \n F --> N[Start dev server]\n N --> O[Browse examples]\n```\n\n## Development\n\n### Running Examples\n\nStart the development server for the examples application:\n\n```bash\ncd examples\npnpm dev\n```\n\nThis serves the examples at `http://localhost:5173` (Vite default).\n\n资料来源：[examples/package.json](https://github.com/openvideodev/openvideo/blob/main/examples/package.json)\n\n### Testing\n\nRun unit tests:\n\n```bash\npnpm --filter openvideo test\n```\n\nRun browser-specific tests:\n\n```bash\npnpm --filter openvideo test:browser\n```\n\n资料来源：[packages/openvideo/package.json:23-25](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/package.json)\n\n### Development Workflow\n\n1. **Make source changes** in `packages/openvideo/src/`\n\n2. **Rebuild the package:**\n ```bash\n pnpm --filter openvideo build\n ```\n\n3. **Test changes:**\n ```bash\n node dist/sample.js\n ```\n\n4. **For Node.js renderer changes:**\n ```bash\n pnpm --filter @combo/node build\n ```\n\n## Troubleshooting\n\n### WebCodecs Not Available\n\nIf you encounter `VideoEncoder is not defined`:\n\n- Ensure you're running in a Chromium-based browser\n- Verify you're on a secure origin (HTTPS or localhost)\n- Check that WebCodecs API is enabled in browser settings\n\n### Module Resolution Errors\n\nIf ES module imports fail:\n\n```bash\n# Ensure openvideo is built first\npnpm --filter openvideo build\n```\n\n### Playwright Installation Issues\n\nFor Node.js renderer Chromium installation failures:\n\n```bash\nnpx playwright install chromium\n```\n\n### Timeout Errors\n\nFor large video renders, increase the timeout:\n\n```typescript\nconst renderer = new Renderer({\n json: videoConfig,\n outputPath: './output.mp4',\n browserOptions: {\n timeout: 600000 // 10 minutes\n }\n});\n```\n\n## Package Exports\n\nThe main openvideo package exports the following from `packages/openvideo/package.json`:\n\n| Export | Type | Path |\n|--------|------|------|\n| ES Module | `import` | `./dist/index.es.js` |\n| UMD | `require` | `./dist/index.umd.js` |\n| Types | TypeScript | `./dist/index.d.ts` |\n\n```javascript\n// ES Module import\nimport { Studio, Compositor, Video, Text, Image } from 'openvideo';\n\n// UMD/CommonJS require\nconst { Studio } = require('openvideo');\n```\n\n## Key Components for Setup\n\n| Component | Purpose | Import |\n|-----------|---------|--------|\n| `Studio` | Project state management, timeline, tracks | `import { Studio } from 'openvideo'` |\n| `Compositor` | Rendering engine, WebCodecs export | `import { Compositor } from 'openvideo'` |\n| `Video` | Video clip handling | `import { Video } from 'openvideo'` |\n| `Renderer` | Server-side rendering (Node.js) | `import { Renderer } from '@combo/node'` |\n\n资料来源：[packages/openvideo/render.html:1-40](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/render.html)\n\n---\n\n\n\n## System Architecture\n\n### 相关页面\n\n相关主题：[Overview](#page-1), [Studio and State Management](#page-4), [Clip System](#page-5)\n\n\n相关源码文件
\n\n以下源码文件用于生成本页说明：\n\n- [packages/openvideo/src/studio.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio.ts)\n- [packages/openvideo/src/compositor.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/compositor.ts)\n- [packages/openvideo/src/clips/index.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/index.ts)\n- [packages/openvideo/src/clips/video-clip.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/video-clip.ts)\n- [packages/openvideo/src/clips/text-clip.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/text-clip.ts)\n- [packages/openvideo/src/sprite/base-sprite.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/sprite/base-sprite.ts)\n- [packages/openvideo/src/transition/transition.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/transition/transition.ts)\n- [packages/openvideo/src/animation/presets.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/animation/presets.ts)\n- [packages/openvideo/src/index.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/index.ts)\n \n\n# System Architecture\n\n## Overview\n\nThe openvideo system is a browser-based video editing and rendering engine built on modern web APIs. It provides a comprehensive architecture for composing, editing, and exporting video content directly in the browser environment. The system leverages **WebCodecs** for hardware-accelerated video processing, **PixiJS** for 2D/3D rendering, and internal utilities for MP4 box manipulation and muxing.\n\n资料来源：[README.md:1-50]()\n\n## High-Level Architecture\n\nThe system follows a layered architecture with distinct responsibilities at each level:\n\n```mermaid\ngraph TD\n A[User Application] --> B[Studio]\n B --> C[Compositor]\n C --> D[PixiJS Rendering Engine]\n C --> E[WebCodecs API]\n E --> F[MP4 Muxing]\n B --> G[Clips Layer]\n G --> H[Video Clip]\n G --> I[Audio Clip]\n G --> J[Text Clip]\n G --> K[Image Clip]\n G --> L[Caption Clip]\n G --> M[Shape Clip]\n```\n\n资料来源：[packages/openvideo/src/index.ts:1-100]()\n\n## Core Components\n\n### Studio\n\nThe `Studio` class serves as the central orchestrator for the entire video editing system. It manages:\n\n- **Project state**: Tracks, clips, and timeline configuration\n- **Preview playback**: Real-time video preview with seeking capabilities\n- **Export coordination**: Manages the rendering pipeline for final output\n\n```mermaid\ngraph LR\n A[Studio] --> B[addClip]\n A --> C[removeClip]\n A --> D[play]\n A --> E[pause]\n A --> F[seek]\n A --> G[export]\n```\n\n资料来源：[packages/openvideo/src/studio.ts:1-50]()\n\n### Compositor\n\nThe `Compositor` is the rendering engine responsible for:\n\n- **Playback control**: Managing frame-accurate video playback\n- **Seeking**: Navigating to specific timestamps in the timeline\n- **Final export**: Encoding and muxing the video output using WebCodecs\n\n```typescript\nconst compositorOpts = {\n width: settings.width || 1280,\n height: settings.height || 720,\n fps: settings.fps || 30,\n bgColor: settings.bgColor || '#000000',\n videoCodec?: settings.videoCodec,\n bitrate?: settings.bitrate,\n audio?: boolean,\n metaDataTags?: metaDataTags,\n};\n```\n\n资料来源：[packages/openvideo/render.html:30-50]()\n\n### Clips Layer\n\nThe clip system provides specialized objects for different media types. All clips inherit from a base sprite class that handles common properties and animations.\n\n| Clip Type | Purpose | Source |\n|-----------|---------|--------|\n| `Video` | Video file playback with audio support | [video-clip.ts](packages/openvideo/src/clips/video-clip.ts:1-50) |\n| `Audio` | Audio playback and mixing | [audio-clip.ts](packages/openvideo/src/clips/audio-clip.ts) |\n| `Text` | Text rendering with styling options | [text-clip.ts](packages/openvideo/src/clips/text-clip.ts:1-50) |\n| `Image` | Static image display | [image-clip.ts](packages/openvideo/src/clips/image-clip.ts) |\n| `Caption` | Word-level caption rendering | [caption-clip.ts](packages/openvideo/src/clips/caption-clip.ts:1-50) |\n| `Shape` | Vector shapes and graphics | [shape-clip.ts](packages/openvideo/src/clips/shape-clip.ts) |\n\n## Clip Architecture\n\n### Base Sprite\n\nAll clips inherit from `BaseSprite`, which provides a unified transform and animation system:\n\n```mermaid\ngraph TD\n A[BaseSprite] --> B[renderTransform]\n A --> C[animations]\n B --> D[x, y, width, height]\n B --> E[scale, scaleX, scaleY]\n B --> F[angle, opacity]\n B --> G[blur, brightness]\n B --> H[mirror, motionBlur]\n```\n\nThe render transform accumulates values from multiple animations:\n\n```typescript\nconst defaultRenderTransform = {\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n scale: 1,\n scaleX: 1,\n scaleY: 1,\n opacity: 1,\n angle: 0,\n blur: 0,\n brightness: 1,\n mirror: 0,\n motionBlur: 0,\n};\n```\n\n资料来源：[packages/openvideo/src/sprite/base-sprite.ts:1-100]()\n\n### Video Clip\n\nThe `Video` class handles video file loading and playback:\n\n```mermaid\nsequenceDiagram\n participant User\n participant Video\n participant ResourceManager\n participant PixiJS\n \n User->>Video: fromUrl(url)\n Video->>ResourceManager: getReadableStream(url)\n ResourceManager-->>Video: stream\n Video->>Video: write to localFile\n Video->>PixiJS: init texture\n Video-->>User: Video instance\n```\n\nKey features include:\n- URL-based loading via `Video.fromUrl()`\n- OPFS (Origin Private File System) for local storage\n- Configurable audio with volume control\n- Position and size properties (left, top, width, height)\n\n资料来源：[packages/openvideo/src/clips/video-clip.ts:1-100]()\n\n### Text Clip\n\nText clips support extensive styling options:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `fontFamily` | `string` | Font family name |\n| `fontSize` | `number` | Font size in pixels |\n| `fontWeight` | `string\\|number` | Font weight |\n| `fontStyle` | `string` | Font style (normal/italic) |\n| `fill` | `string` | Text color |\n| `align` | `string` | Text alignment |\n| `wordWrap` | `boolean` | Enable word wrapping |\n| `wordWrapWidth` | `number` | Maximum line width |\n| `lineHeight` | `number` | Line height |\n| `letterSpacing` | `number` | Character spacing |\n| `stroke` | `object\\|string` | Stroke color and width |\n| `dropShadow` | `object` | Shadow effect |\n\n资料来源：[packages/openvideo/src/clips/text-clip.ts:1-100]()\n\n### Caption Clip\n\nCaption clips support word-level animations with the following JSON structure:\n\n```typescript\ninterface CaptionColorsJSON {\n appeared?: string;\n appearing?: string;\n disappearing?: string;\n}\n\ninterface CaptionDataJSON {\n words?: string[];\n colors?: CaptionColorsJSON;\n style?: TextStyleOptions;\n}\n```\n\n资料来源：[packages/openvideo/src/clips/caption-clip.ts:1-100]()\n\n## Animation System\n\n### Animation Presets\n\nThe animation system provides predefined motion patterns:\n\n| Preset | Description |\n|--------|-------------|\n| `slideIn` | Directional entrance with configurable distance |\n| `slideOut` | Directional exit with configurable distance |\n| `pulse` | Scale oscillation animation |\n| `blurIn` | Fade with blur transition |\n| `fade` | Opacity transition |\n| `pop` | Scale pop effect |\n| `shake` | Position shake effect |\n\n### Preset Configuration\n\n```typescript\ncase \"slideOut\": {\n const direction = normalized?.direction || \"left\";\n const distance = normalized?.distance || 300;\n return {\n \"0%\": {\n x: xPositionInit ?? 0,\n y: yPositionInit ?? 0,\n opacity: opacityInit ?? 1,\n mirror: defaultMirror,\n },\n \"100%\": {\n x: direction === \"left\" ? -distance : direction === \"right\" ? distance : 0,\n y: direction === \"top\" ? -distance : direction === \"bottom\" ? distance : 0,\n opacity: opacityEnd ?? 0,\n mirror: defaultMirror,\n },\n };\n}\n```\n\n资料来源：[packages/openvideo/src/animation/presets.ts:1-100]()\n\n### Animation Transform Properties\n\nAnimations can modify the following sprite properties:\n\n- **Position**: `x`, `y`\n- **Size**: `width`, `height`\n- **Rotation**: `angle`\n- **Scale**: `scale`, `scaleX`, `scaleY`\n- **Appearance**: `opacity`, `blur`, `brightness`\n- **Effects**: `mirror`, `motionBlur`\n\n## Transition System\n\nThe transition system provides visual effects for clip transitions:\n\n```mermaid\ngraph TD\n A[Transition Lookup] --> B[Check by name]\n A --> C[Check by lowercase name]\n A --> D[Check by label]\n A --> E[Variant generation]\n \n B --> F{Found?}\n C --> F\n D --> F\n E --> F\n \n F -->|Yes| G[Apply GLSL Fragment]\n F -->|No| H[Error: Transition not found]\n```\n\n### Supported Transitions\n\n| Transition | Category | Description |\n|------------|----------|-------------|\n| `GridFlip` | Grid | Grid-based flip effect |\n| `Circle` | Shape | Circular reveal |\n| `Directional` | Direction | Directional wipe |\n| `UndulatingBurnOut` | Wave | Undulating wave burn |\n| `SquaresWire` | Grid | Wireframe squares |\n| `RotateScaleFade` | Transform | Combined rotation, scale, fade |\n| `RandomSquares` | Grid | Random square reveal |\n| `PolarFunction` | Shape | Polar coordinate transformation |\n| `Pixelate` | Effect | Pixelation effect |\n| `Perlin` | Noise | Perlin noise transition |\n| `Luma` | Luminance | Luminance-based blend |\n| `Heart` | Shape | Heart-shaped reveal |\n| `Crosshatch` | Pattern | Crosshatch pattern |\n| `GlitchDisplace` | Glitch | Glitch displacement |\n| `CrossZoom` | Zoom | Cross zoom effect |\n\n资料来源：[packages/openvideo/src/transition/transition.ts:1-200]()\n\n## Rendering Pipeline\n\n### WebCodecs Integration\n\nThe compositor uses WebCodecs for hardware-accelerated video encoding:\n\n```mermaid\ngraph LR\n A[Timeline Frames] --> B[PixiJS Render]\n B --> C[VideoFrame]\n C --> D[VideoEncoder]\n D --> E[EncodedVideoChunk]\n E --> F[MP4 Muxer]\n F --> G[Output File]\n```\n\n### MP4 Muxing\n\nThe `mp4-utils` module handles sample normalization and muxing:\n\n```typescript\nsamples.forEach((s) => {\n let normalizedDTS: number;\n let normalizedCTS: number;\n \n // Normalize to start from 0\n normalizedDTS = s.dts - firstVDTS!;\n normalizedCTS = s.cts - (firstVCTS ?? 0);\n \n outfile.addSample(trackId, new Uint8Array(s.data), {\n duration: s.duration,\n dts: normalizedDTS + offsetDTS,\n cts: normalizedCTS + offsetCTS,\n is_sync: s.is_sync,\n });\n});\n```\n\n资料来源：[packages/openvideo/src/mp4-utils/index.ts:1-100]()\n\n## Node Package Architecture\n\nThe `@combo/node` package provides server-side rendering capabilities:\n\n```mermaid\ngraph TD\n A[Renderer] --> B[Playwright]\n A --> C[Local HTTP Server]\n B --> D[Browser Instance]\n C --> D\n D --> E[template.html]\n E --> F[Compositor]\n F --> G[WebCodecs]\n G --> H[MP4 Output]\n```\n\n### Renderer Class\n\n```typescript\ninterface RendererOptions {\n json: VideoConfigJSON;\n outputPath: string;\n browserOptions?: {\n headless?: boolean;\n timeout?: number;\n };\n}\n```\n\n#### Events\n\n| Event | Payload | Description |\n|-------|---------|-------------|\n| `progress` | `{ progress: number, phase: string, message?: string }` | Render progress updates |\n| `error` | `Error` | Error notifications |\n| `complete` | `string` | Output file path when complete |\n\n资料来源：[packages/node/README.md:1-100]()\n\n### HTML Template\n\nThe node package uses a template HTML file with import maps:\n\n```html\n\n```\n\n资料来源：[packages/node/src/template.html:1-30]()\n\n## Technology Stack\n\n| Technology | Role |\n|------------|------|\n| **WebCodecs** | Hardware-accelerated video encoding/decoding |\n| **PixiJS** | 2D/3D rendering engine |\n| **wrapbox** | Low-level MP4 box manipulation and muxing |\n| **TypeScript** | Type-safe development |\n| **Playwright** | Server-side browser automation |\n\n资料来源：[README.md:40-50]()\n\n## Data Flow\n\n```mermaid\nsequenceDiagram\n participant App\n participant Studio\n participant Compositor\n participant PixiJS\n participant WebCodecs\n participant File\n \n App->>Studio: addClip(video)\n App->>Studio: play()\n Studio->>Compositor: initPixiApp()\n Compositor->>PixiJS: Create Application\n \n loop Playback\n Studio->>Compositor: render frame\n Compositor->>PixiJS: render scene\n PixiJS-->>Compositor: frame buffer\n end\n \n App->>Studio: export()\n Studio->>Compositor: start encoding\n loop Encoding\n Compositor->>PixiJS: render frame\n PixiJS-->>Compositor: VideoFrame\n Compositor->>WebCodecs: encode\n WebCodecs-->>Compositor: EncodedChunk\n Compositor->>File: mux samples\n end\n Compositor-->>App: output path\n```\n\n## Package Structure\n\n```\npackages/\n├── openvideo/\n│ └── src/\n│ ├── studio.ts # Main orchestrator\n│ ├── compositor.ts # Rendering engine\n│ ├── clips/ # Media clip implementations\n│ │ ├── index.ts\n│ │ ├── video-clip.ts\n│ │ ├── text-clip.ts\n│ │ ├── caption-clip.ts\n│ │ └── ...\n│ ├── sprite/ # Base sprite classes\n│ ├── animation/ # Animation presets\n│ ├── transition/ # Transition effects\n│ └── mp4-utils/ # MP4 muxing utilities\n└── node/\n └── src/\n ├── renderer.ts # Node.js renderer\n ├── template.html # Browser template\n └── types.ts # TypeScript types\n```\n\n## Export and Serialization\n\nThe system supports JSON serialization for project portability:\n\n```typescript\ninterface VideoConfigJSON {\n settings: {\n width: number;\n height: number;\n fps: number;\n bgColor: string;\n videoCodec?: string;\n bitrate?: number;\n audio?: boolean;\n metaDataTags?: Record;\n };\n tracks: TrackJSON[];\n}\n```\n\n资料来源：[packages/openvideo/render.html:25-45]()\n\n---\n\n\n\n## Studio and State Management\n\n### 相关页面\n\n相关主题：[System Architecture](#page-3), [Clip System](#page-5), [Animation System](#page-6)\n\n\n相关源码文件
\n\n以下源码文件用于生成本页说明：\n\n- [packages/openvideo/src/studio.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio.ts)\n- [packages/openvideo/src/studio/timeline-model.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/timeline-model.ts)\n- [packages/openvideo/src/studio/history-manager.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/history-manager.ts)\n- [packages/openvideo/src/studio/selection-manager.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/selection-manager.ts)\n- [packages/openvideo/src/studio/resource-manager.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/resource-manager.ts)\n- [packages/openvideo/src/studio/transport.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/transport.ts)\n \n\n# Studio and State Management\n\n## Overview\n\nThe **Studio** module is the central orchestration layer in OpenVideo, responsible for managing project state, timeline operations, playback control, and user interactions. It provides a unified API for video editing workflows by coordinating between the **Compositor** (rendering engine), **Timeline Model** (data structure), **Transport** (playback control), **Selection Manager** (UI interactions), and **History Manager** (undo/redo).\n\nStudio abstracts the complexity of WebCodecs and PixiJS rendering, exposing high-level primitives like Clips, Tracks, and Effects that map directly to user-facing editing concepts.\n\n## Architecture Overview\n\n```mermaid\ngraph TD\n A[Studio] --> B[Compositor]\n A --> C[Timeline Model]\n A --> D[Transport]\n A --> E[Selection Manager]\n A --> F[History Manager]\n A --> G[Resource Manager]\n \n C --> H[Tracks]\n C --> I[Clips]\n H --> I\n I --> J[VideoClip]\n I --> K[AudioClip]\n I --> L[TextClip]\n I --> M[ImageClip]\n I --> N[CaptionClip]\n \n D --> B\n E --> A\n F --> C\n G --> I\n```\n\n## Core Components\n\n### Studio Class\n\nThe `Studio` class serves as the main entry point and state container for video projects. It maintains references to all subsystem managers and provides the public API for editing operations.\n\n**Key Responsibilities:**\n- Project lifecycle management (create, load, save, clear)\n- Coordination between timeline, compositor, and transport\n- Event emission for UI updates\n- Texture and resource cleanup\n\n**Key Methods:**\n\n| Method | Description |\n|--------|-------------|\n| `play()` | Start playback |\n| `pause()` | Pause playback |\n| `stop()` | Stop and reset to start |\n| `seek(time)` | Seek to specific time (microseconds) |\n| `frameNext()` | Advance one frame |\n| `framePrev()` | Go back one frame |\n| `clear()` | Clear all clips and resources |\n| `updateSelected(updates)` | Update properties of selected clips |\n\n资料来源：[packages/openvideo/src/studio.ts:1-100](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio.ts)\n\n### Timeline Model\n\nThe Timeline Model manages the hierarchical data structure of a video project:\n\n```mermaid\ngraph TD\n Timeline --> Tracks\n Tracks --> Clip\n Clip --> Properties\n Properties --> Transform\n Properties --> Effect\n Properties --> Animation\n```\n\n**Data Structure:**\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `tracks` | `Track[]` | Ordered collection of tracks |\n| `duration` | `number` | Total timeline duration in microseconds |\n| `fps` | `number` | Frames per second |\n| `width` | `number` | Output width in pixels |\n| `height` | `number` | Output height in pixels |\n\n资料来源：[packages/openvideo/src/studio/timeline-model.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/timeline-model.ts)\n\n## Transport System\n\nThe Transport module handles playback control and timeline navigation.\n\n### Playback States\n\n```mermaid\nstateDiagram-v2\n [*] --> Stopped\n Stopped --> Playing : play()\n Playing --> Paused : pause()\n Paused --> Playing : play()\n Playing --> Stopped : stop()\n Paused --> Stopped : stop()\n Stopped --> Seeking : seek()\n Playing --> Seeking : seek()\n Seeking --> Playing : play()\n Seeking --> Paused : pause()\n```\n\n### Transport API\n\n```typescript\ninterface Transport {\n play(): Promise;\n pause(): void;\n stop(): Promise;\n seek(time: number): Promise;\n frameNext(): Promise;\n framePrev(): Promise;\n}\n```\n\n**Key Behaviors:**\n\n- `play()`: Starts playback from current position, returns Promise\n- `pause()`: Immediately pauses playback\n- `stop()`: Stops and resets playhead to timeline start\n- `seek(time)`: Moves playhead to specified time in microseconds\n\n资料来源：[packages/openvideo/src/studio/transport.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/transport.ts)\n\n## Selection Management\n\nThe Selection Manager handles interactive clip selection and transformation in the editor canvas.\n\n### Selection Features\n\n- **Single Selection**: Click to select a single clip\n- **Multi-Selection**: Shift+click to add to selection\n- **Double-Click**: Opens text editing for Text/Caption clips\n- **Transform Handles**: Resize and reposition selected clips\n\n### Selection Events\n\n| Event | Payload | Description |\n|-------|---------|-------------|\n| `clip:select` | `{ clip: IClip }` | Clip was selected |\n| `clip:deselect` | `{ clip: IClip }` | Clip was deselected |\n| `clip:dblclick` | `{ clip: IClip }` | Double-clicked on clip |\n| `selection:change` | `{ clips: IClip[] }` | Selection set changed |\n\n### Pointer Interaction Flow\n\n```mermaid\nsequenceDiagram\n participant User\n participant Canvas\n participant SelectionManager\n participant Studio\n \n User->>Canvas: pointerdown\n Canvas->>SelectionManager: handlePointerDown\n SelectionManager->>SelectionManager: Check for double-click\n Alt Double-click on Text/Caption\n SelectionManager->>Studio: emit('clip:dblclick')\n End\n \n User->>Canvas: pointerup\n Canvas->>SelectionManager: handlePointerUp\n SelectionManager->>SelectionManager: Update selection\n SelectionManager->>Studio: emit('clip:select')\n```\n\n资料来源：[packages/openvideo/src/studio/selection-manager.ts:1-80](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/selection-manager.ts)\n\n## History Management (Undo/Redo)\n\nThe History Manager maintains a stack of state snapshots to enable undo/redo operations.\n\n### State Snapshot Structure\n\n```typescript\ninterface HistoryState {\n timestamp: number;\n action: string;\n state: SerializedTimeline;\n}\n```\n\n### Operations\n\n| Operation | Description |\n|-----------|-------------|\n| `push(state)` | Add new state to history |\n| `undo()` | Restore previous state |\n| `redo()` | Restore next state |\n| `clear()` | Clear all history |\n| `canUndo` | Check if undo is available |\n| `canRedo` | Check if redo is available |\n\n### History Stack Behavior\n\n```mermaid\ngraph LR\n A[Current] -->|Undo| B[State N-1]\n B -->|Undo| C[State N-2]\n A -->|Redo| D[State N+1]\n C -.->|Push| A\n```\n\n资料来源：[packages/openvideo/src/studio/history-manager.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/history-manager.ts)\n\n## Resource Management\n\nThe Resource Manager handles loading, caching, and lifecycle of media resources (video files, images, audio).\n\n### Resource Loading\n\n```typescript\n// Loading a video from URL\nconst video = await Video.fromUrl('https://example.com/video.mp4');\nawait studio.addClip(video);\n\n// Loading with position options\nconst videoWithOpts = await Video.fromUrl('https://example.com/video.mp4', {\n x: 100,\n y: 200,\n width: 640,\n height: 480\n});\n```\n\n### Resource Lifecycle\n\n| Method | Description |\n|--------|-------------|\n| `load(url)` | Load a resource from URL |\n| `getReadablestream(url)` | Get stream for resource |\n| `release(resource)` | Release resource from memory |\n| `clear()` | Clear all cached resources |\n\n资料来源：[packages/openvideo/src/studio/resource-manager.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/resource-manager.ts)\n\n## Clip Types\n\nOpenVideo supports multiple clip types that extend a common base:\n\n| Clip Type | Description |\n|-----------|-------------|\n| `Video` | Video playback with decoding via WebCodecs |\n| `Audio` | Audio track with volume control |\n| `Text` | Text overlay with font styling |\n| `Image` | Static image display |\n| `Caption` | Subtitle/caption text |\n| `Custom` | User-defined clip types |\n\n### Clip Properties\n\n```typescript\ninterface IClip {\n id: string;\n type: 'Video' | 'Audio' | 'Text' | 'Image' | 'Caption';\n left: number;\n top: number;\n width: number;\n height: number;\n startTime: number;\n endTime: number;\n opacity: number;\n volume?: number;\n}\n```\n\n资料来源：[packages/openvideo/src/clips/video-clip.ts:1-50](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/video-clip.ts)\n\n## Event System\n\nStudio extends EventEmitter to provide reactive updates:\n\n```typescript\n// Event listeners\nstudio.on('progress', ({ phase, progress }) => {\n console.log(`[${phase}] ${Math.round(progress * 100)}%`);\n});\n\nstudio.on('clip:select', ({ clip }) => {\n console.log('Selected:', clip.id);\n});\n\nstudio.on('reset', () => {\n console.log('Studio cleared');\n});\n```\n\n### Event Reference\n\n| Event | Payload | Emitted When |\n|-------|---------|--------------|\n| `progress` | `{ phase, progress, message }` | Render progress updates |\n| `clip:select` | `{ clip }` | Clip is selected |\n| `clip:deselect` | `{ clip }` | Clip is deselected |\n| `clip:dblclick` | `{ clip }` | Clip is double-clicked |\n| `selection:change` | `{ clips }` | Selection set changes |\n| `reset` | - | Studio is cleared |\n\n## Studio Lifecycle\n\n```mermaid\nflowchart TD\n A[Create Studio] --> B[Initialize PixiJS]\n B --> C[Load Project/JSON]\n C --> D[User Editing]\n D --> E{Operation}\n E -->|Add Clip| F[Update Timeline]\n E -->|Select| G[Update Selection]\n E -->|Transform| H[Update Transform]\n E -->|Play| I[Transport Control]\n F --> D\n G --> D\n H --> D\n I --> J[Compositor Render]\n J --> K{Loop}\n K -->|Continue| I\n K -->|Stop| L[Export/Save]\n L --> M[Cleanup Resources]\n```\n\n### Initialization\n\n```typescript\nconst studio = new Studio({\n width: 1280,\n height: 720,\n fps: 30,\n});\n\n// Studio is ready for use\nawait studio.ready;\n```\n\n### Cleanup\n\n```typescript\n// Clear all resources\nawait studio.clear();\n\n// Releases:\n// - All clips from timeline\n// - PixiJS textures and graphics\n// - Transition renderers\n// - Selection state\n```\n\n资料来源：[packages/openvideo/src/studio.ts:80-150](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio.ts)\n\n## JSON Serialization\n\nStudio projects can be serialized to JSON for persistence and sharing:\n\n```typescript\n// Export project\nconst json = studio.toJSON();\n\n// Import project\nconst restored = Studio.fromJSON(json);\n```\n\n### Serialized Format\n\n```typescript\ninterface SerializedStudio {\n version: string;\n settings: {\n width: number;\n height: number;\n fps: number;\n };\n timeline: {\n tracks: SerializedTrack[];\n duration: number;\n };\n resources: ResourceReference[];\n}\n```\n\n## Usage Example\n\n```typescript\nimport { Studio, Video, Text } from 'openvideo';\n\n// Initialize studio\nconst studio = new Studio({\n width: 1920,\n height: 1080,\n fps: 30,\n});\n\n// Add video clip\nconst video = await Video.fromUrl('https://example.com/intro.mp4');\nawait studio.addClip(video);\n\n// Add text overlay\nconst title = new Text({\n text: 'Hello World',\n fontSize: 72,\n color: 0xFFFFFF,\n});\ntitle.left = 100;\ntitle.top = 500;\nawait studio.addClip(title);\n\n// Preview\nstudio.play();\n\n// Export\nconst output = await studio.compositor.render();\n```\n\n资料来源：[README.md](https://github.com/openvideodev/openvideo/blob/main/README.md)\n\n---\n\n\n\n## Clip System\n\n### 相关页面\n\n相关主题：[System Architecture](#page-3), [Studio and State Management](#page-4), [Animation System](#page-6)\n\n\n相关源码文件
\n\n以下源码文件用于生成本页说明：\n\n- [packages/openvideo/src/clips/video-clip.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/video-clip.ts)\n- [packages/openvideo/src/clips/iclip.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/iclip.ts)\n- [packages/openvideo/src/clips/base-clip.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/base-clip.ts)\n- [packages/openvideo/src/clips/index.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/index.ts)\n- [packages/openvideo/src/studio/timeline-model.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/timeline-model.ts)\n- [packages/openvideo/src/studio/selection-manager.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/selection-manager.ts)\n- [packages/openvideo/src/json-serialization.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/json-serialization.ts)\n- [packages/openvideo/src/mp4-utils/index.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/mp4-utils/index.ts)\n \n\n# Clip System\n\n## Overview\n\nThe Clip System is the foundational data model and rendering layer within OpenVideo, responsible for representing, managing, and rendering media assets on a timeline. Clips encapsulate all media types (video, audio, image, text, caption) and provide a unified interface for timeline operations including playback, seeking, splitting, cloning, and serialization.\n\n**资料来源：** [packages/openvideo/src/clips/iclip.ts:1-80](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/iclip.ts)\n\n---\n\n## Architecture\n\n### Class Hierarchy\n\nThe Clip System follows an inheritance-based architecture where specialized clip types extend a common base class:\n\n```mermaid\ngraph TD\n A[\"IClip (Interface)\"] --> B[\"BaseClip\"]\n B --> C[\"Video\"]\n B --> D[\"Audio\"]\n B --> E[\"Image\"]\n B --> F[\"Text\"]\n B --> G[\"Caption\"]\n B --> H[\"Effect\"]\n B --> I[\"Transition\"]\n B --> J[\"Placeholder\"]\n \n C -.->|implements| K[\"IPlaybackCapable\"]\n D -.->|implements| K\n```\n\n**资料来源：** [packages/openvideo/src/clips/iclip.ts:40-60](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/iclip.ts)\n\n### Core Interfaces\n\n| Interface | Purpose |\n|-----------|---------|\n| `IClip` | Base interface defining common clip operations |\n| `IClipMeta` | Metadata container (duration, dimensions, format) |\n| `ITransitionInfo` | Transition configuration between clips |\n| `IPlaybackCapable` | Interface for clips supporting playback control |\n\n**资料来源：** [packages/openvideo/src/clips/iclip.ts:1-150](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/iclip.ts)\n\n---\n\n## Clip Types\n\n### Video Clip\n\nThe `Video` class handles MP4 file parsing, WebCodecs-based decoding, and frame extraction. It supports hardware acceleration and provides methods for seeking, frame extraction, and thumbnail generation.\n\n**Key Features:**\n- Async MP4 stream parsing via `ResourceManager.getReadableStream`\n- WebCodecs `VideoDecoder` integration for frame decoding\n- Support for IDR (key) frame normalization\n- Audio extraction with configurable volume\n- First black frame correction\n\n**资料来源：** [packages/openvideo/src/clips/video-clip.ts:1-100](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/video-clip.ts)\n\n```typescript\n// Loading a video clip\nconst video = await Video.fromUrl('https://example.com/video.mp4', {\n x: 0,\n y: 0,\n width: 1920,\n height: 1080,\n});\n\n// Configure display window\nvideo.set({\n display: {\n from: 150, // start frame\n to: 450, // end frame (10 seconds at 30fps)\n },\n});\n```\n\n### Audio Clip\n\nAudio clips manage audio-only media with WebCodecs `AudioDecoder` integration. They support PCM data generation and volume control.\n\n**资料来源：** [packages/openvideo/src/clips/video-clip.ts:200-250](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/video-clip.ts)\n\n### Image Clip\n\nImage clips load and display static images using the Fetch API and `createImageBitmap` for efficient rendering.\n\n### Text Clip\n\nText clips render text content with styling options including word wrapping, stroke, drop shadow, and border radius.\n\n**资料来源：** [packages/openvideo/src/studio/selection-manager.ts:50-80](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/selection-manager.ts)\n\n### Caption Clip\n\nCaption clips display timed text overlays synchronized with video playback.\n\n### Effect & Transition Clips\n\nSpecialized clips for visual effects and transition animations between other clips.\n\n**资料来源：** [packages/openvideo/src/json-serialization.ts:1-30](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/json-serialization.ts)\n\n---\n\n## IClip Interface\n\nThe `IClip` interface defines the contract all clip types must implement:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `type` | `string` | Clip type identifier (e.g., 'video', 'image', 'text') |\n| `id` | `string` | Unique clip identifier |\n| `name` | `string` | Human-readable name |\n| `src` | `string` | Source URL or identifier |\n| `duration` | `number` | Clip duration in microseconds |\n| `volume` | `number` | Audio volume level (0-1) |\n| `ready` | `Promise` | Resolves when clip is fully loaded |\n| `meta` | `IClipMeta` | Metadata about the clip |\n\n### Core Methods\n\n```typescript\ninterface IClip {\n // Lifecycle\n destroy(): void;\n clone(): Promise;\n \n // Timeline operations\n tick(time: number): Promise<{\n video?: VideoFrame | ImageBitmap | null;\n audio?: Float32Array[];\n state: 'done' | 'success';\n }>;\n \n getFrame(time: number): Promise<{\n video: ImageBitmap | null;\n audio: Float32Array[];\n done: boolean;\n }>;\n \n // Editing\n split?(time: number): Promise<[this, this]>;\n \n // Serialization\n toJSON(main?: boolean): any;\n \n // Rendering\n setRenderer?(renderer: any): void;\n}\n```\n\n**资料来源：** [packages/openvideo/src/clips/iclip.ts:60-120](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/iclip.ts)\n\n---\n\n## Clip Lifecycle\n\n### Loading Sequence\n\n```mermaid\nsequenceDiagram\n participant Client\n participant Studio\n participant Clip\n participant ResourceManager\n participant WebCodecs\n \n Client->>Clip: new Clip(source)\n Clip->>ResourceManager: getReadableStream(url)\n ResourceManager-->>Clip: ReadableStream\n Clip->>WebCodecs: create decoder\n WebCodecs-->>Clip: decoder ready\n Clip->>Clip: resolve ready Promise\n Client->>Clip: await clip.ready\n```\n\n### Replacement Workflow\n\nClips can be replaced while preserving timeline position:\n\n```mermaid\ngraph TD\n A[Find clips by source] --> B[Suspend Studio rendering]\n B --> C[Create new clip factory]\n C --> D[Setup listeners for new clip]\n D --> E[Wait for clip.ready]\n E --> F[Replace in clips array]\n F --> G[Resume rendering]\n```\n\n**资料来源：** [packages/openvideo/src/studio/timeline-model.ts:1-50](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/timeline-model.ts)\n\n---\n\n## JSON Serialization\n\nClips support bidirectional JSON conversion for project persistence:\n\n```typescript\ninterface BaseClipJSON {\n id?: string;\n name?: string;\n src: string;\n display: {\n from: number; // frames\n to: number; // frames\n };\n playbackRate: number;\n duration: number;\n left: number;\n top: number;\n width: number;\n height: number;\n angle: number;\n zIndex: number;\n opacity: number;\n flip: \"horizontal\" | \"vertical\" | null;\n trim?: { from: number; to: number; };\n transition?: ITransitionInfo;\n effects?: Array<{\n id: string;\n key: string;\n startTime: number;\n duration: number;\n }>;\n animation?: {\n keyFrames: Record>;\n opts: { duration: number; delay?: number; iterCount?: number; };\n };\n colorAdjustment?: ColorAdjustment;\n}\n```\n\n**资料来源：** [packages/openvideo/src/json-serialization.ts:1-60](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/json-serialization.ts)\n\n---\n\n## Video Decoding Pipeline\n\n```mermaid\ngraph TD\n A[MP4 Stream] --> B[MP4Box Parser]\n B --> C{videoTracks?}\n C -->|Yes| D[Video Decoder Config]\n C -->|No| E[Error: No video]\n D --> F[Extract samples]\n F --> G[IDR Normalization]\n G --> H[Frame Cache]\n H --> I[Compositor.tick]\n \n J[Decode Queue] --> K[VideoDecoder]\n K --> L[Decoded Frames]\n L --> H\n```\n\n### Sample Normalization\n\nVideo samples undergo timestamp normalization to ensure consistent playback:\n\n```typescript\nfunction normalizeTimescale(\n s: MP4Sample,\n delta = 0,\n sampleType: \"video\" | \"audio\"\n) {\n let offset = s.offset;\n // Normalize DTS and CTS relative to first sample\n // Handle SEI data before IDR frames\n}\n```\n\n**资料来源：** [packages/openvideo/src/mp4-utils/index.ts:1-40](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/mp4-utils/index.ts)\n\n---\n\n## Studio Integration\n\n### Selection Management\n\nClips interact with the Studio's selection system for UI interactions:\n\n| Method | Purpose |\n|--------|---------|\n| `selectClip(clip, shiftKey?)` | Add clip to selection |\n| `getTopmostClipAtPoint(point)` | Hit testing |\n| `syncSelectedClipsTransforms()` | Apply visual transforms |\n| `getVisibleHandles()` | Return visible resize handles |\n\n**资料来源：** [packages/openvideo/src/studio/selection-manager.ts:1-30](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/selection-manager.ts)\n\n### Event System\n\nClips emit events for state changes:\n\n```typescript\nclip.on(\"propsChange\", async () => {\n await studio.updateFrame(studio.currentTime);\n updateTransformer(clip);\n});\n```\n\n**资料来源：** [packages/openvideo/src/studio/timeline-model.ts:50-80](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio/timeline-model.ts)\n\n---\n\n## Common Configuration Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `audio` | `boolean \\| { volume: number }` | `true` | Audio playback settings |\n| `display.from` | `number` | `0` | Start frame |\n| `display.to` | `number` | clip duration | End frame |\n| `playbackRate` | `number` | `1.0` | Speed multiplier |\n| `left`, `top` | `number` | `0` | Position in pixels |\n| `width`, `height` | `number` | source dimensions | Size in pixels |\n| `opacity` | `number` | `1` | Alpha (0-1) |\n| `angle` | `number` | `0` | Rotation in degrees |\n| `zIndex` | `number` | `0` | Layer order |\n\n**资料来源：** [packages/openvideo/src/clips/iclip.ts:80-100](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/iclip.ts)\n\n---\n\n## Usage Examples\n\n### Creating and Adding a Video Clip\n\n```typescript\nimport { Studio, Video } from 'openvideo';\n\nconst studio = new Studio({\n canvas: document.getElementById('canvas'),\n width: 1920,\n height: 1080,\n});\n\nconst video = await Video.fromUrl('https://example.com/video.mp4', {\n x: 0,\n y: 0,\n width: 1920,\n height: 1080,\n});\n\nvideo.duration = 5e6; // 5 seconds in microseconds\nawait studio.addClip(video);\nstudio.play();\n```\n\n### Cloning a Clip\n\n```typescript\nconst clonedClip = await video.clone();\nclonedClip.left = 100;\nclonedClip.top = 100;\nawait studio.addClip(clonedClip);\n```\n\n### Splitting a Clip\n\n```typescript\nconst [before, after] = await video.split(2500000); // Split at 2.5 seconds\nawait studio.addClip(before);\nawait studio.addClip(after);\nawait studio.removeClip(video.id);\n```\n\n### Exporting to JSON\n\n```typescript\nconst projectJSON = studio.toJSON();\n// projectJSON now contains all clips serialized\n```\n\n**资料来源：** [packages/openvideo/src/studio.spec.ts:1-40](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/studio.spec.ts)\n\n---\n\n\n\n## Animation System\n\n### 相关页面\n\n相关主题：[Clip System](#page-5), [Effects System](#page-8)\n\n\n相关源码文件
\n\n以下源码文件用于生成本页说明：\n\n- [packages/openvideo/src/animation/index.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/animation/index.ts)\n- [packages/openvideo/src/animation/keyframe-animation.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/animation/keyframe-animation.ts)\n- [packages/openvideo/src/animation/gsap-animation.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/animation/gsap-animation.ts)\n- [packages/openvideo/src/animation/easings.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/animation/easings.ts)\n- [packages/openvideo/src/animation/presets.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/animation/presets.ts)\n- [packages/openvideo/src/animation/registry.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/animation/registry.ts)\n- [packages/openvideo/src/animation/types.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/animation/types.ts)\n \n\n# Animation System\n\n## Overview\n\nThe Animation System in OpenVideo is a comprehensive framework that provides time-based property interpolation for sprites, clips, and UI elements within the video compositor. The system supports keyframe-based animations, easing functions, preset animations, and integration with external animation libraries like GSAP.\n\nAnimations in OpenVideo work by interpolating properties over time using easing functions. They can be applied to any visual element (sprites, clips, captions) and are processed during the render cycle to update the `renderTransform` properties.\n\n资料来源：[packages/openvideo/src/sprite/base-sprite.ts:1-50](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/sprite/base-sprite.ts)\n\n## Architecture\n\n```mermaid\ngraph TD\n A[Animation Request] --> B{Animation Type}\n B -->|Preset| C[Animation Presets]\n B -->|Keyframe| D[KeyframeAnimation]\n B -->|GSAP| E[GSAP Animation]\n C --> F[Factory Pattern]\n D --> G[linearTimeFn]\n E --> H[GSAP Core]\n G --> I[Easing Functions]\n I --> J[Interpolated Values]\n H --> J\n F --> J\n J --> K[RenderTransform Update]\n```\n\n### Core Components\n\n| Component | File | Purpose |\n|-----------|------|---------|\n| `KeyframeAnimation` | `keyframe-animation.ts` | Core keyframe-based animation class |\n| `GSAPAnimation` | `gsap-animation.ts` | GSAP library integration |\n| `easings` | `easings.ts` | Built-in easing function library |\n| `presets` | `presets.ts` | Reusable animation preset factories |\n| `registry` | `registry.ts` | Animation registration and lookup |\n| `types` | `types.ts` | TypeScript type definitions |\n\n资料来源：[packages/openvideo/src/animation/types.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/animation/types.ts)\n\n## Easing Functions\n\nEasing functions control the rate of change during an animation, providing smooth acceleration and deceleration. The system includes a comprehensive set of built-in easing functions.\n\n### Supported Easings\n\n| Category | Functions |\n|----------|-----------|\n| **Linear** | `linear` |\n| **Quad** | `easeInQuad`, `easeOutQuad`, `easeInOutQuad` |\n| **Cubic** | `easeInCubic`, `easeOutCubic`, `easeInOutCubic` |\n| **Sine** | `easeInSine`, `easeOutSine`, `easeInOutSine` |\n| **Expo** | `easeInExpo`, `easeOutExpo`, `easeInOutExpo` |\n\n资料来源：[packages/openvideo/src/animation/easings.ts:1-30](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/animation/easings.ts)\n\n### Easing Interface\n\n```typescript\ntype EasingFunction = (t: number) => number;\n```\n\nAll easing functions accept a normalized time parameter `t` (0 to 1) and return the interpolated progress value.\n\n## Animation Presets\n\nPreset animations are pre-configured animation factories that can be applied to elements without defining custom keyframes. They use a factory pattern that accepts options and optional parameters.\n\n### Available Presets\n\n#### Entry Animations\n\n| Preset | Description |\n|--------|-------------|\n| `blurIn` | Fade in with blur effect |\n| `motionBlurIn` | Slide in with motion blur |\n| `flashSlideIn` | Quick flash and slide entry |\n| `diagonalBlurZoomIn` | Diagonal movement with blur and zoom |\n| `diagonalSlideRotateIn` | Diagonal slide with rotation |\n\n#### Exit Animations\n\n| Preset | Description |\n|--------|-------------|\n| `blurOut` | Fade out with blur effect |\n| `motionBlurOut` | Slide out with motion blur |\n| `flashSlideOut` | Quick flash and slide exit |\n| `diagonalSlideRotateOut` | Diagonal slide out with rotation |\n\n#### Loop Animations\n\n| Preset | Description |\n|--------|-------------|\n| `pulse` | Scale oscillation effect |\n| `slideOut` | Directional slide animation |\n\n资料来源：[packages/openvideo/src/animation/presets.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/animation/presets.ts)\n\n### Preset Configuration\n\nEach preset accepts:\n\n```typescript\ninterface AnimationFactory {\n (opts: IAnimationOpts, params?: Record): KeyframeAnimation;\n}\n```\n\n| Parameter | Type | Description |\n|-----------|------|-------------|\n| `opts.easing` | `string` | Easing function name (default: varies by preset) |\n| `opts.delay` | `number` | Delay before animation starts in ms |\n| `opts.duration` | `number` | Animation duration in ms |\n| `opts.iterCount` | `number` | Number of iterations (-1 for infinite) |\n| `params` | `Record` | Custom keyframe percentages or direction overrides |\n\n## Keyframe Animation\n\nThe `KeyframeAnimation` class is the core animation implementation that handles time-based property interpolation.\n\n### Animation Flow\n\n```mermaid\nsequenceDiagram\n participant Render as Render Loop\n participant Anim as KeyframeAnimation\n participant Easing as Easing Functions\n participant Target as Sprite/Clip\n \n Render->>Anim: getTransform(currentTime)\n Note over Anim: Calculate progress from time\n Anim->>Easing: apply easing(progress)\n Easing-->>Anim: eased progress\n Anim->>Anim: interpolate properties\n Anim-->>Target: Partial\n```\n\n资料来源：[packages/openvideo/src/animation/keyframe-animation.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/animation/keyframe-animation.ts)\n\n### Animated Properties\n\nThe animation system can interpolate the following properties:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `x` | `number` | Horizontal position offset |\n| `y` | `number` | Vertical position offset |\n| `width` | `number` | Width dimension |\n| `height` | `number` | Height dimension |\n| `angle` | `number` | Rotation angle |\n| `blur` | `number` | Blur filter value |\n| `motionBlur` | `number` | Motion blur intensity |\n| `scale` | `number` | Uniform scale multiplier |\n| `scaleX` | `number` | Horizontal scale |\n| `scaleY` | `number` | Vertical scale |\n| `opacity` | `number` | Opacity value (0-1) |\n| `brightness` | `number` | Brightness filter value |\n| `mirror` | `number` | Mirror effect intensity |\n\n资料来源：[packages/openvideo/src/sprite/base-sprite.ts:80-100](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/sprite/base-sprite.ts)\n\n### Linear Time Function\n\nThe `linearTimeFn` performs the actual interpolation between keyframes:\n\n```typescript\nexport function linearTimeFn(\n time: number,\n keyFrame: TAnimationKeyFrame,\n opts: Required\n): Partial\n```\n\nThe function:\n1. Calculates normalized progress from elapsed time\n2. Finds surrounding keyframes\n3. Interpolates each property using linear interpolation\n4. Returns partial props object with interpolated values\n\n资料来源：[packages/openvideo/src/sprite/base-sprite.ts:200-250](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/sprite/base-sprite.ts)\n\n## Animation Integration with Sprites\n\nSprites process animations during their update cycle by iterating through all animations and accumulating transform values.\n\n### Sprite Animation Processing\n\n```typescript\n// 1. Process new modular animations\nfor (const anim of this.animations) {\n const transform = anim.getTransform(time);\n if (transform.x !== undefined) this.renderTransform.x! += transform.x;\n if (transform.y !== undefined) this.renderTransform.y! += transform.y;\n if (transform.scale !== undefined)\n this.renderTransform.scale! *= transform.scale;\n // ... other properties\n}\n```\n\nTransform values are **accumulated** rather than replaced, allowing multiple animations to affect the same property.\n\n资料来源：[packages/openvideo/src/sprite/base-sprite.ts:20-45](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/sprite/base-sprite.ts)\n\n## Clip Animation Support\n\nClips support animation through both legacy `animation` field and the new modular `animations` array format.\n\n### Clip Serialization\n\n```typescript\n// Extract new modular animations\nconst animations = this.animations.map((a) => {\n if ('toJSON' in a && typeof (a as any).toJSON === 'function') {\n return (a as any).toJSON();\n }\n return {\n type: a.type,\n opts: a.options,\n params: a.params || {},\n };\n});\n```\n\nClips serialize animations to JSON for configuration export and reloading.\n\n资料来源：[packages/openvideo/src/clips/base-clip.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/base-clip.ts)\n\n## Caption Word Animations\n\nThe CaptionClip system implements specialized per-word animations with dynamic and keyword-based application modes.\n\n### Word Animation Application Modes\n\n| Mode | Trigger |\n|------|---------|\n| `active` | Applied when word is currently being spoken |\n| `keyword` | Applied to designated keyword words |\n| `none` | Animation disabled |\n\n### Animation Dynamics\n\n| Dynamic Mode | Behavior |\n|--------------|----------|\n| `true` (default) | Uses `sin(progress * PI)` for natural wave effect |\n| `false` | Applies full animation immediately at word start |\n\n```typescript\nif (wordAnimation.mode === 'dynamic' && isActive) {\n const progress = (currentTimeMs - word.from) / duration;\n animationFactor = Math.sin(progress * Math.PI);\n} else {\n animationFactor = 1;\n}\n```\n\n资料来源：[packages/openvideo/src/clips/caption-clip.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/clips/caption-clip.ts)\n\n## GSAP Integration\n\nThe system provides GSAP animation integration through the `GSAPAnimation` class, allowing users to leverage GSAP's extensive animation capabilities.\n\n资料来源：[packages/openvideo/src/animation/gsap-animation.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/animation/gsap-animation.ts)\n\n## Animation Registry\n\nThe registry system allows dynamic registration and lookup of custom animations, enabling extensibility.\n\n```typescript\n// From registry.ts - conceptual usage\nconst registry = getAnimationRegistry();\nregistry.register('myCustomAnimation', customAnimation);\nconst animation = registry.get('myCustomAnimation');\n```\n\n资料来源：[packages/openvideo/src/animation/registry.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/animation/registry.ts)\n\n## Usage Examples\n\n### Basic Preset Animation\n\n```typescript\nimport { blurIn, easeOutQuad } from '@openvideo/animation';\n\nconst animation = blurIn({\n easing: 'easeOutQuad',\n duration: 1000,\n delay: 500,\n iterCount: 1,\n});\n```\n\n### Custom Keyframe Animation\n\n```typescript\nimport { KeyframeAnimation } from '@openvideo/animation';\n\nconst customAnim = new KeyframeAnimation({\n '0%': { opacity: 0, y: 100 },\n '100%': { opacity: 1, y: 0 },\n}, {\n easing: 'easeOutCubic',\n duration: 800,\n});\n```\n\n## Best Practices\n\n1. **Use Presets for Common Animations**: Presets are optimized and provide consistent behavior across the application.\n\n2. **Avoid Animating Expensive Properties**: Minimize animations on `width`, `height`, and `blur` as they require significant processing.\n\n3. **Reuse Easing Functions**: Instead of custom easing, use the built-in easings which are well-tested and performant.\n\n4. **Consider Animation Composition**: Multiple simple animations often produce better results than one complex animation.\n\n5. **Set Appropriate Iter Counts**: Use `iterCount: -1` only for looping background animations to avoid performance issues.\n\n---\n\n\n\n## Compositor and Rendering\n\n### 相关页面\n\n相关主题：[System Architecture](#page-3), [Studio and State Management](#page-4)\n\n\n相关源码文件
\n\n以下源码文件用于生成本页说明：\n\n- [packages/openvideo/src/compositor.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/compositor.ts)\n- [packages/openvideo/src/sprite/base-sprite.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/sprite/base-sprite.ts)\n- [packages/openvideo/src/sprite/pixi-sprite-renderer.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/sprite/pixi-sprite-renderer.ts)\n- [packages/openvideo/src/mp4-utils/index.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/mp4-utils/index.ts)\n- [packages/openvideo/src/mp4-utils/mp4box-utils.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/mp4-utils/mp4box-utils.ts)\n- [packages/openvideo/src/event-emitter.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/event-emitter.ts)\n \n\n# Compositor and Rendering\n\n## Overview\n\nThe Compositor is the central rendering engine in the openvideo library. It orchestrates video playback, real-time composition, and final video export using modern browser APIs including WebCodecs for hardware-accelerated encoding and PixiJS for 2D rendering. The system transforms a timeline-based project configuration into a final rendered video file.\n\nThe Compositor serves as the bridge between high-level clip management (handled by `Studio`) and low-level rendering operations (handled by sprite renderers). It manages the rendering loop, coordinates frame composition, and produces the final encoded output.\n\n## Architecture\n\n```mermaid\ngraph TD\n A[Studio] --> B[Compositor]\n B --> C[PixiJS Application]\n C --> D[Sprite Renderers]\n D --> E[Base Sprite]\n D --> F[Pixi Sprite Renderer]\n B --> G[WebCodecs Encoder]\n G --> H[MP4 Muxer]\n H --> I[Output File]\n \n J[Video Clips] --> D\n K[Text Clips] --> D\n L[Image Clips] --> D\n M[Audio Clips] --> D\n```\n\n## Core Components\n\n### Compositor\n\nThe `Compositor` class initializes the rendering environment and manages the export pipeline. It accepts configuration options that define the output format.\n\n#### Constructor Options\n\n| Parameter | Type | Default | Description |\n|-----------|------|---------|-------------|\n| `width` | `number` | `1280` | Output video width in pixels |\n| `height` | `number` | `720` | Output video height in pixels |\n| `fps` | `number` | `30` | Frames per second for output |\n| `bgColor` | `string` | `'#000000'` | Background color as hex string |\n| `videoCodec` | `string` | `undefined` | Optional video codec override |\n| `bitrate` | `number` | `undefined` | Target bitrate in bits per second |\n| `audio` | `boolean` | `true` | Enable audio track in output |\n| `metaDataTags` | `object` | `undefined` | Custom metadata tags for output |\n\n资料来源：[packages/node/src/template.html:30-48](https://github.com/openvideodev/openvideo/blob/main/packages/node/src/template.html)\n\nThe compositor initialization follows a specific lifecycle:\n\n```mermaid\ngraph LR\n A[Create Compositor] --> B[initPixiApp]\n B --> C[Configure Encoder]\n C --> D[Setup Event Handlers]\n D --> E[Ready for Rendering]\n```\n\n### PixiJS Integration\n\nThe Compositor uses PixiJS as its rendering backend. The `initPixiApp()` method initializes the PixiJS application with the configured canvas dimensions.\n\n#### Canvas Initialization\n\nThe sprite renderer validates texture creation to prevent runtime errors:\n\n```typescript\n// Validate texture was created successfully\n// Use Texture.source instead of baseTexture (PixiJS v8.0.0+)\nif (!this.texture || !this.texture.source) {\n console.error(\"PixiSpriteRenderer: Failed to create valid texture\");\n return;\n}\n```\n\n资料来源：[packages/openvideo/src/sprite/pixi-sprite-renderer.ts:35-42](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/sprite/pixi-sprite-renderer.ts)\n\nCanvas dimensions are converted to integers to prevent WebCodecs encoding errors:\n\n```typescript\n// Update canvas size using integers to prevent \"Value is not of type unsigned long\" errors\nconst intWidth = Math.floor(width);\nconst intHeight = Math.floor(height);\n```\n\n资料来源：[packages/openvideo/src/sprite/pixi-sprite-renderer.ts:23-25](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/sprite/pixi-sprite-renderer.ts)\n\n## Sprite Rendering System\n\n### Base Sprite\n\nThe `BaseSprite` class provides the foundation for all renderable elements. It maintains a `renderTransform` object that accumulates all transformation properties:\n\n```typescript\nprivate renderTransform: {\n x: number;\n y: number;\n width: number;\n height: number;\n scale: number;\n scaleX: number;\n scaleY: number;\n opacity: number;\n angle: number;\n blur: number;\n brightness: number;\n mirror: number;\n motionBlur: number;\n};\n```\n\n资料来源：[packages/openvideo/src/sprite/base-sprite.ts:29-44](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/sprite/base-sprite.ts)\n\n### Animation System\n\nAnimations are processed by iterating through the `animations` array and accumulating transforms at the current time:\n\n```typescript\nfor (const anim of this.animations) {\n const transform = anim.getTransform(time);\n if (transform.x !== undefined) this.renderTransform.x! += transform.x;\n if (transform.y !== undefined) this.renderTransform.y! += transform.y;\n if (transform.width !== undefined) this.renderTransform.width! += transform.width;\n if (transform.scale !== undefined) this.renderTransform.scale! *= transform.scale;\n if (transform.opacity !== undefined) this.renderTransform.opacity! *= transform.opacity;\n if (transform.mirror !== undefined)\n this.renderTransform.mirror = Math.max(this.renderTransform.mirror || 0, transform.mirror);\n}\n```\n\n资料来源：[packages/openvideo/src/sprite/base-sprite.ts:46-65](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/sprite/base-sprite.ts)\n\nTransform operations follow specific accumulation rules:\n- **Additive**: `x`, `y`, `width`, `height`, `angle`, `blur`, `motionBlur`\n- **Multiplicative**: `scale`, `scaleX`, `scaleY`, `opacity`, `brightness`\n- **Maximum**: `mirror` (takes the highest value among all animations)\n\n### Animation Presets\n\nThe library includes built-in animation presets defined in `presets.ts`:\n\n| Preset | Properties | Description |\n|--------|------------|-------------|\n| `slideOut` | `x`, `y`, `opacity` | Slides element in specified direction while fading |\n| `pulse` | `scale` | Oscillates between two scale values |\n| `blurIn` | `blur`, `opacity` | Fades in while removing blur |\n| `blurOut` | `blur`, `opacity` | Fades out while adding blur |\n\n资料来源：[packages/openvideo/src/animation/presets.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/animation/presets.ts)\n\n## Video Export Pipeline\n\n### WebCodecs Encoding\n\nThe compositor leverages the WebCodecs API for hardware-accelerated video encoding. The encoder produces raw video frames which are then multiplexed into an MP4 container.\n\n### MP4 Muxing\n\nThe MP4 utility module handles container creation and muxing:\n\n```mermaid\ngraph TD\n A[Raw Video Frames] --> B[Encoded Video Samples]\n B --> C[MP4Box Muxer]\n C --> D[moov Atom]\n C --> E[mdat Atom]\n D --> F[Final MP4 File]\n E --> F\n```\n\nThe muxer writes samples to the MP4 container and manages:\n- Track configuration (video/audio)\n- Sample timing and duration\n- Chunk layout\n- Metadata injection\n\n### Progress Reporting\n\nThe Compositor emits progress events during the export process:\n\n```typescript\ncompositor.on('OutputProgress', (progress: number) => {\n // Report encoding progress\n});\n```\n\n资料来源：[packages/openvideo/render.html:45](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/render.html)\n\n## Event System\n\nThe Compositor extends `EventEmitter` to provide a pub/sub mechanism for render lifecycle events:\n\n```mermaid\nstateDiagram-v2\n [*] --> initializing\n initializing --> loading\n loading --> rendering\n rendering --> saving\n saving --> complete\n complete --> [*]\n \n rendering --> error: On Error\n loading --> error: On Error\n```\n\n### Event Types\n\n| Event | Payload | Description |\n|-------|---------|-------------|\n| `progress` | `{ phase, progress, message }` | Emitted during rendering phases |\n| `OutputProgress` | `number` | Encoding progress (0-1) |\n| `error` | `Error` | Emitted when an error occurs |\n| `complete` | `string` | Output file path when render completes |\n\n## Node.js Renderer\n\nThe `@combo/node` package provides a headless rendering solution using Playwright:\n\n```mermaid\ngraph LR\n A[JSON Config] --> B[Node Renderer]\n B --> C[Local HTTP Server]\n C --> D[Browser Page]\n D --> E[Compositor]\n E --> F[MP4 Output]\n```\n\n### Renderer Options\n\n| Parameter | Type | Default | Description |\n|-----------|------|---------|-------------|\n| `json` | `object` | required | Video project configuration |\n| `outputPath` | `string` | required | Path for output video file |\n| `browserOptions` | `object` | `{ headless: true, timeout: 300000 }` | Playwright browser settings |\n\n## Texture Management\n\nThe PixiSpriteRenderer implements a texture caching strategy:\n\n1. Canvas is created with integer dimensions matching output resolution\n2. Video/image frames are drawn to canvas\n3. PixiJS Texture is created/updated from canvas\n4. Sprite displays the texture\n5. Previous textures are destroyed to free memory\n\n```typescript\nif (needsResize || isFirstFrame) {\n this.canvas.width = intWidth;\n this.canvas.height = intHeight;\n\n if (this.texture != null) {\n this.texture.destroy(true);\n this.texture = null;\n }\n\n this.texture = Texture.from(this.canvas as any);\n}\n```\n\n资料来源：[packages/openvideo/src/sprite/pixi-sprite-renderer.ts:27-38](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/sprite/pixi-sprite-renderer.ts)\n\n## Transition Effects\n\nThe rendering system supports numerous transition effects including:\n\n- **GridFlip**: Grid-based transition with flip animation\n- **Circle**: Circular wipe transition\n- **Directional**: Directional slide transition\n- **UndulatingBurnOut**: Wave-like fade effect\n- **SquaresWire**: Wireframe square expansion\n- **RotateScaleFade**: Combined rotation, scaling, and fade\n- **Pixelate**: Pixelation dissolve\n- **CrossZoom**: Simultaneous zoom and crossfade\n- **PolkaDotsCurtain**: Dotted curtain reveal\n\nTransitions are resolved by name matching (case-insensitive) against multiple formats:\n\n```typescript\nconst transitionGridFlip =\n transition.name === 'GridFlip' ||\n name.toLowerCase() === 'gridflip' ||\n transition.label === 'gridflip';\n```\n\n## Rendering Configuration\n\n### HTML Template Configuration\n\nWhen using the HTML template for rendering, configuration is injected via `window.RENDER_CONFIG`:\n\n```typescript\nconst jsonConfig = window.RENDER_CONFIG;\n\nif (!jsonConfig) {\n throw new Error('No render configuration provided');\n}\n\nconst settings = jsonConfig.settings || {};\nconst compositorOpts = {\n width: settings.width || 1280,\n height: settings.height || 720,\n fps: settings.fps || 30,\n bgColor: settings.bgColor || '#000000',\n};\n```\n\n## Memory Management\n\nThe sprite renderer properly cleans up resources:\n\n- Textures are destroyed with `destroy(true)` to free GPU memory\n- Canvas dimensions are validated before allocation\n- Frame textures are only recreated when size changes\n\n## See Also\n\n- [Studio and Timeline](studio.md) - Higher-level project management\n- [Clips and Media](clips.md) - Media element handling\n- [Animation System](animation.md) - Animation creation and playback\n- [Node.js Rendering](node-rendering.md) - Server-side rendering guide\n\n---\n\n\n\n## Effects System\n\n### 相关页面\n\n相关主题：[Transitions System](#page-9), [Animation System](#page-6)\n\n\n相关源码文件
\n\n以下源码文件用于生成本页说明：\n\n- [packages/openvideo/src/effect/effect.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/effect/effect.ts)\n- [packages/openvideo/src/effect/glsl/gl-effect.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/effect/glsl/gl-effect.ts)\n- [packages/openvideo/src/effect/glsl/custom-glsl.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/effect/glsl/custom-glsl.ts)\n- [packages/openvideo/src/effect/types.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/effect/types.ts)\n- [packages/openvideo/src/effect/vertex.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/effect/vertex.ts)\n- [packages/openvideo/src/effect/interface/index.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/effect/interface/index.ts)\n- [packages/openvideo/src/utils/chromakey.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/utils/chromakey.ts)\n- [packages/openvideo/src/utils/color-adjustment.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/utils/color-adjustment.ts)\n \n\n# Effects System\n\n## Overview\n\nThe Effects System in OpenVideo is a modular, GPU-accelerated pipeline for applying visual transformations to clips during playback and rendering. Built on top of PixiJS and leveraging the WebCodecs API, the system provides both built-in effects (blur, brightness, color adjustment, chromakey) and a shader-based GLSL extension framework for custom visual effects. The architecture separates effect definition from effect application, allowing effects to be applied at the clip level with configurable timing, duration, and intensity.\n\nEffects are defined as standalone modules in `packages/openvideo/src/effect/` and can be attached to any clip through the timeline system. The system supports real-time preview during editing and high-quality final rendering through WebCodecs encoding.\n\n## Architecture\n\n### System Components\n\nThe Effects System consists of several interconnected layers:\n\n```mermaid\ngraph TD\n A[Clip Instance] --> B[Effect Manager]\n B --> C[Built-in Effects]\n B --> D[Custom GLSL Effects]\n C --> E[Blur Effect]\n C --> F[Color Adjustment]\n C --> G[Chromakey Effect]\n D --> H[GLSL Fragment Shaders]\n D --> I[GLSL Vertex Shaders]\n B --> J[Compositor Rendering]\n J --> K[PixiJS Renderer]\n K --> L[WebCodecs Encoder]\n```\n\n### Directory Structure\n\n```\npackages/openvideo/src/\n├── effect/\n│ ├── effect.ts # Core Effect class and base implementation\n│ ├── types.ts # TypeScript type definitions for effects\n│ ├── vertex.ts # Vertex shader utilities\n│ ├── glsl/\n│ │ ├── gl-effect.ts # WebGL effect renderer\n│ │ └── custom-glsl.ts # Custom shader registration system\n│ └── interface/\n│ └── index.ts # Effect interface contracts\n├── utils/\n│ ├── chromakey.ts # Green screen/chromakey utilities\n│ └── color-adjustment.ts # Color correction utilities\n```\n\n## Core Effect Interface\n\n### IEffect Interface\n\nAll effects must implement the `IEffect` interface defined in `packages/openvideo/src/effect/interface/index.ts`:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `id` | `string` | Unique identifier for the effect instance |\n| `key` | `string` | Effect type key (e.g., \"blur\", \"brightness\") |\n| `startTime` | `number` | Start time in microseconds |\n| `duration` | `number` | Effect duration in microseconds |\n| `targets` | `number[]` | Optional array of target indices for multi-target effects |\n| `enabled` | `boolean` | Whether the effect is currently active |\n\n资料来源：[packages/openvideo/src/effect/interface/index.ts]()\n\n### EffectOptions Type\n\nThe `EffectOptions` type in `packages/openvideo/src/effect/types.ts` provides the base configuration structure:\n\n```typescript\ninterface EffectOptions {\n id?: string;\n key?: string;\n startTime?: number;\n duration?: number;\n targets?: number[];\n enabled?: boolean;\n [key: string]: any; // Effect-specific parameters\n}\n```\n\n资料来源：[packages/openvideo/src/effect/types.ts]()\n\n## Built-in Effects\n\n### Blur Effect\n\nThe blur effect applies Gaussian blur to the clip using PixiJS's built-in blur filter. Configuration includes blur radius and quality settings.\n\n```mermaid\ngraph LR\n A[Input Texture] --> B[BlurFilter]\n B --> C[Radius Parameter]\n C --> D[Quality Iterations]\n D --> E[Output Texture]\n```\n\n### Color Adjustment Effect\n\nColor adjustments are applied through the `ColorAdjustment` type defined in `packages/openvideo/src/utils/color-adjustment.ts`. This effect modifies the visual characteristics of the source content:\n\n| Parameter | Type | Range | Description |\n|-----------|------|-------|-------------|\n| `brightness` | `number` | 0.0 - 2.0 | Brightness multiplier (1.0 = normal) |\n| `contrast` | `number` | 0.0 - 2.0 | Contrast adjustment (1.0 = normal) |\n| `saturation` | `number` | 0.0 - 2.0 | Color saturation (0.0 = grayscale, 1.0 = normal) |\n| `hue` | `number` | -180 to 180 | Hue rotation in degrees |\n| `exposure` | `number` | -1.0 to 1.0 | Exposure adjustment |\n\n资料来源：[packages/openvideo/src/utils/color-adjustment.ts]()\n\n### Chromakey Effect\n\nThe chromakey utility in `packages/openvideo/src/utils/chromakey.ts` implements green screen (chroma key) removal for video composition. This effect:\n\n- Detects pixels matching a target color within a tolerance range\n- Replaces matching pixels with transparency\n- Supports spill suppression to remove color artifacts\n\n```mermaid\ngraph TD\n A[Source Frame] --> B[Color Matching]\n B --> C{Tolerance Check}\n C -->|Match| D[Set Alpha = 0]\n C -->|No Match| E[Keep Pixel]\n D --> F[Spill Suppression]\n E --> F\n F --> G[Output Frame]\n```\n\n## GLSL Shader Effects\n\n### Custom GLSL System\n\nThe custom shader system allows developers to register their own fragment and vertex shaders. The system is built around two main components:\n\n1. **GL Effect Renderer** (`packages/openvideo/src/effect/glsl/gl-effect.ts`) - Handles WebGL shader compilation and execution\n2. **Custom GLSL Registry** (`packages/openvideo/src/effect/glsl/custom-glsl.ts`) - Manages shader registration and retrieval\n\n### Shader Structure\n\nEach custom shader effect follows a standard structure:\n\n```mermaid\ngraph TD\n A[CustomShader Object] --> B[Fragment Shader]\n A --> C[Vertex Shader]\n A --> D[Uniforms]\n A --> E[Sampler Inputs]\n B --> F[GLSL Main Function]\n D --> G[uniform float time]\n D --> H[uniform vec2 resolution]\n D --> I[Effect Parameters]\n```\n\n### Vertex Shader Utilities\n\nThe `vertex.ts` file provides common vertex shader utilities and transformations for effects that require custom vertex manipulation:\n\n| Function | Purpose |\n|----------|---------|\n| `getStandardVertexShader()` | Returns the default passthrough vertex shader |\n| `getUVTransform()` | Generates UV coordinate transformations |\n| `applyTransform()` | Applies transformation matrix to vertices |\n\n资料来源：[packages/openvideo/src/effect/vertex.ts]()\n\n## Effect Application in Clips\n\n### Effect Integration with Clips\n\nEffects are attached to clips through the `effects` array in the clip's configuration. Each effect entry references an effect by key and timing:\n\n```mermaid\ngraph TD\n A[Clip JSON Config] --> B[effects Array]\n B --> C[Effect Entry 1]\n B --> D[Effect Entry 2]\n C --> E{id: string}\n C --> F{key: string}\n C --> G{startTime: number}\n C --> H{duration: number}\n```\n\nThe base clip JSON structure from `packages/openvideo/src/json-serialization.ts` shows the effect definition format:\n\n```typescript\neffects?: Array<{\n id: string;\n key: string;\n startTime: number;\n duration: number;\n targets?: number[];\n}>;\n```\n\n资料来源：[packages/openvideo/src/json-serialization.ts]()\n\n### Effect Timing and Targeting\n\nEffects support precise temporal control:\n\n| Property | Description |\n|----------|-------------|\n| `startTime` | Microseconds from clip start when effect begins |\n| `duration` | Length of effect application in microseconds |\n| `targets` | Optional array of sub-element indices (for multi-layer clips) |\n\n## Sprite-Level Effect Properties\n\nThe base sprite system in `packages/openvideo/src/sprite/base-sprite.ts` defines render-time effect properties that are applied during the render transform calculation:\n\n| Property | Type | Default | Description |\n|----------|------|---------|-------------|\n| `blur` | `number` | 0 | Blur intensity applied during rendering |\n| `brightness` | `number` | 1 | Brightness multiplier |\n| `mirror` | `number` | 0 | Mirror effect intensity (0-1) |\n| `motionBlur` | `number` | 0 | Motion blur amount for moving elements |\n\nThese properties are combined from multiple animation sources at render time:\n\n```mermaid\ngraph TD\n A[Base Transform] --> C[Combined Transform]\n B[Animation Transform] --> C\n E[Effect Properties] --> C\n C --> D[Final Render]\n```\n\n资料来源：[packages/openvideo/src/sprite/base-sprite.ts]()\n\n## Effect Processing Pipeline\n\n### Render Pipeline Integration\n\nThe effects system integrates with the overall render pipeline as follows:\n\n```mermaid\nsequenceDiagram\n participant Timeline\n participant Clip\n participant EffectManager\n participant Compositor\n participant WebCodecs\n \n Timeline->>Clip: currentTime update\n Clip->>EffectManager: getActiveEffects(time)\n EffectManager->>EffectManager: filter by startTime/duration\n EffectManager-->>Compositor: activeEffects[]\n Compositor->>Compositor: applyEffects(frame)\n Compositor->>WebCodecs: encodeFrame()\n```\n\n### Effect Order of Application\n\nEffects are applied in a deterministic order:\n\n1. **Color Adjustments** - Brightness, contrast, saturation\n2. **Blur Effects** - Applied as PixiJS filters\n3. **Custom GLSL Shaders** - User-defined effects\n4. **Chromakey** - Applied last for proper compositing\n\n## Effect Configuration API\n\n### Creating an Effect\n\n```typescript\nimport { Effect } from 'openvideo';\n\n// Built-in effect\nconst blurEffect = new Effect({\n key: 'blur',\n startTime: 0,\n duration: 5000000, // 5 seconds in microseconds\n intensity: 10\n});\n\n// Custom GLSL effect\nconst customEffect = new Effect({\n key: 'my-custom-shader',\n startTime: 1000000,\n duration: 3000000,\n uniforms: {\n color: [1.0, 0.5, 0.0],\n strength: 0.8\n }\n});\n```\n\n### Attaching Effects to Clips\n\n```typescript\nconst videoClip = await Video.fromUrl('video.mp4');\nvideoClip.effects = [\n {\n id: 'effect-1',\n key: 'colorAdjustment',\n startTime: 0,\n duration: clip.duration,\n brightness: 1.2,\n saturation: 0.8\n }\n];\n```\n\n## Custom Shader Registration\n\n### Registering Custom Shaders\n\nDevelopers can register custom GLSL shaders through the custom shader registry:\n\n```typescript\nimport { registerCustomShader } from 'openvideo';\n\nregisterCustomShader({\n name: 'my-custom-effect',\n fragmentShader: `\n uniform float strength;\n uniform vec3 color;\n \n void main() {\n vec4 texture = texture2D(uSampler, vTextureCoord);\n vec3 adjusted = mix(texture.rgb, color, strength);\n gl_FragColor = vec4(adjusted, texture.a);\n }\n `,\n uniforms: [\n { name: 'strength', type: 'float', value: 0.5 },\n { name: 'color', type: 'vec3', value: [1, 1, 1] }\n ]\n});\n```\n\n资料来源：[packages/openvideo/src/effect/glsl/custom-glsl.ts]()\n\n## Performance Considerations\n\n### GPU vs CPU Effects\n\n| Effect Type | Processing Location | Performance Impact |\n|-------------|---------------------|-------------------|\n| Built-in Filters | GPU (PixiJS) | Low |\n| Color Adjustments | GPU (Shader) | Low |\n| Chromakey | GPU (Shader) | Medium |\n| Custom GLSL | GPU (User Shader) | Varies |\n| Complex Blur | CPU/GPU | High |\n\n### Optimization Strategies\n\n1. **Batch similar effects** - Group effects that use the same shader\n2. **Use appropriate precision** - Prefer `lowp` or `mediump` where possible\n3. **Limit effect count** - Excessive effect stacking impacts performance\n4. **Consider resolution scaling** - Lower resolution during preview, full resolution for export\n\n## Related Components\n\n| Component | File Path | Relationship |\n|-----------|-----------|--------------|\n| BaseSprite | `packages/openvideo/src/sprite/base-sprite.ts` | Applies effect properties during render |\n| Compositor | `packages/openvideo/src/compositor.ts` | Executes effects during frame rendering |\n| JsonSerialization | `packages/openvideo/src/json-serialization.ts` | Serializes effect configurations |\n| CaptionClip | `packages/openvideo/src/clips/caption-clip.ts` | Uses color adjustment effects |\n| ColorAdjustment | `packages/openvideo/src/utils/color-adjustment.ts` | Utility for color corrections |\n| Chromakey | `packages/openvideo/src/utils/chromakey.ts` | Green screen removal utility |\n\n---\n\n\n\n## Transitions System\n\n### 相关页面\n\n相关主题：[Effects System](#page-8), [Animation System](#page-6)\n\n\n相关源码文件
\n\n以下源码文件用于生成本页说明：\n\n- [packages/openvideo/src/transition/transition.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/transition/transition.ts)\n- [packages/openvideo/src/transition/glsl/gl-transition.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/transition/glsl/gl-transition.ts)\n- [packages/openvideo/src/transition/glsl/custom-glsl.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/transition/glsl/custom-glsl.ts)\n- [packages/openvideo/src/transition/fragment.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/transition/fragment.ts)\n- [packages/openvideo/src/transition/uniforms.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/transition/uniforms.ts)\n- [packages/openvideo/src/transition/types.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/transition/types.ts)\n- [packages/openvideo/src/transition/vertex.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/transition/vertex.ts)\n \n\n# Transitions System\n\nThe Transitions System is a core module within the openvideo library that enables visual transitions between video clips using WebGL fragment shaders. It provides over 30 built-in transition effects including wipes, fades, geometric transformations, and artistic effects, all implemented through GLSL shaders with customizable uniforms.\n\n## Architecture Overview\n\nThe transitions system follows a layered architecture that separates shader definitions, uniform management, and transition lookup logic.\n\n```mermaid\ngraph TD\n A[Transition Request] --> B[Name Resolution]\n B --> C[Variant Matching]\n C --> D{Gound?}\n D -->|Yes| E[Select GLSL Fragment]\n D -->|No| F[Variant Generation]\n F --> G{Lowercase match?}\n G -->|Yes| E\n G -->|No| H[Error/Default]\n E --> I[Uniform Assembly]\n I --> J[WebGL Render]\n \n K[Basic Uniforms] --> I\n L[Transition-Specific Uniforms] --> I\n```\n\n### Core Components\n\n| Component | File | Purpose |\n|-----------|------|---------|\n| Main Controller | `transition.ts` | Transition lookup, name resolution, GLSL selection |\n| GLSL Base | `gl-transition.ts` | WebGL transition shader base class |\n| Custom GLSL | `custom-glsl.ts` | Custom shader compilation and execution |\n| Fragment Shaders | `fragment.ts` | GLSL shader source code for each transition |\n| Uniforms | `uniforms.ts` | Uniform type definitions and defaults |\n| Types | `types.ts` | TypeScript interfaces for transitions |\n| Vertex Shader | `vertex.ts` | Vertex shader for quad rendering |\n\n资料来源：[packages/openvideo/src/transition/transition.ts:1-50]()\n\n## Transition Types\n\nThe system includes the following built-in transitions, categorized by their visual effect:\n\n### Wipe & Reveal Transitions\n\n| Transition Name | Description | Key Uniforms |\n|-----------------|-------------|--------------|\n| `directional` | Directional wipe effect | direction, smoothness |\n| `directionalwipe` / `directional_wipe` | Wipe with direction control | angle, feather |\n| `directionalwarp` / `directional_warp` | Warped directional wipe | strength, angle |\n| `crosshatch` | Crosshatch pattern reveal | density, smoothness |\n\n### Geometric Transitions\n\n| Transition Name | Description | Key Uniforms |\n|-----------------|-------------|--------------|\n| `circle` / `circleopen` | Circle expand/reveal | radius, feather |\n| `squareswire` / `squaresWire` | Square wireframe reveal | size, smoothness |\n| `hexagonalize` | Hexagonal mosaic transition | scale, angle |\n| `bowtiehorizontal` / `BowTieHorizontal` | Bow tie shape reveal | size, angle |\n\n### Fade & Blend Transitions\n\n| Transition Name | Description | Key Uniforms |\n|-----------------|-------------|--------------|\n| `crosszoom` / `CrossZoom` | Cross-zoom effect with blur | zoom, rotation |\n| `rotate_scale_fade` / `rotatescalefade` | Combined rotation, scale, fade | angle, scale |\n| `luma` | Luminance-based dissolve | threshold, smoothness |\n| `luminance_melt` / `luminancemelt` | Melt effect based on brightness | direction, smoothness |\n| `perlin` | Perlin noise-based transition | scale, seed |\n\n### Distortion Transitions\n\n| Transition Name | Description | Key Uniforms |\n|-----------------|-------------|--------------|\n| `glitchdisplace` / `GlitchDisplace` | Glitch-style displacement | intensity, seed |\n| `undulatingburnout` / `UndulatingBurnOut` | Undulating wave burnout | amplitude, frequency |\n| `displacement` | Generic displacement map | scale, map |\n| `polar_function` / `polar_function` | Polar coordinate transform | radius, angle |\n\n### Creative Transitions\n\n| Transition Name | Description | Key Uniforms |\n|-----------------|-------------|--------------|\n| `gridflip` / `GridFlip` | Grid-based flip reveal | gridSize, axis |\n| `randomSquares` / `RandomSquares` | Random square reveal | size, smoothness |\n| `pixelize` / `Pixelize` | Pixelation effect | pixelSize |\n| `heart` | Heart-shaped reveal | scale, smoothness |\n| `cannabisleaf` / `cannabis_leaf` | Cannabis leaf pattern | scale, rotation |\n| `polkadotscurtain` / `PolkaDotsCurtain` | Polka dots curtain | dotSize, spacing |\n| `stereoviewer` / `StereoViewer` | Stereo viewer effect | depth, offset |\n| `crazyparametricfun` / `CrazyParametricFun` | Parametric function effect | function, iterations |\n\n资料来源：[packages/openvideo/src/transition/transition.ts:60-150]()\n\n## Name Resolution & Matching\n\nThe transition system supports flexible name matching to accommodate various naming conventions used by developers.\n\n### Matching Algorithm\n\n```mermaid\ngraph LR\n A[Input Name] --> B[Direct Match]\n A --> C[Lowercase Match]\n A --> D[Capitalized Match]\n A --> E[Snake_case Match]\n A --> F[No Separator Match]\n \n B --> G{Match Found?}\n C --> G\n D --> G\n E --> G\n F --> G\n \n G -->|Yes| H[Return Transition]\n G -->|No| I[Error with Available Names]\n```\n\n### Variant Generation Strategy\n\nThe system attempts multiple name transformations when looking up transitions:\n\n1. **Exact match** - `transition.name === input`\n2. **Lowercase match** - `name.toLowerCase() === input.toLowerCase()`\n3. **Capitalized match** - `name.charAt(0).toUpperCase() + name.slice(1).toLowerCase()`\n4. **Snake_case conversion** - `name.replace(/([A-Z])/g, '_$1').toLowerCase()`\n5. **No separator** - `name.replace(/_/g, '').toLowerCase()`\n\n资料来源：[packages/openvideo/src/transition/transition.ts:180-220]()\n\n## Uniform System\n\nTransitions use uniforms to pass parameters to GLSL shaders. The uniform system handles type conversion and default values.\n\n### Basic Uniforms\n\nAll transitions receive these fundamental uniforms:\n\n```typescript\ninterface BasicUniforms {\n tex: sampler2D; // Source texture\n tex2: sampler2D; // Target texture\n progress: number; // Transition progress (0-1)\n time: number; // Current time\n resolution: vec2; // Canvas resolution\n}\n```\n\n### Uniform Type Conversion\n\nThe system automatically converts WebGPU-style uniform types to WebGL-compatible formats:\n\n| WebGPU Type | WebGL Type | Conversion |\n|-------------|------------|------------|\n| `int` | `i32` | `Math.trunc(value)` |\n| `ivec2` | `vec2` | Direct conversion |\n\n资料来源：[packages/openvideo/src/transition/transition.ts:100-115]()\n\n### Transition-Specific Uniforms\n\nEach transition type defines its own uniforms that extend the basic set:\n\n```typescript\n// Example: GridFlip uniforms\nconst GRIDFLIP_UNIFORMS = {\n gridSize: { type: 'f32', value: 10.0 },\n axis: { type: 'i32', value: 0 },\n};\n\n// Example: Circle uniforms\nconst CIRCLEOPEN_UNIFORMS = {\n radius: { type: 'f32', value: 1.5 },\n feather: { type: 'f32', value: 0.05 },\n};\n```\n\n资料来源：[packages/openvideo/src/transition/uniforms.ts]()\n\n## GLSL Shader Structure\n\n### Vertex Shader\n\nThe vertex shader renders a full-screen quad for transition effects:\n\n```glsl\nattribute vec2 a_position;\nattribute vec2 a_texCoord;\nvarying vec2 v_texCoord;\n\nvoid main() {\n gl_Position = vec4(a_position, 0.0, 1.0);\n v_texCoord = a_texCoord;\n}\n```\n\n### Fragment Shader Pattern\n\nEach transition implements a fragment shader with the following signature:\n\n```glsl\nuniform sampler2D tex; // From texture\nuniform sampler2D tex2; // To texture\nuniform float progress; // 0.0 to 1.0\nuniform vec2 resolution; // Viewport size\n\n// Transition-specific uniforms...\n\nvarying vec2 v_texCoord;\n\nvec4 getFromColor(vec2 uv) {\n return texture2D(tex, uv);\n}\n\nvec4 getToColor(vec2 uv) {\n return texture2D(tex2, uv);\n}\n\nvoid main() {\n // Transition-specific logic\n vec4 from = getFromColor(uv);\n vec4 to = getToColor(uv);\n gl_FragColor = mix(from, to, progress);\n}\n```\n\n资料来源：[packages/openvideo/src/transition/vertex.ts]()\n资料来源：[packages/openvideo/src/transition/fragment.ts]()\n\n## Rendering Pipeline\n\n```mermaid\ngraph TD\n A[Timeline Position] --> B{Transition Zone?}\n B -->|No| C[Single Clip Render]\n B -->|Yes| D[Load From/To Textures]\n D --> E[Calculate Progress]\n E --> F[Set Uniform Values]\n F --> G[Compile GLSL if needed]\n G --> H[Render Transition Shader]\n H --> I[Output Composite Frame]\n \n J[Basic Uniforms] --> F\n K[Transition Uniforms] --> F\n L[Custom Uniforms] --> F\n```\n\n### Rendering Steps\n\n1. **Texture Binding** - Source and destination textures are bound to texture units\n2. **Progress Calculation** - Transition progress (0-1) is calculated from timeline position\n3. **Uniform Assembly** - Basic uniforms are merged with transition-specific uniforms\n4. **Shader Execution** - WebGL renders the full-screen quad with the transition shader\n5. **Output** - The composited frame is written to the canvas\n\n资料来源：[packages/openvideo/src/transition/glsl/gl-transition.ts]()\n\n## Custom Transitions\n\n### Creating Custom GLSL\n\nDevelopers can create custom transitions by implementing the fragment shader pattern:\n\n```typescript\nimport { GLTransition } from './types';\n\nconst CUSTOM_FRAGMENT = `\nuniform float customParam;\nvarying vec2 v_texCoord;\n\nvec4 getFromColor(vec2 uv) {\n return texture2D(tex, uv);\n}\n\nvec4 getToColor(vec2 uv) {\n return texture2D(tex2, uv);\n}\n\n// Custom transition logic\nvoid main() {\n vec2 uv = v_texCoord;\n vec4 from = getFromColor(uv);\n vec4 to = getToColor(uv);\n \n float ratio = 1.0 - customParam;\n float pr = smoothstep(0.0, ratio, progress);\n \n gl_FragColor = mix(from, to, pr);\n}\n`;\n\nconst customTransition: GLTransition = {\n name: 'custom',\n fragment: CUSTOM_FRAGMENT,\n uniforms: {\n customParam: { type: 'f32', value: 0.5 },\n },\n};\n```\n\n资料来源：[packages/openvideo/src/transition/glsl/custom-glsl.ts]()\n\n### Registering Custom Transitions\n\nCustom transitions can be registered into the local transition registry for flexible lookup:\n\n```typescript\nimport { registerTransition, getAllTransitions } from './transition';\n\n// Register custom transition\nregisterTransition('myCustom', customTransition);\n\n// Retrieve all transitions including custom\nconst all = getAllTransitions();\n```\n\n## Type Definitions\n\n### GLTransition Interface\n\n```typescript\ninterface GLTransition {\n name: string; // Unique identifier\n label?: string; // Display name\n fragment: string; // GLSL fragment shader source\n vertex?: string; // Custom vertex shader (optional)\n uniforms: {\n [key: string]: UniformDefinition;\n };\n}\n\ninterface UniformDefinition {\n type: 'f32' | 'i32' | 'vec2' | 'vec4';\n value: number | number[];\n}\n```\n\n资料来源：[packages/openvideo/src/transition/types.ts]()\n\n## Performance Considerations\n\n### Shader Compilation\n\n- GLSL shaders are compiled once and cached for reuse\n- Subsequent uses of the same transition use the cached program\n\n### Texture Sampling\n\n- Transitions use bilinear filtering for smooth interpolation\n- Mipmaps are generated for efficient downsampling during blur effects\n\n### Uniform Updates\n\n- Progress uniform is updated every frame during transitions\n- Type conversion is performed once when the transition starts, not per-frame\n\n## Error Handling\n\nWhen a transition cannot be found, the system provides helpful error messages:\n\n```typescript\n// Error message format\n`Transition '${name}' not found. Available: ${availableNames}...`\n```\n\nThe system attempts to suggest similar transitions by checking the first 5 available transitions and 3 local definitions.\n\n资料来源：[packages/openvideo/src/transition/transition.ts:230-250]()\n\n## See Also\n\n- [Studio System](../studio) - High-level composition API that uses transitions\n- [Clip System](../clips) - Video clip handling with transition support\n- [Animation Presets](../animation/presets) - Keyframe animation system\n\n---\n\n\n\n## Utilities and Helpers\n\n### 相关页面\n\n相关主题：[Compositor and Rendering](#page-7), [Clip System](#page-5)\n\n\n相关源码文件
\n\n以下源码文件用于生成本页说明：\n\n- [packages/openvideo/src/utils/index.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/utils/index.ts)\n- [packages/openvideo/src/utils/asset-manager.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/utils/asset-manager.ts)\n- [packages/openvideo/src/utils/audio.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/utils/audio.ts)\n- [packages/openvideo/src/utils/srt-parser.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/utils/srt-parser.ts)\n- [packages/openvideo/src/utils/fonts.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/utils/fonts.ts)\n- [packages/openvideo/src/utils/video.ts](https://github.com/openvideovdev/openvideo/blob/main/packages/openvideo/src/utils/video.ts)\n- [packages/openvideo/src/utils/color.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/utils/color.ts)\n- [packages/openvideo/src/utils/common.ts](https://github.com/openvideodev/openvideo/blob/main/packages/openvideo/src/utils/common.ts)\n \n\n# Utilities and Helpers\n\n## Overview\n\nThe `openvideo` library provides a comprehensive suite of utility modules under `packages/openvideo/src/utils/` that support core functionality across the video rendering pipeline. These utilities handle resource management, media processing, formatting, and color manipulation—enabling the higher-level components like `Studio`, `Compositor`, and various clip types to operate efficiently.\n\n## Architecture Overview\n\n```mermaid\ngraph TD\n subgraph \"Utility Layer\"\n UTILS_INDEX[utils/index.ts
Module Exports]\n ASSET_MGR[asset-manager.ts
Resource Management]\n AUDIO_UTIL[audio.ts
Audio Processing]\n SRT[SRT Parser
Subtitle Handling]\n FONTS[fonts.ts
Font Management]\n VIDEO_UTIL[video.ts
Video Utilities]\n COLOR[color.ts
Color Operations]\n COMMON[common.ts
Common Helpers]\n end\n \n subgraph \"Consumer Components\"\n STUDIO[Studio]\n COMPOSITOR[Compositor]\n VIDEO_CLIP[VideoClip]\n TEXT_CLIP[TextClip]\n CAPTION_CLIP[CaptionClip]\n end\n \n UTILS_INDEX --> ASSET_MGR\n UTILS_INDEX --> AUDIO_UTIL\n UTILS_INDEX --> SRT\n UTILS_INDEX --> FONTS\n UTILS_INDEX --> VIDEO_UTIL\n UTILS_INDEX --> COLOR\n UTILS_INDEX --> COMMON\n \n ASSET_MGR --> VIDEO_CLIP\n ASSET_MGR --> STUDIO\n FONTS --> TEXT_CLIP\n AUDIO_UTIL --> COMPOSITOR\n COLOR --> TEXT_CLIP\n COLOR --> CAPTION_CLIP\n VIDEO_UTIL --> VIDEO_CLIP\n```\n\n## Module Descriptions\n\n### Asset Manager (`asset-manager.ts`)\n\nThe asset manager provides centralized resource handling capabilities for loading and managing media assets. It abstracts the complexities of OPFS (Origin Private File System) operations and provides consistent interfaces for accessing streams and files.\n\n**Key Responsibilities:**\n\n- Stream management for remote and local resources\n- OPFS file read/write operations\n- Resource lifecycle management\n\n**Source:** [packages/openvideo/src/utils/asset-manager.ts:1-50]()\n\n### Audio Utilities (`audio.ts`)\n\nAudio utilities provide processing functions for audio tracks within video compositions. These utilities handle audio decoding, volume control, and track synchronization.\n\n**Key Functions:**\n\n| Function | Purpose |\n|----------|---------|\n| `processAudioTrack()` | Process raw audio samples for integration |\n| `adjustVolume()` | Apply volume modifications to audio streams |\n| `syncAudioTracks()` | Synchronize multiple audio tracks |\n\n**Source:** [packages/openvideo/src/utils/audio.ts:1-40]()\n\n### SRT Parser (`srt-parser.ts`)\n\nThe SRT parser handles SubRip subtitle file parsing and conversion. It transforms SRT format subtitles into structured caption data usable by the `CaptionClip` component.\n\n**Parsing Flow:**\n\n```mermaid\ngraph LR\n SRT_FILE[SRT File] --> PARSER[SRT Parser]\n PARSER --> CAPTION_DATA[Caption Data Structure]\n CAPTION_DATA --> CAPTION_CLIP[CaptionClip]\n```\n\n**Source:** [packages/openvideo/src/utils/srt-parser.ts:1-60]()\n\n### Font Management (`fonts.ts`)\n\nFont utilities manage font loading, caching, and fallback strategies for text rendering in `TextClip` and `CaptionClip` components.\n\n**Font Loading Strategy:**\n\n| Step | Operation |\n|------|-----------|\n| 1 | Check font cache for existing entry |\n| 2 | If missing, fetch font from URL |\n| 3 | Parse font data using FontFace API |\n| 4 | Add to document fonts |\n| 5 | Cache for subsequent use |\n\n**Source:** [packages/openvideo/src/utils/fonts.ts:1-45]()\n\n### Video Utilities (`video.ts`)\n\nVideo utilities provide helper functions for video frame processing, thumbnail generation, and metadata extraction. These utilities support the `VideoClip` component's frame-seeking and thumbnail capabilities.\n\n**Source:** [packages/openvideo/src/utils/video.ts:1-55]()\n\n### Color Utilities (`color.ts`)\n\nColor utilities handle color format conversion, validation, and transformation for consistent styling across text, captions, and visual effects.\n\n**Supported Color Formats:**\n\n| Format | Example |\n|--------|---------|\n| Hex | `#FF5733` |\n| RGB | `rgb(255, 87, 51)` |\n| RGBA | `rgba(255, 87, 51, 0.5)` |\n| Named | `red`, `blue`, `transparent` |\n\n**Usage in Clips:**\n\nThe `TextClip` and `CaptionClip` components utilize color utilities for:\n\n- `fill` property for text color\n- `stroke` color configuration\n- `dropShadow` color and alpha values\n\n**Source:** [packages/openvideo/src/utils/color.ts:1-35]()\n\n### Common Utilities (`common.ts`)\n\nCommon utilities provide shared helper functions used throughout the library, including type guards, validation helpers, and general-purpose transformations.\n\n**Source:** [packages/openvideo/src/utils/common.ts:1-30]()\n\n## Integration with Core Components\n\n### VideoClip Integration\n\nThe `VideoClip` class relies on utility modules for resource loading and video processing:\n\n```typescript\n// From packages/openvideo/src/clips/video-clip.ts:42-55\nconst stream = await ResourceManager.getReadableStream(url);\nconst clip = new Video(stream, {}, url);\nawait clip.ready;\n```\n\n### TextClip Integration\n\nText styling leverages color utilities for consistent rendering:\n\n```typescript\n// From packages/openvideo/src/clips/text-clip.ts:95-110\nif (this.originalOpts.fill !== undefined)\n style.color = this.originalOpts.fill as any;\nif (this.originalOpts.stroke) {\n style.stroke = {\n color: this.originalOpts.stroke.color as any,\n width: this.originalOpts.stroke.width,\n };\n}\n```\n\n### CaptionClip Integration\n\nCaption styling combines color, font, and formatting utilities:\n\n```typescript\n// From packages/openvideo/src/clips/caption-clip.ts:120-135\nif (opts.dropShadow) {\n style.shadow = {\n color: (opts.dropShadow.color ?? '#000000') as string,\n alpha: opts.dropShadow.alpha ?? 0.5,\n blur: opts.dropShadow.blur ?? 4,\n distance: opts.dropShadow.distance ?? 0,\n angle: opts.dropShadow.angle ?? 0,\n };\n}\n```\n\n## Module Export Pattern\n\nAll utilities are exported through the central `utils/index.ts` entry point:\n\n```typescript\n// packages/openvideo/src/utils/index.ts\nexport * from './asset-manager';\nexport * from './audio';\nexport * from './srt-parser';\nexport * from './fonts';\nexport * from './video';\nexport * from './color';\nexport * from './common';\n```\n\nThis pattern allows consumers to import specific utilities as needed:\n\n```typescript\nimport { ResourceManager, ColorUtils } from 'openvideo';\n```\n\n## Utility Functions Reference\n\n### Resource Management\n\n| Function | Parameters | Returns | Description |\n|----------|------------|---------|-------------|\n| `getReadableStream()` | `url: string` | `Promise` | Fetches resource as stream |\n| `write()` | `file: OPFSToolFile, stream: ReadableStream` | `Promise` | Writes stream to OPFS file |\n\n### Color Operations\n\n| Function | Parameters | Returns | Description |\n|----------|------------|---------|-------------|\n| `parseColor()` | `color: string` | `ColorObject` | Parse color string to object |\n| `toHex()` | `color: ColorObject` | `string` | Convert to hex format |\n\n### Font Operations\n\n| Function | Parameters | Returns | Description |\n|----------|------------|---------|-------------|\n| `loadFont()` | `name: string, url: string` | `Promise` | Load and register font |\n| `getFont()` | `name: string` | `FontFace \\| null` | Retrieve cached font |\n\n## Summary\n\nThe utility modules in openvideo form a foundational layer that abstracts common operations away from business logic. By centralizing resource management, media processing, color handling, and font operations, the library maintains consistency and reduces duplication across components like `VideoClip`, `TextClip`, and `CaptionClip`. These utilities are designed to be composable and are exported through a single entry point for convenient consumption.\n\n---\n\n---\n\n## Doramagic 踩坑日志\n\n项目：openvideodev/openvideo\n\n摘要：发现 11 个潜在踩坑项，其中 0 个为 high/blocking；最高优先级：安装坑 - 来源证据：Modular architecture: separate core logic from PixiJS renderer to enable React Native / headless use。\n\n## 1. 安装坑 · 来源证据：Modular architecture: separate core logic from PixiJS renderer to enable React Native / headless use\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：GitHub 社区证据显示该项目存在一个安装相关的待验证问题：Modular architecture: separate core logic from PixiJS renderer to enable React Native / headless use\n- 对用户的影响：可能增加新用户试用和生产接入成本。\n- 建议检查：来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。\n- 防护动作：不得脱离来源链接放大为确定性结论；需要标注适用版本和复核状态。\n- 证据：community_evidence:github | cevd_28cbc35c1a0544478da4fb17013e349a | https://github.com/openvideodev/openvideo/issues/78 | 来源类型 github_issue 暴露的待验证使用条件。\n\n## 2. 配置坑 · 来源证据：Image and Audio clips lost during loadFromJSON/exportToJSON round-trip\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：GitHub 社区证据显示该项目存在一个配置相关的待验证问题：Image and Audio clips lost during loadFromJSON/exportToJSON round-trip\n- 对用户的影响：可能增加新用户试用和生产接入成本。\n- 建议检查：来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。\n- 防护动作：不得脱离来源链接放大为确定性结论；需要标注适用版本和复核状态。\n- 证据：community_evidence:github | cevd_e2e8dc4e56504c3c909c7cf990b5a336 | https://github.com/openvideodev/openvideo/issues/60 | 来源类型 github_issue 暴露的待验证使用条件。\n\n## 3. 配置坑 · 来源证据：[Bug] Transition effect \"display\" value update not reflected in Player after clip repositioning\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：GitHub 社区证据显示该项目存在一个配置相关的待验证问题：[Bug] Transition effect \"display\" value update not reflected in Player after clip repositioning\n- 对用户的影响：可能增加新用户试用和生产接入成本。\n- 建议检查：来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。\n- 防护动作：不得脱离来源链接放大为确定性结论；需要标注适用版本和复核状态。\n- 证据：community_evidence:github | cevd_f5e332be3e884e0eb6bb27bb45d7524a | https://github.com/openvideodev/openvideo/issues/52 | 来源类型 github_issue 暴露的待验证使用条件。\n\n## 4. 配置坑 · 来源证据：display property not initialized for Image clips\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：GitHub 社区证据显示该项目存在一个配置相关的待验证问题：display property not initialized for Image clips\n- 对用户的影响：可能阻塞安装或首次运行。\n- 建议检查：来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。\n- 防护动作：不得脱离来源链接放大为确定性结论；需要标注适用版本和复核状态。\n- 证据：community_evidence:github | cevd_45024018965c442dbaaf3bb5441b75f2 | https://github.com/openvideodev/openvideo/issues/18 | 来源类型 github_issue 暴露的待验证使用条件。\n\n## 5. 配置坑 · 来源证据：meta property is read-only\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：GitHub 社区证据显示该项目存在一个配置相关的待验证问题：meta property is read-only\n- 对用户的影响：可能增加新用户试用和生产接入成本。\n- 建议检查：来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。\n- 防护动作：不得脱离来源链接放大为确定性结论；需要标注适用版本和复核状态。\n- 证据：community_evidence:github | cevd_2798efa2236a4fe1a82930d7a1b1cc80 | https://github.com/openvideodev/openvideo/issues/19 | 来源类型 github_issue 暴露的待验证使用条件。\n\n## 6. 能力坑 · 能力判断依赖假设\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：README/documentation is current enough for a first validation pass.\n- 对用户的影响：假设不成立时，用户拿不到承诺的能力。\n- 建议检查：将假设转成下游验证清单。\n- 防护动作：假设必须转成验证项；没有验证结果前不能写成事实。\n- 证据：capability.assumptions | github_repo:1125747446 | https://github.com/openvideodev/openvideo | README/documentation is current enough for a first validation pass.\n\n## 7. 维护坑 · 维护活跃度未知\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：未记录 last_activity_observed。\n- 对用户的影响：新项目、停更项目和活跃项目会被混在一起，推荐信任度下降。\n- 建议检查：补 GitHub 最近 commit、release、issue/PR 响应信号。\n- 防护动作：维护活跃度未知时，推荐强度不能标为高信任。\n- 证据：evidence.maintainer_signals | github_repo:1125747446 | https://github.com/openvideodev/openvideo | last_activity_observed missing\n\n## 8. 安全/权限坑 · 下游验证发现风险项\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：no_demo\n- 对用户的影响：下游已经要求复核，不能在页面中弱化。\n- 建议检查：进入安全/权限治理复核队列。\n- 防护动作：下游风险存在时必须保持 review/recommendation 降级。\n- 证据：downstream_validation.risk_items | github_repo:1125747446 | https://github.com/openvideodev/openvideo | no_demo; severity=medium\n\n## 9. 安全/权限坑 · 存在评分风险\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：no_demo\n- 对用户的影响：风险会影响是否适合普通用户安装。\n- 建议检查：把风险写入边界卡，并确认是否需要人工复核。\n- 防护动作：评分风险必须进入边界卡，不能只作为内部分数。\n- 证据：risks.scoring_risks | github_repo:1125747446 | https://github.com/openvideodev/openvideo | no_demo; severity=medium\n\n## 10. 维护坑 · issue/PR 响应质量未知\n\n- 严重度：low\n- 证据强度：source_linked\n- 发现：issue_or_pr_quality=unknown。\n- 对用户的影响：用户无法判断遇到问题后是否有人维护。\n- 建议检查：抽样最近 issue/PR，判断是否长期无人处理。\n- 防护动作：issue/PR 响应未知时，必须提示维护风险。\n- 证据：evidence.maintainer_signals | github_repo:1125747446 | https://github.com/openvideodev/openvideo | issue_or_pr_quality=unknown\n\n## 11. 维护坑 · 发布节奏不明确\n\n- 严重度：low\n- 证据强度：source_linked\n- 发现：release_recency=unknown。\n- 对用户的影响：安装命令和文档可能落后于代码，用户踩坑概率升高。\n- 建议检查：确认最近 release/tag 和 README 安装命令是否一致。\n- 防护动作：发布节奏未知或过期时，安装说明必须标注可能漂移。\n- 证据：evidence.maintainer_signals | github_repo:1125747446 | https://github.com/openvideodev/openvideo | release_recency=unknown\n\n\n",
"summary": "DeepWiki/Human Wiki 完整输出，末尾追加 Discovery Agent 踩坑日志。",
"title": "Human Manual / 人类版说明书"
},
"pitfall_log": {
"asset_id": "pitfall_log",
"filename": "PITFALL_LOG.md",
"markdown": "# Pitfall Log / 踩坑日志\n\n项目：openvideodev/openvideo\n\n摘要：发现 11 个潜在踩坑项，其中 0 个为 high/blocking；最高优先级：安装坑 - 来源证据：Modular architecture: separate core logic from PixiJS renderer to enable React Native / headless use。\n\n## 1. 安装坑 · 来源证据：Modular architecture: separate core logic from PixiJS renderer to enable React Native / headless use\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：GitHub 社区证据显示该项目存在一个安装相关的待验证问题：Modular architecture: separate core logic from PixiJS renderer to enable React Native / headless use\n- 对用户的影响：可能增加新用户试用和生产接入成本。\n- 建议检查：来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。\n- 防护动作：不得脱离来源链接放大为确定性结论；需要标注适用版本和复核状态。\n- 证据：community_evidence:github | cevd_28cbc35c1a0544478da4fb17013e349a | https://github.com/openvideodev/openvideo/issues/78 | 来源类型 github_issue 暴露的待验证使用条件。\n\n## 2. 配置坑 · 来源证据：Image and Audio clips lost during loadFromJSON/exportToJSON round-trip\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：GitHub 社区证据显示该项目存在一个配置相关的待验证问题：Image and Audio clips lost during loadFromJSON/exportToJSON round-trip\n- 对用户的影响：可能增加新用户试用和生产接入成本。\n- 建议检查：来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。\n- 防护动作：不得脱离来源链接放大为确定性结论；需要标注适用版本和复核状态。\n- 证据：community_evidence:github | cevd_e2e8dc4e56504c3c909c7cf990b5a336 | https://github.com/openvideodev/openvideo/issues/60 | 来源类型 github_issue 暴露的待验证使用条件。\n\n## 3. 配置坑 · 来源证据：[Bug] Transition effect \"display\" value update not reflected in Player after clip repositioning\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：GitHub 社区证据显示该项目存在一个配置相关的待验证问题：[Bug] Transition effect \"display\" value update not reflected in Player after clip repositioning\n- 对用户的影响：可能增加新用户试用和生产接入成本。\n- 建议检查：来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。\n- 防护动作：不得脱离来源链接放大为确定性结论；需要标注适用版本和复核状态。\n- 证据：community_evidence:github | cevd_f5e332be3e884e0eb6bb27bb45d7524a | https://github.com/openvideodev/openvideo/issues/52 | 来源类型 github_issue 暴露的待验证使用条件。\n\n## 4. 配置坑 · 来源证据：display property not initialized for Image clips\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：GitHub 社区证据显示该项目存在一个配置相关的待验证问题：display property not initialized for Image clips\n- 对用户的影响：可能阻塞安装或首次运行。\n- 建议检查：来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。\n- 防护动作：不得脱离来源链接放大为确定性结论；需要标注适用版本和复核状态。\n- 证据：community_evidence:github | cevd_45024018965c442dbaaf3bb5441b75f2 | https://github.com/openvideodev/openvideo/issues/18 | 来源类型 github_issue 暴露的待验证使用条件。\n\n## 5. 配置坑 · 来源证据：meta property is read-only\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：GitHub 社区证据显示该项目存在一个配置相关的待验证问题：meta property is read-only\n- 对用户的影响：可能增加新用户试用和生产接入成本。\n- 建议检查：来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。\n- 防护动作：不得脱离来源链接放大为确定性结论；需要标注适用版本和复核状态。\n- 证据：community_evidence:github | cevd_2798efa2236a4fe1a82930d7a1b1cc80 | https://github.com/openvideodev/openvideo/issues/19 | 来源类型 github_issue 暴露的待验证使用条件。\n\n## 6. 能力坑 · 能力判断依赖假设\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：README/documentation is current enough for a first validation pass.\n- 对用户的影响：假设不成立时，用户拿不到承诺的能力。\n- 建议检查：将假设转成下游验证清单。\n- 防护动作：假设必须转成验证项；没有验证结果前不能写成事实。\n- 证据：capability.assumptions | github_repo:1125747446 | https://github.com/openvideodev/openvideo | README/documentation is current enough for a first validation pass.\n\n## 7. 维护坑 · 维护活跃度未知\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：未记录 last_activity_observed。\n- 对用户的影响：新项目、停更项目和活跃项目会被混在一起，推荐信任度下降。\n- 建议检查：补 GitHub 最近 commit、release、issue/PR 响应信号。\n- 防护动作：维护活跃度未知时，推荐强度不能标为高信任。\n- 证据：evidence.maintainer_signals | github_repo:1125747446 | https://github.com/openvideodev/openvideo | last_activity_observed missing\n\n## 8. 安全/权限坑 · 下游验证发现风险项\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：no_demo\n- 对用户的影响：下游已经要求复核，不能在页面中弱化。\n- 建议检查：进入安全/权限治理复核队列。\n- 防护动作：下游风险存在时必须保持 review/recommendation 降级。\n- 证据：downstream_validation.risk_items | github_repo:1125747446 | https://github.com/openvideodev/openvideo | no_demo; severity=medium\n\n## 9. 安全/权限坑 · 存在评分风险\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：no_demo\n- 对用户的影响：风险会影响是否适合普通用户安装。\n- 建议检查：把风险写入边界卡，并确认是否需要人工复核。\n- 防护动作：评分风险必须进入边界卡，不能只作为内部分数。\n- 证据：risks.scoring_risks | github_repo:1125747446 | https://github.com/openvideodev/openvideo | no_demo; severity=medium\n\n## 10. 维护坑 · issue/PR 响应质量未知\n\n- 严重度：low\n- 证据强度：source_linked\n- 发现：issue_or_pr_quality=unknown。\n- 对用户的影响：用户无法判断遇到问题后是否有人维护。\n- 建议检查：抽样最近 issue/PR，判断是否长期无人处理。\n- 防护动作：issue/PR 响应未知时，必须提示维护风险。\n- 证据：evidence.maintainer_signals | github_repo:1125747446 | https://github.com/openvideodev/openvideo | issue_or_pr_quality=unknown\n\n## 11. 维护坑 · 发布节奏不明确\n\n- 严重度：low\n- 证据强度：source_linked\n- 发现：release_recency=unknown。\n- 对用户的影响：安装命令和文档可能落后于代码，用户踩坑概率升高。\n- 建议检查：确认最近 release/tag 和 README 安装命令是否一致。\n- 防护动作：发布节奏未知或过期时，安装说明必须标注可能漂移。\n- 证据：evidence.maintainer_signals | github_repo:1125747446 | https://github.com/openvideodev/openvideo | release_recency=unknown\n",
"summary": "用户实践前最可能遇到的身份、安装、配置、运行和安全坑。",
"title": "Pitfall Log / 踩坑日志"
},
"prompt_preview": {
"asset_id": "prompt_preview",
"filename": "PROMPT_PREVIEW.md",
"markdown": "# openvideo - Prompt Preview\n\n> Copy the prompt below into your AI host before installing anything.\n> Its purpose is to let you safely feel the project's workflow, not to claim the project has already run.\n\n## Copy this prompt\n\n```text\nYou are using an independent Doramagic capability pack for openvideodev/openvideo.\n\nProject:\n- Name: openvideo\n- Repository: https://github.com/openvideodev/openvideo\n- Summary: Open-source React Video Editor with client-side rendering (WebCodecs) and pixi.js. Capcut clone. Canva clone. React video editor. webgl video editor.\n- Host target: local_cli\n\nGoal:\nHelp me evaluate this project for the following task without installing it yet: Open-source React Video Editor with client-side rendering (WebCodecs) and pixi.js. Capcut clone. Canva clone. React video editor. webgl video editor.\n\nBefore taking action:\n1. Restate my task, success standard, and boundary.\n2. Identify whether the next step requires tools, browser access, network access, filesystem access, credentials, package installation, or host configuration.\n3. Use only the Doramagic Project Pack, the upstream repository, and the source-linked evidence listed below.\n4. If a real command, install step, API call, file write, or host integration is required, mark it as \"requires post-install verification\" and ask for approval first.\n5. If evidence is missing, say \"evidence is missing\" instead of filling the gap.\n\nPreviewable capabilities:\n- Capability 1: Open-source React Video Editor with client-side rendering (WebCodecs) and pixi.js. Capcut clone. Canva clone. React video editor. webgl video editor.\n\nCapabilities that require post-install verification:\n- Capability 1: Use the source-backed project context to guide one small, checkable workflow step.\n\nCore service flow:\n1. page-1: Overview. Produce one small intermediate artifact and wait for confirmation.\n2. page-2: Installation and Setup. Produce one small intermediate artifact and wait for confirmation.\n3. page-3: System Architecture. Produce one small intermediate artifact and wait for confirmation.\n4. page-4: Studio and State Management. Produce one small intermediate artifact and wait for confirmation.\n5. page-5: Clip System. Produce one small intermediate artifact and wait for confirmation.\n\nSource-backed evidence to keep in mind:\n- https://github.com/openvideodev/openvideo\n- https://github.com/openvideodev/openvideo#readme\n- README.md\n- packages/openvideo/package.json\n- examples/package.json\n- packages/openvideo/src/studio.ts\n- packages/openvideo/src/compositor.ts\n- packages/openvideo/src/clips/index.ts\n- packages/openvideo/src/index.ts\n- packages/openvideo/src/studio/timeline-model.ts\n\nFirst response rules:\n1. Start Step 1 only.\n2. Explain the one service action you will perform first.\n3. Ask exactly three questions about my target workflow, success standard, and sandbox boundary.\n4. Stop and wait for my answers.\n\nStep 1 follow-up protocol:\n- After I answer the first three questions, stay in Step 1.\n- Produce six parts only: clarified task, success standard, boundary conditions, two or three options, tradeoffs for each option, and one recommendation.\n- End by asking whether I confirm the recommendation.\n- Do not move to Step 2 until I explicitly confirm.\n\nConversation rules:\n- Advance one step at a time and wait for confirmation after each small artifact.\n- Write outputs as recommendations or planned checks, not as completed execution.\n- Do not claim tests passed, files changed, commands ran, APIs were called, or the project was installed.\n- If the user asks for execution, first provide the sandbox setup, expected output, rollback, and approval checkpoint.\n```\n",
"summary": "不安装项目也能感受能力节奏的安全试用 Prompt。",
"title": "Prompt Preview / 安装前试用 Prompt"
},
"quick_start": {
"asset_id": "quick_start",
"filename": "QUICK_START.md",
"markdown": "# Quick Start / 官方入口\n\n项目：openvideodev/openvideo\n\n## 官方安装入口\n\n### Node.js / npm · 官方安装入口\n\n```bash\nnpm install openvideo\n```\n\n来源：https://github.com/openvideodev/openvideo#readme\n\n## 来源\n\n- repo: https://github.com/openvideodev/openvideo\n- docs: https://github.com/openvideodev/openvideo#readme\n",
"summary": "从项目官方 README 或安装文档提取的开工入口。",
"title": "Quick Start / 官方入口"
}
},
"validation_id": "dval_afe2a45ad6dc4273ab1c040781a767e4"
}