Skip to content
NOVATECH
Let's Talk

Creative & 3D Web · 2026 · NOVATECH concept (self-initiated)

Halo One

A scroll-driven 3D launch page for a fictional smart speaker that takes itself apart as you scroll.

Halo One speaker in grey knit fabric with a glowing teal light ring, beside the headline Sound, with a halo
  • Exploded view of the speaker with labels for each of its seven parts
  • Close-up of the glowing microphone ring above the tweeter pod and circuit board
  • The woofer chapter with its spec table: 102 mm long-throw woofer, two 19 mm tweeters, 45 Hz to 20 kHz
Challenge
Product launches need to explain what is inside a device without a wall of spec sheets. Video is heavy and can't be explored; static renders don't show how the parts fit together.
Solution
A launch page where the scroll drives a live 3D teardown. The fabric sleeve lifts away, seven labelled parts separate, the microphone ring lights up and the woofer pumps, then everything reassembles. Every part is modelled in code down to the screws, with knitted fabric, brushed aluminium, a paper woofer cone and a populated circuit board.
Technology
  • Three.js
  • GSAP ScrollTrigger
  • WebGL
  • Motion design
  • 4K rendering

Open the live demo ↗. Scroll to open the speaker up. A 4K toggle sits in the top bar.

Halo One is a NOVATECH design concept, not a real product, and this is not a client project. It shows how a launch page can carry a product story with live 3D instead of video.

What it does

  • Five chapters tied to the scroll position, so the animation plays forwards and backwards at any speed.
  • Labels that track each 3D part on screen.
  • A calmer version for visitors who prefer reduced motion.
  • A 4K mode that renders at 3840 × 2160 on capable hardware.

How it is built

Each part is assembled from lathe profiles and primitives, with brushed-metal, knit and circuit-board textures generated in the browser. GSAP ScrollTrigger drives a single timeline, and the renderer and studio lighting are shared across every chapter.