Dynamic Gradients
Gradients that respond to your data.┌─────────────────────────────────────────────────────────────────┐
│ │
│ STATIC vs DYNAMIC │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ STATIC GRADIENT │ │
│ │ │ │
│ │ ████████████████████████████████████████████████ │ │
│ │ Blue ─────────────────────────────────────> Green │ │
│ │ │ │
│ │ Fixed at build time │ │
│ │ Cannot change based on data │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ DYNAMIC GRADIENT │ │
│ │ │ │
│ │ ████▓▓▓▓▒▒▒▒████▓▓▓▓▒▒▒▒████▓▓▓▓▒▒▒▒████ │ │
│ │ ^ ^ ^ ^ ^ │ │
│ │ Agent Agent Agent Agent Agent │ │
│ │ #1 #2 #3 #4 #5 │ │
│ │ │ │
│ │ Generated at runtime from data │ │
│ │ Updates as agents are added/removed │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
Use Cases
┌─────────────────────────────────────────────────────────────────┐
│ │
│ WHEN DYNAMIC GRADIENTS SHINE │
│ │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 1. AGENT COLOR STRIP │
│ ───────────────────── │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ ████████▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒░░░░░░░░████████ │ │
│ │ Agent 1 Agent 2 Agent 3 Agent 4 │ │
│ │ (Orange) (Yellow) (Lime) (Green) │ │
│ └─────────────────────────────────────────────────────────┘ │
│ Each agent has unique color, strip shows all active agents │
│ │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 2. FILE TYPE DISTRIBUTION │
│ ───────────────────────── │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ █████████████████████████░░░░░░░░▒▒▒▒▓▓██ │ │
│ │ .ts (45%) .js (20%) .css .json .md │ │
│ │ (Blue) (Yellow) (15%) (10%) (10%) │ │
│ └─────────────────────────────────────────────────────────┘ │
│ Width proportional to file count │
│ │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 3. THEME-RESPONSIVE GRADIENTS │
│ ───────────────────────────── │
│ │
│ Light Mode: │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ ████████████████████████████████████████████████ │ │
│ │ Lighter colors, lower saturation │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ Dark Mode: │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │ │
│ │ Brighter colors, higher saturation │ │
│ └─────────────────────────────────────────────────────────┘ │
│ Same gradient, adjusted for theme │
│ │
└─────────────────────────────────────────────────────────────────┘
Multi-Stop Distribution
┌─────────────────────────────────────────────────────────────────┐
│ │
│ EVEN DISTRIBUTION (4 colors) │
│ │
│ 0% 33.3% 66.7% 100% │
│ | | | | │
│ v v v v │
│ ┌─────────┬─────────┬─────────┬─────────┐ │
│ │ Color 1 │ Color 2 │ Color 3 │ Color 4 │ │
│ │ (27.5) │ (55) │ (82.5) │ (110) │ │
│ └─────────┴─────────┴─────────┴─────────┘ │
│ │
│ Each color gets equal space │
│ │
├─────────────────────────────────────────────────────────────────┤
│ │
│ WEIGHTED DISTRIBUTION (emphasize center) │
│ │
│ 10% 40% 40% 10% │
│ | | | | │
│ v v v v │
│ ┌──┬───────────────────┬───────────────────┬──┐ │
│ │C1│ C2 │ C3 │C4│ │
│ └──┴───────────────────┴───────────────────┴──┘ │
│ │
│ Center colors take more space │
│ │
└─────────────────────────────────────────────────────────────────┘
Color Wheel Generation
┌─────────────────────────────────────────────────────────────────┐
│ │
│ CONIC GRADIENT (Color Picker Wheel) │
│ │
│ 0 deg (Red) │
│ | │
│ . - - - + - - - . │
│ . ' 30 | 330 ' . │
│ .' | '. │
│ / 60 | 300 \ │
│ / | \ │
│ 90 ───────────────+─────────────── 270 │
│ \ | / │
│ \ 120 | 240 / │
│ '. | .' │
│ ' . 150 | 210 . ' │
│ ' - - - + - - - ' │
│ | │
│ 180 deg │
│ │
│ All segments have EQUAL LIGHTNESS and CHROMA │
│ Creates a perceptually uniform color wheel │
│ │
└─────────────────────────────────────────────────────────────────┘
Performance Tips
┌─────────────────────────────────────────────────────────────────┐
│ │
│ BEST PRACTICES │
│ │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 1. PREFER NATIVE CSS │
│ ───────────────────── │
│ │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ GOOD: Use CSS custom properties │ │
│ │ │ │
│ │ --color-a: oklch(55% 0.15 230); │ │
│ │ --color-b: oklch(55% 0.15 50); │ │
│ │ background: linear-gradient(var(--color-a), var(--b)); │ │
│ │ │ │
│ │ Then update properties with JavaScript: │ │
│ │ element.style.setProperty('--color-a', newColor); │ │
│ │ │ │
│ │ GPU accelerated, automatic caching │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 2. BATCH UPDATES │
│ ───────────────── │
│ │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ BAD: Update one at a time │ │
│ │ │ │
│ │ colors.forEach(c => { │ │
│ │ element.style.background += ... // Many DOM updates │ │
│ │ }); │ │
│ │ │ │
│ ├───────────────────────────────────────────────────────────┤ │
│ │ GOOD: Build once, apply once │ │
│ │ │ │
│ │ const gradient = buildGradient(colors); │ │
│ │ element.style.background = gradient; // One DOM update │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 3. DEBOUNCE RAPID CHANGES │
│ ───────────────────────── │
│ │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ If colors change frequently (e.g., on scroll): │ │
│ │ │ │
│ │ Wait for browser animation frame │ │
│ │ Only update once per frame (16ms) │ │
│ │ Cancel pending updates if new one arrives │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 4. CACHE GENERATED STRINGS │
│ ─────────────────────────── │
│ │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ If same colors appear often: │ │
│ │ │ │
│ │ Store generated gradient strings in a cache │ │
│ │ Key = color values, Value = gradient string │ │
│ │ Avoid regenerating the same gradient │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
Gradient Animation
┌─────────────────────────────────────────────────────────────────┐
│ │
│ ANIMATING GRADIENT HUE │
│ │
│ Frame 1: ████████████████████████████████████████ │
│ Blue (230) ────────────────> Green (330) │
│ │
│ Frame 30: ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
│ Purple (260) ─────────────> Cyan (360) │
│ │
│ Frame 60: ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ │
│ Magenta (290) ────────────> Blue (30) │
│ │
│ The hue offset increases over time, cycling through colors │
│ │
├─────────────────────────────────────────────────────────────────┤
│ │
│ CROSSFADE BETWEEN GRADIENTS │
│ │
│ Since CSS cannot transition between different gradients, │
│ use two layers with opacity animation: │
│ │
│ Layer 1 (Old Gradient): Opacity 1.0 ──────> 0.0 │
│ Layer 2 (New Gradient): Opacity 0.0 ──────> 1.0 │
│ │
│ Result: Smooth crossfade between any two gradients │
│ │
└─────────────────────────────────────────────────────────────────┘
Theme Integration
┌─────────────────────────────────────────────────────────────────┐
│ │
│ ADAPTING TO THEME CHANGES │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ When theme changes: │ │
│ │ │ │
│ │ 1. Detect theme change event │ │
│ │ │ │
│ │ 2. Determine: Light or Dark mode? │ │
│ │ │ │
│ │ 3. Adjust base lightness: │ │
│ │ Dark mode: L = 65% (brighter on dark background) │ │
│ │ Light mode: L = 35% (darker on light background) │ │
│ │ │ │
│ │ 4. Regenerate gradients with new lightness │ │
│ │ │ │
│ │ 5. Apply to elements │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────┐ ┌───────────────────┐ │
│ │ LIGHT MODE │ │ DARK MODE │ │
│ │ │ │ │ │
│ │ ░░░░░░░░░░░░░░░ │ │ ████████████████ │ │
│ │ L=35% (darker) │ │ L=65% (brighter) │ │
│ │ │ │ │ │
│ └───────────────────┘ └───────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
Key Takeaways
┌─────────────────────────────────────────────────────────────────┐
│ │
│ SUMMARY │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 1. Dynamic gradients respond to runtime data │ │
│ │ (agents, files, theme, user preferences) │ │
│ │ │ │
│ │ 2. Use CSS custom properties when possible │ │
│ │ (GPU accelerated, easy updates) │ │
│ │ │ │
│ │ 3. Batch DOM updates for performance │ │
│ │ (build string first, apply once) │ │
│ │ │ │
│ │ 4. Debounce rapid changes │ │
│ │ (once per animation frame) │ │
│ │ │ │
│ │ 5. Crossfade for gradient transitions │ │
│ │ (two layers with opacity animation) │ │
│ │ │ │
│ │ 6. Adjust lightness for theme │ │
│ │ (darker on light, brighter on dark) │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ Dynamic gradients make color responsive to context. │
│ OKLCH/OKLAB ensure transitions stay clean. │
│ │
└─────────────────────────────────────────────────────────────────┘