From c6b9e3fc78d4c22a5e04f82da05d05d8a203822a Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 24 Dec 2022 16:51:19 +0800
Subject: [PATCH] New spoiler filter

---
 index.html                | 31 +++++++++++++++++++++++++++++++
 src/components/status.css |  7 +++++--
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 3581003a..08a98758 100644
--- a/index.html
+++ b/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>
diff --git a/src/components/status.css b/src/components/status.css
index 19595c4f..d45913f4 100644
--- a/src/components/status.css
+++ b/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;
 }