Canvas UI؛ افکتهای خلاقانه روی صفحهٔ زنده
فرانتاند
جاوااسکریپتخلاصهٔ کاملتر
تو صفحهٔ پروژه اومده که Canvas UI یه کتابخونهٔ متنباز از کامپوننتهای خلاقانهست که همهشون روی canvas کشیده میشن: شبیهسازی سیال، افکتهای شیدری و صحنههای سهبعدی که روی رابط کاربری زنده و کاملاً تعاملی سایت اجرا میشن. نکتهٔ اصلی هم همینه — این افکتها یه لایهٔ تزئینی جدا از صفحه نیستن، خودِ صفحهن.
چیزی که پروژه رو متفاوت میکنه، تکیهاش روی API آزمایشی html-in-canvas هست. این API اجازه میده افکتهای WebGL، DOM زندهٔ شما رو بخونن و دوباره رندر کنن؛ یعنی کل صفحه تبدیل میشه به یه texture که آتیش و مایع و شیشه میتونن لحظهای پیچوتابش بدن، در حالی که متنها هنوز انتخابشدنی و لینکها هنوز کلیکشدنیان. هرجا این API پشتیبانی نشه، کامپوننتها با افت ملایم به یه overlay ساده روی WebGL برمیگردن تا صفحه برای همه کار کنه.
مدل توزیعش هم به سبک shadcn ـه: بهجای نصب پکیج، سورس کامپوننت از طریق یه registry سازگار با shadcn کپی میشه توی پروژه و از اون به بعد مال خودتونه که هرجور خواستین تغییرش بدین. هر کامپوننت خودبسندهست، تنظیمات پیشفرض معقول و prop های تایپشده داره، و برای ریاکت، سولید، ویو، سوِلت و جاوااسکریپت ساده بیلد جداگونه ارائه شده. حتی میشه سرور MCP مربوط به shadcn رو به این registry وصل کرد تا دستیار هوش مصنوعی خودش کامپوننتها رو نصب کنه.
در عوض باید حواستون به محدودیتها باشه: تجربهٔ کامل html-in-canvas فعلاً کروم یا اج ۱۴۰ به بالا با یه فلگ فعالشده میخواد و برای سایتهای واقعی هم توکن origin trial لازمه. لایسنس پروژه MIT بهعلاوهٔ Commons Clause ـه؛ یعنی استفاده تو پروژههای شخصی و تجاری آزاده و محدودیت فقط سر فروش خودِ کتابخونهست.
نکات کلیدی:
- ۲۵ کامپوننت canvas ای مثل Liquid، Blaze، Glass، Shatter و VHS
- تکیه بر API آزمایشی html-in-canvas برای افکت روی DOM زنده
- بیلد جداگانه برای ریاکت، سولید، ویو، سوِلت و وانیلا
- توزیع به سبک «کپی کن، نصب نکن» از طریق registry سازگار با shadcn
- نیازمند کروم/اج ۱۴۰+ با فلگ؛ در بقیهٔ مرورگرها fallback روی WebGL
