تخطَّ إلى المحتوى
WanaWeb
استوديو ويب مستقل — منذ 2021
متاحون لمشاريع جديدة — الربع الأول

ويب الغد،نبنيها اليومبسرعة اللحظة.

سريع. نظيف. احترافي بلا مجاملة. من مواقع التسويق المركّزة على التحويل إلى تجارب ثلاثية الأبعاد تفاعلية بالكامل تعمل بـ 60 إطارًا في الثانية داخل المتصفح.

ابدأ مشروعًاشاهد ما نبنيه
Next.jsReact Three FiberTypeScriptWebGL / GLSLGSAPTailwind CSSNode.jsCore Web Vitalsأنظمة التصميمتصميم الحركة
01 / الاستوديو

فريق صغير. معايير غير معقولة.

واناويب استوديو صغير من مهندسين ومصمّمين وفنّاني رسم ثلاثي الأبعاد تعبوا من رؤية أفكار جميلة تُسلَّم كمواقع بطيئة وهشّة. فبنينا ممارستنا على وعد معاكس: كل بكسل مقصود، وكل كيلوبايت مبرَّر.

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

مشروعًا مُسلَّمًا
0+مشروعًا مُسلَّمًامنذ 2021
وسيط نتيجة Lighthouse
0/100وسيط نتيجة Lighthouseالأداء، الجوال
وسيط زمن استجابة التفاعل
0msوسيط زمن استجابة التفاعلINP، المئين 75
متوسط الزمن حتى الإطلاق
0 يومًامتوسط الزمن حتى الإطلاقمن التصميم إلى النشر
01

سريع بالتصميم

ميزانيات أداء نتفق عليها من البداية ونفرضها في CI. البثّ، والتخزين المؤقت على الحافة، والانضباط في الصور، وانعدام إزاحة التخطيط: كلها افتراضات لا أهداف طموحة.

02

كود نظيف، بلا استثناء

TypeScript صارم، ومكوّنات صغيرة قابلة للتركيب، ونظام تصميم حقيقي، واختبارات حيث تستحق عناءها. النشر هو بداية حياة قاعدة الكود، لا نهايتها.

03

حِرفة تلمسها

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

أعمال مختارة

دليل، لا وعود.

أربعة مشاريع تُظهر المدى: إنقاذ معدّل تحويل، ومهيّئ فوري، وسرد بصري للبيانات، وملف أعمال. مرِّر للتنقّل بينها.

01تقنية مالية · الجولة B2025

Halcyon

إعادة بناء الثقة في 0.6 ثانية

منصّة إقراض خاضعة للتنظيم كانت تفقد التسجيلات بسبب صفحة رئيسية بـ 4.1 ثانية وطلب من ثماني خطوات. أعدنا بناء واجهة التسويق ومسار التسجيل على Next.js، وخزّنّا نموذج المحتوى على الحافة، وقلّصنا النموذج إلى النصف.

LCP على الجوال
0.6sLCP على الجوال
بدء الطلبات
+38%بدء الطلبات
الزمن حتى أول عرض سعر
−71%الزمن حتى أول عرض سعر
بناء المنصّةتصميم المسارتخزين الحافةالتحليلات
ابدأ شيئًا مثل هذا
Next.jsTypeScript · Sanity · Vercel Edge · Playwright
02أجهزة استهلاكية2025

Ostrom

مهيّئ ثلاثي الأبعاد يعمل على هاتف من 2019

أربع نسخ من المنتج، واثنتا عشرة تشطيبًا، وشرط واحد صارم: أن يبدو فوريًا على أندرويد متوسط الفئة. بنينا مهيّئًا بتقنية WebGL مع shaders مكتوبة يدويًا وبلا أي نموذج قابل للتنزيل — كل الخامات تُولَّد وقت التشغيل.

تنزيل ملفات
0 KBتنزيل ملفات
أندرويد متوسط الفئة
60 fpsأندرويد متوسط الفئة
معدّل الإضافة إلى السلة
+24%معدّل الإضافة إلى السلة
Three.js / R3FGLSL مخصّصUX المنتجميزانية الأداء
ابدأ شيئًا مثل هذا
React Three FiberGLSL · Next.js · Sentry
03تقنية المناخ2024

