cat ~/projects/gift.md
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.
- Role
- Solo
- Year
- 2026
- Status
- Live
- type
- Web
- Built with
- Next.js 16React Three FiberdreiConvexTailwind CSSTurbopackReact Compiler
- Where to find it
- Visit the siteSource
head -n 40 overview
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.
diff before after
Challenges
A line taken out, a line put in. The problem first, then what actually replaced it.
A shared link that previews as a grey box does not get opened
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.
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
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.
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.
tail outcomes
Results
- Per-gift link previews without server-rendering WebGL.
- Voice notes and open-notification emails, with no account required.
Keep readingتابع القراءة
opentelestream
Next projectTeleStreamRead every Telegram channel you follow as one timeline.