Функция имитации набора текста

Недавно в проекте - лендинге моего произведения - захотел применить анимацию набора текста. Такой эффект – не новое в веб дизайне. И решений этой задачи в интернете можно найти кучу. Конечно я не стал долго думать – нашел на одном из форумов глобальной сети кой какой код. Но как всегда пришлось немного дорабатывать. В итоге – сделал универсальную функцию на нативном JS. Для большей правдоподобности добавил курсор как псевдоэлемент ( ::after ) и применил к нему анимацию изменения прозрачности ( opacity ).

HTML

<h1>Hello <span></span></h1>

CSS

h1 {
text-align: center;
font-size: 80px;
}
span {
position: relative;
}

span::after {
content: "";
position: absolute;
top: 0;
right: -5px;
display: block;
width: 3px;
height: 80px;
animation: flashing 0.5s infinite;
background-color: #000000;
}

@keyframes flashing {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

JS

function textTyping(obj, text, speed = 70) {
let offset = 0;
setInterval(function () {
if (offset <= text.length) {
obj.textContent = text.substring(0, offset++);
} else {
clearInterval(this)
}
}, speed);
}

let text = "world!!!"
let obj = document.querySelector("h1 span")

textTyping(obj, text)

Смотри на Codepen.io

За конструктивные комментарии буду благодарен.