AETHER ONE — Beyond Sound.
An immersive, scroll-driven, real-time 3D product experience for AETHER ONE, a pair of
wireless over-ear headphones from the fictional brand AETHER.
Concept project. AETHER and AETHER ONE are fictional. This is an independent
creative-development showcase with no affiliation to any audio manufacturer. Nothing is for
sale, and feature descriptions are illustrative storytelling, not engineering claims.
The headphones are an original procedural model built in code (no downloaded model, no
HDRI, no image textures). Every component is its own mesh, so the exploded view separates the
real parts along the axes they were assembled on.
Experience
| # | Chapter | What happens |
|---|
| 01 | Beyond Sound. | Cinematic reveal; giant headline behind the product; idle sway and pointer parallax |
| 02 | Designed to Disappear. | Camera moves to a technical profile; 3D-anchored annotations |
| 03 | Every Detail. Reimagined. | Scroll-scrubbed exploded view: push-in → cups leave their yokes → cushions and grilles → driver, motor and electronics → labels → hold → reassembly. Fully reversible |
| 04 | Feel Every Frequency. | Stereo interference field (shader) and oval pressure rings radiating from the cups |
| 05 | Make It Yours. | Obsidian / Titanium / Ember, tweening the real PBR materials; free rotation by drag, swipe or keyboard |
| 06 | Precision in Every Detail. | Editorial feature list while the product turns |
| 07 | The Future Sounds Different. | The product descends and settles into a slot the layout reserves between headline and CTA, then leaves with the section before the footer; CTA opens an honest concept note |
Quick start
Requires Node.js 24.x (pinned in package.json engines; Vercel uses the same major).
npm install
npm run dev # http://localhost:3000
Production build:
npm run build
npm start
Checks:
npm run typecheck # tsc --noEmit
npm run lint # eslint (Next.js core-web-vitals + TypeScript)
npm run build
Stack
Next.js 16 (App Router, Turbopack) · React 19 · TypeScript 5.9 · Tailwind CSS 4 · three.js r186 ·
React Three Fiber 9 · Drei 10 · GSAP 3.15 (ScrollTrigger, SplitText) · @gsap/react.
No smooth-scroll library: the page uses native scrolling. Smoothing is applied to the 3D
story time only, so scrolling always feels like the browser's own.
Project structure
src/
app/ layout (fonts, metadata), page, globals.css (design tokens), icon
animation/
director.ts single mutable state: `pose` (timeline-owned) + `runtime` (inputs)
storyTimeline.ts shot lists (desktop + portrait) and the GSAP master timeline
useScrollDirector.ts chapter ScrollTriggers → story time → timeline; the one ticker loop
components/
experience/ client shell: canvas layer, backdrop, annotations, rail, HUD, motion
sections/ the seven chapters (server components + small client islands)
ui/ nav, loader, wordmark, fallback stills
config/finishes.ts PBR parameters for each finish
content/copy.ts all public copy and annotation text
lib/ tiny store, app state, math, device/WebGL detection
three/
geometry/ procedural builders (loft, sweep) and the headphone definition
model/ Headphones component, materials, canvas-generated textures
effects/ frequency field and sound rings (GLSL)
Stage.tsx <Canvas>, loading milestones, adaptive resolution
CameraRig.tsx applies the pose to camera + product (with layered ambient motion)
Lighting.tsx procedural Lightformer environment + key/rim/accent lights
AnnotationProjector 3D anchor → DOM label projection
qa/ Playwright QA scripts (separate package; not part of the app)
docs/ 3D implementation notes, asset licensing, QA report
public/stills/ fallback renders of the real model (generated by qa/stills.mjs)
More detail: docs/3D-IMPLEMENTATION.md.
Accessibility and fallbacks
- Semantic sections with headings; all product information exists as real text (3D labels are
decorative duplicates, hidden from assistive technology).
- Skip link, visible focus states, keyboard-operable finish radios, a rotation slider
(arrow keys, Home), accessible dialog (native
<dialog>).
prefers-reduced-motion: no intro, no travelling camera (the scene cuts to each chapter's
still pose), frozen ambient loops, no hidden-then-revealed text.- No WebGL (or a lost context): pre-rendered stills of the actual model replace the canvas,
including one per finish in the configurator. Without JavaScript the full text content and
stills are shown.
Deploying to Vercel
The project is a standard Next.js app; no environment variables are required.
- Push the repository to GitHub/GitLab/Bitbucket.
- In Vercel, Add New → Project, import the repository. Framework preset: Next.js
(detected automatically). Build command
next build, output handled by Vercel.
- Optional: set
NEXT_PUBLIC_SITE_URL (e.g. https://aether.example.com) once you have a custom
domain. Without it, Open Graph image URLs automatically use the Vercel production URL (or the
preview URL on preview deployments).
- Deploy.
Or from the CLI: npx vercel (preview) and npx vercel --prod.
QA tooling
qa/ is a separate package so Playwright never enters the app's dependencies. Chromium is
installed into ./.playwright (git-ignored).
(cd qa && npm install && PLAYWRIGHT_BROWSERS_PATH="$PWD/../.playwright" npx playwright install chromium)
./qa/rebuild.sh # production build + `next start` on :3100
export PLAYWRIGHT_BROWSERS_PATH="$PWD/.playwright"
node qa/interact.mjs # 34 functional checks
node qa/finale.mjs out 390x844 --mobile # finale framing, footer clearance, reverse scroll
node qa/shoot.mjs out 1440x900 0,1,2.5,3,4,5.3,6 # screenshots at story times
node qa/perf.mjs 2 # frame timing and renderer stats
node qa/stills.mjs # regenerate fallback stills + og.jpg
Adding ?qa to the URL exposes a read-only debugging handle (window.__aether) used by
these scripts. Results of the last run: docs/QA-REPORT.md.
Licensing
Original code and design. Third-party libraries and fonts and their licenses are listed in
docs/ASSETS-AND-LICENSING.md.
