DEV FLOW
موقع شركة // CASE STUDY
موقع DEV FLOW
تجربة رقمية سينمائية بتقنيات حديثة و3D تفاعلي
// العميلDEV FLOW
// السنة2026
// مدة العملمشروع داخلي
// فئة المشروعموقع شركة
https://devflowco.com
موقع DEV FLOW
// 01. OVERVIEW
نظرة عامة
موقع شركة DEV FLOW الرسمي. بُني بأحدث التقنيات وأكثرها تطوراً، ويجمع بين الجمالية البصرية الفائقة والأداء العالي السريع.
يتميز بتجربة سينمائية كاملة تبدأ من Hero تفاعلي بمشهد ثلاثي الأبعاد، مروراً بأنميشن سلس عند التمرير، ووصولاً إلى تصميم متجاوب بالكامل يدعم اللغة العربية بكافة معاييرها الفنية.
هذا الموقع هو شهادتنا الحية والأولى على ما يمكننا تقديمه من تجارب رقمية وهندسية استثنائية تفوق التوقعات.
// 02. TECH STACK
التقنيات المستخدمة
Next.js 15
TypeScript
Tailwind CSS v4
Framer Motion
Three.js
React Three Fiber
GSAP
التحديات البرمجية
- دعم كامل للغة العربية (RTL) مع خطوط متعددة دون تأثير على الأداء
- دمج Three.js 3D scene مع Next.js 15 App Router بسلاسة
- تحقيق توازن بين الأنميشن السينمائي وسرعة التحميل القياسية
- بناء custom cursor و magnetic buttons تعمل على جميع الأجهزة
الحلول الهندسية المقدمة
- استخدمنا next/font لتحميل الخطوط بكفاءة + Tailwind v4 @theme directive
- طبقنا dynamic imports مع SSR=false للمشاهد ثلاثية الأبعاد
- اعتمدنا lazy loading + Framer Motion useInView للأنميشن عند الحاجة
- بنينا context مخصص للمؤشر مع spring physics من Framer Motion
// 03. STATISTICAL METRICS
النتائج بالأرقام
7+صفحات بالكامل
30+مكونات تفاعلية
95+معدل أداء غوغل
<2sوقت التحميل