‏Canvas UI: کتابخونه‌ی متن‌باز کامپوننت‌های زنده روی canvas و WebGL

Canvas UI یه کتابخونه‌ی متن‌باز و رایگان معرفی شده که به‌جای المان‌های ساده‌ی HTML، کامپوننت‌های بصری رو مستقیم روی canvas می‌کشه یا با WebGL رندر می‌کنه. فعلاً ۲۵ کامپوننت داره -مثل Blaze، Liquid، Glass، Shatter، Particle Reveal و VHS- و قراره تعدادشون بیشتر هم بشه. هدف اینه که افکت‌های بصری شیک و پیچیده رو بدون درگیر شدن با جزئیات پایین‌سطح canvas یا WebGL، آماده و قابل کپی در اختیار توسعه‌دهنده‌ها بذاره.

این کتابخونه framework-agnostic طراحی شده و هر کامپوننت به‌صورت جداگانه برای React، Solid، Preact، Vue، Svelte و حتی TypeScript خالص (بدون هیچ فریم‌ورکی) وجود داره، با همون engine و همون props. نصب هم دقیقاً مثل مدل shadcn/ui کار می‌کنه: کد کامپوننت مستقیم داخل ریپوی خودت کپی می‌شه، نه این‌که به‌عنوان یه پکیج خارجی نصب بشه؛ یعنی هر وقت خواستی می‌تونی خودت کدشو تغییر بدی.

import { ParticleReveal } from "@/components/canvasui/ParticleReveal";

export function Hero() {
  return (
    <ParticleReveal radius={300}>
      <YourContent />
    </ParticleReveal>
  );
}

از نظر فنی، رندر HTML مستقیم روی canvas به یه قابلیت آزمایشی مرورگر نیاز داره که فعلاً فقط پشت یه فلگ تو Chrome در دسترسه؛ جای دیگه محتوا به‌صورت HTML عادی نمایش داده می‌شه و افکت‌هایی مثل Blaze، Liquid و Glass به‌عنوان یه لایه‌ی WebGL روش اجرا می‌شن. کامپوننت‌های مبتنی بر WebGL خودشون تو همه‌ی مرورگرهای مدرن کار می‌کنن. هر کامپوننت فقط وقتی mount می‌شه فعال می‌شه، وقتی از صفحه بیرونه متوقف می‌شه و موقع unmount کامل پاک‌سازی می‌شه؛ تنظیمات reduced-motion کاربر هم رعایت می‌شه.

یه بخش دیگه‌ی پروژه اینه که رجیستری کامپوننت‌ها با پروتکل shadcn سازگاره، پس هر ابزار هوش مصنوعی که سرور MCP مربوط به shadcn رو داشته باشه می‌تونه کتابخونه رو مرور کنه، مستنداتشو بخونه و کامپوننت موردنظر رو فقط با یه پرامپت نصب کنه. لایسنسش MIT همراه با بند Commons Clause ـه: استفاده تو هر پروژه‌ی شخصی یا تجاری کاملاً آزاد و رایگانه، تنها محدودیت اینه که نمی‌شه خود کامپوننت‌ها رو -تنها، داخل یه باندل، یا به‌شکل پورت‌شده- دوباره فروخت یا توزیع کرد.

نکات کلیدی:

• کتابخونه‌ی متن‌باز Canvas UI با ۲۵ کامپوننت بصری روی canvas و WebGL
• framework-agnostic: پشتیبانی از React، Vue، Solid، Svelte، Preact و TypeScript خالص
• نصب به روش کپی-پیست شبیه shadcn/ui، نه پکیج خارجی
• رندر HTML روی canvas فعلاً آزمایشیه و پشت فلگ Chrome، ولی افکت‌های WebGL همه‌جا کار می‌کنن
• سازگار با پروتکل MCP برای نصب کامپوننت از طریق ابزارهای هوش مصنوعی
• لایسنس MIT + Commons Clause: رایگان برای استفاده، ممنوع برای فروش مجدد کامپوننت‌ها