عشرة أعمال، عشرة اتّجاهات

كيف بُنيت

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

• بلا خطوة بناء

  كلٌّ من العشرة ثلاثة ملفات تُقدَّم كما كُتِبت: index.html وstyles.css وscript.js. لا مُجمِّع ولا مُترجِم ولا node_modules، ولا شيء بين المصدر والمتصفّح.

  • HTML
  • CSS
  • Vanilla JavaScript

• الرموز أوّلًا

  هوية كل موقع تعيش في كتلة :root واحدة — اللون والحرف ونصف القطر والتخفيف. يكتفي Arke Estates بأربعة رموز لونية؛ ويحتاج NEONFRAME أربعة وثلاثين. غيّر الكتلة يتغيّر مزاج الصفحة كلّها.

  • Custom properties
  • clamp()
  • حجم حرف مرن

• حركة لها مكبح

  العشرة جميعًا تضع حركتها خلف prefers-reduced-motion، وعدّة منها خلف pointer: fine أيضًا. الحركة إضافة في كل عمل؛ ولا واحد منها يخبّئ محتوى خلف تأثير قد لا يعمل أبدًا.

  • matchMedia
  • IntersectionObserver
  • rAF

• يمكن بلوغه بلا فأرة

  كل طبقة عائمة تأخذ التركيز وتحتفظ به وتعيده عند Escape. وكل قائمة منسدلة لا تفعل ذلك عمدًا. عشرة نماذج، كلٌّ منها يعلن نتيجته في منطقة حيّة بدل أن يعرضها فحسب.

  • ARIA
  • إدارة التركيز
  • لوحة المفاتيح

• واجهات مرسومة باليد

  لوحة Signalform وحلقات تقدّم Brightloop واللغة البصرية الكاملة لـ NEONFRAME كلّها SVG مضمّن وCSS. هذه الثلاثة لا تُقدّم صورة فوتوغرافية واحدة — كل بكسل فيها يُولَّد في المتصفّح.

  • Inline SVG
  • pathLength
  • clip-path

• عشرة أصوات، لا صوت واحد

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

  • الإخراج الفني
  • اقتران الخطوط
  • لوحة الألوان