Grind & Pour

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

كان القيد الأصعب هو الفيلم نفسه: 768 إطارًا من الفيديو يجب أن تتبع التمرير بسلاسة على لوحة لمس الحاسوب المحمول وعجلة الماوس والجوال، دون أن يظهر إطار فارغ أبدًا.

التعامل مع الصفحة الرئيسية كفيلم واحد متصل لا كأقسام منفصلة. تُعرض أربعة مقاطع (الطحن، ضبط الطحنة، الصب، التذوق) على Canvas واحد ثابت وتتلاشى في بعضها، بينما يظهر نص كل خطوة من خطوات التحضير فوقها منزلقًا من خلف قناع.

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

لوحة ألوان كريمية دافئة مأخوذة من إطارات الفيلم نفسه، وخط Serif عريض بطابع كلاسيكي (Fraunces) لكلمات الخطوات الضخمة، و DM Sans للقراءة. لكل نوع قهوة لون ملصق خاص به، يمتد إلى لمسات بطاقته وإلى فنجانه.

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

تستخدم بطاقات المنتجات حركة «Brew Reveal»: عند تمرير المؤشر فوق الكيس تنفتح دائرة من مكان المؤشر لتُظهر القهوة نفسها في فنجانها، مع نكهاتها تطفو حولها وبخار يتصاعد منها. وعلى الجوال، تكشف البطاقة التي في منتصف الشريط عن فنجانها تلقائيًا.

Next.js App Router مع TypeScript. يرسم محرك الفيلم الإطارات على Canvas حسب تقدّم التمرير من Motion، وتنعّم Lenis التمرير، ويقترب الإطار المعروض من هدفه تدريجيًا مع دمج أقرب إطارين، فيبدو فيديو بـ 24 إطارًا في الثانية كأنه 60. تُحمَّل الإطارات من الأعمّ إلى الأدق، وعند غياب إطار يُعرض أقرب إطار محمَّل دائمًا.

يضم المتجر عشرة أنواع من القهوة بخيارات للحجم والطحن، وفلاتر للتحميص والنوع محفوظة في الرابط، وترتيبًا، وسلة جانبية، وكود خصم، وإتمام شراء من ثلاث خطوات يُتحقَّق منه بـ React Hook Form و Zod. تُحفظ السلة والطلبات السابقة عبر Zustand، وخطوة البطاقة التجريبية لا تقبل إلا بطاقة الاختبار، فلا تُؤخذ أي بيانات بطاقة حقيقية أبدًا.

البخار نظام جزيئات صغير على Canvas خاص به — نفثات ناعمة تصعد وتكبر وتتمايل وفق اضطراب مبني على الضوضاء (noise) — يعمل فقط للبطاقة التي يُكشف فنجانها ويتوقف عند إغلاقها.

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

كان الحل دمج كل المقاطع في مسرح واحد ثابت بأطوال تمرير موزونة وانتقالات متلاشية، وإضافة Lenis للتمرير الناعم، وفصل الإطار المرسوم عن التمرير: في كل إطار حركة يقترب الموضع المعروض من الهدف تدريجيًا، ويُدمج أقرب إطارين حسب الجزء الكسري. ثم أكّدت اختبارات مؤتمتة في Chrome دون واجهة أن موضع الإطار لم يعد يقفز، وأن زمن كل إطار يبقى قرابة 16.7 ملّي ثانية.

الفيلم كله نحو 19 ميغابايت من إطارات WebP بعرض 1248 بكسل، تُحمَّل تدريجيًا بعد أول عرض، ودقة الـ Canvas محدودة بما تستطيع الإطارات إظهاره فعلًا. ولا يتحرك إلا الكارد المكشوف. وعند تفعيل تقليل الحركة، يتحول الفيلم إلى إطارات ثابتة مع تلاشٍ بسيط. وتغطي اختبارات Playwright الشاملة شريط المنتجات والسلة وأكواد الخصم ومساري إتمام الشراء.

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