Add Nebula Shell v0 prototype and redesign

Introduce a working v0 Nebula Shell prototype (Tauri frontend) and redesign docs. Adds a complete frontend under src/ (views: home, lock, library, settings, overlays), core adapters (input, nav, passkey, router, state), global styles and shell guidelines, and view-specific HTML/CSS/JS. Update README with prototype notes, install/run/build instructions and controller testing tips. Update package.json to add dev/build scripts and add @nebulaproject/core as a dependency. Also include a detailed REDESIGN_DOCUMENTATION.md describing the Xbox-inspired horizontal dashboard, component patterns, and developer notes.
2026-02-15 22:52:35 +13:00
parent 0102d06bba
commit 89eedf5522
31 changed files with 9242 additions and 42 deletions
@@ -0,0 +1,382 @@
+# Nebula OS - Xbox Series X Inspired Redesign Documentation
+
+## Overview
+Nebula OS has been redesigned with inspiration from the Xbox Series X dashboard while maintaining its unique space-themed identity. The result is a horizontal, content-first dashboard with large tiles, smooth motion, layered depth, and a premium, console-native feel.
+
+---
+
+## Core Layout Changes
+
+### 1. Home Dashboard Structure
+- **Layout**: Left-aligned horizontal tile grid with smooth scrolling
+- **Tiles**: 4 primary apps (Library, Browser, Settings, Power)
+- **Navigation**: Horizontal controller input (left/right) with smooth transitions
+- **Focus Effects**: 
+  - Tiles scale to 1.06x on focus
+  - Cyan glow and accent bar appears on focused tile
+  - Smooth parallax depth between layers
+
+### 2. Dynamic Background System
+The background now features multiple animated layers for depth and immersion:
+
+#### Gradient Layer
+- Deep navy → midnight blue → subtle purple gradient
+- Animated drift with rotation for dynamic feel
+- Duration: 28s
+- Multiple radial gradients for light sources
+
+#### Starfield Layer
+- Three layers of stars with varying sizes and colors
+- Creates sense of depth and space
+- Slow parallax movement
+- Duration: 45s linear
+
+#### Fog Layer
+- Soft drifting nebula clouds
+- Heavy blur (52px) for ethereal effect
+- Multiple elliptical gradients
+- Duration: 34s
+
+#### Vignette Layer
+- Subtle darkening at edges
+- Focuses attention on center content
+- Static overlay
+
+### 3. Top Bar (Nebula Style)
+- **Left**: "Nebula OS" brand with cyan glow effect
+- **Right**: User avatar (with glow) + system time
+- **Accent Line**: Animated line that moves with focus
+- **Structure**: Flexbox with `.shell-topbar-content` wrapper
+
+### 4. Tile Design
+Tiles now feature Xbox-inspired rectangular design with depth:
+
+#### Visual Layers
+1. **Background**: Layered gradient with soft radial accent
+2. **Content**: Icon, title, and subtitle flexbox layout
+3. **Accent Bar**: Bottom highlight that animates on focus
+4. **Hover Glow**: Radial gradient overlay on focus
+
+#### On Focus Effects
+- Scale: 1.06x transform
+- Border: Cyan outline with glow
+- Shadow: Enhanced depth shadow
+- Text: Subtle translateX(3px) animation
+- Icon: Scale 1.08 + translateY(-2px)
+
+### 5. Controller Navigation Feedback
+- **Focus Transitions**: 180ms smooth animations
+- **Movement**: Animated position changes, not instant jumps
+- **Press Animation**: Scale down to 0.96 then back
+- **Easing**: Custom console-style cubic-bezier curves
+- **Sound Hooks**: Structure in place for UI audio (not implemented)
+
+### 6. Lock Screen Redesign
+A more immersive authentication experience:
+
+#### Time Display
+- Large gradient-filled text (96-160px)
+- Cyan glow shadow
+- Modern weight (760)
+- Gradient from white to light blue
+
+#### PIN Keypad
+- **Design**: Circular buttons (50% border-radius)
+- **Size**: Aspect ratio 1:1, min 92px
+- **Material**: Radial gradient with inner/outer shadows
+- **Focus**: Scale 1.08 with cyan border and glow
+- **Press**: Scale 0.95 feedback
+
+#### PIN Dots
+- Larger design (18px)
+- Cyan border that fills on input
+- Glowing effect when filled
+
+### 7. Settings Page Redesign
+Horizontal category navigation with card-based content:
+
+#### Category Bar
+- Horizontal list at top
+- Active category gets:
+  - Color change to cyan
+  - Bottom accent bar with glow
+  - Scale animation
+- Smooth underline animation
+
+#### Content Panel
+- Large panel with layered background
+- Card-based settings layout
+- Responsive grid (auto-fit)
+- Cards scale 1.04x on focus
+
+### 8. Animation Style
+All animations follow these principles:
+
+#### Easing Functions
+```css
+--nebula-ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1)
+--nebula-ease-console: cubic-bezier(0.19, 0.82, 0.18, 1)
+--nebula-ease-snap: cubic-bezier(0.32, 0.94, 0.18, 1)
+```
+
+#### Timing
+- Fast: 120ms (micro-interactions)
+- Nav: 180ms (focus transitions)
+- Slow: 340ms (page transitions)
+
+#### Performance
+- Use `transform` instead of position changes
+- Avoid heavy shadow stacking
+- GPU-accelerated with `translateZ(0)`
+- `will-change` on focusable elements
+
+---
+
+## Component Breakdown
+
+### TopBar Component
+**Location**: `.shell-topbar`
+
+**Structure**:
+```html
+<header class="shell-topbar">
+  <div class="shell-topbar-content">
+    <p class="shell-brand">Nebula OS</p>
+    <div class="shell-status">
+      <span class="shell-avatar"></span>
+      <p class="shell-time"></p>
+    </div>
+  </div>
+  <div class="shell-accent-line"></div>
+</header>
+```
+
+**Features**:
+- Brand glow effect
+- Avatar with cyan border glow
+- Animated accent line that follows focus
+- Responsive layout
+
+---
+
+### TileRow Component
+**Location**: `.tile-rail`
+
+**Structure**:
+```html
+<section class="tile-rail" data-focus-root>
+  <!-- Tiles go here -->
+</section>
+```
+
+**Features**:
+- Horizontal scroll with hidden scrollbar
+- Smooth scroll behavior
+- Parallax transform on navigation
+- Flexible gap spacing
+
+---
+
+### Tile Component
+**Location**: `.tile.dashboard-tile`
+
+**Variants**:
+- `.tile-large` - Larger featured tile
+- Standard - Default size
+
+**Structure**:
+```html
+<button class="focusable tile dashboard-tile">
+  <div class="tile-content">
+    <span class="tile-icon">📚</span>
+    <div class="tile-text">
+      <p class="tile-label">Title</p>
+      <p class="tile-meta">Subtitle</p>
+    </div>
+  </div>
+  <div class="tile-accent-bar"></div>
+</button>
+```
+
+**States**:
+- Default
+- `.is-focused` - Scale, glow, accent bar
+- `.is-pressed` - Press animation
+
+---
+
+### BackgroundLayer Component
+**Location**: `#nebula-background`
+
+**Layers**:
+1. `.nebula-layer.gradient` - Base gradient
+2. `.nebula-layer.starfield` - Animated stars
+3. `.nebula-layer.fog` - Blurred nebula clouds
+4. `.nebula-layer.vignette` - Edge darkening
+
+**Features**:
+- Independent animations per layer
+- Parallax on navigation
+- Smooth transitions
+
+---
+
+### FocusManager
+**Location**: `.focusable` class
+
+**Features**:
+- Automatic border/shadow on focus
+- Radial gradient ripple effect
+- Press pulse animation
+- Smooth transitions between states
+
+**States**:
+- `.is-focused` - Cyan border, glow, scaled
+- `.is-pressed` - Animation pulse
+
+---
+
+## Design Language
+
+### Colors
+- **Accent**: Nebula cyan (#4fd8ff)
+- **Background**: Deep space blue (#050a17 → #1a1342)
+- **Text**: Off-white (#f2f7ff)
+- **Muted**: Light blue-gray (#a8bdd8)
+
+### Typography
+- **Modern, clean sans-serif** (Segoe UI)
+- **Weights**: 600-760 range for premium feel
+- **Sizes**: Responsive with clamp()
+- **Spacing**: Slightly bold for console readability
+
+### Depth & Layers
+- **Multiple shadow layers** on focus
+- **Inset shadows** for inner depth
+- **Gradient overlays** for material feel
+- **Backdrop blur** for depth separation
+
+### Premium Feel
+- **No flat design** - everything has depth
+- **Smooth animations** throughout
+- **Glow effects** on accents
+- **Inner/outer shadows** for dimensions
+
+---
+
+## Files Modified
+
+### View Files
+- `src/views/home/home.html`
+- `src/views/home/home.js`
+- `src/views/home/home.css`
+- `src/views/lock/lock.html`
+- `src/views/lock/lock.js`
+- `src/views/lock/lock.css`
+- `src/views/settings/settings.html`
+- `src/views/settings/settings.js`
+- `src/views/settings/settings.css`
+- `src/views/library/library.html`
+- `src/views/library/library.js`
+
+### Core Style Files
+- `src/styles/theme.css` - Design tokens
+- `src/styles/base.css` - Background, topbar, animations
+- `src/styles/components.css` - Tiles, focus system
+
+---
+
+## Navigation Grid Changes
+
+### Home View
+- Changed from 3 columns to 4 columns
+- Added Browser tile
+- Updated tile sizing for better proportions
+
+### Settings View
+- 5 horizontal categories (Network, Audio, Display, Storage, System)
+- Card grid with auto-fit responsive layout
+- 2-row navigation (categories + cards)
+
+### Lock Screen
+- 4x3 keypad grid
+- Circular button design
+- Center-focused layout
+
+---
+
+## Performance Optimizations
+
+1. **Transform-based animations** - No layout recalculation
+2. **will-change hints** - GPU acceleration where needed
+3. **Selective backdrop-filter** - Only on depth blur layer
+4. **CSS containment** - Component isolation
+5. **Efficient selectors** - Class-based, minimal nesting
+
+---
+
+## Future Enhancements
+
+### Audio System
+Structure is in place for UI sound hooks:
+- Focus change sounds
+- Press/click sounds
+- Navigation swoosh
+- Error/success tones
+
+### Additional Animations
+- Page slide transitions between views
+- Content fade-in on load
+- Tile stagger animations on home view entry
+
+### Advanced Features
+- Dynamic tile backgrounds (game art)
+- Video backgrounds for featured content
+- Achievement/notification popups
+- Quick resume tiles with screenshots
+
+---
+
+## Console-First Design Principles
+
+1. **Large hit targets** - Easy to navigate with controller
+2. **Clear focus states** - Always visible what's selected
+3. **Smooth motion** - No jarring transitions
+4. **Depth perception** - Layered UI for spatial understanding
+5. **Content first** - Minimal chrome, maximum content
+6. **Premium materials** - Glows, shadows, gradients for quality feel
+
+---
+
+## Developer Notes
+
+### Adding New Tiles
+1. Add button to `.tile-rail` in home.js
+2. Update `data-row` and `data-col` attributes
+3. Update navigation contract cols count
+4. Ensure proper `data-target` attribute
+
+### Adding New Settings Categories
+1. Add button to `.settings-category-bar`
+2. Add to CATEGORIES object in settings.js
+3. Update navigation contract
+4. Create category content panel
+
+### Customizing Animations
+All animation timings are in CSS variables in `theme.css`:
+- `--nebula-duration-fast`
+- `--nebula-duration-nav`
+- `--nebula-duration-slow`
+
+Easing curves are also variables:
+- `--nebula-ease-standard`
+- `--nebula-ease-console`
+- `--nebula-ease-snap`
+
+---
+
+## Conclusion
+
+The redesign transforms Nebula OS into a premium, console-first experience that feels fast, immersive, and modern. The Xbox Series X dashboard inspiration is clear in the horizontal layout, large tiles, and smooth animations, while the space-themed "Nebula" identity is maintained through the cyan accent colors, starfield backgrounds, and cosmic naming.
+
+**Result**: "Xbox Series X dashboard reimagined for a space-themed, controller-first OS." ✨