Small animation for quickshell lock

dots/.config/quickshell/ii/modules/lock/LockSurface.qml

@@ -101,17 +101,11 @@ MouseArea {
         ToolbarTextField {
     id: passwordBox
     placeholderText: GlobalStates.screenUnlockFailed ? Translation.tr("Incorrect password") : Translation.tr("Enter password")
-
-            // Style
     clip: true
     font.pixelSize: Appearance.font.pixelSize.small
-
-            // Password
     enabled: !root.context.unlockInProgress
     echoMode: TextInput.Password
     inputMethodHints: Qt.ImhSensitiveData
-
-            // Synchronizing (across monitors) and unlocking
     onTextChanged: root.context.currentText = this.text
     onAccepted: root.context.tryUnlock()
     Connections {
@@ -120,12 +114,38 @@ MouseArea {
             passwordBox.text = root.context.currentText;
         }
     }
-
     Keys.onPressed: event => {
         root.context.resetClearTimer();
     }
+
+    // Idk but it work lol
+    property bool isShaking: false
+    function startShake() {
+        shakeAnim.running = false; // reset if running
+        x = 0; // reset position
+        shakeAnim.running = true;
     }
 
+    SequentialAnimation {
+        id: shakeAnim
+        running: false
+        NumberAnimation { target: passwordBox; property: "x"; to: -40; duration: 50 }
+        NumberAnimation { target: passwordBox; property: "x"; to: 40; duration: 50 }
+        NumberAnimation { target: passwordBox; property: "x"; to: -20; duration: 40 }
+        NumberAnimation { target: passwordBox; property: "x"; to: 20; duration: 40 }
+        NumberAnimation { target: passwordBox; property: "x"; to: 0; duration: 30 }
+    }
+
+    Connections {
+        target: GlobalStates
+        function onScreenUnlockFailedChanged() {
+            if (GlobalStates.screenUnlockFailed) {
+                passwordBox.startShake();
+            }
+        }
+    }
+}
+
         ToolbarButton {
             id: confirmButton
             implicitWidth: height