01 · نظرة عامة
الدعابة التي صارت منهجًا
في هذا التصوُّر، تخيّلت استوديو يبيع أعمال WebGL غامرة ورسومًا ثلاثية الأبعاد فورية. الموقع البديهي canvas فيه shader. أما الموقع المثير فيطرح سؤالًا أصعب: إلى أي مدى تصل بلا canvas على الإطلاق؟
وتبيّن أن الجواب: حتى النهاية. شبكة المنظور، ولوحات HUD المشطوفة، وخطوط المسح، وخلل الزيغ اللوني على العناوين، والأزرار المغناطيسية، والقراءات الحية — كلها CSS وتسع SVG مضمّنة. استوديو يستطيع بناء واجهة فورية مقنعة من تدرجات وclip-path قدّم حجة عن الحِرفة لا يستطيع shader تقديمها أبدًا.
02 · الفكرة
كل بكسل مولَّد داخل المتصفح
الشطفة
مضلّع clip-path واحد يقصّ ركنين متقابلين. مطبَّق على كل لوحة وشريحة وزر — التوقيع البنيوي الكامل للصفحة.
قناتان
السماوي يحمل البنية، والأرجواني يحمل الحالة. والخلل هو هاتان القناتان مُزاحتين أربعة أجزاء من مئة من em.
قراءات تتحرك
زمن التشغيل وزمن الإطار وعدد العقد تنجرف على مؤقّت يتوقف حين يُخفى التبويب أو تُقلَّل الحركة.
03 · الأهداف
معطيات المهمة
مظهر باذخ، ووزن لا يُذكر
لا تصوير ولا فيديو ولا بيئة تشغيل ثلاثية الأبعاد. أثقل أصل في الصفحة هو ورقة الأنماط.
ست إرساليات
شبكة أعمال مختارة كل بلاطة فيها مولَّدة داخل المتصفح — ادعاء الاستوديو نفسه، مُوفى به حرفيًا.
طاقم، لا فريق قيادة
اثنا عشر إنسانًا، وكلب استوديو واحد، وصفر مديري حسابات — صفحة الطاقم بوصفها اختبار شخصية.
افتح قناة
نموذج تواصل بمعرّفات خطأ لكل حقل، فكل رسالة تحقق مربوطة برمجيًا بحقلها.
04 · ترتيب البناء
تسلسل المهمة
أربعة وثلاثون رمزًا
أكبر كتلة رموز بين العشرة: الفراغ، واللوحة، والقناتان، وأربعة مستويات توهج، وحجم الشطفة، وزاوية الميلان، وخطوة خط المسح.
منظومة clip-path
حجم القص متغيّر، فتتحجّم الشطفة مع المكوّن بدل إعادة رسمها لكل واحد.
توهج بلا مرشّحات
Box-shadow للهالة، و
drop-shadowفقط حيث الشكل غير منتظم. المرشّحات مكلفة؛ والصفحة تستخدمها بالضبط حيث لا يصل box-shadow.تسع وحدات مرقّمة
التنقل، وحالة الترويسة، والمراسي، والظهورات، وكتابة الطرفية، والعدّادات التصاعدية، وHUD الحي، والأزرار المغناطيسية، ونموذج التواصل.
البوابات
المغناطيسية تتطلب مؤشرًا قادرًا على التحويم وإطار عرض لا يقل عن 1100 بكسل. يتوقف HUD عند
visibilitychange. ولا يعمل أي منهما مع تقليل الحركة.
05 · البنية
ثلاثة ملفات
├── index.html 44.9 KB — 6 أقسام، 9 SVG مضمّنة، 0 صور
├── styles.css 52.5 KB — 34 خاصية مخصصة، 4 استعلامات وسائط
└── script.js 13.1 KB — 415 سطرًا، 9 وحدات مرقّمة
الحزمة التقنية
- clip-path
- Gradients
- box-shadow glow
- visibilitychange
- Unbounded
- Chakra Petch
إتاحة الوصول
- Per-field error IDs
- aria-describedby
- aria-live
- Reduced motion
- hover + width gate
06 · ما عاندني
ما عاندني
النيون على شبه الأسود أقل اللوحات الشائعة إتاحةً. السماوي ساطع بما يكفي، لكن الرماديات الخافتة التي تشتهيها واجهة سايبربانك تقبع بعيدًا تحت AA.
رُفع رمز نص المتن حتى نجح في القياس، وحُصرت القيم الشديدة الخفوت في تسميات HUD زخرفية موسومة بـaria-hidden. المظهر باقٍ؛ ولا شيء يحتاجه القارئ دون حد التباين.
HUD يقوده setInterval يواصل الدقّ في تبويب خلفي، حارقًا البطارية على صفحة لا ينظر إليها أحد.
مستمع visibilitychange يوقف المؤقّت حين يُخفى التبويب ويعيد تشغيله عند العودة. والمستمع نفسه يوقفه أيضًا إذا فُعّل تقليل الحركة في منتصف الجلسة.
الأزرار المغناطيسية التي تتبع المؤشر غير قابلة للاستخدام على اللمس، وعلى شاشة صغيرة تسحب عنصر التحكم من تحت الإصبع تمامًا.
بوابتان لا واحدة: (hover: hover) وإطار عرض لا يقل عن 1100 بكسل. المغناطيسية لا توجد إلا حيث يوجد مؤشر ومتسع للحركة.
أثر الآلة الكاتبة الذي يبني النص حرفًا حرفًا يُعلَن حرفًا حرفًا، ويترك الصفحة فارغة لمحركات البحث.
النص الكامل يُشحن في الترميز والأثر يعيد تشغيله فحسب. أثناء الكتابة يحمل العنصر aria-label بالنص التام؛ ويُزال الوسم فور استقرار الحركة.
07 · ما يستحق البقاء
الأجزاء التي تستحق البقاء
WE BUILD ELECTRIC WORLDS
ثلاثة أسطر يعتريها الخلل فوق شبكة منظور CSS. لا canvas ولا shader ولا صورة.
Selected Transmissions
ست بلاطات أعمال، كل واحدة مرسومة داخل المتصفح — تباهي الاستوديو مأخوذًا حرفيًا.
منظومة الشطفة
clip-path واحد يقوده متغيّر يتحجّم عبر اللوحات والشرائح والأزرار.
Active Roster
اثنا عشر إنسانًا، وكلب استوديو واحد، وصفر مديري حسابات. قسم الطاقم هو العرض التسويقي نفسه.
08 · شغّله مباشرة
شغّله هنا
البناء الحقيقي، مضمَّن ويعمل. يُحمَّل عند الطلب — لا يُجلَب شيء حتى تطلبه.
تخطَّ المعاينة المباشرة
البناء الحقيقي يعمل داخل الصفحة. المعاينة المباشرة صفحة مضمَّنة؛ اضغط Escape لمغادرتها.
افتح بملء الشاشة ↗
