@exaudeus/workrail 0.6.1-beta.8 → 0.7.0

package/web/BACKGROUND_ENHANCEMENTS.md

@@ -1,419 +0,0 @@
-# 🎨 Background Enhancement Implementation
-
-## Overview
-This document describes the three new background enhancements added to Workrail's design system.
-
----
-
-## ✅ 1. Animated Grain Texture
-
-**File:** `assets/background-effects.css`
-
-### What It Does
-Adds a subtle film grain texture that slowly moves across the screen, creating organic richness and depth.
-
-### Technical Details
-- **Opacity:** 2.5% (very subtle)
-- **Pattern:** Repeating gradient lines creating grain effect
-- **Animation:** 8-second loop with 10 steps (jumpy/film-like)
-- **Blend Mode:** Overlay for natural integration
-- **Z-index:** -1 (behind everything)
-
-### Visual Effect
-- Adds tactile texture without being distracting
-- Creates a "premium" film-like quality
-- Moves slowly to add subtle life
-
-### CSS Snippet
-```css
-.bg-grain {
-  opacity: 0.025;
-  animation: grain 8s steps(10) infinite;
-  mix-blend-mode: overlay;
-}
-```
-
----
-
-## ✅ 2. Time-of-Day Theming
-
-**File:** `assets/time-of-day-theme.js`
-
-### What It Does
-Automatically adjusts orb colors based on the current time of day to create appropriate mood.
-
-### Time Periods
-
-#### 🌅 Morning (6 AM - 11 AM)
-**Mood:** Energetic, warm, optimistic
-- **Colors:** Orange, yellow, pink tones
-- **Purpose:** Wake up, energize
-
-#### ☀️ Afternoon (12 PM - 5 PM)
-**Mood:** Balanced, productive, neutral
-- **Colors:** Default palette (cyan, purple, pink, orange, green)
-- **Purpose:** Maintain focus
-
-#### 🌆 Evening (6 PM - 11 PM)
-**Mood:** Cool, calm, winding down
-- **Colors:** Blue, purple, cyan, indigo
-- **Purpose:** Relax, transition
-
-#### 🌙 Night (12 AM - 5 AM)
-**Mood:** Deep, focused, contemplative
-- **Colors:** Indigo, purple, deep blue
-- **Purpose:** Late-night focus work
-
-### Technical Details
-- **Auto-detection:** Checks system time
-- **Smooth transitions:** 3-second fade between themes
-- **Check interval:** Every 10 minutes
-- **No flicker:** Initial load has no transition
-
-### API
-```javascript
-// Get current theme
-WorkrailTimeTheme.getCurrentTheme()
-
-// Force a specific theme
-WorkrailTimeTheme.forceTheme('evening')
-
-// Available themes
-WorkrailTimeTheme.themes // { morning, afternoon, evening, night }
-```
-
----
-
-## ✅ 3. Scroll Parallax
-
-**File:** `assets/scroll-parallax.js`
-
-### What It Does
-Creates subtle 3D depth by moving background layers at different speeds when scrolling.
-
-### Layer Speeds (slower = further back)
-- **Orbs:** 0.15x scroll speed (furthest back, slowest)
-- **Rails:** 0.25x scroll speed
-- **Nodes:** 0.35x scroll speed
-- **Particles:** 0.5x scroll speed (closest, fastest)
-
-### Technical Details
-- **Smooth interpolation:** Uses lerp (0.1 smoothness) for buttery scrolling
-- **RAF-based:** 60fps animation loop
-- **Passive listener:** Doesn't block scroll performance
-- **Auto-caching:** Re-queries elements on demand
-
-### Visual Effect
-- Adds **perceived depth** to flat background
-- Creates **3D space** illusion
-- **Very subtle** - not overwhelming
-- Enhances immersion
-
-### API
-```javascript
-// Enable/disable
-WorkrailParallax.enable()
-WorkrailParallax.disable()
-
-// Refresh elements after DOM changes
-WorkrailParallax.refresh()
-
-// Adjust speeds
-WorkrailParallax.setConfig({
-  layers: {
-    orbs: { speed: 0.2 }  // Make orbs move faster
-  }
-})
-
-// Check status
-WorkrailParallax.isEnabled()
-```
-
----
-
-## 🎯 Combined Effect
-
-When all three enhancements work together:
-
-1. **Grain texture** adds organic richness
-2. **Time-of-day colors** set the mood
-3. **Scroll parallax** adds 3D depth
-
-Result: A **living, breathing, context-aware background** that feels premium and thoughtful.
-
----
-
-## 🔧 Configuration
-
-### Disable Features Individually
-
-#### Disable Grain
-```javascript
-document.querySelector('.bg-grain').style.display = 'none';
-```
-
-#### Disable Time Theming
-```javascript
-WorkrailTimeTheme.forceTheme('afternoon'); // Lock to one theme
-```
-
-#### Disable Parallax
-```javascript
-WorkrailParallax.disable();
-```
-
----
-
-## 📊 Performance Impact
-
-- **Grain:** Minimal (CSS only)
-- **Time Theming:** Negligible (checks every 10min)
-- **Parallax:** Low (RAF + passive scroll, ~1-2% CPU)
-
-**Overall:** Very performant. Uses `will-change`, GPU acceleration, and passive listeners.
-
----
-
-## 🎨 Design Philosophy
-
-These enhancements follow Workrail's "Delightfully Engaging" design philosophy:
-
-- **Grain:** Adds richness without distraction
-- **Time Theming:** Shows intelligence and context awareness
-- **Parallax:** Creates immersion through subtle depth
-
-All three are **purposeful** additions that enhance the experience without overwhelming it.
-
----
-
-## 🚀 Future Ideas
-
-Potential enhancements to explore:
-
-1. **Weather-based theming** - Adjust colors based on user's weather
-2. **User preference override** - Let users force a theme
-3. **Seasonal variations** - Winter/spring/summer/fall palettes
-4. **Mouse-reactive parallax** - Move layers based on cursor position
-5. **Workflow-specific themes** - Different colors per workflow type
-
----
-
-## 📝 Notes
-
-- All scripts auto-initialize on page load
-- Scripts expose global APIs for customization
-- All effects can be disabled individually
-- Performance optimized with RAF and passive listeners
-- Mobile-friendly (reduced on small screens via media queries)
-
-
-
-
-## Overview
-This document describes the three new background enhancements added to Workrail's design system.
-
----
-
-## ✅ 1. Animated Grain Texture
-
-**File:** `assets/background-effects.css`
-
-### What It Does
-Adds a subtle film grain texture that slowly moves across the screen, creating organic richness and depth.
-
-### Technical Details
-- **Opacity:** 2.5% (very subtle)
-- **Pattern:** Repeating gradient lines creating grain effect
-- **Animation:** 8-second loop with 10 steps (jumpy/film-like)
-- **Blend Mode:** Overlay for natural integration
-- **Z-index:** -1 (behind everything)
-
-### Visual Effect
-- Adds tactile texture without being distracting
-- Creates a "premium" film-like quality
-- Moves slowly to add subtle life
-
-### CSS Snippet
-```css
-.bg-grain {
-  opacity: 0.025;
-  animation: grain 8s steps(10) infinite;
-  mix-blend-mode: overlay;
-}
-```
-
----
-
-## ✅ 2. Time-of-Day Theming
-
-**File:** `assets/time-of-day-theme.js`
-
-### What It Does
-Automatically adjusts orb colors based on the current time of day to create appropriate mood.
-
-### Time Periods
-
-#### 🌅 Morning (6 AM - 11 AM)
-**Mood:** Energetic, warm, optimistic
-- **Colors:** Orange, yellow, pink tones
-- **Purpose:** Wake up, energize
-
-#### ☀️ Afternoon (12 PM - 5 PM)
-**Mood:** Balanced, productive, neutral
-- **Colors:** Default palette (cyan, purple, pink, orange, green)
-- **Purpose:** Maintain focus
-
-#### 🌆 Evening (6 PM - 11 PM)
-**Mood:** Cool, calm, winding down
-- **Colors:** Blue, purple, cyan, indigo
-- **Purpose:** Relax, transition
-
-#### 🌙 Night (12 AM - 5 AM)
-**Mood:** Deep, focused, contemplative
-- **Colors:** Indigo, purple, deep blue
-- **Purpose:** Late-night focus work
-
-### Technical Details
-- **Auto-detection:** Checks system time
-- **Smooth transitions:** 3-second fade between themes
-- **Check interval:** Every 10 minutes
-- **No flicker:** Initial load has no transition
-
-### API
-```javascript
-// Get current theme
-WorkrailTimeTheme.getCurrentTheme()
-
-// Force a specific theme
-WorkrailTimeTheme.forceTheme('evening')
-
-// Available themes
-WorkrailTimeTheme.themes // { morning, afternoon, evening, night }
-```
-
----
-
-## ✅ 3. Scroll Parallax
-
-**File:** `assets/scroll-parallax.js`
-
-### What It Does
-Creates subtle 3D depth by moving background layers at different speeds when scrolling.
-
-### Layer Speeds (slower = further back)
-- **Orbs:** 0.15x scroll speed (furthest back, slowest)
-- **Rails:** 0.25x scroll speed
-- **Nodes:** 0.35x scroll speed
-- **Particles:** 0.5x scroll speed (closest, fastest)
-
-### Technical Details
-- **Smooth interpolation:** Uses lerp (0.1 smoothness) for buttery scrolling
-- **RAF-based:** 60fps animation loop
-- **Passive listener:** Doesn't block scroll performance
-- **Auto-caching:** Re-queries elements on demand
-
-### Visual Effect
-- Adds **perceived depth** to flat background
-- Creates **3D space** illusion
-- **Very subtle** - not overwhelming
-- Enhances immersion
-
-### API
-```javascript
-// Enable/disable
-WorkrailParallax.enable()
-WorkrailParallax.disable()
-
-// Refresh elements after DOM changes
-WorkrailParallax.refresh()
-
-// Adjust speeds
-WorkrailParallax.setConfig({
-  layers: {
-    orbs: { speed: 0.2 }  // Make orbs move faster
-  }
-})
-
-// Check status
-WorkrailParallax.isEnabled()
-```
-
----
-
-## 🎯 Combined Effect
-
-When all three enhancements work together:
-
-1. **Grain texture** adds organic richness
-2. **Time-of-day colors** set the mood
-3. **Scroll parallax** adds 3D depth
-
-Result: A **living, breathing, context-aware background** that feels premium and thoughtful.
-
----
-
-## 🔧 Configuration
-
-### Disable Features Individually
-
-#### Disable Grain
-```javascript
-document.querySelector('.bg-grain').style.display = 'none';
-```
-
-#### Disable Time Theming
-```javascript
-WorkrailTimeTheme.forceTheme('afternoon'); // Lock to one theme
-```
-
-#### Disable Parallax
-```javascript
-WorkrailParallax.disable();
-```
-
----
-
-## 📊 Performance Impact
-
-- **Grain:** Minimal (CSS only)
-- **Time Theming:** Negligible (checks every 10min)
-- **Parallax:** Low (RAF + passive scroll, ~1-2% CPU)
-
-**Overall:** Very performant. Uses `will-change`, GPU acceleration, and passive listeners.
-
----
-
-## 🎨 Design Philosophy
-
-These enhancements follow Workrail's "Delightfully Engaging" design philosophy:
-
-- **Grain:** Adds richness without distraction
-- **Time Theming:** Shows intelligence and context awareness
-- **Parallax:** Creates immersion through subtle depth
-
-All three are **purposeful** additions that enhance the experience without overwhelming it.
-
----
-
-## 🚀 Future Ideas
-
-Potential enhancements to explore:
-
-1. **Weather-based theming** - Adjust colors based on user's weather
-2. **User preference override** - Let users force a theme
-3. **Seasonal variations** - Winter/spring/summer/fall palettes
-4. **Mouse-reactive parallax** - Move layers based on cursor position
-5. **Workflow-specific themes** - Different colors per workflow type
-
----
-
-## 📝 Notes
-
-- All scripts auto-initialize on page load
-- Scripts expose global APIs for customization
-- All effects can be disabled individually
-- Performance optimized with RAF and passive listeners
-- Mobile-friendly (reduced on small screens via media queries)
-
-
-