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

}

​

@function randomLinear($count, $width) {

    $value: '';

    @for $i from 0 through ($count - 1) {

        $j: $i - 1;

        $value: $value + randomColor() + string.unquote(" #{$j * $width}px #{$i * $width}px,");

    }

    @return linear-gradient(90deg, string.unquote(#{$value}) randomColor() 0 100%);

}

​

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

    display: inline;

    color: #fff;

    font-size: 50px;

    line-height: 50px;

    letter-spacing: 25px;

    white-space: wrap;

    word-wrap: break-word;

    animation: colorChange 1s infinite steps(10);

    cursor: pointer;

    &::before {

        content: randomChars(36);

        background: randomLinear(36, 50);

        position: relative;

        color: transparent;

    }

}

​

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

    --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)}";

    background-clip: text;

    animation: contentChange 1s infinite linear;

}

​

.g-container .g-item:hover {

    animation-play-state: paused;

​

    &::before {

        animation-play-state: paused;

    }

}

​

@keyframes colorChange {

    100% {

        filter: hue-rotate(360deg);

    }

}

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

    }

}

​