React Digital Tunnel Shaders

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";interface DigitalTunnelShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  depth?: number;  glow?: number;  ringCount?: number;  particleFlow?: number;}const digitalTunnelFragment = `// Hash function for pseudo-random valuesfloat hash21(vec2 p) {  p = fract(p * vec2(233.34, 851.73));  p += dot(p, p + 23.45);  return fract(p.x * p.y);}// 3D rotation matricesmat2 rot(float a) {  float c = cos(a);  float s = sin(a);  return mat2(c, -s, s, c);}// Smooth minimum function for blendingfloat smin(float a, float b, float k) {  float h = max(k - abs(a - b), 0.0) / k;  return min(a, b) - h * h * h * k * (1.0 / 6.0);}// Distance to infinite tunnel ringsfloat sdTunnel(vec3 p) {  float z = p.z;  // Create repeating rings along Z axis  float ringSpacing = 2.0 / u_ringCount;  float ringZ = mod(z + iTime * u_speed * 0.5, ringSpacing) - ringSpacing * 0.5;  // Ring distance calculation  vec2 ringPos = vec2(length(p.xy), abs(ringZ));  vec2 ringSize = vec2(0.8 + sin(z * 0.1 + iTime) * 0.2, 0.05);  vec2 d = abs(ringPos) - ringSize;  return min(max(d.x, d.y), 0.0) + length(max(d, 0.0)) - 0.02;}// Tunnel walls distance functionfloat sdWalls(vec3 p) {  float wallRadius = 1.5 + sin(p.z * 0.2 + iTime * 0.3) * 0.3;  return length(p.xy) - wallRadius;}// Particle system for flowing effectsfloat particles(vec3 p) {  vec3 particleP = p;  particleP.z += iTime * u_speed * u_particleFlow;  // Grid-based particles  vec3 grid = floor(particleP * 8.0);  vec3 local = fract(particleP * 8.0) - 0.5;  float h = hash21(grid.xy + grid.z * 57.0);  if (h > 0.85) {    float d = length(local);    return exp(-d * 15.0) * (0.5 + 0.5 * sin(iTime * 3.0 + h * 20.0));  }  return 0.0;}// Scene distance functionfloat map(vec3 p) {  float rings = sdTunnel(p);  float walls = sdWalls(p);  // Combine using smooth minimum for organic blending  return smin(rings, walls, 0.1);}// Normal calculation for lightingvec3 getNormal(vec3 p) {  float d = map(p);  vec2 e = vec2(0.001, 0.0);  vec3 n = d - vec3(    map(p - e.xyy),    map(p - e.yxy),    map(p - e.yyx)  );  return normalize(n);}// Raymarching functionfloat rayMarch(vec3 ro, vec3 rd) {  float dO = 0.0;  for (int i = 0; i < 64; i++) {    vec3 p = ro + rd * dO;    float dS = map(p);    dO += dS;    if (dO > u_depth || abs(dS) < 0.001) break;  }  return dO;}void mainImage( out vec4 fragColor, in vec2 fragCoord ) {  vec2 uv = (fragCoord.xy - 0.5 * iResolution.xy) / iResolution.y;  // Camera setup - moving through tunnel  vec3 ro = vec3(0.0, 0.0, iTime * u_speed * -2.0);  vec3 rd = normalize(vec3(uv, 1.0));  // Add subtle camera rotation for dynamic feel  rd.xy *= rot(sin(iTime * 0.1) * 0.1);  // Raymarch the scene  float d = rayMarch(ro, rd);  // Calculate lighting and color  vec3 color = vec3(0.0);  if (d < u_depth) {    vec3 p = ro + rd * d;    vec3 n = getNormal(p);    // Distance-based coloring    float distanceGrad = 1.0 - d / u_depth;    // Neon ring colors - cyan to magenta gradient    vec3 neonColor1 = vec3(0.0, 1.0, 1.0); // Cyan    vec3 neonColor2 = vec3(1.0, 0.0, 1.0); // Magenta    vec3 neonColor3 = vec3(0.0, 0.5, 1.0); // Blue    // Color cycling based on position and time    float colorTime = p.z * 0.1 + iTime * 0.5;    vec3 baseColor;    float t = fract(colorTime);    if (t < 0.33) {      baseColor = mix(neonColor1, neonColor2, t * 3.0);    } else if (t < 0.66) {      baseColor = mix(neonColor2, neonColor3, (t - 0.33) * 3.0);    } else {      baseColor = mix(neonColor3, neonColor1, (t - 0.66) * 3.0);    }    // Lighting calculation    vec3 lightDir = normalize(vec3(0.0, 0.0, -1.0));    float diff = max(dot(n, lightDir), 0.0);    // Fresnel effect for rim lighting    float fresnel = pow(1.0 - max(dot(n, -rd), 0.0), 2.0);    // Combine lighting    color = baseColor * (diff * 0.5 + 0.3) + fresnel * baseColor * u_glow;    // Distance fog    color *= distanceGrad;  }  // Add particle effects  vec3 particleP = ro + rd * min(d, u_depth * 0.8);  float particleGlow = particles(particleP);  color += vec3(0.2, 0.8, 1.0) * particleGlow * u_particleFlow;  // Tunnel entrance glow effect  float tunnelGlow = exp(-length(uv) * 2.0) * 0.3;  color += vec3(0.1, 0.3, 0.8) * tunnelGlow;  // Scanlines for digital effect  float scanline = sin(fragCoord.y * 0.5) * 0.1 + 0.9;  color *= scanline;  // Vignette  float vignette = 1.0 - length(uv) * 0.8;  color *= vignette;  // Tone mapping for HDR-like effect  color = color / (1.0 + color);  fragColor = vec4(color, 1.0);}`;export const DigitalTunnelShaders = forwardRef<HTMLDivElement, DigitalTunnelShadersProps>(  ({    speed = 1.0,    depth = 20.0,    glow = 1.0,    ringCount = 3.0,    particleFlow = 1.0,    className,    children,    ...props  }, ref) => {    return (      <div        ref={ref}        className={cn('w-full h-full', className)}        {...props}      >        <Shader          fs={digitalTunnelFragment}          uniforms={{            u_speed: { type: '1f', value: speed },            u_depth: { type: '1f', value: depth },            u_glow: { type: '1f', value: glow },            u_ringCount: { type: '1f', value: ringCount },            u_particleFlow: { type: '1f', value: particleFlow },          }}          style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}        />      </div>    );  });DigitalTunnelShaders.displayName = "DigitalTunnelShaders";