JSFiddle - React, Tailwind, and code Playground

by kinduff

HTML

<div class="wrapper">
  <h1 data-text="RGB">
    RGB
  </h1>
</div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Poppins:900&display=swap');

body {
  font-family: 'Poppins', sans-serif;
  background-color: #000;
}

.wrapper {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

h1 {
  color: #0f0;
  font-size: 84px;
  mix-blend-mode: difference;
  position: relative;
  &:before, &:after {
    position: absolute;
    top: 0;
    left: 0;
    mix-blend-mode: difference;
  }
  &:before {
    content: attr(data-text);
    color: #f00;
    animation: ANIMATE-RED 2000ms infinite;
  }
  &:after {
    content: attr(data-text);
    color: #00f;
    animation: ANIMATE-BLUE 2000ms infinite;
  }
}

@keyframes ANIMATE-RED {
  0% {
    transform: translate(0, 0)
  }

  50% {
    transform: translate(5px, 5px)
  }

  100% {
    transform: translate(0, 0)
  }
}

@keyframes ANIMATE-BLUE {
  0% {
    transform: translate(0, 0)
  }

  50% {
    transform: translate(-5px, -5px)
  }

  100% {
    transform: translate(0, 0)
  }
}