Красивый эффект при прокрутке страницы CSS

<div class="stwaqenulin">
  <h1>ZORNET.RU</h1>

  <h2>ZorNet.Ru: Портал Вебмастера</h2>
  <p>Описание на страницы</p>

  <h2>ZorNet.Ru: Скрипты для сайта</h2>
  <p>Продолжаем описывать</p>

  <h2>ZorNet.Ru: Шаблоны для сайтаа</h2>
  <p>Здесь также можно добавить картинку</p>

  <h2>ZorNet.Ru: Дизайн сайта</h2>
  <p>Или написать мануал</p>

  <h2>Стилистика CSS</h2>
  <p>Как как по знакам очень много на странице можно разместить.</p>
</div>
<canvas id="otresazen"></canvas>
<canvas id="aderzikolan"></canvas>

body {
  margin: 0 10%;
  color: #fbf8f8;
  background-color: #171616;
  background: linear-gradient(to bottom right, #10231e, #28223a, #182631);
  font: 1.25rem/1.5 'Roboto', sans-serif;
}

.stwaqenulin {
  max-width: 798px;
  margin: 39px auto;
  padding: 18px;
  background-color: rgba(0, 0, 0, 0.75);
  overflow: hidden;
}

h1, h2 {
  margin: 0;
  color: #bea6ff;
  background: linear-gradient(to right, #7ef2cf, #bea6ff, #8ccdff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.25;
}

h1 {
  font-size: 3rem;
  text-transform: uppercase;
}

h1::after {
  content: '';
  display: block;
  height: 2px;
  margin-top: 20px;
  background: linear-gradient(to right, #7ef2cf, #bea6ff, #8ccdff);
}

h2 {
  margin-top: 40px;
  font-size: 1.5rem;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
}

#botresazen {
  z-index: -1;
  filter: blur(1px);
}

#aderzikolan {
  z-index: -2;
  filter: blur(10px);
}

@media screen and (min-width: 500px) {
  h1 {
  font-size: 4rem;
  }
  h2 {
  font-size: 2rem;
  }
}

Matter.use('matter-wrap');
let hexBokeh = {
  options: {
  canvasSelector: '',  
  radiusRange: [30, 60],  
  xVarianceRange: [0.1, 0.3],  
  yVarianceRange: [0.5, 1.5],  
  airFriction: 0.03,  
  opacity: 0.5,  
  collisions: false,  
  scrollVelocity: 0.025,  
  pixelsPerBody: 40000,  

  colors: ['#7ef2cf', '#bea6ff', '#8ccdff']
  },

  scrollDelay: 100,
  resizeDelay: 400,

  lastOffset: undefined,
  scrollTimeout: undefined,
  resizeTimeout: undefined,

  engine: undefined,
  render: undefined,
  runner: undefined,
  bodies: undefined,

  init(options) {
  this.options = Object.assign({}, this.options, options);

  let viewportWidth = document.documentElement.clientWidth;
  let viewportHeight = document.documentElement.clientHeight;

  this.lastOffset = window.pageYOffset;
  this.scrollTimeout = null;
  this.resizeTimeout = null;
   
  // engine
  this.engine = Matter.Engine.create();
  this.engine.world.gravity.y = 0;
   
  // render
  this.render = Matter.Render.create({
  canvas: document.querySelector(this.options.canvasSelector),
  engine: this.engine,
  options: {
  width: viewportWidth,
  height: viewportHeight,
  wireframes: false,
  background: 'transparent'
  }
  });
  Matter.Render.run(this.render);
   
  // runner
  this.runner = Matter.Runner.create();
  Matter.Runner.run(this.runner, this.engine);
   
  // bodies
  this.bodies = [];
  let totalBodies = Math.round(viewportWidth * viewportHeight / this.options.pixelsPerBody);
  for (let i = 0; i <= totalBodies; i++) {
  let body = this.createBody(viewportWidth, viewportHeight);
  this.bodies.push(body);
  }
  Matter.World.add(this.engine.world, this.bodies);

  window.addEventListener('scroll', this.onScrollThrottled.bind(this));
  window.addEventListener('resize', this.onResizeThrottled.bind(this));
  },
   
  shutdown() {
  Matter.Engine.clear(this.engine);
  Matter.Render.stop(this.render);
  Matter.Runner.stop(this.runner);

  window.removeEventListener('scroll', this.onScrollThrottled);
  window.removeEventListener('resize', this.onResizeThrottled);
  },
   
  randomize(range) {
  let [min, max] = range;
  return Math.random() * (max - min) + min;
  },
   
  createBody(viewportWidth, viewportHeight) {
  let x = this.randomize([0, viewportWidth]);
  let y = this.randomize([0, viewportHeight]);
  let radius = this.randomize(this.options.radiusRange);
  let color = this.options.colors[this.bodies.length % this.options.colors.length];
   
  return Matter.Bodies.polygon(x, y, 6, radius, {
  render: {
  fillStyle: color,
  opacity: this.options.opacity
  },
  frictionAir: this.options.airFriction,
  collisionFilter: {
  group: this.options.collisions ? 1 : -1
  },
  plugin: {
  wrap: {
  min: { x: 0, y: 0 },
  max: { x: viewportWidth, y: viewportHeight }
  }
  }
  });
  },
   
  onScrollThrottled() {
  if (!this.scrollTimeout) {
  this.scrollTimeout = setTimeout(this.onScroll.bind(this), this.scrollDelay);
  }
  },
   
  onScroll() {
  this.scrollTimeout = null;
   
  let delta = (this.lastOffset - window.pageYOffset) * this.options.scrollVelocity;
  this.bodies.forEach((body) => {
  Matter.Body.setVelocity(body, {
  x: body.velocity.x + delta * this.randomize(this.options.xVarianceRange),
  y: body.velocity.y + delta * this.randomize(this.options.yVarianceRange)
  });
  });
   
  this.lastOffset = window.pageYOffset;
  },
   
  onResizeThrottled() {
  if (!this.resizeTimeout) {
  this.resizeTimeout = setTimeout(this.onResize.bind(this), this.resizeDelay);
  }
  },
   
  onResize() {
  this.shutdown();
  this.init();
  }
};

window.addEventListener('DOMContentLoaded', () => {
  Object.create(hexBokeh).init({
  canvasSelector: '#otresazen'
  });

  Object.create(hexBokeh).init({
  canvasSelector: '#aderzikolan',
  radiusRange: [99, 198],
  pixelsPerBody: 70000
  });
});