JSFiddle - React, Tailwind, and code Playground

by luka kupunia

JavaScript

window.addEventListener('DOMContentLoaded', function() {

    function hoverDirections() {

        var number = 0;
        var hoverEffect = function(opts) {
            var vertex = "\n        varying vec2 vUv;\n        void main() {\n          vUv = uv;\n          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n        }\n    ";
            var fragment = "\n        varying vec2 vUv;\n\n        uniform sampler2D texture;\n        uniform sampler2D texture2;\n        uniform sampler2D disp;\n\n        // uniform float time;\n        // uniform float _rot;\n        uniform float dispFactor;\n        uniform float effectFactor;\n\n        // vec2 rotate(vec2 v, float a) {\n        //  float s = sin(a);\n        //  float c = cos(a);\n        //  mat2 m = mat2(c, -s, s, c);\n        //  return m * v;\n        // }\n\n        void main() {\n\n            vec2 uv = vUv;\n\n            // uv -= 0.5;\n            // vec2 rotUV = rotate(uv, _rot);\n            // uv += 0.5;\n\n            vec4 disp = texture2D(disp, uv);\n\n            vec2 distortedPosition = vec2(uv.x + dispFactor * (disp.r*effectFactor), uv.y);\n            vec2 distortedPosition2 = vec2(uv.x - (1.0 - dispFactor) * (disp.r*effectFactor), uv.y);\n\n            vec4 _texture = texture2D(texture, distortedPosition);\n            vec4 _texture2 = texture2D(texture2, distortedPosition2);\n\n            vec4 finalTexture = mix(_texture, _texture2, dispFactor);\n\n            gl_FragColor = finalTexture;\n            // gl_FragColor = disp;\n        }\n    ";

            var parent = opts.parent || console.warn("no parent");
            var boxes = opts.boxes;
            var dispImage = opts.displacementImage || console.warn("displacement image missing");
            var image1 = opts.image1 || console.warn("first image missing");
            var image2 = opts.image2 || console.warn("second image missing");
            var image3 = opts.image3 || console.warn("third image...