Cool text scramble effect (use Roboto Mono 100 + #FAFAFA + #757575 for colors

TextScramble.js

import React, { Component, Fragment } from 'react';

const chars = '!<>-_\\/[]{}-=+*^?#________';

class TextScramble extends Component {
    constructor(props) {
        super(props);
        this.string = props.children;
        this.length = this.string.length;
        this.queue = [];
        this.frame = 0;
        for (let i = 0; i < this.length; i++) {
            const from = '';
            const to = this.string[i];
            const start = Math.floor(Math.random() * 40);
            const end = start + Math.floor(Math.random() * 40);
            this.queue.push({ from, to, start, end });
        }
    }
    state = {
        output: ''
    }
    componentDidMount() {
        this.update();
    }
    update = () => {
        let output = '';
        let complete = 0;
        for (let i = 0, n = this.queue.length; i< n; i++) {
            let { from, to, start, end, char } = this.queue[i];
            if (this.frame >= end) {
                complete++;
                output += to;
            } else if (this.frame >= start) {
                if (!char || Math.random() < 0.28) {
                    char = this.randomChar();
                    this.queue[i].char = char;
                }
                output += char;
            } else {
                output += from;
            }
        }
        this.setState({ output });
        if (complete !== this.queue.length) {
            this.frameRequest = requestAnimationFrame(this.update);
            this.frame++;
        }
    }

    randomChar = () => chars[Math.floor(Math.random() * chars.length)];

    render() {
        return (
            <Fragment>
                {this.state.output}
            </Fragment>
        );
    }
}

export default TextScramble;

This is based on https://codepen.io/soulwire/pen/mErPAK

Could still add a "setText" function to cycle through different lines