Noctis Studio غرفة مظلمة، لا صالة عرض

01 · نظرة عامّة

غرفة مظلمة، لا صالة عرض

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

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

02 · الفكرة

ضوء متاح، معالَج باليد

ثلاثة قرارات تحمل العمل، وكلٌّ منها يستعير انضباط الأجهزة لا عُرفًا من أعراف الويب.

• الأحمر إشارة

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

• مسحات، لا تلاشيات

  كل ظهور clip-path يسير في اتّجاه واحد. يُقرأ غالقًا، وهي الاستعارة الوحيدة التي استحقّتها هذه العلامة.

• مؤشّر يُحسن التصرّف

  نقطة مخصّصة على المؤشّرات الدقيقة وحدها، لا تحلّ أبدًا محلّ مؤشّر النظام فوق نصّ أو حقل نموذج.

03 · الأهداف

ما كان على الصفحة أن تفعله

1. عرض الأعمال بحجم يستحقّ العرض

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

2. شرح ثلاثة تخصّصات بلا ثلاث صفحات

   حفلات الزفاف والتحرير والتجاري في قسم واحد تحت معالجة لونية واحدة، لأنّ الاستوديو يعاملها المعاملة نفسها.

3. نشر إتاحة حقيقية

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

4. عدم حبس القارئ في العتمة أبدًا

   إن أخفق السكربت، يزيل معالج onerror صنف JS، فلا يبقى شيء مخبّأً خلف مسحة لن تعمل أبدًا.

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

عشر وحدات، بالترتيب

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

1. المعالجة اللونية

   أربع عشرة custom property على :root: شبه أسود، وأسود مرفوع لتُقرأ الألواح بلا حدّ، وفضّي ورماديّان شعريّان، وثلاثة أحمر — أحمر العلامة، ودرجة أعمق لحرف أبيض على تعبئة حمراء عند 4.95:1، وأفتح لحرف أحمر على الأرضية شبه السوداء عند 4.64:1.

2. الترويسة وقائمة الطبقة

   ترويسة تنكمش وقائمة بملء الشاشة بمصيدة Tab. جاءتا أولًا، لأنّ كل ما عداهما في الصفحة يجلس تحتهما.

3. المسحة

   منحنى تخفيف واحد، واتّجاه clip-path واحد، مطبَّقان عبر صنف واحد فيظهر كل قسم بالطريقة نفسها.

4. شريط السحب

   Pointer capture، وأزرار أسهم، وعدّاد حيّ، وأمان تركيز للوحة المفاتيح — أكبر وحدة مفردة في العمل.

5. الدفتر والنموذج

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

05 · البنية

ثلاثة ملفات

لا مُجمِّع، ولا مكتبة شرائح، ولا اعتمادية من أي نوع. الشريط والمؤشّر والمسحات والدفتر 796 سطرًا مكتوبة باليد عبر عشر وحدات في ملف واحد.

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

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

1. التحدّي

   السحب للتمرير المبنيّ بمستمعي mousemove على مستوى المستند ينكسر لحظة مغادرة المؤشّر العنصر، ويسرّب مستمعًا كلّما فُقد المؤشّر.

   الحلّ

   setPointerCapture. يظلّ العنصر يتلقّى الأحداث أينما ذهب المؤشّر، ويحرّر المتصفّح الإمساك بنفسه عند pointerup أو pointercancel، فلا شيفرة تنظيف تُنسى.

2. التحدّي

   السحب الذي ينتهي فوق رابط يُطلق نقرة، فيؤدّي ترك الفأرة بعد تحريك الشريط إلى مغادرة الصفحة.

   الحلّ

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

3. التحدّي

   المؤشّر المخصّص أسرع طريق لجعل الموقع يبدو معطّلًا: يتأخّر على لوحة اللمس، ويختفي فوق الحقول، ولا يعني شيئًا على اللمس أصلًا.

   الحلّ

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

4. التحدّي

   ظهور clip-path يخبّئ المحتوى افتراضيًا، وهذه أدكن صفحة في المجموعة — فالسكربت المخفق سيترك شاشة سوداء بلا تفسير.

   الحلّ

   وسم السكربت يحمل onerror يزيل صنف JS، فيُعيد التحميل الفاشل كل مسحة إلى حالتها المستقرّة بدل إخفاء مجموعة الاستوديو كلّها.

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

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

• أعمال مختارة

  شريط سحب بأسهم وعدّاد وتصفّح بلوحة المفاتيح. كل وسيلة إدخال تبلغ كل لقطة.

• دفتر الحجوزات

  إتاحة مشتقّة من التاريخ الفعلي وتفتح على أول الشهر — ندرة حقيقية لا مُدَّعاة.

• شاشة الكاميرا

  قراءة لقطة في الواجهة تستعير حروف عدسة الرؤية نفسها. CSS خالص، بلا canvas وبلا صورة.

• نُبقي الأضواء مطفأة

  قسم الأتيليه يشرح المعالجة اللونية — الموضع الوحيد الذي يتحدّث فيه الاستوديو عن الطريقة بدل عرض النتائج.

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

شغّله هنا

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

noctisstudio.co

شغّله هنا

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

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