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

Add flips to seeds and randomize firefly paths

Browse Source
This commit is contained in:
chris 2025-12-10 15:59:43 -05:00
parent 9cd43d8c67
commit 1a593506d3
2 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/app.js
View File

@ -374,6 +374,7 @@ function spawnSeed({ markActive = false, source = 'ambient' } = {}) {
const duration = 14 + Math.random() * 8; // 14–22s const duration = 14 + Math.random() * 8; // 14–22s
const tilt = (Math.random() * 16 + 8) * (Math.random() < 0.5 ? -1 : 1); // +/-8–24deg const tilt = (Math.random() * 16 + 8) * (Math.random() < 0.5 ? -1 : 1); // +/-8–24deg
const sway = 4 + Math.random() * 6; // px const sway = 4 + Math.random() * 6; // px
const flipDur = 5 + Math.random() * 4; // 5–9s
const fromLeft = Math.random() < 0.5; const fromLeft = Math.random() < 0.5;
const start = fromLeft ? '-12vw' : '112vw'; const start = fromLeft ? '-12vw' : '112vw';
const mid = fromLeft ? '30vw' : '-30vw'; const mid = fromLeft ? '30vw' : '-30vw';
@ -383,6 +384,7 @@ function spawnSeed({ markActive = false, source = 'ambient' } = {}) {
wrap.style.setProperty('--seed-duration', `${duration}s`); wrap.style.setProperty('--seed-duration', `${duration}s`);
wrap.style.setProperty('--seed-tilt', `${tilt}deg`); wrap.style.setProperty('--seed-tilt', `${tilt}deg`);
wrap.style.setProperty('--seed-sway', `${sway}px`); wrap.style.setProperty('--seed-sway', `${sway}px`);
wrap.style.setProperty('--seed-flip-duration', `${flipDur}s`);
wrap.style.setProperty('--seed-start', start); wrap.style.setProperty('--seed-start', start);
wrap.style.setProperty('--seed-mid', mid); wrap.style.setProperty('--seed-mid', mid);
wrap.style.setProperty('--seed-end', end); wrap.style.setProperty('--seed-end', end);

12
assets/style.css
View File

@ -571,7 +571,9 @@ button:active { transform: scale(0.97); box-shadow: none; }
opacity: var(--seed-opacity, 0.07); opacity: var(--seed-opacity, 0.07);
mix-blend-mode: screen; mix-blend-mode: screen;
filter: drop-shadow(0 4px 10px rgba(200, 190, 160, 0.55)); filter: drop-shadow(0 4px 10px rgba(200, 190, 160, 0.55));
animation: seedDrift 2.6s ease-in-out infinite alternate, seedFlicker 1.4s ease-in-out infinite alternate; animation: seedDrift 2.6s ease-in-out infinite alternate,
seedFlicker 1.4s ease-in-out infinite alternate,
seedFlip var(--seed-flip-duration, 6s) ease-in-out infinite;
} }
@keyframes fireflyGlide { @keyframes fireflyGlide {
0% { transform: translate3d(var(--fly-start-x, -10vw), var(--fly-start-y, 0), 0) scale(var(--fly-scale, 1)); opacity: 0; } 0% { transform: translate3d(var(--fly-start-x, -10vw), var(--fly-start-y, 0), 0) scale(var(--fly-scale, 1)); opacity: 0; }
@ -609,6 +611,14 @@ button:active { transform: scale(0.97); box-shadow: none; }
50% { opacity: 0.9; filter: drop-shadow(0 4px 8px rgba(200,190,160,0.5)); } 50% { opacity: 0.9; filter: drop-shadow(0 4px 8px rgba(200,190,160,0.5)); }
100% { opacity: 0.7; filter: drop-shadow(0 3px 6px rgba(200,190,160,0.4)); } 100% { opacity: 0.7; filter: drop-shadow(0 3px 6px rgba(200,190,160,0.4)); }
} }
@keyframes seedFlip {
0% { transform: rotate(0deg) scale(1); }
20% { transform: rotate(8deg) scale(1.02); }
40% { transform: rotate(-10deg) scale(0.98); }
60% { transform: rotate(14deg) scale(1.03); }
80% { transform: rotate(-6deg) scale(0.99); }
100% { transform: rotate(0deg) scale(1); }
}
@media (max-width: 768px) { @media (max-width: 768px) {
.footer-bg { .footer-bg {