كل رسم متحرك تجربة من 5 ثوانٍ. انقر على صورة مصغرة لمعاينتها.
أناقة ستارتين تنفتحان على علامتك التجارية. المقدمة المفضلة للفخامة والأزياء الراقية.
التفاصيل التي تفصل موقعاً عادياً عن موقع متميز. مرر، انقر، العب.
هذه الصفحة لا تستعمل أيّ مكتبة رسوم متحرّكة. الـ 56 تسلسلًا الذي شغّلته للتوّ مكتوب يدويًا بـ CSS وReact، ويوجد كاملًا داخل ملفّ أنماط الصفحة نفسها، دون أيّ حزمة خارجية تُحمَّل من أجله. وهذه القواعد الستّ هي التي تحكمه، وهي نفسها التي أطبّقها حين تنتقل حركة من هذا المختبر إلى مشروع زبون.
لا GSAP ولا Lottie ولا أيّ محرّك رسوم من طرف ثالث. مكوّن هذه الصفحة لا يستورد سوى React وملفّ أنماطه الخاصّ. ومعنى ذلك عمليًّا ثلاثة أشياء: لا شيء يحتاج تحديثًا أمنيًّا كلّ بضعة أشهر، ولا شيء ينكسر حين تُصدر مكتبةٌ نسخةً كبيرة جديدة تغيّر واجهتها، ولا كيلوبايت واحد من الجافاسكريبت يُضاف إلى الحزمة لمجرّد تحريك عنصر على الشاشة. المقابل الوحيد أنّ عليك أن تكتب الحركة بنفسك، وهو مقابل زهيد أمام ما تربحه.
الحركة التي تمسّ العرض أو الارتفاع أو الموضع بالبكسل تُجبر المتصفّح على إعادة حساب التخطيط في كلّ إطار، أي ستّين مرّة في الثانية، ولكلّ العناصر المتأثّرة بها لا للعنصر المتحرّك وحده. أمّا هذه الحركات فلا تغيّر سوى transform وopacity: يتولّاها المُركِّب على بطاقة الرسوميات دون المرور بحساب التخطيط ولا بإعادة الطلاء، فيبقى الخيط الرئيسي متفرّغًا لبقيّة الصفحة، ويظلّ التمرير سلسًا حتّى على هاتف متوسّط المدى.
الموقع يحترم prefers-reduced-motion: حين يُعلن نظام الزائر أنّه يفضّل تقليل الحركة، تهبط كلّ المدد إلى الصفر ويظهر المحتوى مباشرة، دون أن يضيع منه شيء. وليست هذه ميزة إضافية بل شرط أساسي: هناك من تسبّب له الحركة دوارًا أو غثيانًا فعليًّا، ولا ينبغي للحركة أن تكون يومًا شرطًا لقراءة صفحة.
الـ 18 مقدّمة سينمائية والـ 38 حركة مصغّرة لا تخدم الغرض نفسه. المقدّمة تُعرض مرّة واحدة عند الدخول وتضبط النبرة العامّة: من حقّها أن تدوم ثانيتين لأنّ الزائر لم يأتِ بعدُ لينجز شيئًا. أمّا الحركة المصغّرة فترافق إيماءة أو تمريرًا أو نقرة، ويجب أن تنتهي قبل أن يتساءل المستعمل عمّا يجري، أي في حدود بضع مئات من الأجزاء من الثانية. والخلط بينهما هو الخطأ الأكثر شيوعًا: موقع يتصرّف فيه كلّ زرّ كأنّه شارة فيلم يصير مرهقًا بعد ثلاث نقرات.
معظم الحركة موصوف بـ @keyframes في CSS، والمتصفّح هو من يتولّى الاستيفاء بين الإطارات. أمّا React فتكتفي بالإطلاق: تركّب المكوّن، وتغيّر صنفًا، وتزيد مفتاحًا لإعادة تشغيل التسلسل من أوّله. والنتيجة أنّ الحركة لا تتعثّر لأنّ الخيط الرئيسي مشغول بشيء آخر، وأنّ الكود الذي يصفها يبقى مقروءًا: تفتح ملفّ الأنماط فترى التسلسل كاملًا في مكان واحد، بدل أن تفكّ آلة حالات موزّعة على عدّة دوالّ.
لكلّ عرض زرّ إعادة خاصّ به، والحركات المصغّرة قابلة للترشيح حسب الفئة. وليس هذا تفصيلًا في سهولة الاستعمال: فالحركة لا تُحكَم من المشاهدة الأولى، حين يكون كلّ شيء جديدًا ولافتًا، بل من الخامسة، حين يبدأ المرء يرى إن كان التوقيت متماسكًا أم أنّ ارتدادةً ما صارت مزعجة. وبهذا أيضًا أتحقّق منها بنفسي قبل إدراجها في مشروع زبون: أشغّلها عشرات المرّات، وما لا يصمد أمام ذلك لا يخرج من هنا.
كل رسم مكتوب حسب الطلب. صفر مكتبات. 100% أداء. متوافق مع جميع المتصفحات والأجهزة.
📞 لنتحدث عن مشروعك