Iridescence

import {
  Shader,
  type ShaderComponentProps,
  type ShaderMotionParams,
  type ShaderPreset,
} from "@/components/Shader";
import {
  colorPropsAreEqual,
  defaultObjectSizing,
  ShaderFitOptions,
  type ShaderSizingParams,
  type 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 fragCoord = gl_FragCoord.xy;

  float mr = min(v_responsiveBoxGivenSize.x, v_responsiveBoxGivenSize.y);
  vec2 uv = (fragCoord * 2.0 - v_responsiveBoxGivenSize.xy) / mr;

  float d = -u_time * 0.5;
  float a = 0.0;
  for (float i = 0.0; i < 8.0; ++i) {
    a += cos(i - d - a * uv.x);
    d += sin(uv.y * i + a);
  }
  d += u_time * 0.5;
  vec3 col = vec3(cos(uv * vec2(d, a)) * 0.6 + 0.4, cos(a + d) * 0.5 + 0.5);
  col = cos(col * cos(vec3(d, a, 2.5)) * 0.5 + 0.5);
  fragColor = vec4(col, 1.0);
}
`;

type IridescenceUniforms = ShaderSizingUniforms & {};

export interface IridescenceParams
  extends ShaderSizingParams,
    ShaderMotionParams {}

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

export const iridescencePresets: ShaderPreset<IridescenceParams>[] = [
  defaultPreset,
];

export interface IridescenceProps
  extends ShaderComponentProps,
    IridescenceParams {}

export const Iridescence: React.FC<IridescenceProps> = memo(
  function IridescenceImpl({
    // 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
  }: IridescenceProps) {
    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 IridescenceUniforms;

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