Verdant

جعل عقد من البيانات مقروءًا

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

من البيانات مُصوَّرة
11 yrsمن البيانات مُصوَّرة
Lighthouse، المعايير الأربعة
100Lighthouse، المعايير الأربعة
متوسط زمن القراءة
3.4×متوسط زمن القراءة
سرد البياناتنظام التصميمتوليد ثابت
ابدأ شيئًا مثل هذا
Next.jsD3 · GSAP · Cloudflare
04مكتب معماري2024

Cassia Studio

ملف أعمال يتصرّف كبناية

بالنسبة لمكتب عمله مكاني بطبيعته، لم تكن شبكة صور مصغّرة لتفي بالغرض. بنينا ملف أعمال تُخرجه حركة التمرير، فتتجمع المشاريع وأنت تتحرك — مع نظام CMS بلا واجهة يديره الاستوديو بنفسه بالكامل.

من الموجز إلى الإطلاق
14 daysمن الموجز إلى الإطلاق
جودة الاستفسارات
+58%جودة الاستفسارات
إزاحة تخطيط تراكمية
0إزاحة تخطيط تراكمية
الإدارة الفنيةإخراج الحركةCMS بلا واجهة
ابدأ شيئًا مثل هذا
Next.jsScrollTrigger · Sanity · Lenis
02 / الخدمات

ما نفعله، ونتقنه فعلًا.

ست تخصصات، فريق واحد، بلا وسطاء. نحدّد نطاق كل مشروع بحيث نتحمّل مسؤولية النتيجة من أول رسم إلى مراقبة الإنتاج.

01

تصميم وتطوير المواقع

مواقع تسويقية ومنصّات مؤسسية وإطلاقات منتجات مبنية على Next.js. تخطيطات تحريرية، وأنظمة تصميم مخصّصة، ونماذج محتوى يستطيع فريقكم إدارتها بنفسه.

  • Next.js و React
  • CMS بلا واجهة
  • أنظمة التصميم
  • SEO وإتاحة الوصول
02

الرسم ثلاثي الأبعاد وWebGL

مشاهد ثلاثية الأبعاد مرتبطة بالتمرير، ومهيّئات منتجات، وخلفيات توليدية، وعمل على الـ shaders — بـ GLSL مكتوب يدويًا ومضبوط ليبقى سلسًا على هاتف متوسط الفئة.

  • Three.js و R3F
  • GLSL مخصّص
  • مهيّئات المنتجات
  • ميزانية 60fps
03

هندسة الأداء

نقيس ونشخّص ونعيد البناء. البثّ والتخزين المؤقت وجراحة الحِزم والعمل على مسار العرض، حتى تنتقل Core Web Vitals إلى المنطقة الخضراء وتبقى فيها.

  • Core Web Vitals
  • تحليل الحِزم
  • تخزين على الحافة
  • ميزانيات في CI
04

تصميم المنتج والواجهة

واجهات مصمّمة وفق قيود حقيقية: الحالات، والحركة، والحالات الفارغة، وحالات الخطأ، والخمس عشرة حالة طرفية التي لم يذكرها أحد في الموجز.

  • معمارية UX
  • أنظمة UI
  • نماذج أولية
  • مواصفات الحركة
05

التجارة الإلكترونية والتحويل

متاجر ومسارات دفع مبنيّة حول سؤال واحد: ما الذي يجعل النقرة التالية بديهية؟ ثم نثبت ذلك بالتجارب لا بالآراء.

  • تجارة بلا واجهة
  • UX الدفع
  • اختبار A/B
  • التحليلات
06

الحركة والتفاعلات الدقيقة

إخراج حركة التمرير، وانتقالات الصفحات، والتفاعلات الصغيرة التي تجعل الواجهة تبدو حيّة — وكلها تحترم تفضيل تقليل الحركة.

  • GSAP و ScrollTrigger
  • انتقالات الصفحات
  • تفاعلات دقيقة
  • واعية بإتاحة الوصول
03 / مختبر 3D

نعم — نعمل فعلًا بالرسم ثلاثي الأبعاد.

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

