chris/flashCards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stagger dementor circles so darkness builds sequentially

Browse Source
This commit is contained in:
chris 2025-11-20 08:38:13 -05:00
parent 1bcfcc0d16
commit d300660d4f
2 changed files with 26 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app.js
View File

@ -678,6 +678,7 @@
overlay.style.setProperty('--circle-strength', darkness.toFixed(2)); overlay.style.setProperty('--circle-strength', darkness.toFixed(2));
overlay.style.setProperty('--circle-blur', `${blur}px`); overlay.style.setProperty('--circle-blur', `${blur}px`);
overlay.style.setProperty('--vignette-strength', vignette.toFixed(2)); overlay.style.setProperty('--vignette-strength', vignette.toFixed(2));
overlay.style.background = buildDementorBackground(p, size, darkness, vignette);
document.documentElement.style.setProperty('--focus-glow', glow.toFixed(2)); document.documentElement.style.setProperty('--focus-glow', glow.toFixed(2));
} }
@ -689,10 +690,34 @@
overlay.style.setProperty('--circle-strength', '0.25'); overlay.style.setProperty('--circle-strength', '0.25');
overlay.style.setProperty('--circle-blur', '0px'); overlay.style.setProperty('--circle-blur', '0px');
overlay.style.setProperty('--vignette-strength', '0.18'); overlay.style.setProperty('--vignette-strength', '0.18');
overlay.style.background = 'transparent';
document.documentElement.style.setProperty('--focus-glow', '0'); document.documentElement.style.setProperty('--focus-glow', '0');
saveData(); saveData();
} }
function buildDementorBackground(progress, size, strength, vignette) {
const circles = [
{ pos: '0% 12%', s: 1.0 },
{ pos: '100% 12%', s: 1.0 },
{ pos: '0% 88%', s: 1.0 },
{ pos: '100% 88%', s: 1.0 },
{ pos: '0% 50%', s: 1.1 },
{ pos: '100% 50%', s: 1.1 },
{ pos: '50% 0%', s: 1.05 },
{ pos: '50% 100%', s: 1.05 }
];
const activeCount = Math.max(1, Math.min(circles.length, Math.floor(progress * circles.length) + 1));
const gradients = [];
for (let i = 0; i < activeCount; i++) {
const c = circles[i];
gradients.push(
`radial-gradient(circle at ${c.pos}, rgba(0,0,0,${(strength * c.s).toFixed(2)}) 0%, rgba(0,0,0,${(strength * c.s).toFixed(2)}) ${Math.max(size * 0.55, 6)}%, transparent ${size}%)`
);
}
gradients.push(`radial-gradient(circle at 50% 50%, transparent 60%, rgba(0,0,0,${(vignette * 0.35).toFixed(2)}) 78%, rgba(0,0,0,${vignette.toFixed(2)}) 92%, rgba(0,0,0,${(vignette * 1.05).toFixed(2)}) 100%)`);
return gradients.join(',');
}
function positionDementorOverlay() { function positionDementorOverlay() {
const overlay = document.getElementById('dementor-overlay'); const overlay = document.getElementById('dementor-overlay');
const card = document.getElementById('main-card'); const card = document.getElementById('main-card');

11
style.css
View File

@ -129,16 +129,7 @@
--circle-strength: 0.25; --circle-strength: 0.25;
--circle-blur: 0px; --circle-blur: 0px;
--vignette-strength: 0.18; --vignette-strength: 0.18;
background: background: transparent;
radial-gradient(circle at 0% 12%, rgba(0,0,0,var(--circle-strength)) 0%, rgba(0,0,0,var(--circle-strength)) calc(var(--circle-size) * 0.75), transparent var(--circle-size)),
radial-gradient(circle at 100% 12%, rgba(0,0,0,var(--circle-strength)) 0%, rgba(0,0,0,var(--circle-strength)) calc(var(--circle-size) * 0.75), transparent var(--circle-size)),
radial-gradient(circle at 0% 88%, rgba(0,0,0,var(--circle-strength)) 0%, rgba(0,0,0,var(--circle-strength)) calc(var(--circle-size) * 0.75), transparent var(--circle-size)),
radial-gradient(circle at 100% 88%, rgba(0,0,0,var(--circle-strength)) 0%, rgba(0,0,0,var(--circle-strength)) calc(var(--circle-size) * 0.75), transparent var(--circle-size)),
radial-gradient(circle at 0% 50%, rgba(0,0,0,calc(var(--circle-strength) * 1.1)) 0%, rgba(0,0,0,calc(var(--circle-strength) * 1.1)) calc(var(--circle-size) * 0.75), transparent var(--circle-size)),
radial-gradient(circle at 100% 50%, rgba(0,0,0,calc(var(--circle-strength) * 1.1)) 0%, rgba(0,0,0,calc(var(--circle-strength) * 1.1)) calc(var(--circle-size) * 0.75), transparent var(--circle-size)),
radial-gradient(circle at 50% 0%, rgba(0,0,0,calc(var(--circle-strength) * 1.05)) 0%, rgba(0,0,0,calc(var(--circle-strength) * 1.05)) calc(var(--circle-size) * 0.75), transparent var(--circle-size)),
radial-gradient(circle at 50% 100%, rgba(0,0,0,calc(var(--circle-strength) * 1.05)) 0%, rgba(0,0,0,calc(var(--circle-strength) * 1.05)) calc(var(--circle-size) * 0.75), transparent var(--circle-size)),
radial-gradient(circle at 50% 50%, transparent 55%, rgba(0,0,0,calc(var(--vignette-strength) * 0.35)) 74%, rgba(0,0,0,var(--vignette-strength)) 88%, rgba(0,0,0,calc(var(--vignette-strength) * 1.05)) 100%);
opacity: 0; opacity: 0;
filter: blur(var(--circle-blur)); filter: blur(var(--circle-blur));
mix-blend-mode: multiply; mix-blend-mode: multiply;