目録へ戻るكل المشاريع

ウェブ

هديّة

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

2026公開中يعمل الآنالويب

لقطة الغلاف من هديّة

الخلاصة

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

نظرة عامة概要

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

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

التحديات課題

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

المشكلة

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

ما فعلته

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

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

المشكلة

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

ما فعلته

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

النتائج成果

  • معاينات روابط خاصة بكل هدية دون عرض WebGL على الخادم.

  • رسائل صوتية وإشعارات بريدية عند الفتح، بلا حاجة إلى حساب.

بيانات النشر奥付

役割الدور
منفردًا
年السنة
2026
状態الحالة
يعمل الآن
分野التصنيف
الويب
道具بُني بـ
Next.js 16React Three FiberdreiConvexTailwind CSSTurbopackReact Compiler
所在أين تجده
التصميم التالي — الزجاج السائلشاهد التصاميم الـ14