React Mandelbrot Patterns

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";export interface MandelbrotPatternDecorationShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  zoom?: number;  iterations?: number;  patternScale?: number;  colorIntensity?: number;  glossStrength?: number;}const fragmentShader = `void mainImage(out vec4 fragColor, in vec2 fragCoord ){    vec3 col = vec3(0);        #define AA 2    for(int j=0; j<AA; j++){        for(int i=0; i<AA; i++){            vec2 p = (fragCoord + vec2(i, j)/float(AA) - iResolution.xy*.5)/iResolution.y;                        float ttm = cos(sin(iTime/8.*u_speed))*6.2831;                       p *= mat2(cos(ttm), sin(ttm), -sin(ttm), cos(ttm));            p -= vec2(cos(iTime/2.*u_speed)/2., sin(iTime/3.*u_speed)/5.);                         float zm = (200. + sin(iTime/7.*u_speed)*50.) * u_zoom;            vec2 cc = vec2(-.57735 + .004, .57735) + p/zm;             vec2 z = vec2(0), dz = vec2(0);            const int iter = 128;            int ik = 128;            vec3 fog = vec3(0);                         for(int k=0; k<iter; k++){                if(k >= int(u_iterations)) break;                dz = mat2(z, -z.y, z.x)*dz*2. + vec2(1, 0);                                z =  mat2(z, -z.y, z.x)*z + cc;                 if(dot(z, z) > 1./.005){                    ik = k;                    break;                }            }                        float ln = step(0., length(z)/15.5  - 1.);                        float d = sqrt(1./max(length(dz), .0001))*log(dot(z, z));            d = clamp(d*50., 0., 1.);                         float dir = mod(float(ik), 2.)<.5? -1. : 1.;                        float sh = (float(iter - ik))/float(iter);            vec2 tuv = z/(320./u_patternScale);                        float tm = (-ttm*sh*sh*16.);            tuv *= mat2(cos(tm), sin(tm), -sin(tm), cos(tm));            tuv = abs(mod(tuv, 1./8.) - 1./16.);                       float pat = smoothstep(0., 1./length(dz), length(tuv) - 1./32.);            pat = min(pat, smoothstep(0., 1./length(dz), abs(max(tuv.x, tuv.y) - 1./16.) - .04/16.));                        vec3 lCol = pow(min(vec3(1.5, 1, 1)*min(d*.85, .96), 1.), vec3(1, 3, 16))*1.15*u_colorIntensity;                        lCol = dir<.0? lCol*min(pat, ln) : (sqrt(lCol)*.5 + .7)*max(1. - pat, 1. - ln);                        vec3 rd = normalize(vec3(p, 1.));            rd = reflect(rd, vec3(0, 0, -1));            float diff = clamp(dot(z*.5 + .5, rd.xy), 0., 1.)*d;                        tuv = z/(200./u_patternScale);            tm = -tm/1.5 + .5;            tuv *= mat2(cos(tm), sin(tm), -sin(tm), cos(tm));            tuv = abs(mod(tuv, 1./8.) - 1./16.);             pat = smoothstep(0., 1./length(dz), length(tuv) - 1./32.);            pat = min(pat, smoothstep(0., 1./length(dz), abs(max(tuv.x, tuv.y) - 1./16.) - .04/16.));            lCol += mix(lCol, vec3(1)*ln, .5)*diff*diff*.5*(pat*.6 + .6)*u_glossStrength;                        if (mod(float(ik), 6.)<.5) lCol = lCol.yxz;            lCol = mix(lCol.xzy, lCol, d/1.2);                        lCol = mix(lCol, vec3(0), (1. - step(0., -(length(z)*.05*float(ik)/float(iter)  - 1.)))*.95);                       lCol = mix(fog, lCol, sh*d);                        col += min(lCol, 1.);        }    }        col /= float(AA*AA);        vec2 uv = fragCoord/iResolution.xy;    col *= pow(16.*(1. - uv.x)*(1. - uv.y)*uv.x*uv.y, 1./8.)*1.15;        fragColor = vec4(sqrt(max(col, 0.)), 1.0 );}`;export const MandelbrotPatternDecorationShaders = forwardRef<HTMLDivElement, MandelbrotPatternDecorationShadersProps>(  (    {      className,      speed = 1.0,      zoom = 1.0,      iterations = 128.0,      patternScale = 1.0,      colorIntensity = 1.0,      glossStrength = 1.0,      ...props    },    ref  ) => {    return (      <div        ref={ref}        className={cn('w-full h-full', className)}        {...props}      >        <Shader          fs={fragmentShader}          uniforms={{            u_speed: { type: '1f', value: speed },            u_zoom: { type: '1f', value: zoom },            u_iterations: { type: '1f', value: iterations },            u_patternScale: { type: '1f', value: patternScale },            u_colorIntensity: { type: '1f', value: colorIntensity },            u_glossStrength: { type: '1f', value: glossStrength },          }}          style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}        />      </div>    );  });MandelbrotPatternDecorationShaders.displayName = "MandelbrotPatternDecorationShaders";export default MandelbrotPatternDecorationShaders;