‏Takumi: JSX رو بدون مرورگر به عکس تبدیل کن

Takumi یه رندررـه که JSX رو مستقیم تبدیل به عکس می‌کنه و مرورگر رو کامل از مسیر حذف می‌کنه. به گفتهٔ سازنده، کل زنجیره — پارس‌کردن CSS، چیدمان درخت، شکل‌دهی متن (text shaping) و انکد پیکسل‌ها — تو یه باینری Rust انجام می‌شه. مقایسه‌ای که خودشون می‌کنن گویاست: Chromium هدلس برای ساختن یه OG card حدود ۳۰۰ مگابایت رم و یه کولداستارت خرج می‌کنه، ولی Takumi فقط یه فراخوانی تابع.

نقطهٔ فروش دومش سازگاریه: ImageResponse ـش drop-in با next/og جور درمیاد، پس اگه از قبل با next/og کارت راه افتاده، مهاجرت سنگینی در کار نیست. استایل‌دهی هم با همون tw (کلاس‌های Tailwind) و style انجام می‌شه:

export default function DemoCard() {
  return (
    <div tw="flex h-full w-full flex-col justify-between bg-[#16130f] p-14 text-white">
      <span tw="text-2xl text-[#a8a29a]">takumi.kane.tw</span>
      <h1 tw="text-7xl font-bold leading-tight">This card is the code beside it.</h1>
    </div>
  );
}

یه ایدهٔ جالبش اینه که رندرر timestamp می‌گیره: یه PNG درواقع همون درختِ تو در لحظهٔ t = 0 ـه، و یه WebP انیمیشنی همون درخته که در طول زمان نمونه‌برداری شده. یعنی @keyframes های CSS و یوتیلیتی‌های animate-* تیلویند موقع رندر resolve می‌شن و مستقیم به انیمیشن تبدیل می‌شن:

@keyframes morph {
  from { border-radius: 12%; transform: rotate(0deg) scale(1); }
  50%  { border-radius: 50%; transform: rotate(90deg) scale(0.72); }
  to   { border-radius: 12%; transform: rotate(180deg) scale(1); }
}

پشتیبانی CSS ـش هم عمداً از اون «زیرمجموعهٔ محدود OG image» که آدم عادت کرده فراتر می‌ره — شعارشون اینه که اگه ابزار قبلی مجبورت کرده یه پراپرتی رو حذف کنی، برش گردون. تو چیدمان display: grid، float، position: absolute، calc() و z-index رو داری؛ تو سلکتورها :is()، :where()، ::before و ::after؛ تو رنگ‌آمیزی backdrop-filter، mix-blend-mode، conic-gradient()، clip-path، mask و background-clip: text؛ و تو متن هم فونت WOFF2، ایموجی، خط‌های راست‌به‌چپ (RTL) و چند اسپن درون‌خطی.

از نظر اجرا، هم به‌شکل یه binding نیتیو Node.js کار می‌کنه، هم یه بیلد WASM برای Cloudflare Workers و مرورگر داره، و هم به‌عنوان یه crate زبان Rust در دسترسه. باینری‌های از پیش ساخته‌شده برای macOS، لینوکس و ویندوز روی معماری‌های x64 و ARM64 موجودن.

تو محیط تولید هم استفاده می‌شه: Dcard تصاویر اشتراک‌گذاری پست‌هاش رو باهاش می‌سازه، Fumadocs تصاویر OG مستنداتش رو تولید می‌کنه و Nuxt OG Image هم اون رو به‌عنوان یه رندرر داخلی عرضه می‌کنه. نصبش با bun i takumi-js ـه و زیر کاپوت از پروژه‌های شناخته‌شده‌ای استفاده می‌کنه: چیدمان با taffy، متن با parley و skrifa، و SVG با resvg. لایسنسش هم MIT / Apache-2.0 ـه.

نکات کلیدی:

• Takumi با یه باینری Rust، JSX رو بدون مرورگر به عکس تبدیل می‌کنه — به‌جای ۳۰۰ مگابایت رم و کولداستارت Chromium، یه فراخوانی تابع
• ImageResponse ـش drop-in با next/og سازگاره و استایل با tw (Tailwind) نوشته می‌شه
• رندرر timestamp می‌گیره: PNG یعنی لحظهٔ صفر، WebP انیمیشنی یعنی همون درخت در طول زمان؛ @keyframes و animate-* موقع رندر resolve می‌شن
• پشتیبانی CSS فراتر از زیرمجموعهٔ معمول OG: grid، clip-path، mask، background-clip: text، فونت WOFF2، ایموجی و RTL
• در دسترس به‌شکل binding نیتیو Node.js، بیلد WASM (برای Cloudflare Workers) و crate راست؛ استفاده در Dcard، Fumadocs و Nuxt OG Image