New spoiler filter

index.html

@@ -33,5 +33,36 @@
     <div id="app"></div>
     <div id="modal-container"></div>
     <script type="module" src="/src/main.jsx"></script>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      style="position: absolute; width: 0; height: 0"
+    >
+      <filter id="spoiler" x="-20%" y="-20%" width="140%" height="140%">
+        <feColorMatrix
+          type="matrix"
+          values="0.01 0 0 0 0
+          0.01 0 0 0 0
+          0.01 0 0 0 0
+          0 0 0 .5 0"
+          in="SourceGraphic"
+          result="colormatrix"
+        />
+        <feTurbulence
+          type="turbulence"
+          baseFrequency=".5 .5"
+          numOctaves="10"
+          seed="1"
+          result="turbulence"
+        />
+        <feDisplacementMap
+          in="colormatrix"
+          in2="turbulence"
+          scale="20"
+          xChannelSelector="R"
+          yChannelSelector="B"
+          result="displacementMap"
+        />
+      </filter>
+    </svg>
   </body>
 </html>

src/components/status.css

@@ -178,10 +178,12 @@
   align-items: center;
 }
 .status .content-container.has-spoiler .spoiler ~ * {
-  filter: blur(6px) invert(0.5);
+  /* filter: blur(6px) invert(0.5); */
+  filter: url(#spoiler);
+  transform: translate3d(-5px, -5px, 0);
   pointer-events: none;
-  transition: filter 0.5s;
   user-select: none;
+  contain: layout;
 }
 .status .content-container.has-spoiler .spoiler ~ .content ~ * {
   opacity: 0.5;
@@ -191,6 +193,7 @@
 }
 .status .content-container.show-spoiler .spoiler ~ * {
   filter: none;
+  transform: none;
   pointer-events: auto;
   user-select: auto;
 }