Back to home

Scene 02 · Interface · 2026

EGI Rental — customers build their container in 3D

Customers build their own container in 3D and send the design over WhatsApp.

Draft — copy under review

Role
Sole author — design, 3D, frontend, data and deployment.
Stack
Next.js 16 · React 19 · TypeScript · Three.js · React Three Fiber · anime.js · Supabase · Playwright · Vercel
Links
EGI Rental home page with a blue 3D container next to the headline about container rental in São Luís

The problem

EGI Rental rents containers in São Luís, Brazil — offices, storage, restrooms, kitchens or custom builds. Explaining in text how a 10 or 20 ft container becomes an office doesn’t work well: customers need to see it.

What I built

The whole site, alone, from zero to live in one day (Oct 7, 2026):

  • the home page has a container that opens as you scroll;
  • a comparison view shows the sizes to scale;
  • the catalog is read from the database through a public view, with only the fields the site shows — with a fallback fleet if the database is down;
  • the 3D builder: customers pick 10 or 20 ft (or two side by side), place 20 kinds of furniture, doors and windows, change colors and send the design over WhatsApp. The link stores the whole design.

Decisions

3D only loads on demand. The scene loads when the visitor taps “Start building”; people who just want the phone number don’t pay for the megabytes.

Visible collisions. Furniture that touches other furniture turns red instead of blocking the drag.

Weak devices turn effects off on their own. The builder measures performance and lowers quality when needed.

By the numbers

  • 100 on mobile Lighthouse for accessibility, best practices and SEO across the 5 measured pages (performance 87–93)
  • animation style recalculation: from 6.5 s down to 0.5 s
  • builder on mobile: from 34 to 55 fps; the builder’s Lighthouse score from 69 to 90
  • unit and end-to-end tests with Playwright