@use "sass:string";

@import url('https://fonts.googleapis.com/css2?family=Righteous&family=Ubuntu+Mono&display=swap');

​

$str: 'QWERTYUIOPASDFGHJKLZXCVBNMabcdefghigklmnopqrstuvwxyz123456789';

$length: str-length($str);

​

@function randomNum($max, $min: 0, $u: 1) {

    @return ($min + random($max)) * $u;

}

​

@mixin randomLinear($rows: 6, $cols: 8) {

  $bg: null;

  $pos: null;

​

  $px: 100% / ($cols - 1);

  $py: 100% / ($rows - 1);

​

  @for $i from 0 through $rows - 1 {

    @for $j from 0 through $cols - 1 {

      @if ($bg) {

        $bg: $bg + string.unquote(",");  

        $pos: $pos + string.unquote(",");  

      }

      $color: randomColor();

      $bg: $bg + linear-gradient(to right, $color, $color);

      $pos: $pos + string.unquote("#{$j * $px} #{$i * $py}");

    }

  }

  background: {

    image: $bg;

    size: (100% / $cols) (100% / $rows);

    repeat: no-repeat;

    position: $pos;

  }

}

​

@function randomColor() {

    @return rgb(randomNum(205, 50), randomNum(255), randomNum(255));

}

​

@function randomChar() {

    $r: random($length);

    @return str-slice($str, $r, $r);

}

​

@function randomChars($number) {

    $value: '';

​

    @if $number > 0 {

        @for $i from 1 through $number {

            $value: $value + randomChar();

        }

    }

    @return $value;

}

​

body,

html {

    width: 100%;

    height: 100%;

    display: flex;

    background: #000;

    font-family: 'Ubuntu Mono', monospace;

}

​

.g-container {

    position: relative;

    margin: auto;

    width: 300px;

    height: 300px;

    overflow: hidden;

}

​

.g-item  {

    height: 300px;

    color: #fff;

    font-size: 50px;

    line-height: 50px;

    letter-spacing: 25px;

    word-wrap: break-word;

    animation: colorChange 1.5s infinite steps(10);

    cursor: pointer;

    &::before {

        content: randomChars(36);

        position: absolute;

        inset: 0;

        color: transparent;

        @include randomLinear(6, 6);

    }

}

​

.g-container:nth-child(2) .g-item::before {

    content: randomChars(36);

    --content1: "#{randomChars(36)}";

    --content2: "#{randomChars(36)}";

    --content3: "#{randomChars(36)}";

    --content4: "#{randomChars(36)}";

    --content5: "#{randomChars(36)}";

    --content6: "#{randomChars(36)}";

    --content7: "#{randomChars(36)}";

    --content8: "#{randomChars(36)}";

    --content9: "#{randomChars(36)}";

    color: transparent;

    background-clip: text;

    animation: contentChange 1.5s infinite linear;

}

​

.g-container .g-item:hover {

    animation-play-state: paused;

​

    &::before {

        animation-play-state: paused;

    }

}

​

@keyframes colorChange {

    100% {

        filter: hue-rotate(999deg);

    }

}

@keyframes contentChange {

    10% {

        content: var(--content1);

    }

    20% {

        content: var(--content2);

    }

    30% {

        content: var(--content3);

    }

    40% {

        content: var(--content4);

    }

    50% {

        content: var(--content5);

    }

    60% {

        content: var(--content6);

    }

    70% {

        content: var(--content7);

    }

    80% {

        content: var(--content8);

    }

    90% {

        content: var(--content9);

    }

}