موقع TRIVO مستخدم مكتبات GSAP و Three.js لعمل انميشن خرافية

مشروع TRIVO ليس مجرد متجر إلكتروني للملابس، بل هو تجربة بصرية متكاملة تدمج بين الفن والتكنولوجيا. ركزت في هذا المشروع على كسر القواعد التقليدية لواجهات المستخدم (UI) من خلال تقديم "Hero Section" يعتمد بالكامل على تقنيات WebGL لخلق انتقالات سينمائية بين المنتجات، مع اهتمام فائق بالأداء (Performance) وسلاسة الحركة على كافة الأجهزة. التقنيات المستخدمة: React.js & GSAP: لإنشاء واجهة سريعة التنقل وتحكم دقيق جداً في توقيت الحركات (Timeline animations). Three.js & GLSL Shaders: لإنشاء تأثيرات بصرية مخصصة في الخلفية (Displacement Mapping) تمنح الموقع طابعاً "Premium" يتفوق على المواقع التقليدية. ScrollTrigger & ScrollSmoother: لربط حركة الموقع بـ Scroll المستخدم، حيث تتفاعل الصور والعناصر وتتحول ألوانها من الأبيض والأسود إلى الألوان الكاملة تدريجياً أثناء التصفح لتعزيز التفاعل. Tailwind CSS v4: لضمان بناء واجهة مستجيبة (Responsive) بالكامل بأحدث معايير الأداء وتصميم حاد (Sharp Design) يناسب براندات الملابس العصرية. Framer Motion: لإضافة حركات ذكية وسلسة للعناصر البسيطة والنصوص لضمان تجربة مستخدم (UX) ممتعة. Mobile-First Optimization: تم تطوير نظام خاص للتعامل مع "Touch Gestures" لضمان عمل الـ Slider والسكرول بسلاسة تامة على الهواتف بدون أي تداخل. مميزات المشروع: Interactive Hero Slider: انتقال مبتكر بين الصور يعتمد على توزيع البكسلات (Image Distortion) باستخدام الـ Shaders. Dynamic Header & Navigation: هيدر ذكي يختفي ويظهر بناءً على اتجاه التصفح، مع "Mobile Menu" بتصميم Full-screen يمنع تشتت المستخدم. Immersive About Section: تأثير تلوين الصور (Grayscale to Color) المعتمد على السكرول لإضفاء روح حية للمحتوى التعريفي. Product Showcase: عرض المنتجات بأسلوب "Grid" عصري مع تأثيرات "Hover" ضوئية (Glow effects) تجذب انتباه المشتري