التأثير مش بيستبدل صفحتك. بيقراها.

أغلب مكتبات WebGL على الويب بتحطك قدام مقايضة واحدة: تقدر تاخد محاكاة السوائل، والنار، والزجاج اللي بيتكسّر — بس الحاجة اللي بتتشوّه دي مشهد المكتبة هي اللي مالكاه. الأزرار بتاعتك، والنص بتاعك، واللينكات بتاعتك في مكان تاني، فوقه أو تحته، ما بيتلمسوش.

مكتبة Canvas UI، وهي مفتوحة المصدر ومن تطوير DavidHDev، بترفض المقايضة دي. التأثير مش بيستبدل واجهتك. بيقراها.

المعلومة الوحيدة اللي تستاهل

معظم المكتبة مبنية على html-in-canvas، وهي خاصية تجريبية في المتصفح بتخلّي الـ canvas يرسم عناصر DOM وهي شغّالة. Canvas UI بتستخدمها عشان تسلّم صفحتك للشيدر كأنها خامة. والـ README بتاع المشروع بيقول النتيجة بوضوح: النص فاضل ممكن تحدّده، واللينكات فاضلة بتتفتح، والصفحة كلها بتبقى خامة النار والسوائل والزجاج بيشوّهوها في نفس اللحظة.

ودي الفرق بين الزخرفة والتقنية. أنيميشن بيقعد ورا المحتوى ده خلفية. لكن محاكاة سوائل معمولة من المحتوى نفسه، وبتموّج نفس العنوان اللي الزائر على وشك يحدّده وينسخه — دي حاجة تانية خالص.

ولو عايز اختبار من سطر واحد على جدية المشروع في النقطة دي، اقرا قايمة المكوّنات بتاعته. خمسة وعشرين مكوّن نازلين دلوقتي، وتلاتة وعشرين من الخمسة وعشرين بيختموا وصفهم بنفس الجملة: فوق صفحتك وهي شغّالة. Blaze هو "شرر نار ودخان وتشويه حرارة بيطلعوا فوق صفحتك وهي شغّالة". Frost هو "طبقة تلج فوق صفحتك وهي شغّالة بتسيح تحت الماوس وبتتجمد تاني". والاتنين اللي ما بيقولوش الجملة — Dithered Object و Particle Object — هما بالظبط الاتنين اللي بيرسموا مجسّم ثلاثي الأبعاد بدل الصفحة. المفردات ثابتة لأن الآلية ثابتة.

اللي بتاخده فعليًا

خمسة وعشرين مكوّن: Asciify و Bend و Blaze و Bubble و Cloth و Clouds و Dithered Object و Droplets و Frost و Glass و Glass Object و Glitch و Grid و Hex Float و Laser و Liquid و Magnify و Particle Object و Particle Reveal و Particle Scroll و Peel و Retro Dither و Ripple و Shatter و VHS.

وكل واحد فيهم نازل بستة نسخ — React و Solid و Preact و Vue و Svelte، وكمان TypeScript خام من غير أي اعتماديات — يعني اختيارك للفريمورك مش هو اللي بيحدّد التأثيرات المسموح لك تستخدمها. مفيش باكدج تتركّب ولا runtime تتبنّاه: المكوّنات بتوصلك كـ source عن طريق registry متوافق مع shadcn، بتنزل في مجلد مشروعك، وبقت ملكك تعدّل فيها.

npx shadcn@latest add @canvas-ui/liquid-react

غيّر liquid لأي مكوّن و react لأي واحدة من الخمسة التانيين. وفيه كمان نقطة MCP، يعني مساعد ذكاء اصطناعي متوجّه على الـ registry يقدر يتصفّح الكتالوج ويركّب المكوّنات بنفسه.

الكاتش، بصراحة

التجربة الكاملة لـ html-in-canvas لسه محتاجة كروم أو إيدج 140 وفوق، مع تفعيل chrome://flags/#canvas-draw-element. وللمواقع الحقيقية فيه توكن origin trial، بس ده لسه تجربة، مش ضمان.

في أي مكان تاني، المكوّنات بترجع تشتغل كطبقة WebGL عادية فوق الصفحة. والـ fallback ده هو الجزء الأمين في التصميم: كل زائر بيلاقي صفحة شغّالة، واللي على متصفح مدعوم بيشوف النسخة اللي الصفحة نفسها فيها هي الخامة. وأي حد هينزّل ده لجمهور حقيقي لازم يقرّر، بوعي، أي تجربة من الاتنين هي اللي بيصمّم لها فعلًا.

ليه بنشاور عليها

إحنا بنبني واجهات، وأغلب أدوات "الويب الإبداعي" اللي بنشوفها بتبيع سهولة الاستخدام مقابل الاستعراض. دي مثيرة للاهتمام لأنها ما بتعملش كده: الـ DOM فاضل بيعمل شغله والتأثير شغال فوقه. الرخصة MIT + Commons Clause — مجانية في مشاريعك، تجارية أو لأ، والممنوع الوحيد هو إعادة بيع المكتبة نفسها.

ووقت كتابة الكلام ده، عمر الريبو حداشر يوم وعنده 2,112 نجمة. ده رقم يتلاحظ وبس؛ سبب إنك تبص هو الآلية، مش العدّاد.

الريبو: DavidHDev/canvas-ui · الموقع: canvasui.dev