‏Framefields: ساخت ویدیو با TypeScript و بدون مرورگر

Framefields یه پکیج npm‌ه که سازنده‌هاش می‌گن کاری که معمولاً بین سه برنامهٔ دسکتاپ پخش می‌شه رو یه‌جا جمع کرده: کامپوزیت و افکت به سبک فتوشاپ، موشن و تایپوگرافی به سبک افترافکت، و صحنهٔ سه‌بعدی به سبک بلندر. ایده اینه که یه ایجنت کدنویسی یه کامپوزیشن TypeScript بنویسه، فریم‌ها رو چک کنه و یه MP4 رندر بگیره، بدون اینکه کسی یه نرم‌افزار چندگیگی نصب کنه. پروژه فعلاً بتاست و APIها ممکنه عوض بشن.

فرق اصلیش با ابزارهایی مثل Remotion اینه که هیچ headless browserی وسط نیست. Remotion یه Chrome بی‌رابط بالا میاره و از هر فریم screenshot می‌گیره. Framefields ولی با WebGPU (یعنی API جدید وب برای کار مستقیم با کارت گرافیک) از طریق Dawn، Metal یا Vulkan تو Node.js رندر می‌کنه و ویدیو رو با @napi-rs/webcodecs سخت‌افزاری انکود می‌کنه.

طبق جدول مقایسهٔ خود پروژه، سرعتش ۶۰ تا ۱۲۰ فریم بر ثانیه‌ست در برابر ۵ تا ۲۰ تا برای Remotion، و هر worker حدود ۲۰۰ تا ۴۰۰ مگ رم می‌خواد به جای ۱.۵ تا ۴ گیگ. یعنی برای رندر روی سرورهای ابری خیلی ارزون‌تر درمیاد.

امکاناتش هم زیاده. متن با الگوریتم Slug رندر می‌شه، یعنی شکل حروف برای هر پیکسل مستقیم روی GPU حساب می‌شه، برای همین از ۱۰ پیکسل تا ۱۰ هزار پیکسل تیز می‌مونه. بیشتر از ۵۰ شیدر افکت مثل Curves، Levels، LUT و Film Grain داره، یه scene graph سه‌بعدی با دوربین و سایه و motion blur، صدا و افکت صوتی پروسیجرال، و یه بخش vision که با مدل‌های ONNX (همه با لایسنس Apache-2.0) آدم و اشیا رو تشخیص می‌ده، دنبال می‌کنه و ماسک می‌کنه.

برای نمودار هم Layer.chart هست که نمودار میله‌ای، خطی، دایره‌ای و بقیه رو با d3 می‌سازه و انیمیشن ظاهر شدن هم داره. این یه تیکهٔ کوتاه از مثال خود پروژه‌ست:

Layer.chart(
  {
    type: "bar",
    categories: ["Q1", "Q2", "Q3", "Q4"],
    series: [{ name: "Revenue", data: [12, 19, 24, 31] }],
    animate: { start: 10, duration: 30 },
  },
);

یه پیش‌نمایش زنده تو مرورگر هم داره (startPreview) که خود کامپوزیشن رو فریم‌به‌فریم رندر می‌کنه، نه یه ویدیوی ضبط‌شده. می‌تونی روی تصویر کلیک کنی و یادداشت بذاری تا ایجنت دقیقاً بفهمه کجا رو باید عوض کنه. برای ایجنت‌هایی مثل Claude Code، Codex و Cursor هم skill آماده داره.

نکات کلیدی:

• بدون headless browser، مستقیم با WebGPU از طریق Dawn، Metal یا Vulkan رندر می‌کنه.
• طبق ادعای پروژه، ۶۰ تا ۱۲۰ فریم بر ثانیه و حدود ۲۰۰ تا ۴۰۰ مگ رم برای هر worker.
• بیشتر از ۵۰ شیدر افکت و پشتیبانی از مدل‌های OBJ، FBX، glTF و چند فرمت دیگه.
• بخش vision با مدل‌های ONNX با لایسنس Apache-2.0 کار تشخیص، ماسک و pose رو انجام می‌ده.
• پروژه هنوز بتاست و APIها ممکنه بین نسخه‌ها عوض بشن.