# NEXORA MOVE — Flagship Wireless Earbuds
### Hyper-Premium Cinematic Scrollytelling Experience

An Apple-level, cinematic editorial product reveal and interactive engineering showcase built for the **Nexora MOVE flagship wireless earbuds + charging case**.

---

## 🌟 Overview & Key Features

The core interaction is a full-screen, hardware-accelerated scroll-controlled image sequence where the **Nexora MOVE earbuds and charging case begin fully assembled, progressively separate into a detailed floating technical exploded view, and then gracefully reassemble** as the user continues scrolling.

### 1. Dual-Layer Canvas Engine (60 / 120 FPS)
* **Layer 1 (Frame Buffer Canvas)**: Renders the active frame from the 240-frame sequence (`exploded view/ezgif-frame-001.jpg` to `ezgif-frame-240.jpg`) with spring damping (`lerp(current, target, 0.16)`) for smooth interpolation.
* **Layer 2 (Real-Time Cinematic Particle Canvas)**: Dynamic canvas generating:
  * 45 floating warm orange volcanic embers and micro-sparks rising from below with subtle wobble.
  * Microscopic cool-white dust motes floating through the diagonal volumetric light beam.
  * Real-time acoustic sub-bass shockwaves radiating from the acoustic driver during the Bass phase (65%–85%).
  * Electric signal light pulses flowing along the copper traces during the Technology phase (40%–65%).

### 2. Story Chapters & Narrative Copy (0% to 100%)
* **0%–15% — HERO**:
  * Exact Nexora MOVE earbuds floating naturally above the open charging case in volcanic terrain with cool-white light beams.
  * **Headline**: *“NEXORA MOVE”*
  * **Subtitle**: *“Sound without limits.”*
  * **Supporting text**: *“Immersive wireless audio engineered for movement.”*
* **15%–40% — ENGINEERING REVEAL**:
  * Progressive separation of earbuds & case revealing internal components: outer shells, acoustic chambers, beryllium drivers, voice coils, magnets, batteries, MEMS mics, PCB logic boards, copper wiring, charging contacts.
  * **Headline**: *“Precision inside. Power outside.”*
  * **Supporting text**: *“Every component is engineered to work together with precision—from acoustic drivers to intelligent electronics.”*
* **40%–65% — TECHNOLOGY & SIGNAL FLOW**:
  * Prominent logic board, dual-core DSP SoC, quad beamforming mic array, and signal flow light pulses.
  * **Headline**: *“Engineered for immersive sound.”*
  * **Supporting text**: *“Advanced acoustic components and intelligent electronics work together to deliver a rich, detailed listening experience.”*
* **65%–85% — DEEP BASS / POWER / DURABILITY**:
  * Focus on the 11mm Beryllium driver, N52 neodymium magnet, voice coil, acoustic resonance chamber, and 500mAh battery matrix. Visual sub-bass vibration wave rings.
  * **Headline**: *“Power you can feel.”*
  * **Supporting text**: *“Deep bass, immersive sound and dependable all-day power in a compact wireless design.”*
* **85%–100% — REASSEMBLY & FINALE**:
  * Components glide smoothly back into position, shells close, case settles into its hero pose with intensified lighting.
  * **Headline**: *“MOVE. HEAR. EXPERIENCE.”*
  * **Subheadline**: *“Nexora MOVE. Sound without limits.”*
  * **CTAs**: *“Experience Nexora MOVE”* & *“Explore the technology”*.

### 3. Interactive Component Hotspot HUD Pins
* 5 interactive glowing HUD markers appear over the physical exploded components:
  1. **Acoustic Beryllium Driver** (11mm custom diaphragm, <0.02% THD)
  2. **N52 Neodymium Motor & Voice Coil** (1.2 Tesla flux, OFC copper)
  3. **Nexora X1 Audio SoC & Logic Board** (32-bit / 96kHz, 48dB Hybrid ANC)
  4. **High-Purity Copper Bus** (99.99% OFC sub-millimeter signal conduit)
  5. **500mAh Li-Po Energy Matrix** (10H buds / 42H total, 10 min = 3H quick charge)
* Mathematically pinned using normalized coordinates that stay locked to the exact component pixels across all screen sizes and aspect ratios!

