diff --git a/src/App.css b/src/App.css
index 0c2fa3e..04f3a62 100644
--- a/src/App.css
+++ b/src/App.css
@@ -7,6 +7,11 @@ body {
   height: 100%;
   font-family: system-ui;
 }
+:root {
+  --ring-animation-period: 0.8;
+  /* Default value, can be overridden in JS. */
+  --ringtone-bpm: calc(60 / var(--ring-animation-period));
+}
 
 @keyframes pulse-green {
   0% {
@@ -58,10 +63,19 @@ body {
   }
 }
 .acceptCallButton {
+  /* Fallback in case the browser doesn't support CSS variables. */
   animation: infinite 1.6s pulse-green;
+
+  --base-animation-period: calc(60s / var(--ringtone-bpm));
+  animation: infinite calc(2 * var(--base-animation-period)) pulse-green;
 }
 .acceptCallButton > * {
+  /* Fallback in case the browser doesn't support CSS variables. */
+  animation: infinite linear 0.8s ringing;
+
   /* Apply this one to the another element,
   so that the `transform`s from the two animations don't override each other. */
-  animation: infinite linear 0.8s ringing;
+  /* Let's not make this depend on `--ringtone-bpm` because it looks ugly
+  when it's too fast or too slow. */
+  animation: infinite linear calc(var(--ring-animation-period) * 1s) ringing;
 }
diff --git a/src/App.tsx b/src/App.tsx
index 7fbb427..7c80da0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -16,6 +16,12 @@ import MaterialSymbolsMicOff from "~icons/material-symbols/mic-off";
 
 import "./App.css";
 
+const search = new URLSearchParams(location.search);
+const ringtoneBpm = search.get("ringtoneBpm");
+if (ringtoneBpm) {
+  document.documentElement.style.setProperty("--ringtone-bpm", ringtoneBpm);
+}
+
 export default function App() {
   const [state, setState] = useState<CallState>(CallsManager.initialState);
   const outVidRef = useRef<HTMLVideoElement | null>(null);