Us Oyu LLC

Custom Software + Process Digitization · 2026

Us Oyu LLC

Client

Us Oyu LLC

Year

2026

Role

Strategy, Product, Engineering, 3D

Stack

Next.js · Supabase · Three.js · R3F · Spline · Zustand · Leaflet · docxtemplater · Resend

A 30-year-old water-systems firm got its first interactive product catalog. 3D-configurable tanks, server-rendered spec docs, live ordering — one Supabase surface.

Challenge

Us Oyu LLC has been engineering dewatering and industrial water systems since 1996. Three decades of equipment specs, custom-fabricated tanks, pump assemblies, and site installations — all sold over the phone. Quotes were drafted in Word from a folder of templates that had drifted apart over a decade. New buyers landed on a brochure-grade website that did not say what the product line actually was. The catalog, in effect, lived in the founder's head.

Approach

We mapped the product line with the engineering team — every tank, every configuration, every spec sheet — and built a single surface that could carry it. The product catalog renders in 3D so a buyer can spin a tank, swap a fitting, and see the result before a sales call. The configurator state ties to a Supabase-backed cart and a server-side document generator that emits the Word spec sheet from the same data. No more drift between the catalog and the quote.

Every section of the site animates differently — a deliberate signature, not an indulgence. A Leaflet map tracks installations across every site they have shipped to.

Outcome

  • A product catalog with 3D previews of every tank class, surfaced from one nav.
  • Server-rendered spec documents generated from the same configuration the buyer sees on screen.
  • Supabase-backed ordering end-to-end: cart, checkout, transactional email via Resend.
  • Three decades of institutional knowledge, finally in a system other people can use.

Stack reasoning

Supabase for auth, ordering, and the server-rendered document path — one provider, one bill, one set of credentials, no glue code. Three.js + React Three Fiber for the 3D configurator because the product line is geometric and the configurator state needed to live alongside the rest of the React tree. Spline for the higher-fidelity hero scenes a sales rep can drop into a pitch deck. Leaflet over Google Maps for the installations map because the data is private and the budget did not need a Google API key. docxtemplater because spec sheets ship as .docx, not PDF — the buyer's procurement team edits before approving.

What we would do differently

The 3D scenes are heavy on first paint. We shipped with aggressive lazy-loading and a low-poly placeholder, but a future pass should bake static cover images for every tank and only hydrate the 3D when the user actually rotates. Second, the spec-document templates were authored in Word and then ported — next time, we would author directly in code with a render preview from day one.

○ Gallery

01 · Configurator3D tank configurator — drag to rotate, scroll to zoom; spec writes itself from this state.
02 · Public siteHome — 'Water is treasure'. Catalog, configurator and ordering surface entered from here.