### 4. Interactive Scrubber & Auto-Play Cinema Mode
* **Live Scrubber Bar**: Click or drag along the bottom timeline track to scrub through all 240 frames with real-time frame counter (`FRAME 142 / 240`).
* **Auto-Play Cinema Mode**: Press the **CINEMA** button in the header or bottom bar for a hands-free presentation playback loop.

### 5. Synthesized Cinematic Soundscape (Web Audio API)
* Zero external audio files required! Synthesized in real-time in the browser:
  * Low-frequency sub drone (48Hz fundamental + 48.4Hz binaural beat).
  * Resonant low-pass filter modulated by the user's scroll position (deepens in the Bass chapter).
  * High-frequency acoustic UI chimes on chapter jumps, scrubbing, and preset clicks.
  * Audio toggle with animated equalizer bars in the navigation header.

### 6. Post-Scrollytelling Flagship Experience
* **Interactive Sound Signature Studio**:
  * Toggle between 3 mastering curves: *Studio Reference*, *Sub-Bass Dynamic*, and *360° Spatial Immersion*.
  * Real-time spline curve graph on canvas (20 Hz to 40,000 Hz).
  * *Audition Tone Sweep* button: plays a synthesized audio frequency sweep demonstrating the curve!
* **Acoustic Architecture & Macro Showcase**:
  * Dual feature cards showcasing 2K macro detail photography of the gold pogo charging contacts and the ergonomic chassis.
* **Environmental Endurance Mosaic**:
  * 2K gallery featuring the volcanic caldera vista, monolithic archway ruins, and basalt formations with interactive fullscreen lightbox.
* **Complete Technical Specifications Matrix**:
  * 6 categorical spec cards (Acoustics, ANC, Battery, Wireless & Codecs, Durability IPX7, In The Box).
* **Interactive Pre-Order & Laser Engraving Studio**:
  * Real-time custom laser engraving input: type your name/initials and see it etched onto the charging case preview!
  * Matte finish selector: Obsidian Black (Reference) vs Stealth Midnight Grey.
  * Reservation modal with randomized order reference ID and summary.

---

## 🚀 How to Run

### Option 1: Native Node Server (Recommended)
```bash
# Start the local server
npm start
# or
node server.js
```
Open **[http://localhost:3000](http://localhost:3000)** (or **[http://localhost:3001](http://localhost:3001)** if port 3000 is occupied) in any web browser.

### Option 2: Direct File Open
You can also double-click `index.html` to open it directly in modern browsers (Chrome, Edge, Safari, Firefox).

---

## 📁 Project Structure

```
Nexora MOVE Wireless Earbuds/
├── index.html                                                 # Complete semantic HTML5 landing page
├── styles.css                                                 # Luxury dark cinematic design system & animations
├── app.js                                                     # Canvas scrollytelling engine, particles & audio synth
├── server.js                                                  # Zero-dependency local HTTP server with port fallback
├── package.json                                               # Project scripts and metadata
├── exploded view/                                             # 240-frame sequence (1280x720 JPEG frames)
│   ├── ezgif-frame-001.jpg
│   └── ... ezgif-frame-240.jpg
├── Commercial_product_shot_of_earbuds_2K_20261002190237.jpg   # 2K Commercial product shot
├── Macro_photography_of_scene_detail_2K_20261002190219.jpg    # 2K Macro charging contacts detail
├── Camera_zooming_out_to_wide_2K_20261002190207.jpg           # 2K Volcanic caldera landscape
├── Camera_pans_up_to_reveal_2K_20261002190215.jpg             # 2K Ancient monolithic stone ruins
├── Camera_pans_left_to_reveal_2K_20261002190224.jpg           # 2K Basalt pillars & glowing crevice
├── Camera_panning_down_revealing_de…_2K_20261002190213.jpg     # 2K Cinematic hero close-up
└── README.md                                                  # Comprehensive documentation
```

---

## 🎯 Design Standards Met
* **Product Reference Lock**: Faithful presentation of Nexora MOVE matte black housing, glossy stem with illuminated 'N' glyph, 4-LED case battery gauge, and gold pogo contacts.
* **Cinematic Aesthetic**: Deep charcoal void (`#070709`), volumetric diagonal light shaft, floating orange sparks/embers, atmospheric dust, and anamorphic bloom.
* **Apple / Sony Flagship Standard**: Sophisticated typography (Outfit + Inter + JetBrains Mono), glassmorphic panels (`backdrop-filter: blur(28px)`), smooth inertia transitions, and full responsive support down to mobile smartphones.