‏LiquidGlass؛ افکت شیشهٔ مایع برای وب

تو مستندات این پروژه اومده که LiquidGlass یه کتابخونهٔ جاوااسکریپتیه برای وب که افکت «شیشهٔ مایع» رو با شیدرهای WebGL روی المان‌های HTML اجرا می‌کنه: شکست نور (refraction)، بلور پس‌زمینه، پاشش رنگ در لبه‌ها (chromatic aberration)، بازتاب فرنل، هایلایت نوری چندمنبعه و سایه. فرقش با ترفندهای رایج backdrop-filter اینه که اینجا واقعاً تصویر پشت پنل نمونه‌برداری و خم می‌شه.

روش کارش اینه که فرزندهای غیرشیشه‌ای المان ریشه با html-to-image روی یه بوم مخفی رسترایز می‌شن؛ محتوای ثابت یه بار کش می‌شه و هر چیزی که data-dynamic داره (یا تگ ویدیوئه) هر فریم دوباره گرفته می‌شه. تصویر و canvas و ویدیو مستقیم کشیده می‌شن چون سریع‌تره. بعد برای هر پنل، صحنه در محل همون پنل بریده و شیدر روش اجرا می‌شه؛ خروجی هر شیشه قبل از شیشهٔ بعدی روی بوم برمی‌گرده، پس شیشهٔ رویی، شیشهٔ زیرش رو هم تو شکست نورش می‌بینه.

راه‌اندازیش یه فراخوانی async هست و پنل‌های شیشه‌ای باید فرزند مستقیم ریشه باشن. نمونهٔ برگشتی fps لحظه‌ای رو نشون می‌ده، destroy() همه‌چیز رو جمع می‌کنه و markChanged() راه دستیِ گفتنِ «این بخش عوض شد» به کتابخونه‌ست — مثلاً وقتی پیکسل‌های یه canvas یا src یه تصویر رو با جاوااسکریپت عوض کردی و کتابخونه خودش متوجه نمی‌شه:

const instance = await LiquidGlass.init({
  root: document.querySelector('#root'),
  glassElements: document.querySelectorAll('.glass'),
  defaults: { cornerRadius: 24, refraction: 0.8 },
});

تنظیمات هر پنل جداگونه و از راه یه رشتهٔ JSON تو data-config داده می‌شه و کتابخونه با MutationObserver تغییرش رو می‌بینه. بیش از بیست گزینه داره؛ از blurAmount و refraction و chromAberration تا cornerRadius، zRadius (عمق پخ لبه)، floating برای درگ کردن پنل و button برای حالت دکمه‌ای. با bevelMode: 1 و برابر گذاشتن cornerRadius و zRadius هم می‌شه یه ذره‌بین نیم‌کره‌ای ساخت.

محدودیت‌ها هم صریح گفته شده: شیشهٔ تودرتو پشتیبانی نمی‌شه، خود المان ریشه هیچ‌وقت گرفته نمی‌شه (پس پس‌زمینه باید یه المان داخلش باشه)، رسترایز کردن DOM گرونه و data-dynamic باید کم استفاده بشه، هر نمونه یه کانتکست WebGL جدا باز می‌کنه و مرورگرها تعدادش رو محدود کردن، و فونت‌های وب باید قبل از init و با هدرهای CORS لود شده باشن. در عوض حلقهٔ رندر وقتی چیزی کثیف نشده تقریباً هیچ کاری نمی‌کنه.

نکات کلیدی:

• افکت شیشهٔ مایع با شیدرهای WebGL، نه فقط فیلتر CSS
• محتوای صفحه با html-to-image به بافت تبدیل و به شیدر داده می‌شه
• بیش از ۲۰ تنظیم برای هر پنل از راه data-config
• پنل‌های شیشه‌ای باید فرزند مستقیم المان ریشه باشن
• نیازمند WebGL 1.0 و پشتیبانی از همهٔ مرورگرهای امروزی، با لایسنس MIT