Ripples in Black Shaders

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";export interface RipplesInBlackShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  rippleFrequency?: number;  colorIntensity?: number;  interferenceThreshold?: number;}const fragmentShader = `#extension GL_OES_standard_derivatives : enablefloat dist_moving(vec2 outTexCoord, float ar, float x_speed, float y_speed) {    vec2 corrected_coord = vec2(outTexCoord.x * ar - 0.50, outTexCoord.y);    float time_adjusted = iTime * 1.25 * u_speed;    vec2 point_1 = vec2(0.5 * (sin(time_adjusted * x_speed) + 1.00), 0.5 * (sin(time_adjusted * y_speed) - 0.50) + 1.00);    float point_1_dist = distance(point_1, corrected_coord);    float distance_multiplyer = 0.50;    return (point_1_dist * distance_multiplyer);}void mainImage(out vec4 fragColor, in vec2 fragCoord) {    float ar = iResolution.x / iResolution.y;    vec2 outTexCoord = vec2(fragCoord.x / iResolution.x, fragCoord.y / iResolution.y);    float point_1_dist = dist_moving(outTexCoord, ar, -0.11, 0.17);    float point_1_dist_rippled = sin((point_1_dist) * 30.00 * u_rippleFrequency);    float point_2_dist = dist_moving(outTexCoord, ar, 0.04, -0.09);    float point_2_dist_rippled = sin(point_2_dist * 30.00 * u_rippleFrequency);    float point_3_dist = dist_moving(outTexCoord, ar, 0.09, 0.07);    float point_3_dist_rippled = sin(point_3_dist * 30.00 * u_rippleFrequency);    vec4 colorful_rings = vec4(abs(point_1_dist_rippled), abs(point_2_dist_rippled), abs(point_3_dist_rippled), 1.00);    colorful_rings *= u_colorIntensity;    float color_intensity = (colorful_rings.r + colorful_rings.g + colorful_rings.b) / 3.00;    vec4 bw_rings = vec4(color_intensity, color_intensity, color_intensity, 1.00);    float bw_rings_rippled = (sin(color_intensity * 20.00));    vec4 final_color;    if (bw_rings_rippled > u_interferenceThreshold) {        final_color = colorful_rings * colorful_rings;    } else {        final_color = vec4(bw_rings_rippled, bw_rings_rippled, bw_rings_rippled, 1.00);    }    fragColor = final_color;}`;export const RipplesInBlackShaders = forwardRef<HTMLDivElement, RipplesInBlackShadersProps>((  {    className,    speed = 1.0,    rippleFrequency = 1.0,    colorIntensity = 1.0,    interferenceThreshold = 0.5,    ...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_rippleFrequency: { type: '1f', value: rippleFrequency },          u_colorIntensity: { type: '1f', value: colorIntensity },          u_interferenceThreshold: { type: '1f', value: interferenceThreshold },        }}        style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}      />    </div>  );});RipplesInBlackShaders.displayName = "RipplesInBlackShaders";export default RipplesInBlackShaders;