JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<div id="circle"></div>
<div id="second"></div>

CSS

#circle {
  width: 200px;
  height: 200px;
  background: purple;
  border-radius: 50%;
  position: absolute;
}

#second {
  width: 200px;
  top: 200px;
  height: 200px;
  background: purple;
  border-radius: 50%;
  position: absolute;
  animation: a 1s linear infinite;
}

@keyframes a {
  100% {
    transform: translateX(600px);
  }
}

JavaScript

var box = document.querySelectorAll('.box');



for (var i = 0; i < box.length; i++) {
  box[i].addEventListener('mouseover', function() {


    var vertex = `
	        varying vec2 vUv;
	        void main() {
	          vUv = uv;
	          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
	        }
	    `;

    var fragment = `
	        varying vec2 vUv;

	        uniform sampler2D texture;
	        uniform sampler2D texture2;
	        uniform sampler2D disp;

	        // uniform float time;
	        // uniform float _rot;
	        uniform float dispFactor;
	        uniform float effectFactor;

	        // vec2 rotate(vec2 v, float a) {
	        //  float s = sin(a);
	        //  float c = cos(a);
	        //  mat2 m = mat2(c, -s, s, c);
	        //  return m * v;
	        // }

	        void main() {

	            vec2 uv = vUv;

	            // uv -= 0.5;
	            // vec2 rotUV = rotate(uv, _rot);
	            // uv += 0.5;

	            vec4 disp = texture2D(disp, uv);

	            vec2 distortedPosition = vec2(uv.x + dispFactor * (disp.r*effectFactor), uv.y);
	            vec2 distortedPosition2 = vec2(uv.x - (1.0 - dispFactor) * (disp.r*effectFactor), uv.y);

	            vec4 _texture = texture2D(texture, distortedPosition);
	            vec4 _texture2 = texture2D(texture2, distortedPosition2);

	            vec4 finalTexture = mix(_texture, _texture2, dispFactor);

	            gl_FragColor = finalTexture;
	            // gl_FragColor = disp;
	        }
	    `;

    var parent = document.querySelector('.container') || console.warn("no parent");
    var dispImage = 'https://picsum.photos/1100' || console.warn("displacement image missing");
    var image1 = 'https://picsum.photos/1400' || console.warn("first image missing");
    var image2 = 'https://picsum.photos/1300' || console.warn("second image missing");
    var intensity = 1;
    var speedIn = 1.6;
    var speedOut = 1.2;
    var userHover = true;
    var easing =...