NEONFRAME كل بكسل مولَّد في المتصفّح

01 · نظرة عامّة

النكتة التي صارت الطريقة

تخيّلت في هذا المفهوم استوديو في برلين يبيع أعمال WebGL الغامرة والثلاثية الأبعاد الآنية. والموقع البديهي لذلك canvas فيه shader. أمّا الأطرف فيطرح سؤالًا أصعب: إلى أي مدى يمكنك أن تصل بلا canvas إطلاقًا؟

إلى النهاية، كما تبيّن. شبكة المنظور، وألواح الواجهة المشطوفة الأطراف، وخطوط المسح، والخلل ذو الانحراف اللوني على العناوين، والأزرار المغناطيسية، والقراءات الحيّة، كلّها CSS وتسعة رسوم SVG مضمّنة. والاستوديو القادر على بناء واجهة آنية مقنعة من تدرّجات وclip-paths قدّم حجّةً عن الحرفة لم يكن shader ليقدّمها.

02 · الفكرة

لا canvas، ولا shader، ولا صورة

اتّسعت القاعدة لسطر واحد: لا يجوز لشيء في هذه الصفحة أن يكون صورة فوتوغرافية أو فيديو أو بيئة تشغيل ثلاثية الأبعاد. وتنبع منها ثلاثة قرارات، وبقيّة العمل هي هذه الثلاثة مطبَّقة على كل مكوّن في الصفحة.

• الطرف المشطوف

  مضلّع clip-path واحد يقصّ زاويتين متقابلتين، مطبَّق على كل لوح وشريحة وزرّ. وحجم القصّ متغيّر، فيتّسع الشطف مع المكوّن بدل إعادة رسمه لكلٍّ منها.

• قناتان

  السماوي يحمل البنية، والأرجواني يحمل الحالة، ولا يستعير أحدهما عمل الآخر. والخلل على العناوين هو ببساطة هاتان القناتان مزاحتان بأربعة أجزاء من مئة من em.

• قراءات تتحرّك

  زمن التشغيل، وزمن الإطار، وعدد العُقد، تنجرف على مؤقّت يتوقّف لحظة إخفاء التبويب أو تقليل الحركة.

03 · الأهداف

معطيات المهمّة

1. أن يبدو باهظًا ولا يزن شيئًا

   بلا تصوير، وبلا فيديو، وبلا بيئة تشغيل ثلاثية الأبعاد. وأثقل أصل في العمل كلّه هو ملف الأنماط بـ51.9 ك.ب، والمتصفّح يرسم كل ما يصفه.

2. ستّ إرساليات

   شبكة أعمال مختارة كل بلاطة فيها مولَّدة في المتصفّح — ادّعاء الاستوديو نفسه عن العمل الآني، يفي به موقعه حرفيًا.

3. طاقم، لا فريق قيادة

   اثنا عشر إنسانًا، وكلب استوديو واحد، وصفر مديري حسابات. والقائمة تُقرأ اختبارَ شخصية لا هيكلًا تنظيميًا.

4. افتح قناة

   نموذج تواصل بمعرّفات خطأ لكل حقل، فتكون كل رسالة تحقّق مرتبطة برمجيًا بالحقل الذي تخصّه لا عائمةً قربه.

04 · ترتيب البناء

تسلسل المهمّة

بُني المظهر قبل السلوك: الرموز أولًا، ثم نظام clip-path، ثم التوهّج، وبعد ذلك فقط الوحدات التسع التي تحرّك أي شيء.

1. أربعة وثلاثون رمزًا

   أكبر كتلة رموز بين العشرة: الفراغ، واللوح، ولونا القناتين، وأربع درجات توهّج، وحجم الشطف، وزاوية الميل، ودرجة خطوط المسح.

2. نظام clip-path

   القصّ متغيّر لا مضلّع ثابت، فيخدم تعريف شطف واحد الألواحَ والشرائح والأزرار ويتّسع مع كلٍّ منها.

3. توهّج بلا مرشّحات

   box-shadow للهالة، وdrop-shadow فقط حيث يقتطع الشطف واحدة. المرشّحات باهظة، فتُنفقها الصفحة تحديدًا حيث لا يبلغ box-shadow.

4. تسع وحدات مرقّمة

   التنقّل، وحالة الترويسة، والمراسي، والظهور، والكتابة الطرفية، والعدّ التصاعدي، والواجهة الحيّة، والأزرار المغناطيسية، ونموذج التواصل: 416 سطرًا في المجموع.

