feat: Add glitch on album covers

assets/scss/5-modules/glitch.scss

@@ -23,3 +23,62 @@
 .glitch--hover:hover:nth-child(2)::before {
   animation-delay: .3s;
 }
+
+.coverGlitch {
+  animation: coverTransform 2.5s steps(10) infinite, coverGlitch 3.2s infinite;
+}
+
+.coverGlitchSimpleHover:hover {
+  animation: coverGlitch 3.2s infinite;
+}
+
+.coverGlitch-svgFilter {
+  position: absolute;
+  visibility: hidden;
+  width: .1rem;
+  height: .1rem;
+}
+
+@keyframes coverGlitch {
+  45% {
+    filter: none;
+  }
+  46% {
+    filter: url(#dist-01);
+  }
+  47% {
+    filter: url(#dist-02);
+  }
+  48% {
+    filter: url(#dist-03);
+  }
+  50% {
+    filter: none;
+  }
+  95% {
+    filter: none;
+  }
+  96% {
+    filter: url(#dist-02);
+  }
+  97% {
+    filter: url(#dist-04);
+  }
+}
+@keyframes coverTransform {
+  0% {
+    transform: translate(-1%, -1%) scale(1.005);
+  }
+  1% {
+    transform: none;
+  }
+  88% {
+    transform: none;
+  }
+  89% {
+    transform: translate(1%, 2%) scale(1.005);
+  }
+  90% {
+    transform: none;
+  }
+}

assets/scss/8-rwd/_rwd-reduced-motion.scss

@@ -21,4 +21,9 @@
   .catalog-item__content:focus .catalog-item__visual {
     transform: none;
   }
+
+  .coverGlitch,
+  .coverGlitchSimpleHover:hover {
+    animation: none;
+  }
 }

layouts/_default/single.html

@@ -38,7 +38,7 @@
           <source srcset="{{ $coverSmall.Permalink }} 1x, {{ $coverMedium.Permalink }} 2x" media="(max-width: 647px)">
           <source srcset="{{ $coverMedium.Permalink }} 1x, {{ $coverBig.Permalink }} 2x" media="(min-width: 647px)">
           <img
-            class="album-cover__visual"
+            class="album-cover__visual coverGlitch"
             width="500"
             height="500"
             style="background-image: url(data:{{ $placeholder.MediaType }};base64,{{ $placeholder.Content | base64Encode }});"
@@ -105,5 +105,8 @@
         </div>
     </div>
   </div>
+
+  {{ partial "cover-glitch-svg-filter" .}}
+
 </main>
 {{ end }}

layouts/index.html

@@ -44,7 +44,7 @@
                 <h2 class="catalog-item__album">{{ .Title }}</h2>
                 <div class="catalog-item__artist">by {{ .Params.artist }}</div>
                   <img
-                  class="catalog-item__visual"
+                  class="catalog-item__visual coverGlitchSimpleHover"
                   width="320"
                   height="320"
                   style="background-image: url(data:{{ $placeholder.MediaType }};base64,{{ $placeholder.Content | base64Encode }});"
@@ -75,4 +75,7 @@
       </section>
     {{ end }}
   </main>
+
+  {{ partial "cover-glitch-svg-filter" .}}
+
 {{ end }}

layouts/partials/cover-glitch-svg-filter.html

@@ -0,0 +1,39 @@
+<!-- Svg filter -->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="coverGlitch-svgFilter">
+  <defs>
+    <filter id="dist-01">
+      <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="8" result="noise" seed="0"/>
+      <feConvolveMatrix in="noise" order="3" result="snoise"
+      kernelMatrix="
+         0  -1   0
+        -1   5  -1
+         0  -1   0
+      "/>
+      <feDisplacementMap id="displacement" in="SourceGraphic" in2="snoise" scale="6" />
+    </filter>
+    <filter id="dist-02">
+      <feTurbulence id="turbulence" baseFrequency="0.2" numOctaves="8" result="noise" seed="1"/>
+      <feConvolveMatrix in="noise" order="3" result="snoise"
+      kernelMatrix="
+         0  -1   0
+        -1   5  -1
+         0  -1   0
+      "/>
+      <feDisplacementMap id="displacement" in="SourceGraphic" in2="snoise" scale="6" />
+    </filter>
+    <filter id="dist-03">
+      <feTurbulence id="turbulence" baseFrequency="0.01" numOctaves="6" result="noise" seed="2"/>
+      <feConvolveMatrix in="noise" order="3" result="snoise"
+      kernelMatrix="
+         0  -1   0
+        -1   5  -1
+         0  -1   0
+      "/>
+      <feDisplacementMap id="displacement" in="SourceGraphic" in2="snoise" scale="6" />
+    </filter>
+    <filter id="dist-04">
+      <feTurbulence id="turbulence" baseFrequency="0.01" numOctaves="6" result="noise" seed="2" type="FractalNoise"/>
+      <feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="6" />
+    </filter>
+  </defs>
+</svg>