the project
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.
the facts
Built with
Where to find it
overview
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.
problems
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.
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.
after
next