HUM One

Overview

HUM One is a cinematic product landing for noise-cancelling headphones by SonoJS (demo brand HUM Audio, Rotterdam). Built as a static HTML / CSS / JS site with GSAP, Lenis, ScrollTrigger, and Three.js. An intro gate measures the room and quiets the page; the hero mounts a live 3D headset with poster fallback. Sections cover anatomy (cushions, drivers, band, repair), ANC modes (Open / Adaptive / Full quiet), three colourways (Graphite, Fog, Violet), voice quotes, and a Pre-order · €349 close. Demo marketing UI only - no cart backend. Open index.html or host the folder on Cloudflare Workers.

Highlights

1. 01

   Quiet intro gate

   Room dB meter and Put them on entry - the page gets quieter as you scroll.

2. 02

   3D headset hero

   Three.js headphones with poster still until the live scene is ready.

3. 03

   Anatomy to pre-order

   Cushions, drivers, band, repair grid, ANC modes, colours, voices, and €349 CTA.

4. 04

   Static and fork-ready

   HTML + vendor GSAP / Lenis / Three - open locally or deploy to Workers.

You get

• index.html + css/style.css
• js (main, headphones, quiet, waves) + GSAP / Lenis / Three vendors
• 3D headphones model and hero posters
• Product photography WebP set (anatomy, modes, colours, voices)
• Local fonts (Red Hat Display, Be Vietnam Pro, Cutiva Mono)