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

Add tentacles
All checks were successful
On Push Deploy / deploy (push) Successful in 20s
Details

Browse Source
This commit is contained in:
Johnny322
2026-02-10 16:18:05 +01:00
parent 7cea64e8fe
commit 05d6a3a9bc
2 changed files with 59 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/styles.css
View File

@@ -378,12 +378,14 @@ audio.hidden-audio {
height: 96px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #fbd72b, #f58b2b 60%, #1d3b8b);
transform: scale(calc(1 + var(--pulse, 0) * 0.9));
transform: translate(-50%, -50%) scale(calc(1 + var(--pulse, 0) * 0.9));
box-shadow:
0 0 calc(22px + var(--pulse, 0) * 140px) rgba(251, 215, 43, 0.6),
0 0 calc(60px + var(--pulse, 0) * 240px) rgba(61, 214, 255, 0.45);
transition: transform 0.06s ease-out;
position: relative;
position: absolute;
left: 50%;
top: 50%;
z-index: 2;
}
@@ -417,42 +419,39 @@ audio.hidden-audio {
animation: pulseGlow 1.6s ease-in-out infinite;
}
.pulse-rays {
.pulse-tentacles {
position: absolute;
inset: -120px;
border-radius: 50%;
background:
radial-gradient(circle at 50% 50%, hsla(var(--ray-hue, 200), 95%, 72%, 0.35) 0%, transparent 40%),
radial-gradient(circle at 50% 50%, hsla(var(--ray-hue, 200), 90%, 68%, 0.25) 0%, transparent 55%),
radial-gradient(circle at 50% 50%, hsla(var(--ray-hue, 200), 85%, 65%, 0.2) 0%, transparent 68%),
radial-gradient(circle at 50% 50%, hsla(var(--ray-hue, 200), 80%, 60%, 0.16) 0%, transparent 80%),
radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 30%);
opacity: calc(0.18 + var(--ray, 0) * 0.65);
filter: blur(calc(10px - var(--ray, 0) * 4px));
transform: scale(calc(0.85 + var(--ray, 0) * 0.9));
transition: opacity 0.12s ease-out, transform 0.12s ease-out, filter 0.12s ease-out;
mix-blend-mode: screen;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
z-index: 1;
pointer-events: none;
}
.pulse-rays::before,
.pulse-rays::after {
content: '';
.pulse-tentacles .tentacle {
position: absolute;
inset: 8%;
border-radius: 50%;
border: 2px solid hsla(var(--ray-hue, 200), 90%, 70%, 0.25);
opacity: calc(0.1 + var(--ray, 0) * 0.6);
transform: scale(calc(0.7 + var(--ray, 0) * 0.9));
filter: blur(calc(2px + var(--ray, 0) * 2px));
}
.pulse-rays::after {
inset: 20%;
border-width: 3px;
opacity: calc(0.08 + var(--ray, 0) * 0.55);
transform: scale(calc(0.8 + var(--ray, 0) * 1.1));
left: 50%;
top: 50%;
width: 12px;
height: calc(20px + var(--level, 0) * 50px);
background: linear-gradient(
to top,
rgba(0, 0, 0, 0) 0%,
hsla(var(--ray-hue, 200), 90%, 70%, 0.6) 45%,
hsla(var(--ray-hue, 200), 95%, 75%, 0.95) 100%
);
border-radius: 999px;
filter: blur(calc(1.5px - var(--level, 0) * 0.5));
opacity: calc(0.25 + var(--level, 0) * 0.85);
transform-origin: 50% 100%;
transform:
translate(-50%, calc(-20px - var(--level, 0) * 50px))
rotate(calc(var(--index) * 30deg))
scaleX(calc(0.7 + var(--level, 0) * 0.5));
transition: height 0.08s ease-out, opacity 0.08s ease-out, transform 0.08s ease-out, filter 0.08s ease-out;
mix-blend-mode: screen;
}