Enhance audio and visual elements in the UI for improved user experience

- Added a new script in package.json to generate welcome speech audio for enhanced onboarding. - Updated SplashScreen.vue and OnboardingWrapper.vue to use the new intro background image and poster. - Modified Dashboard.vue and Login.vue to reflect changes in background images for consistency. - Removed outdated background images and updated references to ensure a cohesive visual theme. - Improved tap-to-start feature with new text and logo in SplashScreen.vue for better engagement. - Enhanced audio playback functionality in useLoginSounds.ts to include welcome speech.
2026-02-18 08:18:14 +00:00
parent b63612c5ae
commit 2472af790b
30 changed files with 273 additions and 33 deletions
@@ -0,0 +1,82 @@
+# Replace Intro & Dashboard Backgrounds
+
+To change the intro splash and dashboard tab backgrounds **without touching any code**, overwrite these files with your own assets. Use the exact names and locations below.
+
+**Location:** All images go in `neode-ui/public/assets/img/`  
+**Format:** JPG recommended. Portrait or landscape; they use `background-size: cover` and `center center`.
+
+---
+
+## Intro Background
+
+| Filename | Used for |
+|----------|----------|
+| **`bg-intro.jpg`** | Intro splash (alien typing + video poster + fallback), Dashboard default |
+
+---
+
+## Intro Video
+
+| Filename | Where | Used for |
+|----------|-------|----------|
+| **`video-intro.mp4`** | `neode-ui/public/assets/video/` | Welcome Noderunner + logo, onboarding, login |
+
+**Format:** MP4 (H.264). Keep under ~5MB for web. See `VIDEO_COMPRESSION_GUIDE.md` for optimization.
+
+---
+
+## Dashboard Tab Backgrounds
+
+| Filename | Tab |
+|----------|-----|
+| **`bg-home.jpg`** | Home |
+| **`bg-web5.jpg`** | Web5 |
+| **`bg-network.jpg`** | Server / Network |
+| **`bg-settings.jpg`** | Settings |
+| **`bg-myapps.jpg`** | My Apps |
+| **`bg-appstore.jpg`** | App Store / Marketplace |
+| **`bg-cloud.jpg`** | Cloud |
+| **`bg-intro.jpg`** | Default (also intro) |
+| **`bg-intro-3.jpg`** | Alternate layer during transitions |
+
+---
+
+## Intro Flow Backgrounds (onboarding)
+
+| Filename | Used for |
+|----------|----------|
+| **`bg-intro-1.jpg`** | Onboarding done, login |
+| **`bg-intro-2.jpg`** | Onboarding verify |
+| **`bg-intro-3.jpg`** | Onboarding path, dashboard transition layer |
+| **`bg-intro-4.jpg`** | Onboarding options |
+| **`bg-intro-5.jpg`** | Onboarding did |
+| **`bg-intro-6.jpg`** | Onboarding backup |
+
+---
+
+## Quick Reference
+
+| Asset | Full path |
+|-------|-----------|
+| Intro image | `neode-ui/public/assets/img/bg-intro.jpg` |
+| Intro video | `neode-ui/public/assets/video/video-intro.mp4` |
+| Home | `neode-ui/public/assets/img/bg-home.jpg` |
+| Web5 | `neode-ui/public/assets/img/bg-web5.jpg` |
+| Network | `neode-ui/public/assets/img/bg-network.jpg` |
+| Settings | `neode-ui/public/assets/img/bg-settings.jpg` |
+| My Apps | `neode-ui/public/assets/img/bg-myapps.jpg` |
+| App Store | `neode-ui/public/assets/img/bg-appstore.jpg` |
+| Cloud | `neode-ui/public/assets/img/bg-cloud.jpg` |
+| Default | `neode-ui/public/assets/img/bg-intro.jpg` |
+| Transition | `neode-ui/public/assets/img/bg-intro-3.jpg` |
+| Intro 1–6 | `neode-ui/public/assets/img/bg-intro-1.jpg` … `bg-intro-6.jpg` |
+
+---
+
+## Steps to Replace
+
+1. Put your images in `neode-ui/public/assets/img/` with the exact filenames above.
+2. Put your video in `neode-ui/public/assets/video/video-intro.mp4`.
+3. Run `npm run build` (or deploy) so the new assets are included.
+
+No code changes required.
@@ -0,0 +1,23 @@
+# Welcome Noderunner Speech
+
+The intro plays a sci-fi female voice saying "Welcome Noderunner" as the text types in.
+
+## Generate the audio (ElevenLabs)
+
+1. Get a free API key at [elevenlabs.io](https://elevenlabs.io) (free tier: 10k chars/month)
+2. Run:
+   ```bash
+   cd neode-ui
+   ELEVENLABS_API_KEY=your_key npm run generate-welcome-speech
+   ```
+3. Commit `welcome-noderunner.mp3` to the repo
+
+## Custom sci-fi voice
+
+Browse [ElevenLabs Voice Library](https://elevenlabs.io/voice-library) and search for "sci-fi", "AI", "robot", or "character". Copy the voice ID from the URL or voice settings, then:
+
+```bash
+ELEVENLABS_API_KEY=your_key ELEVENLABS_VOICE_ID=voice_id npm run generate-welcome-speech
+```
+
+Recommended: "The Digital Oracle", "The Friendly AI Assistant", or similar character voices from the Synthetic/Character categories.