New spoiler filter

This commit is contained in:
Lim Chee Aun 2022-12-24 16:51:19 +08:00
parent d6421972df
commit c6b9e3fc78
2 changed files with 36 additions and 2 deletions

View file

@ -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>

View file

@ -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;
}