بارنز كوفي
موقع غامر بتقنيات ثلاثية الأبعاد يُحيي ثقافة القهوة، بحبوب قهوة مبنية بـ Three.js تتفاعل مع الزائر، وسرد يقوده التمرير مبني على GSAP.
مشروع مفاهيمي شخصي، غير تابع لبارنز كوفي ولم يُطلب منها.
- السنة
- 2025
- القطاع
- الأغذية والمشروبات
- الخدمات
- الفكرة، الأبعاد الثلاثية، التصميم، التطوير
نبذة
بارنز من أشهر سلاسل القهوة في المملكة العربية السعودية. اتخذنا العلامة موضوعاً لمشروع مفاهيمي بمبادرة منّا: كيف سيبدو موقع قهوة فاخرة لو ظهرت الحرفية في الوسيط نفسه، لا في الصور فقط؟
الجواب تجربة ثلاثية الأبعاد مبنية بـ Three.js وReact Three Fiber. نماذج مخصصة لحبوب القهوة بإضاءة فيزيائية واقعية ومظلّلات GLSL مكتوبة يدوياً تتوسط الصفحة وتتفاعل مع حركة المؤشر. ويقود GSAP ScrollTrigger أكثر من عشرين حركة سينمائية بينما يتنقل الزائر بين قصة العلامة وفلسفة الحرفية وعرض الامتياز التجاري.
ويربط Lenis كل ذلك بتمرير سلس يجعل الصفحة كلها انسيابية لا آلية. ورغم ثقل WebGL، ضُبطت المشاهد لتحافظ على 60fps، ويحقق الموقع +90 في اختبارات الأداء، ويتكيّف بسلاسة من شاشات الحاسوب إلى الجوال. استغرق بناء المفهوم أربعة أسابيع.
حبوب تفاعلية ثلاثية الأبعاد
نماذج مخصصة لحبوب القهوة تُعرض بـ Three.js وReact Three Fiber، بإضاءة فيزيائية واقعية ومظلّلات GLSL مخصصة تصنع الأجواء.
سرد يقوده التمرير
يكشف GSAP ScrollTrigger القصة وقسم «لماذا بارنز» وعرض الامتياز التجاري بالتتابع، فكل تمرير يكشف طبقة جديدة من العلامة.
إحساس انسيابي
يحافظ التمرير السلس عبر Lenis على تنقّل متصل وفاخر، يواكب إيقاع الحركات بدلاً من أن يتعارض معها.
سريع رغم WebGL
عرض محسّن يحافظ على 60fps بسلاسة وعلى نتيجة أداء +90، مع مشاهد متكيّفة من الجوال إلى الشاشات الكبيرة.
لقطات
الصفحة كاملة من أعلاها إلى أسفلها.
قصتنا: حكاية العلامة تتكشف مع التمرير.
لماذا بارنز: فلسفة الحرفية.
فرص الامتياز التجاري بتفاصيل تفاعلية.
التواصل: دعوة ختامية لاتخاذ الخطوة التالية.
التقنيات
تريد نتيجة مثل بارنز كوفي؟
كل مشروع يبدأ بمكالمة قصيرة عن أهدافك، ثم نرسل لك النطاق والجدول الزمني وسعراً ثابتاً.