React Smooth Noise Contours

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";export interface SmoothNoiseContoursShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  noiseScale?: number;  contourLevels?: number;  edgeIntensity?: number;}const fragmentShader = `#ifdef GL_OES_standard_derivatives#extension GL_OES_standard_derivatives : enable#endiffloat ns;float sFract(float x, float sm){    const float sf = 1.;         #ifdef GL_OES_standard_derivatives    vec2 u = vec2(x, fwidth(x)*sf*sm);    #else    vec2 u = vec2(x, 0.01*sf*sm);    #endif        u.x = fract(u.x);    u += (1. - 2.*u)*step(u.y, u.x);    return clamp(1. - u.x/u.y, 0., 1.);}float sFloor(float x){ return x - sFract(x, 1.); } vec3 rotHue(vec3 p, float a){    vec2 cs = sin(vec2(1.570796, 0) + a);    mat3 hr = mat3(0.299,  0.587,  0.114,  0.299,  0.587,  0.114,  0.299,  0.587,  0.114) +              mat3(0.701, -0.587, -0.114, -0.299,  0.413, -0.114, -0.300, -0.588,  0.886) * cs.x +              mat3(0.168,  0.330, -0.497, -0.328,  0.035,  0.292,  1.250, -1.050, -0.203) * cs.y;                                 return clamp(p*hr, 0., 1.);}vec3 hash33(vec3 p){     float n = sin(dot(p, vec3(7, 157, 113)));        return fract(vec3(2097152, 262144, 32768)*n)*2. - 1.;}float tetraNoise(in vec3 p){    vec3 i = floor(p + dot(p, vec3(1./3.)) );  p -= i - dot(i, vec3(1./6.));        vec3 i1 = step(p.yzx, p), i2 = max(i1, 1. - i1.zxy); i1 = min(i1, 1. - i1.zxy);            vec3 p1 = p - i1 + 1./6., p2 = p - i2 + 1./3., p3 = p - .5;      vec4 v = max(.5 - vec4(dot(p, p), dot(p1, p1), dot(p2, p2), dot(p3, p3)), 0.);        vec4 d = vec4(dot(p, hash33(i)), dot(p1, hash33(i + i1)), dot(p2, hash33(i + i2)), dot(p3, hash33(i + 1.)));         return clamp(dot(d, v*v*v*8.)*1.732 + .5, 0., 1.);}float func(vec2 p){    float n = tetraNoise(vec3(p.x*4.*u_noiseScale, p.y*4.*u_noiseScale, 0) - vec3(0, .25, .5)*iTime*u_speed);        float taper = .1 + dot(p, p*vec2(.35, 1));    n = max(n - taper, 0.)/max(1. - taper, .0001);        ns = n;         float palNum = u_contourLevels;         return n*.25 + clamp(sFloor(n*(palNum - .001))/(palNum - 1.), 0., 1.)*.75;}void mainImage(out vec4 fragColor, in vec2 fragCoord){    vec2 u = (fragCoord.xy - iResolution.xy*.5)/iResolution.y;        float f = func(u);    float ssd = ns;        vec2 e = vec2(1.5/iResolution.y, 0);    float fxl = func(u + e.xy);    float fxr = func(u - e.xy);    float fyt = func(u + e.yx);    float fyb = func(u - e.yx);        vec3 col = pow(min(vec3(1.5, 1, 1)*(f*.7 + ssd*.35), 1.), vec3(1, 2., 10)*2.) + .01;    col = rotHue(col, -.25+.4*length(u));    col *= max(1. - (abs(fxl - fxr) + abs(fyt - fyb))*5.*u_edgeIntensity, 0.);        fxl = func(u + e.xy*1.5);    fyt = func(u + e.yx*1.5);    col += vec3(.5, .7, 1)*(max(f - fyt, 0.) + max(f - fxl, 0.))*ssd*10.;        fragColor = vec4(sqrt(clamp(col, 0., 1.)), 1);}`;export const SmoothNoiseContoursShaders = forwardRef<HTMLDivElement, SmoothNoiseContoursShadersProps>(  (    {      className,      speed = 1.0,      noiseScale = 1.0,      contourLevels = 9.0,      edgeIntensity = 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_noiseScale: { type: '1f', value: noiseScale },            u_contourLevels: { type: '1f', value: contourLevels },            u_edgeIntensity: { type: '1f', value: edgeIntensity },          }}          style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}        />      </div>    );  });SmoothNoiseContoursShaders.displayName = "SmoothNoiseContoursShaders";export default SmoothNoiseContoursShaders;