text: class Circle {
      constructor({ origin, speed, color, angle, context }) {
          this.origin = origin
          this.position = { ...this.origin }
          this.color = color
          this.speed = speed
          this.angle = angle
          this.context = context
          this.renderCount = 0
      }
  
      draw() {
          this.context.fillStyle = this.color
          this.context.beginPath()
          this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2)
          this.context.fill()
      }
  
      move() {
          this.position.x = (Math.sin(this.angle) * this.speed) + this.position.x
          this.position.y = (Math.cos(this.angle) * this.speed) + this.position.y + (this.renderCount * 0.3)
          this.renderCount++
      }
  }
  
  class Boom {
      constructor ({ origin, context, circleCount = 16, area }) {
          this.origin = origin
          this.context = context
          this.circleCount = circleCount
          this.area = area
          this.stop = false
          this.circles = []
      }
  
      randomArray(range) {
          const length = range.length
          const randomIndex = Math.floor(length * Math.random())
          return range[randomIndex]
      }
  
      randomColor() {
          const range = ['8', '9', 'A', 'B', 'C', 'D', 'E', 'F']
          return '#' + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range)
      }
  
      randomRange(start, end) {
          return (end - start) * Math.random() + start
      }
  
      init() {
          for(let i = 0; i < this.circleCount; i++) {
              const circle = new Circle({
                  context: this.context,
                  origin: this.origin,
                  color: this.randomColor(),
                  angle: this.randomRange(Math.PI - 1, Math.PI + 1),
                  speed: this.randomRange(1, 6)
              })
              this.circles.push(circle)
          }
      }
  
      move() {
          this.circles.forEach((circle, index) => {
              if (circle.position.x > this.area.width || circle.position.y > this.area.height) {
                  return this.circles.splice(index, 1)
              }
              circle.move()
          })
          if (this.circles.length == 0) {
              this.stop = true
          }
      }
  
      draw() {
          this.circles.forEach(circle => circle.draw())
      }
  }
  
  class CursorSpecialEffects {
      constructor() {
          this.computerCanvas = document.createElement('canvas')
          this.renderCanvas = document.createElement('canvas')
  
          this.computerContext = this.computerCanvas.getContext('2d')
          this.renderContext = this.renderCanvas.getContext('2d')
  
          this.globalWidth = window.innerWidth
          this.globalHeight = window.innerHeight
  
          this.booms = []
          this.running = false
      }
  
      handleMouseDown(e) {
          const boom = new Boom({
              origin: { x: e.clientX, y: e.clientY },
              context: this.computerContext,
              area: {
                  width: this.globalWidth,
                  height: this.globalHeight
              }
          })
          boom.init()
          this.booms.push(boom)
          this.running || this.run()
      }
  
      handlePageHide() {
          this.booms = []
          this.running = false
      }
  
      init() {
          const style = this.renderCanvas.style
          style.position = 'fixed'
          style.top = style.left = 0
          style.zIndex = '999999999999999999999999999999999999999999'
          style.pointerEvents = 'none'
  
          style.width = this.renderCanvas.width = this.computerCanvas.width = this.globalWidth
          style.height = this.renderCanvas.height = this.computerCanvas.height = this.globalHeight
  
          document.body.append(this.renderCanvas)
  
          window.addEventListener('mousedown', this.handleMouseDown.bind(this))
          window.addEventListener('pagehide', this.handlePageHide.bind(this))
      }
  
      run() {
          this.running = true
          if (this.booms.length == 0) {
              return this.running = false
          }
  
          requestAnimationFrame(this.run.bind(this))
  
          this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
          this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
  
          this.booms.forEach((boom, index) => {
              if (boom.stop) {
                  return this.booms.splice(index, 1)
              }
              boom.move()
              boom.draw()
          })
          this.renderContext.drawImage(this.computerCanvas, 0, 0, this.globalWidth, this.globalHeight)
      }
  }
  
  const cursorSpecialEffects = new CursorSpecialEffects()
  cursorSpecialEffects.init()