Aura One: 3D headphone landing page (concept)
Md Salim Rana
Aura One is a concept project: a launch page for a pair of headphones that doesn't exist. I built it to show what a 3D product page can do without feeling heavy.
Try it live: https://3d-landing.srwebstudio.com
The Aura One hero: the headphones float over a dark stage
The idea
Most product launch pages are a hero photo and a long scroll of feature blocks. I wanted the product itself to carry the page: one model that stays on screen, turns to show each detail as you read about it, and lets you pick a colour before you ever see a price.
What it does
The headphones float and turn slowly in the hero, and follow the mouse a little
As you scroll, the model stays in place and turns to show the side, the ear cushion and the headband, with a short text for each angle
Three colours (Sand, Midnight and Silver) tint the shell with a smooth transition
"Explore in 3D" opens a full-screen view where you can spin the model freely
Visitors who prefer reduced motion, or whose browser has no WebGL, get a still, well-lit version instead
Explore in 3D: a full-screen view to spin the model
How it's built
One renderer for the whole page. A single three.js canvas sits behind the content, and the sections move the camera and model. That keeps memory low and avoids a new 3D scene loading on every section.
Scroll story with GSAP ScrollTrigger. Each section has a model pose, and scrolling blends between them, so the motion always matches where you are on the page.
A model made for the web. The headphones started as an AI-generated mesh. I cleaned it up in Blender, split it into three materials (shell, cushion and metal) so the colour switch only tints the shell, and compressed it with glTF-Transform. The final model is about 200 KB.
Text first, 3D second. The page text and buttons load straight away, and the model loads after them, so nothing waits on the 3D.
SvelteKit and Tailwind CSS, built as a static site and deployed on Cloudflare.
Sand, Midnight and Silver colourways on the same model
What this shows
How a 3D hero or landing page can be added to a product site: model prep, scroll animation, colour switching, a full 3D view, and fallbacks, all in code a team can keep working on.
The hero on a phone
This is spec work, not a client project. The product, brand and price are made up.
Like this project
Posted Nov 6, 2026
A concept launch page for a fictional pair of headphones. The model floats in the hero, turns as you scroll, changes colour on click and opens in a full 3D viewer. Built with three.js, GSAP and SvelteKit.
