andrew
89eedf5522
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.
383 lines
9.9 KiB
Markdown
383 lines
9.9 KiB
Markdown
# 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." ✨
|