React 3-Tap Voronoi Shaders

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";export interface ThreeTapVoronoiShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  scale?: number;  highlightIntensity?: number;  colorScheme?: number;}const fragmentShader = `vec2 hash22(vec2 p) {     float n = sin(mod(dot(p,vec2(1, 113)), 6.2831859));     p = fract(vec2(8.*n, n)*262144.);    return sin(p*6.2831853 + iTime*2.*u_speed);}float Voronoi3Tap(vec2 p){    vec2 s = floor(p + (p.x + p.y)*.3660254);    p -= s - (s.x + s.y)*.2113249;    float i = p.x<p.y? 0. : 1.;        vec2 p1 = p - vec2(i, 1. - i) + .2113249, p2 = p - .5773502;     p += hash22(s)*.125;    p1 += hash22(s +  vec2(i, 1. - i))*.125;    p2 += hash22(s + 1.)*.125;        float d = min(min(dot(p, p), dot(p1, p1)), dot(p2, p2))/.425;       return sqrt(d);}void mainImage( out vec4 fragColor, in vec2 fragCoord ){    vec2 uv = (fragCoord - iResolution.xy*.5)/iResolution.y;        float c = Voronoi3Tap(uv*5.*u_scale);    float c2 = Voronoi3Tap(uv*5.*u_scale - 9./iResolution.y);        float pattern = cos(uv.x*.75*3.14159 - .9)*cos(uv.y*1.5*3.14159 - .75)*.5 + .5;        vec3 col, col2;        if (u_colorScheme < 0.5) {        col = mix(vec3(c*1.3, c*c, pow(c, 10.)), vec3(c*c*.8, c, c*c*.35), pattern );        col2 = mix(vec3(c*1.2, pow(c, 8.), c*c), vec3(c*1.3, c*c, pow(c, 10.)), pattern );    } else if (u_colorScheme < 1.5) {        col = mix(vec3(c*1.2, pow(c, 8.), c*c), vec3(c*1.3, c*c, pow(c, 10.)), pattern );        col2 = mix(vec3(c*1.3, c*c, pow(c, 10.)), vec3(c*c*.8, c, c*c*.35), pattern );    } else {        col = mix(vec3(c, c*c*.8, c*1.3), vec3(c*c*.35, c*c*.8, c), pattern );        col2 = mix(vec3(pow(c, 10.), c*c, c*1.3), vec3(c*c, pow(c, 8.), c*1.2), pattern );    }        col = mix(col, col2, smoothstep(.4, .6, sin(iTime*.25*u_speed)*.5 + .5));    col += vec3(.5, .8, 1)*(c2*c2*c2 - c*c*c)*5.*u_highlightIntensity;           col += (length(hash22(uv + iTime*u_speed))*.06 - .03)*vec3(1, .5, 0);        uv = fragCoord/iResolution.xy;    col *= smoothstep(0., .5, pow(16.*uv.x*uv.y*(1. - uv.x)*(1. - uv.y), .25))*                      vec3(1.1, 1.07, 1.01);        fragColor = vec4(sqrt(max(col, 0.)), 1);}`;export const ThreeTapVoronoiShaders = forwardRef<HTMLDivElement, ThreeTapVoronoiShadersProps>(  (    {      className,      speed = 1.0,      scale = 1.0,      highlightIntensity = 1.0,      colorScheme = 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_scale: { type: '1f', value: scale },            u_highlightIntensity: { type: '1f', value: highlightIntensity },            u_colorScheme: { type: '1f', value: colorScheme },          }}          style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}        />      </div>    );  });ThreeTapVoronoiShaders.displayName = "ThreeTapVoronoiShaders";export default ThreeTapVoronoiShaders;