1
0

Refactor glow animation to use lerped colors between green and orange

This commit is contained in:
2025-05-26 07:15:16 +02:00
parent e3fda7adba
commit 3d44f9b4db

View File

@@ -159,29 +159,21 @@ window.AnimeCat = class AnimeCat {
]; ];
} }
animateCatGlow(commitCount) { animateCatGlow(commitCount) {
const glow = this.glow; // Glow zwischen grün und orange interpolieren (0-500 Commits)
if (!glow) return; const minColor = [60, 230, 100]; // grün
const maxColor = [255, 100, 0]; // orange
const t = Math.min(commitCount, 500) / 500;
const [r, g, b] = this._lerpColor(minColor, maxColor, t);
// Farbinterpolation je nach Commits: // ... wie gehabt: Größe, Opazität, etc.
function getGlowColor(count) { // Beispiel:
if (count < 10) return [60, 230, 100]; // grün
if (count < 50) return [100, 180, 255]; // blau
if (count < 100) return [180, 120, 255]; // lila
if (count < 500) return [255, 180, 60]; // orange
return [255, 100, 0]; // voll orange
}
const [r, g, b] = getGlowColor(commitCount);
// Skalierung bleibt wie gehabt
const minSize = 80, maxSize = 170; const minSize = 80, maxSize = 170;
const factor = Math.min(commitCount / 500, 1); // jetzt auf 500 skalieren! const size = minSize + t * (maxSize - minSize);
const size = minSize + factor * (maxSize - minSize);
glow.style.width = `${size}px`; this.glow.style.width = `${size}px`;
glow.style.height = `${size}px`; // jetzt immer Kreis! this.glow.style.height = `${size}px`;
glow.style.opacity = 0.25 + 0.65 * factor; this.glow.style.opacity = 0.25 + 0.65 * t;
glow.style.background = `radial-gradient(circle, rgba(${r},${g},${b},0.9) 0%, rgba(${r},${g},${b},0.13) 65%, rgba(0,0,0,0) 100%)`; this.glow.style.background = `radial-gradient(circle, rgba(${r},${g},${b},0.9) 0%, rgba(${r},${g},${b},0.13) 65%, rgba(0,0,0,0) 100%)`;
} }
// Bubble-Position absolut anpassen, wenn detached // Bubble-Position absolut anpassen, wenn detached