raea：用 AI 写 React/TypeScript，渲染视频、动效、3D 与游戏

应用形态与安装

raea 提供桌面应用，用来配合 AI 制作视频与游戏，可从官网下载 Mac / Windows / Linux 版本。应用会在有新版本时提示，macOS 上支持自动更新。

命令行安装方式（macOS / Linux）：

curl -fsSL https://raea.io/install | sh

安装器会把 raea 命令装到 ~/.raea，软链接进 ~/.local/bin，并把 raea 的 agent skills 写入 ~/.claude/skills，这样 Claude Code 或任何读取该目录的代理就知道如何编写、渲染和检查 raea 作品。重复执行即更新。引擎免费、无需账号，压缩包与校验和发布在 Releases 页面。

Windows 10/11 在 PowerShell 中：

irm https://raea.io/install.ps1 | iex

它做同样的事（目录为 ~\.raea，并加入 PATH），额外要求 Microsoft Visual C++ Redistributable（x64）以及 DirectX 12 或 Vulkan 的显卡驱动。

第一个合成：Hello

在 raea 里，一个合成（composition）就是一个 React 组件，它负责为「某一时刻」绘制一帧：

import { AbsoluteFill, Composition, interpolate, registerRoot, useCurrentFrame } from "raea";

function Hello() {
  const f = useCurrentFrame();
  return <AbsoluteFill style={{ background: "#000", color: "#fff", fontSize: 120, opacity: interpolate(f, [0, 20], [0, 1]) }}>Hello</AbsoluteFill>;
}

registerRoot(() => <Composition id="hello" component={Hello} width={1920} height={1080} fps={30} durationInFrames={90} />);

raea render hello.tsx -o hello.mp4

同一个文件可以多种用法：raea play 当作可实时游玩的游戏运行；-o frame.png --frame 45 只渲染某一帧给代理「看一眼」；raea check hello.mp4 按质量基线做检查。raea init 初始化项目，raea --help 列出全部子命令。README 提到在 Apple Silicon Mac 上这 90 帧大约一秒渲完（属项目自述，实际性能需自行核验）。

核心能力

• 视频与动效图形：布局、文字、Tailwind、SVG 与动画，在 GPU 上合成，机器支持时走硬件编码；raea cut 按台词内容切素材，raea check 在成片被观看前抓出文字截断、对比度不足、安全区越界、画面冻结与响度问题。
• 游戏：输入、物理、声音与 3D，用 raea play 实时游玩，也能用 raea export-game 导出为独立程序。
• 3D：TypeScript 描述场景，由 Bevy 0.20 绘制，涵盖相机、灯光、材质、glTF 模型、Gaussian splats，以及编译进引擎的 Bevy 插件。
• 声音：实时播放与离线渲染共用一套混音器，含乐器与效果器，并有用于拟音与音符的本地模型（raea sao、raea tokensynth）。
• 为代理而设计：绘制出来的内容始终可作为数据查询，代理能渲染一帧、查看、修错，无需人工介入。

与 AI 代理协作

• Agent Skills：位于 raea-skills 仓库，并在本仓库以 skills/ 固定；其中 raea 技能教代理编写、渲染与检查合成（含 3D 与游戏）。安装器会放进 ~/.claude/skills，其他代理可用 raea skills install --agent NAME。
• Claude 插件：包含 raea 技能与两个 hook（合成保存后的快速检查、在 raea 应用中展示媒体）。在 Claude Code 中：/plugin install raea --marketplace shinyobjectz/raea-skills。
• 工艺指南：raea guide 打印每次剪辑要遵守的质量基线与 pitch、讲解、故事、游戏、动效、音乐、布局等指南；raea context PROJECT 告诉你动手前该先读什么。

仓库结构

工作区是分层的，从纯积木到命令：

• core/：纯基础构件——内核语言（K，CPU 解释并编译到 WGSL）、缓动与动画、形状、字体、场景与线格式。
• gpu/：唯一的共享 GPU 设备及其遥测。
• io/：解码与编码（VideoToolbox、软件编解码、AV1、封装器）、文件、网络、npm 包、trace。
• systems/：布局、画布、合成、滤镜、混音、语音、ONNX Runtime 上的 ML、素材读取、光照、3D 部件接触检查、splat。
• runtime/：运行合成——JavaScript 引擎缝（macOS 用 JavaScriptCore，其他平台 QuickJS）、Bevy 上的 React 与 HTML、bake、编码、实时播放。
• engine/：渲染器、进程内 TypeScript 打包器、Bevy 插件目录与 raea 命令本身。
• apps/：CLI 各动词背后的 crate（check、play、games、media）。
• sdk/：TypeScript SDK 及其 3D、物理、音频、视频与 UI 包、工艺指南与 agent 技能。
• vendor/ 为打过补丁的上游 crate，tools/ 为构建与发布辅助工具。

行为规格以 Gherkin（.feature）形式写在对应代码旁。

许可证与学习建议

raea 采用 Functional Source License 1.1（ALv2 Future License），版权归 Shane Murphy：可以自由使用、修改、在其上构建与再分发，唯独不能用于与 raea 竞争的产品；每个版本在发布两年后转为 Apache-2.0。第三方组件保留各自许可证。

想上手的读者，建议先读官网 Docs 与 raea guide，从 raea init 建一个最小合成跑通渲染链路，再尝试 3D 与游戏方向；若要从源码构建，注意 Rust/bun/CMake 与 Linux 系统库的门槛，以及默认特性与公开引擎的差异。