JSFiddle - React, Tailwind, and code Playground

by serio

HTML

<div class="logo">myo͞otəbəl äbjəkt: </div>

CSS

.logo {
    font: 40px courier;
}

JavaScript

(function ($) {

    var timing = 80;

    $.fn.typewriter = function () {
        this.each(function () {
            var $ele = $(this),
                str = $ele.text(),
                progress = 0;
            $ele.text('');
            var timer = setInterval(function () {
                $ele.text(str.substring(0, progress++) + (progress & 1 ? '_' : ''));
                if (progress >= str.length) {
                    unscrable($ele);
                    clearInterval(timer);
                }
            }, timing);
        });
        return this;
    };

    function unscrable(item) {
        var toReplace = ['y', 'o͞', 'o', 'ə', 'ə', 'l', 'ä', 'ə', 'k'];
        var replaceWith = ['u', '', '', 'a', '', 'le', 'o', 'e', 'c'];
        var progress = 0;
        var timer = setInterval(function () {
            item.text(item.text().replace(toReplace[progress], replaceWith[progress]));
            progress++;
            if (progress >= replaceWith.length) {
                // done
                clearInterval(timer);
            }
        }, timing);
    }
})(jQuery);

$('.logo').typewriter();