‏edge-aura: نور نئونی دور لبه‌های صفحه، شبیه Siri

edge-aura یه کتابخونهٔ npm هست که یه نور ارگانیک دور لبه‌های صفحه می‌کشه. به گفتهٔ سازنده‌ش، ایده از نورهای لبه‌ای دستیارهای صوتی مثل Siri اومده: یه خط اصلی روشن که موج‌موجی حرکت می‌کنه، به‌علاوهٔ یه هالهٔ نرم که سمت داخل صفحه کم‌کم محو می‌شه. رنگ‌ها پشت سر هم دور حلقه می‌چرخن. این پکیج از ادیتور یه محصول واقعی بیرون کشیده شده، یعنی قبلاً تو production امتحانشو پس داده.

هستهٔ کتابخونه با TypeScript و Canvas 2D نوشته شده و هیچ وابستگی‌ای نداره. یه آداپتور React هم جدا از مسیر edge-aura/react میاد که React فقط برای اون لازمه. پکیج فقط ESM هست و نسخهٔ CJS نداره، پس Node 18 به بالا یا یه bundler مدرن می‌خواد. تو React کافیه کامپوننت رو بذاری، بدون هیچ prop یا CSS اضافه:

import { EdgeAura } from "edge-aura/react";

<EdgeAura />

ورودی‌ها روی نور اثر می‌ذارن: هر کلیک (tap) یه نقطهٔ داغ روی نزدیک‌ترین لبه درست می‌کنه، هر کلید یه ستون نور روی لبهٔ پایین می‌سازه، و با هر ذخیره‌شدن یه پالس ملایم پخش می‌شه. این واکنش‌ها با فیزیک فنر (spring physics، یعنی بزرگ‌شدن و برگشتن نرم مثل یه فنر) انجام می‌شه. برای اینکه ورودی‌های پرتکرار باعث رندر دوبارهٔ React نشن، آداپتور به CustomEventهای روی window مثل aura:tap و aura:key گوش می‌ده.

هفت پالت رنگی آماده هست، مثل opal (پیش‌فرض)، aurora، ocean و ember، و چهار پریست ظاهری هم داره: subtle، vivid، calm و thin. عوض‌کردن پالت تو React با یه crossfade سیصد و پنجاه میلی‌ثانیه‌ای انجام می‌شه. یه قابلیت به اسم normalization هم داره، یعنی شدت نور پالت‌های تیره و روشن رو خودش یکسان می‌کنه که روی صفحهٔ سفید یکی زیادی سنگین و یکی کم‌رنگ دیده نشه. برای پس‌زمینهٔ تیره هم گزینهٔ background: "dark" هست.

سازنده روی کارایی خیلی حساس بوده. وقتی چند ثانیه ورودی‌ای نیاد، نرخ فریم خودبه‌خود تا حدود ۲۰ فریم پایین میاد تا باتری کمتر مصرف بشه. با prefers-reduced-motion هم انیمیشن کلاً خاموش می‌شه و فقط یه فریم ثابت نشون می‌ده. موقع رندر هم تو هر فریم هیچ حافظهٔ جدیدی گرفته نمی‌شه و هزینه‌ش به‌جای مساحت صفحه، به محیط اون بستگی داره.

نکات کلیدی:

• هسته بدون وابستگی، با TypeScript و Canvas 2D، آداپتور React جدا
• فقط ESM، نیازمند Node 18 به بالا
• ۷ پالت رنگی و ۴ پریست ظاهری (subtle، vivid، calm، thin)
• کاهش خودکار نرخ فریم به ۲۰ در حالت بیکاری و پشتیبانی از prefers-reduced-motion
• گزینهٔ seed برای رندر قابل تکرار در تست‌های پیکسلی
• لایسنس MIT