JSFiddle - React, Tailwind, and code Playground

HTML

<canvas></canvas>

CSS

html, body {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

JavaScript

var canvas     = $('canvas'),
    ctx        = canvas[0].getContext("2d"),
    deltas     = [null, null, null, null, null, null, null, null, null],
    lastPeak   = 0,
    center     = null,
    x          = 0;

function resize() {
    ctx.canvas.width  = $(window).innerWidth();
    ctx.canvas.height = $(window).innerHeight();
    center = Math.floor(ctx.canvas.height / 2);
    clear();
    guides();
}

function clear() {
    x = 0;
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function guides() {
    ctx.fillStyle = '#000';
    ctx.fillRect(0, center, ctx.canvas.width, 1);
    ctx.fillStyle = '#0f0';
    ctx.fillRect(0, center - 60, ctx.canvas.width, 1);
    ctx.fillRect(0, center + 60, ctx.canvas.width, 1);
}

function hash() {
    ctx.fillStyle = '#00f';
    ctx.fillRect(x, center + 10, 1, -20);
}

function hasPeak() {
    if (deltas[0] == null) return false;
    
    var flat = [];
    for (var i in deltas) {
        flat.push(Math.abs(deltas[i]));
    }
    
    if (
        Math.abs(x - lastPeak) > 10      &&
        flat[0] <  flat[4] &&
        flat[1] <= flat[4] &&
        flat[2] <= flat[4] &&
        flat[3] <= flat[4] &&
        flat[5] <= flat[4] &&
        flat[6] <= flat[4] &&
        flat[7] <= flat[4] &&
        flat[8] <  flat[4]
    ) {
        lastPeak = x;
        return true;
    }
    return false;
}

resize();
guides();

$(window)
.on('resize', resize)
.on('mousewheel DOMMouseScroll', function(e) {
    var delta  = e.type == 'mousewheel' ? e.originalEvent.wheelDelta * -1 : 40 * e.originalEvent.detail;
    
    if (hasPeak()) hash();
    else if ((deltas[8] == null || Math.abs(deltas[8]) == 120) && Math.abs(delta) == 120) hash();
    
    ctx.fillStyle = '#f00';
    ctx.fillRect(x, center, 1, delta * -1);
    
    guides();
    
    deltas.shift();
    deltas.push(delta);
    x++
  if (x > ctx.canvas.width) clear();
});