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.

1. Push the repository to GitHub/GitLab/Bitbucket.
2. In Vercel, Add New → Project, import the repository. Framework preset: Next.js (detected automatically). Build command next build, output handled by Vercel.
3. 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).
4. 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.