دوران تلقائي
اسحب للدوران
تنزيل نماذج
0 KB
معدّل الإطارات المستهدف
60 fps
محرّك العرض
WebGL2
shaders مخصّصة
GLSL
04 / العملية

أربع مراحل. بلا مفاجآت.

  1. 01الأسبوع 1

    الاستكشاف

    نرسم الأهداف والجمهور والمنافسين والقيود. تحصل على نطاق مكتوب، وخريطة موقع، وميزانية أداء، وجدول زمني ثابت قبل أن يوجد سطر كود واحد.

    • الموجز والنطاق
    • خريطة الموقع
    • ميزانية الأداء
    • الجدول الزمني
  2. 02الأسبوعان 1 و2

    التصميم

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

    • الإدارة الفنية
    • نظام التصميم
    • نموذج أولي
    • مواصفات الحركة
  3. 03الأسابيع 2 إلى 4

    البناء

    مكوّنات مُنوَّعة، ونموذج محتوى بلا واجهة، ورسم ثلاثي الأبعاد حيث يستحق مكانه. نشر أسبوعي على بيئة تجريبية لتراقب التقدّم بدل انتظار كشف واحد في النهاية.

    • مكتبة المكوّنات
    • إعداد CMS
    • ثلاثي الأبعاد / WebGL
    • نشر تجريبي أسبوعي
  4. 04مستمر

    الإطلاق والتحسين

    نُطلق خلف المراقبة والتحليلات، ثم نُحسّن بناءً على السلوك الحقيقي. يشمل التسليم توثيقًا، وجولة مسجّلة، و30 يومًا من الدعم.

    • الإطلاق
    • التحليلات
    • التوثيق
    • دعم 30 يومًا
05 / الأدوات

مملّ في ما يهم.

نختار أدوات ناضجة بأفق دعم طويل، ولا نلجأ إلى الأدوات الرائدة إلا عندما يفرضها التصميم فرضًا.

الجوهر

  • Next.js
  • React 19
  • TypeScript
  • Node.js
  • Tailwind CSS

ثلاثي الأبعاد والحركة

  • Three.js
  • React Three Fiber
  • GLSL / WebGPU
  • GSAP
  • Blender

المنصّة

  • Vercel
  • Cloudflare
  • Sanity
  • PostgreSQL
  • GitHub Actions

الجودة

  • Playwright
  • Vitest
  • Lighthouse CI
  • axe-core
  • Sentry
06 / الأشخاص

فريق صغير، عن قصد.

لا مديري حسابات، ولا لعبة الهاتف المكسور بين ثلاث وكالات. تتحدث مباشرة إلى من يكتب الكود ويرسم العمل الفني.

AN

علي رضا نقوي

المؤسّس الشريك والمهندس الرئيسي

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

Next.js · الأداء · المعماريةGitHub
AV

عباس وزيري

المؤسّس الشريك

يرسم اتجاه الاستوديو ويبقى قريبًا من كل مشروع نتحمّله. شارك في تأسيس واناويب على قناعة عنيدة بأن الحِرفة والسرعة ليستا مقايضة.

التوجيه · الشراكات · الاستراتيجية
SM

سارة محرابي

المديرة الإبداعية

تحوّل فقرة تحديد الموقع إلى لغة بصرية. مهووسة بالشبكات ومقاييس الخطوط وبالرمادي الدقيق للخلفية.

الإدارة الفنية · الطباعة · الهوية
DO

دانيال أوكافور

مطوّر ثلاثي الأبعاد وWebGL

يعيش داخل كود الـ shaders. يبني مشاهد تبدو مكلفة ومع ذلك تُحمّل في أقل من ثانية على هاتف من 2019.

Three.js · GLSL · المحاكاة
MT

مينا طباطبائي

مهندسة الواجهات والحركة

ترى أن الحركة يجب أن تشرح شيئًا. كل حركة تُطلقها لها مسار لتقليل الحركة وسبب للوجود.

React · GSAP · إتاحة الوصول
LF

لوكا فيراري

المنصّة وDevOps

يجعل النشر مملًّا والتراجع فوريًا. إن انكسر شيء في الثالثة فجرًا، فهو يعلم أولًا لأن التنبيه وصل إليه قبل غيره.

