JSFiddle - React, Tailwind, and code Playground

HTML

<div id="vader"></div>

JavaScript

function Typer (element, options, scenes) {
	// we define some default options to
  // limit the need of adding extra configuration
	var defaultOptions = { erase: 60, type: 80, break: 1000 };
  
  // "config" is actually going
  // to hold the options after they got merged
  var config = {};
  
  // if options is an array, it means it's
  // a list of scene and we didn't specify
  // any options so in this case we're just
  // swapping the arguments and setting an empty
  // object for "options"
  // this is great as it allows you to skip
  // the options object if you're already ok
  // with the defaults
  if (Array.isArray(options)) {
  	scenes = options;
    options = {};
  }
  
  // here we loop over the defaultOptions properties
  for (var key in defaultOptions) {
  	// that check ensures we're not looping over
    // prototype properties, it's something that's
    // related to how the for loop works but has nothing
    // to do with this particular implementation ;)
  	if (!defaultOptions.hasOwnProperty(key)) continue;
    
    if (options[key] != null) {
      // if there's an option provided for the
      // given key, take it
    	config[key] = options[key];
    } else {
    	// but otherwise, take it from the defaults
    	config[key] = defaultOptions[key];
    }
  }
  
  // this status is what tells us
  // whether the animation should be playing or not
  var status = 'ready';
  
  // state holds the currently typed value
  // it's safer to rely on that internal state
  // instead of the element's textContent as
  // it could be changed by something else
  // while this state variable cannot be changed
  var state = '';
  
  // currentSceneIndex store the index of
  // the current playing scene
  var currentSceneIndex = 0
  
  function type () {
  	if (status !== 'playing') {
    	// if the animation is not playing
      // we don't want to do anything so just return
    	return;
    }
    
    // let's get the current scene's value
  	var scene =...