Interactive 3D Packaging Studio

A custom-packaging website where buyers design their box live in 360° 3D, then send the exact specification with their quote. 98 fast pages, six box styles and a lead dashboard, loading in the low hundreds of milliseconds.

Service
Web & Mobile
Industry
B2B custom packaging (AU, US, EU)
Platforms
Web, Mobile web, Admin dashboard
Technology
Static site generation, TypeScript, WebGL (procedural 3D), Node.js, Lead dashboard, Playwright test suite, WebP / AVIF imagery

The problem

Buying custom boxes usually means guessing from flat catalogue photos, then waiting on email threads to find out what is possible. The client sells custom packaging to brands, e-commerce and retail businesses in Australia, the US and Europe, and wanted a clean site a non-technical buyer understands in seconds, an interactive 3D box experience in real time, and a way to capture every enquiry, all without the heavy, slow first load that 3D on the web usually means.

Our approach

We treated the website, the 3D designer and the lead dashboard as one product, so the design a visitor makes flows straight into the lead the sales team receives. Speed was a requirement, not a polish step: pages ship as pre-built static HTML with self-hosted fonts and modern images, and the 3D engine generates boxes from their dimensions in the browser, so there are no model files to download and it only loads when the designer comes into view.

How we delivered it

Website

  • 98 static pages from content files
  • Packaging families, industries, materials and guides
  • Region selector for AU, US, EU and UK

3D designer

  • Boxes generated from dimensions, no model files
  • Six styles, sizes, board, print colour and animated lid
  • Dieline view and a 2D fallback without WebGL

Quote flow

  • Two steps; the lead is saved after step one
  • Design carries into the form, up to three artwork files
  • Spam protection, rate limits and acknowledgement emails

Lead dashboard

  • Leads inbox with statuses, notes and owners
  • Source attribution and a cookie-free funnel report
  • CSV export and an email outbox log

What we built

A 98-page, mobile-first website generated from content files: packaging families, product pages, industries, materials and finishes, services, guides and FAQ, with a region selector for Australia, the US, Europe and the UK. The procedural 3D designer offers six box styles (mailer, shipper, tuck-top carton, rigid, magnetic book-style and display tray), exact sizes in mm or inches, white or kraft board, preset or custom print colours, an animated lid, preset views, 360° rotation by drag, touch or arrow keys, and a flat dieline view. Devices without WebGL fall back to a lightweight 2D drawing. A two-step quote form saves the lead the moment step one is sent and carries the design across, and a private dashboard gives the team a leads inbox, statuses, notes, CSV export, source attribution and a cookie-free funnel report.

Results

The client launched one product instead of three: a fast website, a live 3D designer and a lead dashboard ready for the team on day one. In lab tests the home page loads in 175 ms on desktop and 156 ms on mobile with zero layout shift, and every enquiry arrives with its design, source and status attached.

  • Home page load 175 ms on desktop and 156 ms on mobile in lab tests
  • 3D designer page loads in 117 ms; quote page is about 10 KB
  • Zero cumulative layout shift on every tested page
  • Every lead arrives with its design, landing page and campaign source
  • A foundation ready for logo placement on the 3D box, more styles and instant pricing

More case studies · Start a similar project