Project 03 / 03Product site · 3D2025Live demo

AeonTech

Fictional product website for wireless headphones called AeonTech. Built with Next.js and Three.js, it includes interactive 3D models for an immersive product experience.

Visit Site ↗View Code ↗Gallery ↓

Role: Concept, design, front-end, 3D integration
Timeline: 2025 — self-initiated
Client: Self-initiated concept
Deployment: Vercel

About the project

Can a product page sell hardware you can't hold?

Fictional product presentation website for wireless headphones called AeonTech. The focus of the project was to achieve an immersive product experience by combining Next.js with Three.js.

It includes interactive 3D models, scroll-driven animations, and a conversion-oriented design, all optimized for fast loading.

The constraint I set myself was weight: a 3D product viewer that still loads quickly, with the model streamed in only once the page is interactive.

My role

What I
actually did

A self-initiated piece, built to push what I could do with real-time 3D on the web.

01
Concept & art direction
Invented the product, its positioning and the page narrative, then designed around it.
02
3D integration
Set up the Three.js scene, lighting and drag-to-rotate interaction for the headphone model.
03
Scroll choreography
Tied model rotation and section reveals to scroll so the page reads as one continuous product demo.
04
Performance work
Deferred the 3D payload, compressed assets and kept the first paint text-only.

Technologies

Next.js
Framework89.1%
App routing and image optimisation, deployed straight to Vercel.
TypeScript
Language89.1%
Typed props across the scene, controls and section components.
CSS
Styling9.2%
Keeps the layout system consistent across a long-scroll page.
JavaScript
Language1.7%
The bits of interaction logic that sit outside the typed tree.
Three.js
3D
Renders the headphone model and its lighting in real time.