Concept 01 · Aura One · fictional brand
A liquid glass product page for earbuds that don't exist
Aura One is a fictional pair of wireless earbuds, and its one-page site is our study in liquid glass. Controls bend the page behind them, and a 3D earbud comes apart, part by part, as you scroll.
- Style
- Liquid glass
- Industry
- Consumer audio
- Format
- One-page product site
- Built with
- Next.js, Tailwind CSS, three.js, Motion, Cloudflare
- Launched
- September 2026
- Live site
- aura.logicbeam.in
The idea
Premium audio is sold on things you can't see: the driver, the chip, how a bud sits in the ear. Liquid glass suits that. A material you can see through gives a product page a reason to open the product up, and glass only reads as glass when there is something colourful behind it to bend — so the page runs on a field of coloured light.
Everything follows from one idea: you can see into it. The nav and controls are panes you can read the page through, the earbud comes apart in front of you, and the case is clear.
The product is invented — the ₹14,900 price, the eight-hour battery, the 5.1 g bud — and the page says so in its footer and its specs. The build is not. It runs on a phone as well as a desktop, falls back properly where a browser can't do something, and it is the same code we would ship for a client.
What's on the page
Six screens, one idea.
- 01
Glass with something to bend
The nav, the colour picker and the mode switch are panes of glass over a field of coloured light. In Chrome, Edge and other Chromium browsers they refract whatever scrolls beneath them, with a thin rainbow along the rim where thick glass splits light. Safari and Firefox get frosted glass with the same rim highlight, because they don't accept the filter that does the bending.
- 02
What's inside, part by part
One pinned 3D scene runs for three screens of scrolling. The second bud leaves, the one that stays turns to glass, and seven parts come out one at a time, each with its label: ear tip, acoustic mesh, 11 mm driver, battery, chip, mics, charging contacts. Then they fit back together before the page moves on.
- 03
Three ways to listen, under a lens
The listening modes are shown rather than described. A glass lens sits over twelve everyday sounds: noise cancelling frosts what is under it, adaptive softens it, transparency magnifies it. Drag the lens, tap somewhere to send it there, or leave it alone and it wanders on its own.
- 04
A case you can see into
A second pinned scene. The clear case turns to face you, the lid opens, the buds rise out of their cradles and settle back, and the lid closes with the charge light pulsing — each step captioned beside it as it happens.
- 05
Four colours, and the light follows
Picking a colour re-lights the whole page. The ambient light fades to the new colour over about a second, and the 3D shell, ear tips and case tray follow it. The light and dark themes switch with a circle that spreads out from the toggle.
- 06
The same story on a phone
On a phone the story runs in a taller frame. The product is fitted to whatever space the text leaves, and the breakdown swaps its seven labels for one caption that points at the part in view.
Build notes
How we built Aura One.
The glass
Each pane is drawn in five layers: the page behind it, a thin fill so that page stays visible, light caught along the top lip, a rim highlight that turns to face your pointer, and a soft glow and shadow underneath.
The bending is an SVG displacement filter used as a backdrop filter. Its map is drawn on a canvas at half resolution: a rounded-rectangle bevel with a squircle profile, bent with Snell's law at a refractive index of 1.5 — the figure for ordinary glass — and redrawn only when a pane changes size. Red, green and blue are displaced by slightly different amounts, which is where the rainbow on the rim comes from.
Turning off Windows' transparency effects doesn't make the glass solid. That setting asks sites to cut transparency, and most should honour it, but this page exists to show the material, so legibility is protected with denser fills instead.
The models
There are no 3D model files. The earbud's body is five shapes written as distance functions — two ellipsoids and two rounded cones blended into one cast piece, with a sphere cut away for the grille — and turned into a mesh in the browser. The case's tray is made the same way.
The stem, tip, driver, battery and board are ordinary three.js geometry. Every texture, from the chip's “A1” label to the shadow under the buds, is drawn on a canvas when the page loads, and the scene is lit by a studio of softboxes generated in code rather than a photographed environment.
The scroll
The hero-to-breakdown story is one canvas pinned for three screens of scrolling. Scroll position is read every frame and eased, so a flick of a trackpad becomes a smooth move rather than a jump, and scrolling back plays the story in reverse.
The case is a second canvas, built only as you approach it so it never competes with the hero for the first second of the visit.
Keeping it fast
three.js is not part of the first download. The page's text, glass and controls arrive in about 240 KB of compressed JavaScript, React included; the 3D library, about 145 KB compressed, follows once the page is up.
Each 3D scene renders at no more than 1.5 times the screen's pixel density. If frames start running slow it steps down a quarter at a time, as far as 0.75, so an older phone gets a softer picture rather than a jerky one. Every scene stops drawing when it scrolls out of view or the tab is hidden.
Accessible by default
The colour picker and the mode switch are real radio groups that work with arrow keys, and the bag is a dialog that holds keyboard focus while it is open and hands it back when it closes.
With reduced motion switched on, the 3D holds still and the lens draws a single frame instead of running. Without WebGL the breakdown becomes a grid of labelled parts, and every section still reads.
Shipping it
It is a static export — plain HTML, CSS and JavaScript — served from Cloudflare's network with no server to keep running. A response header keeps it out of search results, because an invented product has no business in them. This page is the one meant to be found.
What it doesn't do
The honest list. A concept is only useful if you know where it stops.
- Refraction only happens in Chromium browsers. On an iPhone every browser runs on Safari's engine, so iPhones see frosted glass.
- Checkout is switched off. The bag works and remembers what you add, but it is a concept store.
- Every figure on the page — the ₹14,900 price, the eight-hour battery, the 5.1 g weight — is illustrative.
- The 3D wants a reasonably recent device. On an older one it lowers its own resolution first, so it gets softer before it gets slower.
Under the hood
Start a project
Want a direction like this for your brand?
Aura One is invented. Yours wouldn't be: we build the direction around your brand, your products and your content. A paragraph is enough to start. You will get a real reply with an approach, a fixed price and a timeline — not a calendar link and a discovery call.