React Smooth Voronoi Contours

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";export interface SmoothVoronoiContoursShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  frequency?: number;  smoothness?: number;  glossyMode?: number;}const fragmentShader = `vec2 hash22(vec2 p) {    float n = sin(dot(p, vec2(41, 289)));    p = fract(vec2(2097152, 262144)*n);    return cos(p*6.283 + iTime*u_speed)*.5;}float smoothVoronoi(vec2 p, float falloff) {    vec2 ip = floor(p); p -= ip;        float d = 1., res = 0.0;        for(int i = -1; i <= 2; i++) {        for(int j = -1; j <= 2; j++) {            vec2 b = vec2(i, j);                        vec2 v = b - p + hash22(ip + b);                        d = max(dot(v,v), 1e-4);                        res += 1.0/pow( d, falloff );        }    }    return pow( 1./res, .5/falloff );}float func2D(vec2 p){    float d = smoothVoronoi(p*2., 4.)*.66 + smoothVoronoi(p*6., 4.)*.34;        return sqrt(d);}float smoothFract(float x, float sf){    x = fract(x); return min(x, x*(1.-x)*sf);}void mainImage( out vec4 fragColor, in vec2 fragCoord ){    vec2 uv = (fragCoord.xy-iResolution.xy*.5) / iResolution.y;    vec2 e = vec2(0.001, 0);     float f = func2D(uv);        float g = length( vec2(f - func2D(uv-e.xy), f - func2D(uv-e.yx)) )/(e.x);       g = 1./max(g, 0.001);        float freq = u_frequency;     float smoothFactor = iResolution.y*0.0125*u_smoothness;         float c;    if (u_glossyMode > 0.5) {        c = smoothFract(f*freq, g*iResolution.y/16.);    } else {        c = clamp(cos(f*freq*3.14159*2.)*g*smoothFactor, 0., 1.);    }        vec3 col = vec3(c);    vec3 col2 = vec3(c*0.64, c, c*c*0.1);        if (u_glossyMode > 0.5) {        col = mix(col, col2, -uv.y + clamp(fract(f*freq*0.5)*2.-1., 0., 1.0));    } else {        col = mix(col, col2, -uv.y + clamp(cos(f*freq*3.14159)*2., 0., 1.0));    }        f = f*freq;        if (u_glossyMode > 0.5) {        if(f>8. && f<9.) col *= vec3(1, 0, .1);    } else {        if(f>8.5 && f<9.5) col *= vec3(1, 0, .1);    }       if (u_glossyMode > 0.5) {        col += g*g*g*vec3(.3, .5, 1)*.25*.25*.25*.1;    }        fragColor = vec4( sqrt(clamp(col, 0., 1.)), 1.0 );}`;export const SmoothVoronoiContoursShaders = forwardRef<HTMLDivElement, SmoothVoronoiContoursShadersProps>(  (    {      className,      speed = 1.0,      frequency = 12.0,      smoothness = 1.0,      glossyMode = 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_frequency: { type: '1f', value: frequency },            u_smoothness: { type: '1f', value: smoothness },            u_glossyMode: { type: '1f', value: glossyMode },          }}          style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}        />      </div>    );  });SmoothVoronoiContoursShaders.displayName = "SmoothVoronoiContoursShaders";export default SmoothVoronoiContoursShaders;