alex/puppy-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Let the confetti fade at its peak instead of falling back

Browse Source 
Drop the descent phase: each emoji now rises to its peak, slows (ease-out) and
fades out at the top rather than arcing back down. Removes the now-unused --endY.
This commit is contained in:
Alexander Heldt
2026-08-01 18:28:40 +00:00
parent e2f99590f1
commit a44c75d2d4
2 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.js
+2 -3
View File
@@ -3213,14 +3213,13 @@
const piece = document.createElement("span");
piece.className = "confetti-piece";
piece.textContent = emoji;
// Launch from a point across the bottom, shoot up to a random peak, drift
// sideways, then arc back down (endY is below the peak) while fading.
// Launch from a point across the bottom, shoot up to a random peak while
// drifting sideways, slowing and fading out as it reaches the top.
const peakY = -Math.round(H * (0.45 + Math.random() * 0.45));
piece.style.left = `${Math.round(W * (0.1 + Math.random() * 0.8))}px`;
piece.style.top = `${H + 20}px`;
piece.style.setProperty("--peakY", `${peakY}px`);
piece.style.setProperty("--dx", `${Math.round((Math.random() * 2 - 1) * W * 0.22)}px`);
piece.style.setProperty("--endY", `${peakY + Math.round(H * 0.35)}px`);
piece.style.setProperty("--rot", `${Math.round(Math.random() * 720 - 360)}deg`);
piece.style.fontSize = `${Math.round(16 + Math.random() * 18)}px`;
piece.style.animationDuration = `${Math.round(1100 + Math.random() * 700)}ms`;