https://pupwife.com/scripts/effects/bubbles.js

1// 🫧 Bubble trail for Magikarp Buddy 🐟
2let lastBubble = 0;
3const bubbleDelay = 250;
4
5function spawnBubble(x, y) {
6  const bubble = document.createElement("div");
7  bubble.classList.add("bubble");
8
9  const offsetX = (Math.random() - 0.5) * 5;
10  const offsetY = (Math.random() - 0.5) * 5;
11
12  bubble.style.left = `${x + offsetX}px`;
13  bubble.style.top = `${y + offsetY}px`;
14  bubble.style.width = bubble.style.height = Math.random() * 10 + 8 + "px";
15  bubble.style.opacity = 0.8 + Math.random() * 0.2;
16
17  document.body.appendChild(bubble);
18
19  const floatDistance = 40 + Math.random() * 40;
20  bubble.animate(
21    [
22      { transform: `translateY(0) scale(1)`, opacity: 1 },
23      { transform: `translateY(-${floatDistance}px) scale(1.3)`, opacity: 0 }
24    ],
25    {
26      duration: 1500 + Math.random() * 500,
27      easing: "ease-out",
28      fill: "forwards"
29    }
30  );
31
32  setTimeout(() => bubble.remove(), 2000);
33}
34
35// 🐟 Bubble spawner following the fish buddy
36function bubbleTrail() {
37  const fish = document.getElementById("fishBuddy");
38  if (!fish) return;
39
40  const now = Date.now();
41  // Skip bubble spawning if bubbles are disabled via settings (always on by default)
42  if (!window.BUBBLES_DISABLED && now - lastBubble > bubbleDelay) {
43    const rect = fish.getBoundingClientRect();
44    // Spawn from the "tail" side based on facing
45    const x = rect.left + rect.width / 2 + (fish.dataset.facing === "true" ? 12 : -12);
46    const y = rect.top + rect.height * 0.7;
47    spawnBubble(x, y);
48    lastBubble = now;
49  }
50
51  requestAnimationFrame(bubbleTrail);
52}
53
54bubbleTrail();