Acid

import {
  Shader,
  ShaderComponentProps,
  ShaderMotionParams,
  ShaderPreset,
} from "@/components/Shader";
import {
  colorPropsAreEqual,
  defaultObjectSizing,
  ShaderFitOptions,
  ShaderSizingParams,
  ShaderSizingUniforms,
  sizingVariablesDeclaration,
} from "@/lib/shader-utils";
import { cn } from "@/lib/utils";
import { memo } from "react";

const fragmentShader = `#version 300 es
precision highp float;

uniform float u_time;
out vec4 fragColor;

${sizingVariablesDeclaration}

void main() {
  vec2 r = v_responsiveBoxGivenSize;
  float t = u_time;
  vec4 o = vec4(0.0);

  o = gl_FragCoord / r.y - 0.5;
  for (int i = 0; i++ < 9;)
    o.tpqs += sin(o * 3. - o.tsst + t * 0.1);
  o = 1. - exp(o);

  fragColor = vec4(clamp(o.rgb, 0.0, 1.0), 1.0);
}
`;

type AcidUniforms = ShaderSizingUniforms & {};

export interface AcidParams extends ShaderSizingParams, ShaderMotionParams {}

const defaultPreset: ShaderPreset<AcidParams> = {
  name: "Default",
  params: {
    speed: 1,
    frame: 0,
    ...defaultObjectSizing,
  },
};

export const acidPresets: ShaderPreset<AcidParams>[] = [defaultPreset];

export interface AcidProps extends ShaderComponentProps, AcidParams {}

export const Acid: React.FC<AcidProps> = memo(function MeshGradientImpl({
  // Own props
  speed = defaultPreset.params.speed,
  frame = defaultPreset.params.frame,

  // Sizing props
  fit = defaultPreset.params.fit,
  rotation = defaultPreset.params.rotation,
  scale = defaultPreset.params.scale,
  originX = defaultPreset.params.originX,
  originY = defaultPreset.params.originY,
  offsetX = defaultPreset.params.offsetX,
  offsetY = defaultPreset.params.offsetY,
  worldWidth = defaultPreset.params.worldWidth,
  worldHeight = defaultPreset.params.worldHeight,
  ...props
}: AcidProps) {
  const uniforms = {
    // Sizing uniforms
    u_fit: ShaderFitOptions[fit],
    u_rotation: rotation,
    u_scale: scale,
    u_offsetX: offsetX,
    u_offsetY: offsetY,
    u_originX: originX,
    u_originY: originY,
    u_worldWidth: worldWidth,
    u_worldHeight: worldHeight,
  } satisfies AcidUniforms;

  return (
    <Shader
      {...props}
      className={cn("w-full h-full", props.className)}
      speed={speed}
      frame={frame}
      fragmentShader={fragmentShader}
      uniforms={uniforms}
    />
  );
}, colorPropsAreEqual);