هيثم العسولي

← كل المشاريع

هديّة

هدايا ثلاثية الأبعاد متحركة تُرسَل كرابط.

0الحقائق

الدور
منفردًا
السنة
2026
الحالة
يعمل الآن
التصنيف
الويب
بُني بـ
Next.js 16 · React Three Fiber · drei · Convex · Tailwind CSS · Turbopack · React Compiler
هديّة

1 · نظرة عامة

ما هو، ولماذا وُجد.

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

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

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

1a · التحديات

كل مشكلة أخذت بطاقة، وكل حلّ صُنّف خلفها.

1a1رابط يُعاين كمربع رمادي لا يُفتح

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

1a1aما فعلته

تُحوَّل الزواحف التي تصل رابط هدية إلى دالة على الخادم تعيد وسوم Open Graph خاصة بتلك الهدية، بينما يحصل الزائر الحقيقي على التطبيق ثلاثي الأبعاد كاملًا. فتصحّ المعاينة دون عرض مشهد WebGL على الخادم.

1a2المشاهد ثلاثية الأبعاد والعرض من الخادم لا يمتزجان

يحتاج React Three Fiber لوحةً ومتصفحًا؛ وعرضه من الخادم ينتج عدم تطابق في الترطيب ووميض تخطيط مكسور قبل ظهور المشهد.

1a2aما فعلته

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

2 · النتائج

المشروع التالي

→تيليستريم

اقرأ كل قنوات تيليجرام التي تتابعها كخط زمني واحد.

التصميم التالي — الطابعةشاهد التصاميم الـ14