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"); const piece = document.createElement("span");
piece.className = "confetti-piece"; piece.className = "confetti-piece";
piece.textContent = emoji; piece.textContent = emoji;
// Launch from a point across the bottom, shoot up to a random peak, drift // Launch from a point across the bottom, shoot up to a random peak while
// sideways, then arc back down (endY is below the peak) while fading. // drifting sideways, slowing and fading out as it reaches the top.
const peakY = -Math.round(H * (0.45 + Math.random() * 0.45)); 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.left = `${Math.round(W * (0.1 + Math.random() * 0.8))}px`;
piece.style.top = `${H + 20}px`; piece.style.top = `${H + 20}px`;
piece.style.setProperty("--peakY", `${peakY}px`); piece.style.setProperty("--peakY", `${peakY}px`);
piece.style.setProperty("--dx", `${Math.round((Math.random() * 2 - 1) * W * 0.22)}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.setProperty("--rot", `${Math.round(Math.random() * 720 - 360)}deg`);
piece.style.fontSize = `${Math.round(16 + Math.random() * 18)}px`; piece.style.fontSize = `${Math.round(16 + Math.random() * 18)}px`;
piece.style.animationDuration = `${Math.round(1100 + Math.random() * 700)}ms`; piece.style.animationDuration = `${Math.round(1100 + Math.random() * 700)}ms`;
src/style.css
+6 -5
View File
@@ -1367,13 +1367,14 @@ section.collapsed > :not(h2) { display: none; }
per-piece launch delay — no flash before it takes off. */ per-piece launch delay — no flash before it takes off. */
animation-fill-mode: both; animation-fill-mode: both;
} }
/* Launch up from the bottom, rise to a peak (spreading sideways), then arc back /* Launch up from the bottom, rise to a peak while spreading sideways, slowing
down while fading — a firework fountain. Distances come from JS custom props. */ (ease-out) and fading out as it reaches the top — a firework fountain.
Distances come from JS custom props. */
@keyframes potty-firework { @keyframes potty-firework {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(0deg); } 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(0deg); }
8% { opacity: 1; } 10% { opacity: 1; }
60% { opacity: 1; transform: translate(calc(-50% + var(--dx) * 0.7), calc(-50% + var(--peakY))) scale(1) rotate(calc(var(--rot) * 0.7)); } 70% { opacity: 1; }
100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--endY))) scale(0.9) rotate(var(--rot)); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--peakY))) scale(1) rotate(var(--rot)); }
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.confetti-piece { display: none; } .confetti-piece { display: none; }