diff --git a/src/App.vue b/src/App.vue index 2956364..ddff407 100644 --- a/src/App.vue +++ b/src/App.vue @@ -399,8 +399,10 @@ export default { for (let i = highBandStart; i < freq.length; i += 1) highSum += freq[i] const highAvg = highSum / Math.max(1, freq.length - highBandStart) / 255 - const rayTarget = Math.min(1, (lowAvg * 0.6 + highAvg * 0.9) * 1.4) - this.rayLevel = this.rayLevel * 0.7 + rayTarget * 0.3 + const weightedEnergy = lowAvg * 0.4 + highAvg * 0.7 + const compressed = Math.pow(Math.min(1, weightedEnergy * 1.1), 1.8) + const rayTarget = Math.min(1, compressed) + this.rayLevel = this.rayLevel * 0.78 + rayTarget * 0.22 const hueTarget = 180 + highAvg * 120 this.rayHue = this.rayHue * 0.8 + hueTarget * 0.2 this.rafId = requestAnimationFrame(tick) diff --git a/src/styles.css b/src/styles.css index 4234567..6e3c203 100644 --- a/src/styles.css +++ b/src/styles.css @@ -448,28 +448,20 @@ audio.hidden-audio { inset: -20%; border-radius: 50%; background: - conic-gradient( - from 0deg, - hsla(var(--ray-hue, 200), 90%, 70%, 0.3) 0deg, - transparent 30deg, - hsla(var(--ray-hue, 200), 90%, 70%, 0.45) 60deg, - transparent 95deg, - hsla(var(--ray-hue, 200), 90%, 70%, 0.25) 130deg, - transparent 170deg, - hsla(var(--ray-hue, 200), 90%, 70%, 0.35) 210deg, - transparent 250deg, - hsla(var(--ray-hue, 200), 90%, 70%, 0.4) 300deg, - transparent 340deg - ); - opacity: calc(0.1 + var(--ray, 0) * 0.9); - filter: blur(4px); - transform: scale(calc(0.85 + var(--ray, 0) * 0.7)); - transition: opacity 0.12s ease-out, transform 0.12s ease-out; + radial-gradient(circle at 30% 20%, hsla(var(--ray-hue, 200), 90%, 70%, 0.35), transparent 55%), + radial-gradient(circle at 75% 35%, hsla(var(--ray-hue, 200), 90%, 70%, 0.28), transparent 60%), + radial-gradient(circle at 40% 80%, hsla(var(--ray-hue, 200), 90%, 70%, 0.25), transparent 58%), + radial-gradient(circle at 70% 70%, hsla(var(--ray-hue, 200), 90%, 70%, 0.22), transparent 62%), + radial-gradient(circle at 50% 50%, hsla(var(--ray-hue, 200), 90%, 70%, 0.18), transparent 65%); + opacity: calc(0.05 + var(--ray, 0) * 0.55); + filter: blur(calc(8px - var(--ray, 0) * 2px)); + transform: scale(calc(0.9 + var(--ray, 0) * 0.5)); + transition: opacity 0.14s ease-out, transform 0.14s ease-out, filter 0.14s ease-out; mask-image: radial-gradient( circle, rgba(0, 0, 0, 0) 0%, - rgba(0, 0, 0, 0.9) calc(40% + var(--ray, 0) * 20%), - rgba(0, 0, 0, 1) calc(65% + var(--ray, 0) * 25%), + rgba(0, 0, 0, 0.6) calc(35% + var(--ray, 0) * 15%), + rgba(0, 0, 0, 1) calc(60% + var(--ray, 0) * 20%), rgba(0, 0, 0, 0) 100% ); mask-size: 100% 100%;