https://makyo.ai/assets/animated-shader-hero-4d1zQWta.js

1import{r as f,j as I}from"./react-vendor-DXHLreME.js";import"./bootstrap-vendor-D9slGgdu.js";function B({className:A="",speed:s=1,cloudColor:u="#ff8800",backgroundColor:l="#1a0a00",accentColor:d="#ffaa00"}){const m=f.useRef(null),i=f.useRef(),a=r=>{const e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(r);return e?[parseInt(e[1],16)/255,parseInt(e[2],16)/255,parseInt(e[3],16)/255]:[1,.5,0]};return f.useEffect(()=>{const r=m.current;if(!r)return;const e=r.getContext("webgl2");if(!e){console.warn("WebGL2 not supported");return}const S=`#version 300 es
2      precision highp float;
3      in vec4 position;
4      void main() {
5        gl_Position = position;
6      }
7    `,b=`#version 300 es
8      precision highp float;
9      out vec4 O;
10      uniform vec2 resolution;
11      uniform float time;
12      uniform vec3 cloudColor;
13      uniform vec3 backgroundColor;
14      uniform vec3 accentColor;
15      
16      #define FC gl_FragCoord.xy
17      #define T time
18      #define R resolution
19      #define MN min(R.x,R.y)
20      
21      float rnd(vec2 p) {
22        p = fract(p * vec2(12.9898, 78.233));
23        p += dot(p, p + 34.56);
24        return fract(p.x * p.y);
25      }
26      
27      float noise(in vec2 p) {
28        vec2 i = floor(p), f = fract(p), u = f * f * (3.0 - 2.0 * f);
29        float a = rnd(i), b = rnd(i + vec2(1, 0)), c = rnd(i + vec2(0, 1)), d = rnd(i + 1.0);
30        return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
31      }
32      
33      float fbm(vec2 p) {
34        float t = 0.0, a = 1.0;
35        mat2 m = mat2(1.0, -0.5, 0.2, 1.2);
36        for (int i = 0; i < 5; i++) {
37          t += a * noise(p);
38          p *= 2.0 * m;
39          a *= 0.5;
40        }
41        return t;
42      }
43      
44      float clouds(vec2 p) {
45        float d = 1.0, t = 0.0;
46        for (float i = 0.0; i < 3.0; i++) {
47          float a = d * fbm(i * 10.0 + p.x * 0.2 + 0.2 * (1.0 + i) * p.y + d + i * i + p);
48          t = mix(t, d, a);
49          d = a;
50          p *= 2.0 / (i + 1.0);
51        }
52        return t;
53      }
54      
55      void main(void) {
56        vec2 uv = (FC - 0.5 * R) / MN, st = uv * vec2(2, 1);
57        vec3 col = vec3(0);
58        float bg = clouds(vec2(st.x + T * 0.5, -st.y));
59        uv *= 1.0 - 0.3 * (sin(T * 0.2) * 0.5 + 0.5);
60        
61        for (float i = 1.0; i < 12.0; i++) {
62          uv += 0.1 * cos(i * vec2(0.1 + 0.01 * i, 0.8) + i * i + T * 0.5 + 0.1 * uv.x);
63          vec2 p = uv;
64          float d = length(p);
65          col += 0.00125 / d * (cloudColor * (cos(sin(i) * vec3(1, 2, 3)) + 1.0));
66          float b = noise(i + p + bg * 1.731);
67          col += 0.002 * b * accentColor / length(max(p, vec2(b * p.x * 0.02, p.y)));
68          col = mix(col, backgroundColor * bg, d * 0.3);
69        }
70        
71        O = vec4(col, 1.0);
72      }
73    `;function p(t,_,y){const n=t.createShader(y);return n?(t.shaderSource(n,_),t.compileShader(n),t.getShaderParameter(n,t.COMPILE_STATUS)?n:(console.error(t.getShaderInfoLog(n)),t.deleteShader(n),null)):null}const v=p(e,S,e.VERTEX_SHADER),h=p(e,b,e.FRAGMENT_SHADER);if(!v||!h)return;const o=e.createProgram();if(!o)return;if(e.attachShader(o,v),e.attachShader(o,h),e.linkProgram(o),!e.getProgramParameter(o,e.LINK_STATUS)){console.error(e.getProgramInfoLog(o));return}const g=e.createBuffer();e.bindBuffer(e.ARRAY_BUFFER,g),e.bufferData(e.ARRAY_BUFFER,new Float32Array([-1,1,-1,-1,1,1,1,-1]),e.STATIC_DRAW);const x=e.getAttribLocation(o,"position"),L=e.getUniformLocation(o,"resolution"),T=e.getUniformLocation(o,"time"),C=e.getUniformLocation(o,"cloudColor"),E=e.getUniformLocation(o,"backgroundColor"),F=e.getUniformLocation(o,"accentColor"),c=()=>{const t=r.parentElement;t&&(r.width=t.clientWidth,r.height=t.clientHeight),e.viewport(0,0,r.width,r.height)};c(),window.addEventListener("resize",c);let w=Date.now();const R=()=>{const t=(Date.now()-w)/1e3*s;e.clearColor(0,0,0,1),e.clear(e.COLOR_BUFFER_BIT),e.useProgram(o),e.bindBuffer(e.ARRAY_BUFFER,g),e.enableVertexAttribArray(x),e.vertexAttribPointer(x,2,e.FLOAT,!1,0,0),e.uniform2f(L,r.width,r.height),e.uniform1f(T,t),e.uniform3fv(C,a(u)),e.uniform3fv(E,a(l)),e.uniform3fv(F,a(d)),e.drawArrays(e.TRIANGLE_STRIP,0,4),i.current=requestAnimationFrame(R)};return R(),()=>{window.removeEventListener("resize",c),i.current&&cancelAnimationFrame(i.current)}},[s,u,l,d]),I.jsx("canvas",{ref:m,className:A,style:{width:"100%",height:"100%"}})}export{B as AnimatedShaderHero};