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:
@@ -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() {
|
||||
|
||||
Reference in New Issue
Block a user