‏گرادیان متحرک با WebGL در وب‌فلو

اگه دنبال یه پس‌زمینه‌ی متحرک و چشم‌نواز برای سایت وب‌فلوت هستی بدون اینکه به پلاگین یا سرویس خارجی وابسته باشی، این مقاله دقیقاً به دردت می‌خوره. نویسنده یه کامپوننت کامل با JavaScript خالص ساخته که از WebGL برای رندر گرادیان‌های سیال و متحرک روی یه Canvas استفاده می‌کنه.

ایده‌ی اصلی اینه که سه دایره‌ی نرم با رنگ‌های مختلف روی یه بک‌گراند رندر می‌شن و با حرکت ping-pong (رفت و برگشت نرم) جابه‌جا می‌شن. ترکیب این دایره‌ها یه افکت "ذوب‌شدنِ رنگ‌ها" ایجاد می‌کنه که خیلی طبیعی به نظر می‌رسه. علاوه بر این یه لایه‌ی grain (دانه‌دانه‌گی) هم اضافه شده تا حس فیلم آنالوگ بده.

قلب این سیستم دو shader هستن: یه vertex shader ساده که موقعیت‌ها رو پاس می‌ده، و یه fragment shader که منطق اصلی رنگ‌آمیزی و ترکیب گرادیان‌ها رو انجام می‌ده. تابع circleGradient در fragment shader برای هر پیکسل حساب می‌کنه که چقدر باید رنگ یه شکل رو بگیره:

float circleGradient(vec2 pos, vec2 center, float radius, float softness) {
  float dist = distance(pos, center);
  float solidRadius = radius * (1.0 - softness * 0.9);
  float edgeStart = max(solidRadius, radius * 0.1);
  if (dist <= edgeStart) {
    return 1.0;
  } else {
    return 1.0 - smoothstep(edgeStart, radius, dist);
  }
}

کلاس اصلی WebflowGradientShader یه Canvas می‌سازه و اون رو داخل المان موردنظر قرار می‌ده. بعد تمام تنظیمات رو از data attribute های اون المان می‌خونه. این یعنی طراح می‌تونه بدون دست زدن به کد، رنگ و سایز و سرعت رو تغییر بده:

class WebflowGradientShader {
  constructor(containerElement) {
    this.canvas = document.createElement("canvas");
    containerElement.innerHTML = "";
    containerElement.appendChild(this.canvas);
    this.copyDataAttributes(containerElement, this.canvas);
    this.gl = this.canvas.getContext("webgl");
    this.init();
    this.resize();
    this.animate();
  }
}

برای سفارشی‌سازی، کافیه روی المان div در وب‌فلو data attribute بذاری. مثلاً data-speed برای سرعت انیمیشن، data-bg-color برای رنگ پس‌زمینه به فرمت hex، و data-shape-one-color تا data-shape-three-color برای رنگ هر شکل. همینطور می‌شه سایز و نرمی (softness) هر شکل رو هم جداگانه کنترل کرد.

یه نکته‌ی مهم اینه که کامپوننت به resize صفحه هم واکنش نشون می‌ده و canvas رو با تناسب صحیح مجدداً رندر می‌کنه. این یعنی در موبایل و دسکتاپ هر دو درست کار می‌کنه.

این رویکرد نسبت به انیمیشن‌های CSS یا SVG چند مزیت داره: رندر روی GPU انجام می‌شه پس CPU رو آزاد می‌ذاره، کنترل دقیق‌تری روی جزئیات بصری داری، و چون همه چیز در یه JS Embed وب‌فلو قرار می‌گیره، نیاز به ابزار خارجی یا پلاگین پولی نیست.

در مجموع این کامپوننت یه راه‌حل هوشمندانه برای اضافه کردن عمق بصری به لندینگ پیج‌های وب‌فلوئه، بدون اینکه کارایی سایت رو پایین بیاری.

نکات کلیدی:

• از WebGL و shader برای رندر گرادیان متحرک روی Canvas استفاده می‌کنه
• سه شکل دایره‌ای قابل تنظیم با رنگ، سایز و نرمی مستقل
• انیمیشن ping-pong نرم برای حرکت طبیعی شکل‌ها
• افکت grain برای ظاهر آنالوگ و سینماتیک
• سفارشی‌سازی کامل از طریق data attribute بدون تغییر کد
• فقط یه JS Embed در وب‌فلو کافیه، بدون نیاز به پلاگین