React Monster Tunnel Shaders

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";export interface MonsterTunnelShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  rotationSpeed?: number;  segments?: number;  intensity?: number;}const fragmentShader = `const float PI = 3.1415926535;vec2 rot(vec2 p, float r) {    mat2 m = mat2(cos(r), sin(r), -sin(r), cos(r));    return m * p;}vec2 pmod(vec2 p, float n) {    float np = 2.0 * PI / n;    float r = atan(p.x, p.y) - 0.5 * np;    r = mod(r, np) - 0.5 * np;    return length(p) * vec2(cos(r), sin(r));}float cube(vec3 p, vec3 s) {    vec3 q = abs(p);    vec3 m = max(s - q, 0.0);    return length(max(q - s, 0.0)) - min(min(m.x, m.y), m.z);}float dist(vec3 p) {    p.z -= u_speed * iTime;    p.xy = rot(p.xy, 1.0 * p.z);    p.xy = pmod(p.xy, u_segments);    float k = 0.7;    float zid = floor(p.z * k);    p = mod(p, k) - 0.5 * k;        for (int i = 0; i < 4; i++) {        p = abs(p) - 0.3;        p.xy = rot(p.xy, 1.0 + zid + 0.1 * u_rotationSpeed * iTime);        p.xz = rot(p.xz, 1.0 + 4.7 * zid + 0.3 * u_rotationSpeed * iTime);    }        return min(cube(p, vec3(0.3)), length(p) - 0.4);}void mainImage(out vec4 fragColor, in vec2 fragCoord) {    vec2 uv = fragCoord / iResolution.xy;    uv = 2.0 * (uv - 0.5);    uv.y *= iResolution.y / iResolution.x;    uv = rot(uv, u_rotationSpeed * iTime);        vec3 ro = vec3(0.0, 0.0, 0.1);    vec3 rd = normalize(vec3(uv, 0.0) - ro);        float t = 2.0;    float d = 0.0;    float ac = 0.0;        // Raymarching loop    for (int i = 0; i < 66; i++) {        d = dist(ro + rd * t) * 0.2;        d = max(0.0001, abs(d));        t += d;        if (d < 0.001) ac += 0.1;    }        vec3 col = vec3(0.0);    col = vec3(0.1, 0.7, 0.7) * 0.2 * vec3(ac) * u_intensity;        vec3 pn = ro + rd * t;    float kn = 0.5;    pn.z += -1.5 * iTime * u_speed;    pn.z = mod(pn.z, kn) - 0.5 * kn;    float em = clamp(0.01 / pn.z, 0.0, 100.0);    col += 3.0 * em * vec3(0.1, 1.0, 0.1) * u_intensity;        col = clamp(col, 0.0, 1.0);        fragColor = vec4(col, 1.0);}`;export const MonsterTunnelShaders = forwardRef<HTMLDivElement, MonsterTunnelShadersProps>((  {    className,    speed = 1.0,    rotationSpeed = 1.0,    segments = 6.0,    intensity = 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_rotationSpeed: { type: '1f', value: rotationSpeed },          u_segments: { type: '1f', value: segments },          u_intensity: { type: '1f', value: intensity },        }}        style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}      />    </div>  );});MonsterTunnelShaders.displayName = "MonsterTunnelShaders";export default MonsterTunnelShaders;