الحافة · CI/CD · الرصد
RF

روزا فرهادي

مصمّمة المنتج

تُجري المقابلات مع من سيستخدم المنتج فعلًا، ثم تصمّم للحالات الطرفية التي يتجاهلها الآخرون.

UX · البحث · النماذج الأولية
07 / الإشارة

ما يقوله شركاؤنا.

أعادوا بناء موقعنا التسويقي في ثلاثة أسابيع وقلّصوا وسيط زمن التحميل من 4.1 ثانية إلى 0.6 ثانية. تبعه الزوار من البحث. وقاعدة الكود عندهم أنظف ما في تقنياتنا.
مدير النمومنصّة SaaS للأعمال
طلبنا مهيّئ منتج ثلاثي الأبعاد وتوقّعنا تنازلًا في الأداء. حصلنا على الاثنين — وما زال يعمل بسلاسة على أجهزة أندرويد أقدم.
مدير المنتجعلامة أجهزة استهلاكية
كان التسليم أكثر ما أعجبنا: توثيق، وجولة مسجّلة، ولوحات مراقبة. فريقنا الداخلي أطلق أول ميزة في اليوم الثاني.
مدير الهندسةشركة تقنية مالية سريعة النمو
أسئلة

ما يسأله الناس أولًا.

إن لم يكن سؤالك هنا، فاسأله مباشرة — وستحصل على جواب صريح، حتى إن كان الجواب لا.

اسألنا مباشرة

  • بموجز مكتوب قصير: ما الذي تبنيه، ولمن، وكيف يبدو النجاح، وما قيودك الزمنية والميزانية. نردّ خلال يوم عمل واحد إما بعرض أو بتوصية صادقة بأننا لسنا الخيار المناسب. المكالمة الأولى 30 دقيقة ومجانية.

  • موقع تسويقي مركّز يقع عادة بين 8 و25 ألف دولار. أما منصّة بنظام CMS ونظام تصميم مخصّص وعمل ثلاثي الأبعاد فتقع عادة بين 25 و60 ألف دولار. نحدّد النطاق بسعر ثابت مقابل قائمة تسليمات مكتوبة، فلا يتحرّك الرقم إلا إذا تحرّك النطاق.

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

  • أحيانًا نعم. يكسب الثلاثي الأبعاد مكانه عندما يشرح شيئًا لا تستطيع الصورة شرحه — منتجًا قابلًا للتخصيص، أو مفهومًا مكانيًا، أو تغيّرًا عبر الزمن. وإذا كان زخرفة، سنقول ذلك ونوصي بصرف الميزانية على الطباعة والتصوير والسرعة بدلًا منه.

  • نعم، وكثيرًا ما ينجح الأمر. يمكننا قيادة الواجهة، أو بناء نظام تصميم يحتفظ به فريقكم، أو العمل كمتخصصين في الأداء والثلاثي الأبعاد فوق تقنياتكم الحالية. كل ما نسلّمه منوّع وموثّق ومُراجع مع مهندسيكم.

  • تحصل على المستودع والتوثيق وجولة مسجّلة و30 يومًا من الدعم. بعد ذلك يبقي معظم العملاء عقدًا شهريًا صغيرًا للتطوير والمراقبة، لكن لا يوجد أي إلزام — الكود لكم ويعمل من دوننا.

  • أنتم، بالكامل، عند الدفعة الأخيرة. لا نحتفظ بأي إطار عمل خاص ولا رسوم ترخيص ولا احتكار استضافة. العناصر الخارجية الوحيدة هي المكتبات مفتوحة المصدر التي نعلنها من البداية.

08 / تواصل

لنبنِ شيئًا يستحق أن يُحمَّل.

أخبرنا بما تبنيه وما يعترض طريقك. ستسمع منا خلال يوم عمل واحد — من مهندس، لا من مسار مبيعات.

تفضّل البريد؟hello@wanaweb.studioالرد النمطي: أقل من 24 ساعةعمل عن بُعد — مع العالم كله
لا نشرات بريدية. لا CRM. فقط مهندس يردّ عليك.