ساختن میدان: یک نوار نور پشت کل سایت

پس‌زمینه‌ای که این متن روی آن است ویدیو یا عکس نیست. یک شیدر فرگمنت است که روی یک مثلثِ پوشانندهٔ کل صفحه اجرا می‌شود. فقط یک چیز می‌کشد: نواری از رشته‌های ظریف که آرام در جوهرِ تیره جابه‌جا می‌شود و رنگِ هر محصولی را که روی صفحه است به خودش می‌گیرد.

نسخهٔ اول سردرد می‌آورد

اولین میدانِ ما کل صفحه را با خطوط تراز پر می‌کرد؛ مثل نقشهٔ توپوگرافی‌ای که هیچ‌وقت از حرکت نمی‌ایستاد. در اسکرین‌شات عالی بود. اما روی صفحهٔ واقعی، خطوط ظریف و پرکنتراستی که همه‌جا حرکت می‌کنند چشم را به لرزش می‌اندازند و اولین کسی که یک دقیقه نگاهش کرد همین را گفت.

پس ایدهٔ حرکتِ نور در جوهر را نگه داشتیم و بافت را کنار گذاشتیم. حالا تمام نور را یک فرم حمل می‌کند و بقیهٔ صفحه تیره می‌ماند.

رشته، نه درخشش

نوار خانواده‌ای از منحنی‌هاست. شیدر برای هر پیکسل حساب می‌کند که در عرض نوار کجا قرار گرفته، از -1 در یک لبه تا 1 در لبهٔ دیگر، و در همین فضا رشته‌هایی با فاصلهٔ برابر می‌کشد. fwidth باعث می‌شود هر رشته دقیقاً یک پیکسلِ دستگاه پهنا داشته باشد:

float v = (p.y - centre) / halfWidth;   // -1..1 across the ribbon
float S = (v * 0.5 + 0.5) * 46.0;       // 46 strands
float f = fract(S);
float d = min(f, 1.0 - f);              // distance to the nearest strand
float aw = fwidth(S);                   // how much S changes per pixel
float line = 1.0 - smoothstep(aw * 0.45, aw * 1.45, d);

پهنای نوار در طولش روی یک موجِ نرم کم و زیاد می‌شود و نور جایی جمع می‌شود که نوار باریک‌تر است. در نسخه‌ای قبلی، نوار تا یک نقطه باریک می‌شد تا پیچ‌خوردن را تقلید کند؛ رشته‌ها آن‌جا به هم می‌چسبیدند و یک درزِ تیز می‌ساختند، پس حذفش کردیم. پهنا هیچ‌وقت از حدود نصف کمتر نمی‌شود و رشته‌ها هیچ‌وقت از چند پیکسل به هم نزدیک‌تر نمی‌شوند.

آرام، از اساس

• حرکت کند است: یک چرخهٔ کامل حدود یک دقیقه طول می‌کشد.
• دانه‌بندی ثابت است. دانه‌بندیِ متحرک مثل سوسو زدن دیده می‌شود.
• هر بخش نوار را از مسیر خودش عبور می‌دهد تا نور در طول صفحه جابه‌جا شود. روی موبایل، نوار پایین و کنار لبهٔ صفحه می‌ماند.
• وقتی چیزی تغییر نمی‌کند، حلقهٔ رندر اصلاً چیزی نمی‌کشد.
• توقف میدان را ثابت می‌کند و انتخابتان را به خاطر می‌سپارد. اگر کاهش حرکت در دستگاهتان روشن باشد، میدان هرگز حرکت نمی‌کند.

اگر چیزی شبیه این برای محصولتان در نظر دارید، با ما در میان بگذارید.