Немного
THREE.js, немного
glsl и немного
gsap.
И собрать это вот так:
https://www.youtube.com/watch?v=I9A4xTT2rh0
Но можешь расслабиться, разобраться в этом деле тебе пока не светит, в ближайшее время, раз ты задал такой вопрос, вместо того чтоб сразу полезть в devtools и разбираться что да как там. Все это дело сильно завязано на математике, тригонометрия, синусы, косинусы и тд., и умении ими манипулировать.
precision highp float;
float mirrored(float v) {
float m = mod(v, 2.0);
return mix(m, 2.0 - m, step(1.0, m));
}
vec2 mirrored(vec2 v) {
vec2 m = mod(v, 2.0);
return mix(m, 2.0 - m, step(1.0, m));
}
vec3 mirrored(vec3 v) {
vec3 m = mod(v, 2.0);
return mix(m, 2.0 - m, step(1.0, m));
}
vec4 mirrored(vec4 v) {
vec4 m = mod(v, 2.0);
return mix(m, 2.0 - m, step(1.0, m));
}
float tri(float v) {
return mix(v, 1.0 - v, step(0.5, v)) * 2.0;
}
vec2 tri(vec2 v) {
return mix(v, 1.0 - v, step(0.5, v)) * 2.0;
}
vec3 tri(vec3 v) {
return mix(v, 1.0 - v, step(0.5, v)) * 2.0;
}
vec4 tri(vec4 v) {
return mix(v, 1.0 - v, step(0.5, v)) * 2.0;
}
#define PI_2 6.283185307179586
#define PI_H 1.5707963267948966
varying vec2 vUv;
varying vec2 vUv1;
varying vec2 vUv2;
uniform vec4 time;
uniform float progress;
uniform vec3 mask;
uniform float rotation;
uniform vec4 translateDelay;
uniform vec2 accel;
uniform vec4 waveAmpFreq;
uniform vec4 waveSpeedBlend;
uniform vec4 pixels;
uniform sampler2D texture1;
uniform sampler2D texture2;
void main(void) {
vec2 uv = gl_FragCoord.xy / pixels.xy;
float p = fract(progress + mask.z);
float delayValue = p * (1.0 + translateDelay.z + translateDelay.w) - uv.y * translateDelay.w - (1.0 - uv.x) * translateDelay.z;
delayValue = clamp(delayValue, 0.0, 1.0);
vec2 translateValue = p + delayValue * accel;
vec2 translateValue1 = translateDelay.xy * translateValue;
vec2 translateValue2 = translateDelay.xy * (translateValue - 1.0 - accel);
vec2 w = sin(time.y * waveSpeedBlend.xy + vUv.yx * waveAmpFreq.zw) * waveAmpFreq.xy;
vec2 xy = (tri(p) * waveSpeedBlend.z + tri(delayValue) * waveSpeedBlend.w) * w;
vec2 uv1 = vUv1 + translateValue1 + xy;
vec2 uv2 = vUv2 + translateValue2 + xy;
vec4 rgba1 = texture2D(texture1, mirrored(uv1));
vec4 rgba2 = texture2D(texture2, mirrored(uv2));
vec4 rgba = mix(rgba1, rgba2, delayValue);
rgba = mix(vec4(0.0, 0.0, 0.0, 1.0), rgba, mask.y);
rgba = mix(vec4(0.0), rgba, float(abs(uv.y * 2.0 - 1.0) <= mask.x));
rgba.rgb *= 0.7;
gl_FragColor = rgba;
}