5. البوّابات

   المغناطيسية تتطلّب مؤشّرًا قادرًا على التحويم ونافذة عرض بـ1100 بكسل على الأقل. والواجهة تتوقّف عند visibilitychange. ولا يعمل أيٌّ منهما تحت تقليل الحركة.

05 · البنية

ثلاثة ملفات، والمظهر يسكن ملف الأنماط

لا مُجمِّع، ولا اعتمادية، ولا خطوة بناء — وعلى غير المعتاد لصفحة بهذا الشكل، ولا بيئة تشغيل رسومية أيضًا. الأطراف المشطوفة، وشبكة المنظور، وخطوط المسح، والتوهّج، كلّها مُعلَنة في CSS، فيرسمها المتصفّح سواء وصل السكربت أم لا.

أكبر ملف أنماط بين العشرة وأكبر كتلة رموز حقيقةٌ واحدة مقولة مرّتين: الهوية مؤلَّفة في الملف الذي يؤدّي التخطيط أيضًا، لا مُصدَّرة من أداة تصميم وموضوعة فوقه.

06 · ما الذي قاوم

مشكلات، وما تغلّب عليها

1. التحدّي

   النيون على شبه الأسود أقلّ اللوحات الشائعة إتاحةً. السماوي وحده ساطع بما يكفي، لكنّ الرماديات الخافتة التي تريدها واجهة سايبربانك تقع تحت AA بكثير.

   الحلّ

   رُفِع رمز نصّ الجسد حتى قاس، وحُصرت القيم الشديدة الخفوت في تسميات واجهة زخرفية موسومة aria-hidden. فبقي المظهر سليمًا؛ ولا شيء يحتاجه القارئ فعلًا ناقص التباين.

2. التحدّي

   واجهة يقودها setInterval تظلّ تدقّ في تبويب خلفي، فتحرق البطّارية على صفحة لا ينظر إليها أحد.

   الحلّ

   مستمع visibilitychange يوقف الفترة حين يُخفى التبويب ويعيد تشغيلها عند العودة. والمستمع نفسه يوقفها إن فُعِّل تقليل الحركة في منتصف الجلسة.

3. التحدّي

   الأزرار المغناطيسية التي تتبع المؤشّر غير صالحة للاستعمال على اللمس، وعلى شاشة صغيرة تسحب عنصر التحكّم من تحت الإصبع تمامًا.

   الحلّ

   بوّابتان لا واحدة: مؤشّر قادر على التحويم، ونافذة عرض بـ1100 بكسل على الأقل. فلا توجد المغناطيسية إلّا حيث يوجد مؤشّر ومتّسع لتحرّكه.

4. التحدّي

   أثر الآلة الكاتبة الذي يبني النصّ حرفًا حرفًا يُعلَن حرفًا حرفًا، ويترك الصفحة فارغة لكل ما يقرأ المصدر.

   الحلّ

   النصّ الكامل يُرسَل في الوسوم، والأثر يعيد تشغيله فحسب. وأثناء الكتابة يحمل العنصر aria-label فيه النصّ كاملًا، وتُزال التسمية حالما تستقرّ الحركة.

07 · ما يستحقّ البقاء

الأجزاء التي تستحقّ البقاء

• WE BUILD ELECTRIC WORLDS

  ثلاثة أسطر متشظّية فوق شبكة منظور بـ CSS. بلا canvas، وبلا shader، وبلا صورة، والأثر كلّه قناتان تفصلهما أربعة أجزاء من مئة من em.

• إرساليات مختارة

  ستّ بلاطات أعمال، كلٌّ منها مرسومة في المتصفّح. إنّه افتخار الاستوديو بالعمل الآني، مأخوذًا حرفيًا من الصفحة التي تقوله.

• نظام الشطف

  clip-path واحد يقوده متغيّر ويتّسع عبر الألواح والشرائح والأزرار، فيكون للصفحة توقيع بنيوي لا مجموعةُ صناديق مزيّنة.

• الطاقم العامل

  اثنا عشر إنسانًا، وكلب استوديو واحد، وصفر مديري حسابات. قسم الطاقم هو العرض التقديمي، ولم يحتج تصويرًا ليقدّمه.

08 · شغّله حيًّا

شغّله هنا

العمل الحقيقي، مضمّنًا ويعمل. يُحمَّل عند الطلب — فلا يُجلَب منه شيء قبل أن تطلبه.

neonframe.studio

شغّله هنا

العمل الحقيقي، يعمل داخل الصفحة. المعاينة الحيّة صفحة مضمّنة. اضغط Escape لمغادرتها.

افتحه بملء الشاشة