مشروع تجريبي
Nova Studio
موقع جريء بالأسود والأخضر الحمضي لاستوديو تصميم متخيَّل في برلين، والحركة مع التمرير فيه هي العرض الأساسي.
- مواقع
- السنة
- 2026
- دوري
- التصميم وتطوير الواجهة
- الأدوات
- React، Vite، Tailwind CSS، GSAP، ScrollTrigger، Lenis
القصة
-
01
المشكلة
أغلب مواقع الاستوديوهات تصف حرفتها. أما Nova Studio، وهو استوديو متخيَّل في برلين، فاحتاج إلى موقع يُظهر الحرفة، ويكون فيه التمرير نفسه هو العرض.
-
02
ما فعلته
بنيت صفحة واحدة باستخدام GSAP وScrollTrigger، فيها شاشة تحميل، ومعرض أفقي مثبّت، وصفوف خدمات مع معاينة عند المرور، وبيان يظهر كلمة كلمة، وأرقام تعدّ تصاعديًا. ويأتي التمرير الناعم من Lenis.
-
03
النتيجة
حصل الموقع في Lighthouse على الحاسوب على 100 للأداء و98 لسهولة الوصول. وتتوقف كل حركة تثبيت وتمرير ومؤشر لمن يطلب تقليل الحركة.
عن المشروع
Nova Studio مشروع تجريبي. الاستوديو غير حقيقي، لكن العمل على الحركة حقيقي: كل خط زمني موجود داخل gsap.matchMedia()، فتتوقف المؤثرات بسلاسة عند تغيّر حجم الشاشة أو إعداد تقليل الحركة.
حجم JavaScript نحو 130 كيلوبايت بعد الضغط، ضمن حدّ 150 كيلوبايت، وتظهر الصفحة الأولى خلال نصف ثانية على الحاسوب.
معرض الصور
تريد شيئًا مثل هذا؟
أخبرني بما تحتاجه، ونخطط له معًا.
راسلني على واتساب