docs: new icon and screenshots of the new animation

README.md

@@ -22,13 +22,17 @@
 </p>
 
 <p align="center">
-  <img src="res/screenshots/bubble.png" alt="The bubble above the lock screen: asking for a blink, recognised, not recognised" width="720">
+  <img src="res/screenshots/unlock.webp" alt="The bubble drops down over the lock screen, the face in it looks around, asks for a blink, and two green rings spin and land around a tick" width="480">
+</p>
+
+<p align="center">
+  <img src="res/screenshots/bubble.png" alt="The bubble above the lock screen: looking, recognised, not recognised" width="720">
 </p>
 
 Come back to your locked screen, move the mouse, look at it: a little bubble drops down at the top,
-the face in it looks around, turns into a tick, and you are in. The same for `sudo` in a terminal
-and for the admin password prompts of Plasma, if you want. Everything runs on your machine, and
-your face is stored as numbers, never as a picture.
+the face in it looks around, two green rings spin and land around a tick, and you are in. The same
+for `sudo` in a terminal and for the admin password prompts of Plasma, if you want. Everything runs
+on your machine, and your face is stored as numbers, never as a picture.
 
 The look of the bubble and the photo check are inspired by [Glance](https://github.com/jonnyoo/glance)
 (face unlock for the Mac). The code is written from scratch for Plasma.
@@ -87,6 +91,7 @@ It asks for your password once before it adds the face. After that, lock the scr
 
     Show the bubble at the top                    ON
     Bubble style                                  island with the face
+    Animation speed                               normal
     Bubble for sudo and admin prompts too         ON
 
   Settings marked * are for the whole computer and ask for your password.

res/plasma-face-unlock.svg

@@ -1,15 +1,56 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
   <defs>
-    <linearGradient id="disc" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#5fd0ff"/><stop offset="1" stop-color="#0c62a0"/></linearGradient>
-    <radialGradient id="glow" cx=".35" cy=".25" r=".7"><stop offset="0" stop-color="#ffffff" stop-opacity=".28"/><stop offset="1" stop-color="#ffffff" stop-opacity="0"/></radialGradient>
-    <filter id="soft" x="-20%" y="-20%" width="140%" height="150%"><feDropShadow dx="0" dy="10" stdDeviation="12" flood-color="#04213a" flood-opacity=".35"/></filter>
+    <!-- the lock screen: the wallpaper from the screenshots -->
+    <linearGradient id="wall" x1="0.15" y1="0" x2="0.85" y2="1">
+      <stop offset="0" stop-color="#1b2a66"/>
+      <stop offset="0.55" stop-color="#4a2a7a"/>
+      <stop offset="1" stop-color="#b8456f"/>
+    </linearGradient>
+    <radialGradient id="blue" cx="0.85" cy="0.1" r="0.6">
+      <stop offset="0" stop-color="#4f86ff" stop-opacity="0.75"/>
+      <stop offset="1" stop-color="#4f86ff" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="pink" cx="0.08" cy="0.95" r="0.62">
+      <stop offset="0" stop-color="#ff6a95" stop-opacity="0.7"/>
+      <stop offset="1" stop-color="#ff6a95" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="sheen" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#ffffff" stop-opacity="0.16"/>
+      <stop offset="0.5" stop-color="#ffffff" stop-opacity="0"/>
+    </linearGradient>
+    <!-- the island -->
+    <linearGradient id="island" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#15161a"/>
+      <stop offset="1" stop-color="#000000"/>
+    </linearGradient>
+    <linearGradient id="glyph" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="100">
+      <stop offset="0" stop-color="#ffffff"/>
+      <stop offset="1" stop-color="#dbe6f5"/>
+    </linearGradient>
+    <clipPath id="tile"><rect x="24" y="24" width="464" height="464" rx="112"/></clipPath>
+    <filter id="tileShadow" x="-10%" y="-10%" width="120%" height="125%">
+      <feDropShadow dx="0" dy="8" stdDeviation="10" flood-color="#0b0f2a" flood-opacity="0.35"/>
+    </filter>
+    <filter id="islandShadow" x="-25%" y="-25%" width="150%" height="160%">
+      <feDropShadow dx="0" dy="14" stdDeviation="18" flood-color="#000000" flood-opacity="0.45"/>
+    </filter>
   </defs>
-  <g filter="url(#soft)">
-    <circle cx="256" cy="246" r="200" fill="url(#disc)"/>
-    <circle cx="256" cy="246" r="200" fill="url(#glow)"/>
+
+  <!-- the tile -->
+  <g filter="url(#tileShadow)">
+    <rect x="24" y="24" width="464" height="464" rx="112" fill="url(#wall)"/>
   </g>
-  <!-- the face from the bubble: four brackets, two eyes, a nose, a smile -->
-  <g transform="translate(136 126) scale(2.4)" fill="none" stroke="#ffffff" stroke-width="5.8" stroke-linecap="round" stroke-linejoin="round">
+  <g clip-path="url(#tile)">
+    <rect x="24" y="24" width="464" height="464" fill="url(#blue)"/>
+    <rect x="24" y="24" width="464" height="464" fill="url(#pink)"/>
+    <rect x="24" y="24" width="464" height="464" fill="url(#sheen)"/>
+  </g>
+  <rect x="25" y="25" width="462" height="462" rx="111" fill="none" stroke="#ffffff" stroke-opacity="0.14" stroke-width="2"/>
+
+  <!-- the bubble, and the face in it -->
+  <rect x="98" y="92" width="316" height="316" rx="92" fill="url(#island)" filter="url(#islandShadow)"/>
+  <rect x="99" y="93" width="314" height="314" rx="91" fill="none" stroke="#ffffff" stroke-opacity="0.07" stroke-width="2"/>
+  <g transform="translate(155 149) scale(2.02)" fill="none" stroke="url(#glyph)" stroke-width="6.4" stroke-linecap="round" stroke-linejoin="round">
     <path d="M6 30 V19 Q6 6 19 6 H30"/>
     <path d="M70 6 H81 Q94 6 94 19 V30"/>
     <path d="M94 70 V81 Q94 94 81 94 H70"/>