<p class="effect">
  Hello, world..
</p>

body {
  width: 100%;
  height: 90vh;
  background-color: pink;
   display: flex;
  justify-content: center;
  align-items: center;
}

.effect {
  font-family: 'tahoma';
  font-weight: 800;
  font-size: 58px;
}
const b = baffle('.effect');

b.set({
  character: '>▓▒ /█▒</ >▒░>▒ █<░ ░█▒░> ▓░/▒ ▒>░ █<▒▓ ▓▒>░',
  speed: 120
});

b.start();
b.reveal(5000);
b.stop();

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/npm/baffle@0.3.6/dist/baffle.min.js