diff --git a/av-sync/src/components/SectorIndicator.svelte b/av-sync/src/components/SectorIndicator.svelte
index fbe1d4d..684cf61 100644
--- a/av-sync/src/components/SectorIndicator.svelte
+++ b/av-sync/src/components/SectorIndicator.svelte
@@ -6,6 +6,7 @@
 	$: center = el?.clientWidth / 2;
 	$: radius = center;
 	let d = '';
+	let circleOpacity = 1;
 
 	$: {
 		const angle = ((frame / fps) * 360) % 360;
@@ -13,10 +14,13 @@
 		const x = center + radius * Math.cos(radians);
 		const y = center + radius * Math.sin(radians);
 		d = `M${center},${center} L${center + radius},${center} A${radius},${radius} 0 ${angle > 180 ? 1 : 0} 1 ${x},${y} Z`;
+
+		const flashFrames = fps / 10;
+		circleOpacity = (flashFrames - (frame % fps)) / flashFrames;
 	}
 </script>
 
-<svg class="indicator" class:sync={frame % fps === 0} bind:this={el}>
+<svg class="indicator" style="--circle-opacity: {circleOpacity}" bind:this={el}>
 	<circle cx={center} cy={center} r={radius}></circle>
 	<path {d}></path>
 </svg>
@@ -28,12 +32,9 @@
 		transform: rotate(-90deg);
 	}
 
-	.indicator:not(.sync) circle {
-		display: none;
-	}
-
 	circle {
 		fill: var(--color-active);
+		opacity: var(--circle-opacity);
 	}
 
 	path {