amazing-glass: شیشهٔ واقعی روی وب، نه فقط blur
فرانتاندخلاصهٔ کامل‌تر
سازنده‌های amazing-glass می‌گن بیشتر چیزی که روی وب اسمشو «شیشه» می‌ذاریم، فقط یه مستطیل با blur هست. شیشهٔ واقعی ضخامت داره. نور به لبهٔ خمیده می‌خوره، خم میشه و تصویر پشت رو هم با خودش می‌کشه. این کتابخونه دقیقاً همین خم شدن لبه رو شبیه‌سازی می‌کنه.
روشش اینطوریه: برای هر پیکسل، شیب لبه حساب میشه و مسیر دید با قانون Snell (یعنی قانون فیزیکی شکست نور وقتی از یه ماده به ماده دیگه می‌ره) خم میشه. بعد اینکه هر پیکسل چقدر جابه‌جا شده، تو یه نقشه ذخیره میشه. Chromium این نقشه رو به‌عنوان یه filter روی هر چیزی که پشت المنته اجرا می‌کنه. سه بار هم با قدرت کمی متفاوت، یکی برای هر رنگ، اجرا میشه که اون رنگین‌کمون باریک لبه درمیاد. پارامترهایی مثل ضخامت، عرض لبه، رنگین‌کمون و مات بودن (frost) تو کد هم قابل تنظیمه.
برای سنجیدن کارشون، یه اپ کوچیک SwiftUI ساختن که .glassEffect اپل رو روی همون تصویرها و با همون اندازه‌ها می‌کشه. از هر دو اسکرین‌شات گرفتن، پیکسل‌به‌پیکسل مقایسه کردن و یه جستجوی خودکار پارامترها رو اون‌قدر تغییر داده که اختلاف دیگه کمتر نشه. میانگین خطای هر کانال رنگ (تو بازهٔ ۰ تا ۲۵۵، روی macOS 27) برای حالت Regular از ۷.۱۳ به ۲.۰۲ و برای Clear از ۱۹.۴۸ به ۱.۶۴ رسیده. به گفتهٔ خودشون بزرگ‌ترین غافلگیری این بود که شیشهٔ Clear اپل در واقع حدود ۱۶ پیکسل blur داره، در حالی که اونا اولش ۱.۶ گذاشته بودن.
کتابخونه فقط افکت نیست و کامپوننت آماده هم داره. دکمه‌ها موقع استراحت توپرن و وقتی نگهشون می‌داری لنز می‌شن، منوها از دل دکمه‌شون باز می‌شن و تب‌بار موقع اسکرول کوچیک میشه. یه sheet هم داره که با فاصله از لبه‌ها بالا میاد و وقتی بکشیش بالا، چسبیده و مات‌تر میشه. گوشه‌ها هم هم‌مرکز ساخته شدن، یعنی sheetی که ۸ پیکسل داخل گوشهٔ ۵۵ پیکسلی دستگاهه، گوشهٔ ۴۷ پیکسلی می‌گیره. اگه دو شکل شیشه‌ای رو به هم نزدیک کنی، تو هم ذوب می‌شن و یه سطح با یه لبه می‌سازن.
استفاده‌ش ساده‌ست: یه فایل CSS و یه اسکریپت. المنت‌ها با هر فریم‌ورکی کار می‌کنن و برای React و Vue هم wrapperهای تایپ‌دار با props، eventها و v-model آماده‌ست. فقط دقت کن که خود افکت روی filterهای Chromium سوار هست.
نکات کلیدی:
- شکست نور لبه با قانون Snell برای هر پیکسل حساب میشه
- رنگین‌کمون لبه از سه بار اجرای filter با قدرت متفاوت برای هر رنگ میاد
- خطای حالت Clear در مقایسه با اپل از ۱۹.۴۸ به ۱.۶۴ رسیده
- شیشهٔ Clear اپل حدود ۱۶ پیکسل blur داره
- نصبش یه فایل CSS و یه اسکریپته، با wrapper تایپ‌دار برای React و Vue
