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

Make the pee/poo confetti a bottom-up fireworks fountain

Browse Source 
Rework the effect: instead of a small burst from the tapped button, 30 emoji
launch from across the bottom of the screen, rise to random peaks while
drifting sideways, then arc back down and fade — staggered launches and varied
speed/size/rotation for a fuller, firework feel. Still pointer-events:none,
self-removing, and gated by the Settings toggle and reduced-motion.
This commit is contained in:
Alexander Heldt
2026-08-01 18:24:33 +00:00
parent 52c50c97b1
commit e2f99590f1
3 changed files with 30 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/style.css
+12 -11
View File
@@ -1361,18 +1361,19 @@ section.collapsed > :not(h2) { display: none; }
position: absolute;
line-height: 1;
will-change: transform, opacity;
animation-name: potty-burst;
animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1);
animation-fill-mode: forwards;
animation-name: potty-firework;
animation-timing-function: ease-out;
/* `both` so the 0% state (invisible, at the bottom) also applies during the
per-piece launch delay — no flash before it takes off. */
animation-fill-mode: both;
}
@keyframes potty-burst {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(0deg); }
12% { opacity: 1; }
100% {
opacity: 0;
/* fly out to (dx, dy) then keep falling (gravity) */
transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 150px)) scale(1) rotate(var(--rot));
}
/* Launch up from the bottom, rise to a peak (spreading sideways), then arc back
down while fading — a firework fountain. Distances come from JS custom props. */
@keyframes potty-firework {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(0deg); }
8% { 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)); }
100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--endY))) scale(0.9) rotate(var(--rot)); }
}
@media (prefers-reduced-motion: reduce) {
.confetti-piece { display: none; }