1var scrollPos = 0;
 2var effectRecoverySpeed = 0.001;
 3
 4var material = new Blotter.LiquidDistortMaterial();
 5material.uniforms.uSpeed.value = 1.0;
 6material.uniforms.uVolatility.value = 0.1;
 7
 8function createBlotterText() {
 9  var textOpts = {
10    family: "'Rubik'",
11    size: 48,
12    weight: 700,
13    fill: "#000000",
14    paddingLeft: 0,
15    paddingRight: 0,
16    paddingTop: 0,
17    paddingBottom: 0,
18  };
19  // BLOTTER - Example 2
20  var text1 = new Blotter.Text("Bio", textOpts);
21  var text2 = new Blotter.Text("Software Development", textOpts);
22  var text3 = new Blotter.Text("Education", textOpts);
23  var text4 = new Blotter.Text("Hobbies", textOpts);
24  var text5 = new Blotter.Text("Contact", textOpts);
25  var texts = [text1, text2, text3, text4, text5];
26  var blotter = new Blotter(material, {
27    texts: texts,
28  });
29  texts.forEach(function (item, index) {
30    document.getElementById("distortion-text-" + (index + 1)).innerHTML = "";    
31    var elem = document.getElementById("distortion-text-" + (index + 1));
32    var scope = blotter.forText(item);
33    scope.appendTo(elem);
34    //document.getElementById("distortion-text-" + (index + 1)).innerHTML = "";
35  });
36}
37
38WebFont.load({
39  google: {
40    families: ["Rubik"],
41  },
42  active: () => createBlotterText(),
43});
44
45var previousTimeStamp = 0;
46
47function frame(timestamp) {
48  var timeElapsed = (timestamp - previousTimeStamp) / 8;
49  //console.log(timestamp - previousTimeStamp);
50  scrollPos +=
51    (document.body.parentElement.scrollTop - scrollPos) /
52    (1 / effectRecoverySpeed) ** (timeElapsed);
53  material.uniforms.uVolatility.value =
54    (document.body.parentElement.scrollTop - scrollPos)**2 / 1000000;
55  material.uniforms.uSpeed.value =
56    (document.body.parentElement.scrollTop - scrollPos)**2 / 1000000;
57  previousTimeStamp = timestamp;
58  window.requestAnimationFrame(frame);
59}
60window.requestAnimationFrame(frame);