media controls: material 3 sperm

.config/quickshell/modules/common/widgets/StyledProgressBar.qml

@@ -18,6 +18,14 @@ ProgressBar {
     property real valueBarGap: 4
     property color highlightColor: Appearance?.colors.colPrimary ?? "#685496"
     property color trackColor: Appearance?.m3colors.m3secondaryContainer ?? "#F1D3F9"
+    property bool sperm: false // If true, the progress bar will have a wavy fill effect
+    property real waveAmplitude: sperm ? 3 : 0
+    property real frequency: 8
+    property real spermFps: 60
+
+    Behavior on waveAmplitude {
+        animation: Appearance?.animation.elementMoveEnter.numberAnimation.createObject(this)
+    }
 
     Behavior on value {
         animation: Appearance?.animation.elementMoveEnter.numberAnimation.createObject(this)
@@ -35,11 +43,49 @@ ProgressBar {
         implicitWidth: parent.width
         implicitHeight: parent.height
 
-        Rectangle { // Left progress fill
+        Canvas {
-            width: root.visualPosition * parent.width
+            id: wavyFill
-            height: parent.height
+            anchors {
-            radius: Appearance?.rounding.full ?? 9999
+                left: parent.left
-            color: root.highlightColor
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            height: parent.height * 6
+            onPaint: {
+                var ctx = getContext("2d");
+                ctx.clearRect(0, 0, width, height);
+
+                var progress = root.visualPosition;
+                var fillWidth = progress * width;
+                var amplitude = root.waveAmplitude
+                var frequency = root.frequency;
+                var phase = Date.now() / 400.0;
+                var centerY = height / 2;
+
+                ctx.beginPath();
+                for (var x = 0; x <= fillWidth; x += 1) {
+                    var waveY = centerY + amplitude * Math.sin(frequency * 2 * Math.PI * x / width + phase);
+                    if (x === 0)
+                        ctx.moveTo(x, waveY);
+                    else
+                        ctx.lineTo(x, waveY);
+                }
+                ctx.strokeStyle = root.highlightColor;
+                ctx.lineWidth = parent.height;
+                ctx.lineCap = "round";
+                ctx.stroke();
+            }
+            Connections {
+                target: root
+                function onValueChanged() { wavyFill.requestPaint(); }
+                function onHighlightColorChanged() { wavyFill.requestPaint(); }
+            }
+            Timer {
+                interval: 1000 / root.spermFps
+                running: root.sperm
+                repeat: root.sperm
+                onTriggered: wavyFill.requestPaint()
+            }
         }
         Rectangle { // Right remaining part fill
             anchors.right: parent.right

.config/quickshell/modules/mediaControls/PlayerControl.qml

@@ -259,6 +259,7 @@ Item { // Player instance
                                 highlightColor: blendedColors.colPrimary
                                 trackColor: blendedColors.colSecondaryContainer
                                 value: playerController.player?.position / playerController.player?.length
+                                sperm: playerController.player?.isPlaying
                             }
                         }
                         TrackChangeButton {