Haitham AssoliRead this page in Arabicاقرأ هذه الصفحة بالإنجليزية

Web2026

Gift

Animated 3D gifts you send as a link.

  • Live
Gift — cover screenshot

Project factsبيانات المشروع

In short

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.

The compartments

Role
Solo
Year
2026
Status
Live

Built with

  • Next.js 16
  • React Three Fiber
  • drei
  • Convex
  • Tailwind CSS
  • Turbopack
  • React Compiler

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.

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

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

Results

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

Challenges

Each one opens twice: what went wrong on the left, what I did on the right.

01

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

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.

02

3D scenes and server rendering do not mix

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.

Keep goingتابع

Shelf

All projectsAll 40, in six compartments.
Next design — Night ReelSee all 14