diff --git a/web/src/components/ClockOverlay.tsx b/web/src/components/ClockOverlay.tsx
index 3abe92e..b0931fe 100644
--- a/web/src/components/ClockOverlay.tsx
+++ b/web/src/components/ClockOverlay.tsx
@@ -19,9 +19,9 @@ import { SKIN } from "../lib/skins";
 import { SHOW_DECORATIVE_ANIMATIONS } from "../lib/theme";
 import { Drift, type DriftField } from "./Drift";
 
-/** Beside the watch only, never behind it: on a 1080p kiosk the watch covers roughly
- * 28-72% of the width, and a bubble rising behind it would drag the watch into every
- * frame the Pi redraws. */
+/** Beside the watch only, never behind it: a bubble rising behind it would drag the
+ * watch into every frame the Pi redraws. On a 1080p kiosk the watch covers roughly
+ * 28-72% of the width when it is alone... */
 const BUBBLES: DriftField = [
   [5, 14, 0.5, 9, 0],
   [12, 22, 0.5, 12, -3],
@@ -33,6 +33,19 @@ const BUBBLES: DriftField = [
   [95, 18, 0.5, 13, -9],
 ];
 
+/** ...and 6-49% when countdown cards share the screen, so then they all rise on the
+ * cards' side. The cards are cheap to redraw (no backdrop blur under `?pi=1`). */
+const BUBBLES_WITH_CARDS: DriftField = [
+  [52, 14, 0.5, 9, 0],
+  [57, 22, 0.5, 12, -3],
+  [64, 10, 0.5, 8, -6],
+  [70, 16, 0.5, 11, -2],
+  [77, 24, 0.5, 14, -5],
+  [84, 12, 0.5, 10, -7],
+  [90, 12, 0.5, 9, -1],
+  [96, 18, 0.5, 13, -9],
+];
+
 /** The four colours every ring of the dial cycles through, starting at 12. */
 const HUES = ["205", "175", "245", "pink"] as const;
 
@@ -62,7 +75,10 @@ export function ClockOverlay({ visible, clock, onClose }: Props) {
       aria-label="Uhr"
     >
       {visible && SHOW_DECORATIVE_ANIMATIONS && (
-        <Drift field={BUBBLES} bubbleColor={(alpha) => `oklch(90% 0.02 var(--hue) / ${alpha})`} />
+        <Drift
+          field={countdowns.length > 0 ? BUBBLES_WITH_CARDS : BUBBLES}
+          bubbleColor={(alpha) => `oklch(90% 0.02 var(--hue) / ${alpha})`}
+        />
       )}
 
       {clock && clock.school_day !== null && <SchoolDayBadge clock={clock} />}