Web2026Live
Gift
Animated 3D gifts you send as a link.
Pick a gift, record a voice note, send a link. The recipient opens a 3D scene that unwraps in the browser. Free, no accounts, and the sender gets an email when it is opened.
Project detailsتفاصيل المشروع
- Role
- Solo
- Year
- 2026
- Status
- Live
- Built with
- Next.js 16
- React Three Fiber
- drei
- Convex
- Tailwind CSS
- Turbopack
- React Compiler
- Where to find it
- Visit the siteSource
What it is
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
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.
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.
- Voice notes and open-notification emails, with no account required.
- معاينات روابط خاصة بكل هدية دون عرض WebGL على الخادم.
- رسائل صوتية وإشعارات بريدية عند الفتح، بلا حاجة إلى حساب.