Aurel Halo immersive 3D product-launch microsite

# Client brief: the Aurel Halo launch You are designing and building an interactive launch microsite for a real product. The brief below gives you the business facts, the goal, the audience, the sections the site must have, and the exact content to use. It gives you no visual direction on purpose. Every design decision - layout, type, colour, imagery, motion, tone - is yours to make. Read the whole brief, form a point of view on how this product should be revealed, and build it. ## The company Aurel Acoustics is a small audio company based in Brunswick, Victoria. It was started in 2019 by two people, Priya Raman, who came from industrial design, and Daniel Osei, who came from acoustic engineering, after years of designing audio hardware for other companies. The Halo is the first product they have released under their own name. They are launching it with pre-orders before the first production run ships. ## What the site is for This is a launch page for one product, the Aurel Halo, a wireless home speaker. The single most important thing the page must do is get a visitor to reserve one. A reservation is a fully refundable fifty dollar deposit that holds a unit from the first production run. Everything on the page builds toward that action. ## Who it is for People buying a considered, premium home speaker: someone who cares how a thing is made and how it sounds, is comparing it against other high-end speakers, and wants to understand the product properly before putting money down. ## The experience the company wants The company's one request about the experience, not the look: they want the whole page to be an immersive, scroll-driven three-dimensional world with the Halo at the centre of it. As a visitor scrolls, the product should be revealed and moved through space, turning, and opening up so its parts and features are shown one at a time, inside an environment rather than on a flat page. The hero should present the product arriving or being revealed in real 3D, rendered with WebGL, and the feature sections should each be a distinct 3D moment that reveals one feature. Build the product itself entirely in code from geometry, materials, and lighting: construct it from primitives and procedural geometry, with no external 3D model files and no downloaded assets of any kind. How you achieve all of this is entirely your call. This is a note about the experience, not a style instruction. Two firm rules come with it. First, any motion must respect a visitor's reduced-motion preference. Second, the page must not depend on WebGL to be usable: if 3D is unavailable or reduced motion is requested, the whole page must still present every section and all of the content below as a calm, readable, static page, with no information conveyed only through movement or through the 3D scene. Never leave a visitor with a blank screen or a missing section because a canvas failed to start. ## What the site must contain (all of these sections, as scenes in the experience) - an opening hero that reveals the product in 3D and carries the product name, the brand, and the primary reserve action, - the product story (why the company built the Halo), - the feature scenes: one distinct 3D moment for each of the five features below, each presenting that feature with its fixed benefit and spec, - the full specifications table, - the pricing and reserve section, with the price, the deposit, the availability, and the reserve action, - a final call to action and a footer with the company's contact details. ## Content to use Use the content below substantially as written, in Australian English. You may write your own section headings and any short connective microcopy (button labels, captions, form labels), but the facts, figures, names, and numbers are fixed. Do not invent extra features, drop any of the five, or change the specifications, the price, or the availability. ### The product The Aurel Halo is a wireless home speaker. It has a one-piece cylindrical body machined from a single billet of aluminium, with a band of acoustic fabric around its middle and a control dial on top. It stands 230 millimetres high and is 120 millimetres in diameter. It fires sound in every direction rather than at one seat. ### The product story Aurel Acoustics was started in 2019 in a Brunswick workshop by two people who had spent years designing audio hardware for other companies and wanted to build one speaker properly, under their own name. The Halo is that speaker. It took three years and eleven prototypes. The body is machined from a single billet of aluminium so there are no seams to buzz or rattle. The drivers fire in every direction so the sound fills a room instead of pointing at one seat. It is meant to be lived with for a decade, not replaced in two. ### The five features Present all five. Each has a benefit line and a fixed spec. - 360-degree sound. It fills a room from anywhere you put it, with no single listening seat. Spec: one 130 mm downward-firing woofer and four 45 mm full-range drivers arranged around the body. - Room calibration. It tunes itself to wherever it sits, so it sounds right on a shelf or in a corner. Spec: a six-microphone array measures the room and adjusts the sound in about 30 seconds. - One-piece aluminium body. No seams, nothing to rattle, made to last. Spec: CNC-machined anodised aluminium, 2.1 kg, in three finishes. - Multi-room and streaming. Play it on its own or group speakers together across the home. Spec: Wi-Fi 6, Bluetooth 5.3, AirPlay 2, and Spotify Connect; group up to eight speakers. - The dial. Control it by touch, and it wakes as your hand reaches for it. Spec: a capacitive top dial with haptic feedback and a presence sensor. ### The full specifications - Drivers: one 130 mm woofer, four 45 mm full-range - Amplification: 200 W total, Class-D - Frequency response: 40 Hz to 20 kHz - Connectivity: Wi-Fi 6, Bluetooth 5.3, AirPlay 2, Spotify Connect - Dimensions: 230 mm high, 120 mm diameter - Weight: 2.1 kg - Materials: anodised aluminium body, acoustic fabric band - Finishes: Graphite, Sand, Slate - Power: 100 to 240 V, 45 W in typical use - In the box: Halo speaker, 2 m braided power cable, quick-start guide - Warranty: three years ### Pricing and availability - The Halo is 649 Australian dollars. - Reserve one now with a fully refundable 50 dollar deposit that holds a unit from the first production run. - The first units ship in March 2027. - Shipping is Australia-wide. Reservations are limited to the first production run. ### Contact Aurel Acoustics, 14 Weston Street, Brunswick VIC 3056. Email hello@aurelacoustics.com.au. ## Output contract (React, single page) Build one single-page site. Output exactly two files: - `App.tsx` - a default-exported React component. Define any subcomponents in this same file. This is the whole page. - `theme.css` - a Tailwind v4 `@theme` token block, your `font-family` choices from the shared font menu below, and any custom CSS you need. The only imports allowed in `App.tsx` are `react`, `framer-motion`, `lucide-react` (never the Sparkles icon), and, for 3D, `three`, `@react-three/fiber`, and `@react-three/drei`. No other packages, no network requests, and no external assets: all imagery must be inline SVG, CSS, drawn in code on a canvas, or rendered with WebGL. The fonts are bundled offline, so use only the shared menu: Archivo (including Archivo Expanded), Instrument Sans, Space Grotesk, Work Sans, IBM Plex Sans, IBM Plex Mono, JetBrains Mono, Fraunces, Instrument Serif, Playfair Display, Lora, Caveat. Make it responsive across mobile, tablet, and desktop. The page must also remain fully readable and usable if WebGL is unavailable: never leave a visitor with a blank screen or a missing section because a 3D canvas failed to start.