I built a free pet memorial page with a small three.js garden that stays smooth on phones

I made Bridgelight, a free, ad-free memorial page for a pet. Each pet gets one page: photos, a short video, letters, candles friends can light without an account, and a small 3D garden where the pet sits with you. Here is what went into the garden, since that was the hard part.

Stack

Next.js 16, three.js, Supabase (free tier), Vercel Hobby. No tracking cookies; visit counts come from Vercel Web Analytics.

Making a small scene look real on a budget

• The sky and the distant trees are a CC0 HDRI from Poly Haven (lilienstein for day, spruit_sunrise for the golden hour), shown with GroundedSkybox so the horizon sits on the ground instead of floating.
• Trees and grass as real meshes were far too heavy on phones, so the photo does the trees and a cheap instanced grass shader does the lawn, with mown stripes baked into the color.
• Rocks and ground use scanned CC0 textures. Credits ship in the app at /garden/CREDITS.txt.

The dog

The dog is procedural, not a downloaded model: an adult skeleton (three-joint hind legs), shell fur rendered as stacked layers, and a few behaviours (wander, pant, sit by the bench). Lesson learned the hard way: big head, big eyes and round proportions read as a toy. Adult proportions read as a pet.

Keeping 60 fps on a phone

A frame-time watchdog steps quality down in order: render resolution, then grass density to 55%, then shadows off, then grass to 25%. Desktop pixel ratio is capped at 1.5. A garden with 20 visitors went from about 2.4M to 1.35M triangles after capping visitor count and sharing geometry.

Privacy choices

Public, link-only or private per memorial. Candles and letters need no account. If you lose the secret link, recovery goes by email, twice a day at most.

Happy to answer questions about the rendering or the choices above. The garden is at https://www.bridgelight.pet/?utm_source=devto