½M — هاف مليون
مفهوم لتجربة إطلاق أكواب ½M بأسلوب مواقع Awwwards: كوبٌ ثلاثي الأبعاد يتحرّك، ويُفتح، ويحمل اسمك.
مشروع شخصي غير رسمي، لا صلة له بعلامة Half Million ولم يُطلب منها. بيانات المنتج مأخوذة من قوائم البيع المتاحة للعموم.
متجرٌ يعرض المنتج، أم تجربةٌ تعرّفك به؟
كنتُ أتابع أكواب Half Million الجديدة على تيك توك: أربعة ألوان، ومقاسان، واسمٌ يُحفر على الكوب بالليزر. منتجٌ يقوم كلّه على الاختيار الشخصي، بينما يُعرض عادةً في المتاجر الإلكترونية شبكةً من الصور المتشابهة.
فطرحتُ سؤالًا: ماذا لو صُمّمت تجربة الإطلاق بأسلوب مواقع Awwwards، حيث تقود الحركةُ القصة، ويصبح الاختيار نفسه هو التجربة؟
- الإخراج الفني
- بنية القصة
- المشهد ثلاثي الأبعاد
- الحركة والانتقالات
- تجربة الحفر
المنتج هو البطل، والنص قصير.
هوية ½M تظهر في العلامة والطباعة الحادّة والثقة، لا في اللون الأصفر المعتاد للعلامة. لذلك أصبحت ألوان الأكواب الأربعة نفسها هي النظام البصري للموقع، وتكتفي الخلفية بمسحةٍ لا تتجاوز 8% من لون الكوب المعروض.
اللون أولًا، ثم المقاس.
بدل شبكةٍ من 8 منتجات متساوية، يُبنى المسار في فصول: لكل لونٍ فصلٌ خاص — أزرق سماوي، حجري، زبدي، برتقالي ناعم — ثم يأتي المقاس بين 355 مل و500 مل. قرارٌ واحد في كل مرة.
مطفي وناعم، لا لامع.
الأكواب في الواقع ذات ملمسٍ مطفي ناعم، وأي لمعانٍ في العرض ثلاثي الأبعاد كان سيُظهرها رخيصة. لذلك ضُبطت المادة والإضاءة لتحاكيا السطح المطفي، وطُبعت العلامة ½M بدرجةٍ أعمق من لون الكوب نفسه، لا بلونٍ مستقل.
لكل جزءٍ لحظته.
الغطاء، والشفّاطة، والمقبض، والعلامة: تقترب الكاميرا من كل جزءٍ على حدة، مع جملةٍ واحدة تشرحه. وحركة الشفّاطة ثانوية ودقيقة عمدًا، كي لا يتحوّل الكوب إلى لعبة.
اسمك، محفورًا على الكوب.
الحفر بالليزر هو ما يميّز هذه الأكواب في الواقع، فجعلتُه اللحظة الأبرز في التجربة: يكتب الزائر اسمه، فيظهر على الكوب كأنه محفورٌ فعلًا، كاشفًا المعدن تحت الطلاء.
من سؤالٍ إلى نموذجٍ منشور.
المراجع
جمعتُ مراجع من مواقع Awwwards لفهم إيقاع الحركة وطريقة عرض المنتج والتفاعل، مع الحرص على ألّا أنسخ بصمة أيٍّ منها: الانتقال الخاص بالمشروع هو حلقة الغطاء.
البناء مع الذكاء الاصطناعي
بنيتُ النموذج بمساعدة Claude Code و Opus 5.5: أصف المشهد والحركة، ثم أراجع النتيجة وأوجّه التعديل حتى تطابق التصوّر.
التقنية
مشهدٌ ثلاثي الأبعاد بـ Three.js، وحركة وانتقالات بـ GSAP، ونشرٌ على Vercel.
اختر نصفك.
تنتهي التجربة بالأكواب الأربعة جنبًا إلى جنب، بعد أن تعرّف الزائر إلى كل لونٍ وكل تفصيلة، ليختار نصفه.
نموذجٌ تفاعلي منشور، لا منتجٌ تجاري.
النموذج منشور ويعمل على الويب، ويضمّ الألوان الأربعة والمقاسين والتفاصيل وتجربة الحفر. بيانات المنتج — 355 مل و500 مل، فولاذ مقاوم للصدأ، للمشروبات الساخنة والباردة — مأخوذة من قوائم البيع المتاحة، وليست مواصفات رسمية.
ما لم يُقَس بعد: أداء التجربة على الأجهزة الأضعف، وأثرها الفعلي في قرار الشراء، إذ لم تُطلق ضمن متجرٍ حقيقي.
- تجربة إطلاق ثلاثية الأبعاد بالعربية
- فصول للألوان ثم المقاسات
- لحظة حفرٍ تفاعلية
- نموذج منشور على الويب
التجربة متاحة الآن: تنقّل بين الألوان، وافتح الغطاء، واكتب اسمك على الكوب.
جرّب الموقع بنفسك ↗حين يصبح الاختيار نفسه هو التجربة.
