JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas-image"></canvas>

CSS

#canvas-image {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url("https://unsplash.it/2000/1800?random");
    background-size: cover;
}

JavaScript

/*! Granim v1.0.5 - https://sarcadass.github.io/granim.js */
! function t(e, s, i) {
    function n(a, r) {
        if (!s[a]) {
            if (!e[a]) {
                var h = "function" == typeof require && require;
                if (!r && h) return h(a, !0);
                if (o) return o(a, !0);
                var c = new Error("Cannot find module '" + a + "'");
                throw c.code = "MODULE_NOT_FOUND", c
            }
            var l = s[a] = {
                exports: {}
            };
            e[a][0].call(l.exports, function(t) {
                var s = e[a][1][t];
                return n(s ? s : t)
            }, l, l.exports, t, e, s, i)
        }
        return s[a].exports
    }
    for (var o = "function" == typeof require && require, a = 0; a < i.length; a++) n(i[a]);
    return n
}({
    1: [function(t, e, s) {
        "use strict";

        function i(t) {
            if (t.element instanceof HTMLCanvasElement) this.canvas = t.element;
            else {
                if ("string" != typeof t.element) throw new Error("The element you used is neither a String, nor a HTMLCanvasElement");
                this.canvas = document.querySelector(t.element)
            }
            if (!this.canvas) throw new Error("`" + t.element + "` could not be found in the DOM");
            this.x1 = 0, this.y1 = 0, this.name = t.name || !1, this.elToSetClassOn = t.elToSetClassOn || "body", this.direction = t.direction || "diagonal", this.isPausedWhenNotInView = t.isPausedWhenNotInView || !1, this.opacity = t.opacity, this.states = t.states, this.stateTransitionSpeed = t.stateTransitionSpeed || 1e3, this.previousTimeStamp = null, this.progress = 0, this.isPaused = !1, this.isPausedBecauseNotInView = !1, this.iscurrentColorsSet = !1, this.context = this.canvas.getContext("2d"), this.channels = {}, this.channelsIndex = 0, this.activeState = t.defaultStateName || "default-state", this.isChangingState = !1, this.activeColors = [],...