import { animate, scrambleText } from 'animejs';

const [ $p ] = utils.$('p');
const buttons = utils.$('button');

const cursors = ['_____', '░▒▓█', '😀'];

function play(i) {
  animate($p, {
    innerHTML: scrambleText({ cursor: cursors[i] }),
  });
}

buttons.forEach(($btn, i) => $btn.addEventListener('click', () => play(i)));

<div class="large row">
  <p class="text-s text-mono">Display a cursor character at the leading edge of the reveal wave as it moves through each character.</p>
</div>
<div class="medium row">
  <fieldset class="controls">
    <button>_____</button>
    <button>░▒▓█</button>
    <button>😀</button>
  </fieldset>
</div>