Add cursor-tracking card glare and accent-linked background blobs

- Subtle radial glare follows cursor over card/template-card elements
  using a single document-level mousemove listener (event delegation)
- Ambient background blob colors now derive from the selected accent
  color with hue-shifted variants
- Glare intensity kept very subtle (3.5% dark / 12% light theme)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-12 11:13:55 +03:00
parent 40ea2e3b99
commit ff7b595032
6 changed files with 102 additions and 11 deletions

View File

@@ -289,6 +289,21 @@
return L > 0.36 ? '#1a1a1a' : '#ffffff';
}
function updateBgAnimColors(hex) {
const r = parseInt(hex.slice(1,3),16);
const g = parseInt(hex.slice(3,5),16);
const b = parseInt(hex.slice(5,7),16);
const root = document.documentElement;
const isDark = root.getAttribute('data-theme') !== 'light';
const a = isDark ? 0.12 : 0.10;
// Blob A: accent color
root.style.setProperty('--bg-anim-a', `rgba(${r},${g},${b},${a})`);
// Blob B: hue-shifted ~120° toward blue (swap channels)
root.style.setProperty('--bg-anim-b', `rgba(${b},${r},${g},${a * 0.8})`);
// Blob C: hue-shifted ~240° toward magenta
root.style.setProperty('--bg-anim-c', `rgba(${g},${b},${r},${a * 0.7})`);
}
function applyAccentColor(hex, silent) {
const root = document.documentElement;
root.style.setProperty('--primary-color', hex);
@@ -296,6 +311,7 @@
root.style.setProperty('--primary-text-color', adjustLightness(hex, theme === 'dark' ? 15 : -15));
root.style.setProperty('--primary-hover', adjustLightness(hex, 8));
root.style.setProperty('--primary-contrast', contrastColor(hex));
updateBgAnimColors(hex);
const swatch = document.getElementById('cp-swatch-accent');
if (swatch) swatch.style.background = hex;
const native = document.getElementById('cp-native-accent');
@@ -332,6 +348,7 @@
const savedAccent = localStorage.getItem('accentColor');
if (savedAccent) applyAccentColor(savedAccent, true);
updateBgAnimColors(savedAccent || '#4CAF50');
// Initialize auth state
function updateAuthUI() {