Glitch Hero Text

by kthornbloom

HTML

<div class="bg">

</div>
<div class="hero">

  <a href="#" id="wavy-shopnow">SHOP NOW</a>

  <div class="wrap">
    <div class="wavy-text1">
    BLACK<br>FRIDAY
    </div>

    <div class="wavy-text2">
   BLACK<br>FRIDAY
    </div>

    <div class="wavy-text3">
   BLACK<br>FRIDAY
    </div>

    <div class="wavy-text4">
   BLACK<br>FRIDAY
    </div>
  </div>
  
  

</div>

<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="wave1" x="0" y="0">
      <!-- Generate a smoother turbulence effect -->
      <feTurbulence type="fractalNoise" baseFrequency=".2" numOctaves="1" result="turbulence">
        <!-- Animate the turbulence for the wavy effect -->
        <animate attributeName="baseFrequency" values="0.01; 0.03; 0.01" dur="16s" repeatCount="indefinite" />
      </feTurbulence>
      <!-- Reduce the displacement scale for crisper text -->
      <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="5" />
    </filter>
  </defs>
</svg>



<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="wave2" x="0" y="0">
      <!-- Generate a smoother turbulence effect -->
      <feTurbulence type="fractalNoise" baseFrequency=".2" numOctaves="1" result="turbulence">
        <!-- Animate the turbulence for the wavy effect -->
        <animate attributeName="baseFrequency" values="0.03; 0.06; 0.03" dur="20s" repeatCount="indefinite" />
      </feTurbulence>
      <!-- Reduce the displacement scale for crisper text -->
      <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="20">
    </filter>
  </defs>
</svg>


<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="wave3" x="0" y="0">
      <!-- Generate a smoother turbulence effect -->
      <feTurbulence type="fractalNoise" baseFrequency=".2" numOctaves="1" result="turbulence">
        <!-- Animate the turbulence for the wavy effect -->
        <animate...

SCSS

@import url(//fonts.googleapis.com/css?family=Oswald:400,700,300);

.bg {
  background-image: url(https://images.unsplash.com/photo-1639746292626-690a884030b5?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: .6;
}

.hero {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column-reverse;
}

.wrap {
  line-height: 1em;
  font-size: 150px;
  font-family: sans-serif;
  display: flex;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  > div {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    mix-blend-mode: screen;
    font-family: Oswald;
    text-align: center;
    transition: opacity .05s, transform .3s cubic-bezier(0.250, 0.460, 0.450, 0.940);
  }
}

html, body {
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100dvh;
  background: #000;
  overflow: hidden;
}

.wavy-text1 {
  color: rgb(0,255,0);
  filter: url(#wave1) blur(1px); 
}

.wavy-text2 {
  color: rgb(255,0,0);
  filter: url(#wave2) blur(1px); 
}

.wavy-text3 {
  color: rgb(0,0,255);
  filter: url(#wave3) blur(1px); 
}

div.wavy-text4 {
  color: #fff;
  mix-blend-mode: initial;
  opacity: .9;
  position: relative;
}

@keyframes animateTurbulence {
  0% { filter: url(#wave); }
  100% { filter: url(#wave); }
}

#wavy-shopnow {
  background: none;
  color: #fff;
  border-radius: 50px;
  box-shadow: 0 0 0 3px #fff;
  font-family: sans-serif;
  padding: 1rem 2rem;
  text-decoration: none;
  font-weight: bold;
  margin-top: 1em;
  position: relative;
  z-index: 10;
  &:hover {
    background: #000;
    & + .wrap {
      .wavy-text1 {
      }
      .wavy-text2 {
       transform: translate(20px, -20px);
      ...