Gift

Treatment

A greeting sent as a link is usually a static page with a name interpolated into it. This one is a real 3D scene: the gift sits there wrapped, and opening it is an animation rather than a page load.

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

Senders can attach a voice note, and get an email when the gift is actually opened, which turns out to be the part people care about most.

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

Challenges

1. 01

   A shared link that previews as a grey box does not get opened

   The problem

   The entire distribution model is someone pasting the link into a chat. A client-rendered 3D app gives crawlers an empty shell, so the preview is blank and the link looks like spam.

   What I did

   Crawlers hitting a gift URL are rewritten to a server function that returns per-gift Open Graph tags, while real visitors get the full 3D app. The preview is correct without server-rendering a WebGL scene.

2. 02

   3D scenes and server rendering do not mix

   The problem

   React Three Fiber needs a canvas and a browser; server rendering it produces hydration mismatches and a flash of broken layout before the scene appears.

   What I did

   The app tree renders client-only behind a mounted gate, so it behaves like a single-page app while the routes around it stay server-rendered. Fighting the framework here would have cost more than accepting the boundary.

Results

• Per-gift link previews without server-rendering WebGL.معاينات روابط خاصة بكل هدية دون عرض WebGL على الخادم.
• Voice notes and open-notification emails, with no account required.رسائل صوتية وإشعارات بريدية عند الفتح، بلا حاجة إلى حساب.