spo/music-jeopardy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More matter-like stuff
Some checks failed
On Push Deploy / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Johnny322
2026-02-08 15:51:19 +01:00
parent 6e6a3218c8
commit 6a319f0a3e
2 changed files with 15 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.vue
View File

@@ -399,8 +399,10 @@ export default {
for (let i = highBandStart; i < freq.length; i += 1) highSum += freq[i] for (let i = highBandStart; i < freq.length; i += 1) highSum += freq[i]
const highAvg = highSum / Math.max(1, freq.length - highBandStart) / 255 const highAvg = highSum / Math.max(1, freq.length - highBandStart) / 255
const rayTarget = Math.min(1, (lowAvg * 0.6 + highAvg * 0.9) * 1.4) const weightedEnergy = lowAvg * 0.4 + highAvg * 0.7
this.rayLevel = this.rayLevel * 0.7 + rayTarget * 0.3 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 const hueTarget = 180 + highAvg * 120
this.rayHue = this.rayHue * 0.8 + hueTarget * 0.2 this.rayHue = this.rayHue * 0.8 + hueTarget * 0.2
this.rafId = requestAnimationFrame(tick) this.rafId = requestAnimationFrame(tick)

30
src/styles.css
View File

@@ -448,28 +448,20 @@ audio.hidden-audio {
inset: -20%; inset: -20%;
border-radius: 50%; border-radius: 50%;
background: background:
conic-gradient( radial-gradient(circle at 30% 20%, hsla(var(--ray-hue, 200), 90%, 70%, 0.35), transparent 55%),
from 0deg, radial-gradient(circle at 75% 35%, hsla(var(--ray-hue, 200), 90%, 70%, 0.28), transparent 60%),
hsla(var(--ray-hue, 200), 90%, 70%, 0.3) 0deg, radial-gradient(circle at 40% 80%, hsla(var(--ray-hue, 200), 90%, 70%, 0.25), transparent 58%),
transparent 30deg, radial-gradient(circle at 70% 70%, hsla(var(--ray-hue, 200), 90%, 70%, 0.22), transparent 62%),
hsla(var(--ray-hue, 200), 90%, 70%, 0.45) 60deg, radial-gradient(circle at 50% 50%, hsla(var(--ray-hue, 200), 90%, 70%, 0.18), transparent 65%);
transparent 95deg, opacity: calc(0.05 + var(--ray, 0) * 0.55);
hsla(var(--ray-hue, 200), 90%, 70%, 0.25) 130deg, filter: blur(calc(8px - var(--ray, 0) * 2px));
transparent 170deg, transform: scale(calc(0.9 + var(--ray, 0) * 0.5));
hsla(var(--ray-hue, 200), 90%, 70%, 0.35) 210deg, transition: opacity 0.14s ease-out, transform 0.14s ease-out, filter 0.14s ease-out;
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;
mask-image: radial-gradient( mask-image: radial-gradient(
circle, circle,
rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.9) calc(40% + var(--ray, 0) * 20%), rgba(0, 0, 0, 0.6) calc(35% + var(--ray, 0) * 15%),
rgba(0, 0, 0, 1) calc(65% + var(--ray, 0) * 25%), rgba(0, 0, 0, 1) calc(60% + var(--ray, 0) * 20%),
rgba(0, 0, 0, 0) 100% rgba(0, 0, 0, 0) 100%
); );
mask-size: 100% 100%; mask-size: 100% 100%;