Using blotter.js with channels.

This javascript library comes with this intro:
A JavaScript API for drawing unconventional text effects on the web. Blotter.js requires Three.js and Underscore.js. If you're already including these files in your project, view the information on custom builds to get the file size significantly smaller.
See more here.
The HTML5 is simple with an empty div tag.
The CSS is just for design an is not affected by the script.
I used this:

https://cdnjs.cloudflare.com/ajax/libs/Blotter/0.1.0/blotter.min.js
https://cdnjs.cloudflare.com/ajax/libs/Blotter/0.1.0/materials/channelSplitMaterial.min.js

If you want a distortion effect you need to use this:

https://cdnjs.cloudflare.com/ajax/libs/Blotter/0.1.0/materials/channelSplitMaterial.min.js

The javascript takes the div tag and used it:

//
let text = new Blotter.Text("28:08:2019", {
  family : "sans-serif",
  size : 128,
  fill : "#000"
});

let material = new Blotter.ChannelSplitMaterial();
material.uniforms.uOffset.value = 0.05;
material.uniforms.uAnimateNoise.value = 1;


let blotter = new Blotter(material, {
  texts : text
});

let el = document.getElementById("blotter-channels");
let scope = blotter.forText(text);

scope.appendTo(el);

The result is this:

See the Pen blotter-channels by Cătălin George Feștilă (@catafest) on CodePen.