@toriistudio/shader-ui 0.0.1 → 0.0.2

package/dist/index.mjs

@@ -20,6 +20,7 @@ function useScene({
   const onCreateRef = useRef(onCreate);
   const onRenderRef = useRef(onRender);
   const onResizeRef = useRef(onResize);
+  const sizeRef = useRef({ width: 0, height: 0 });
   useEffect(() => {
     onCreateRef.current = onCreate;
   }, [onCreate]);
@@ -34,43 +35,83 @@ function useScene({
     const container = containerRef.current;
     if (!container) return;
     const resolvedPixelRatio = pixelRatio ?? (typeof window !== "undefined" ? Math.min(window.devicePixelRatio, 2) : 1);
+    const initialWidth = container.clientWidth || 1;
+    const initialHeight = container.clientHeight || 1;
+    sizeRef.current = { width: initialWidth, height: initialHeight };
     const renderer = new THREE.WebGLRenderer({
       alpha: true,
       antialias: true,
       ...rendererOptions
     });
     renderer.setPixelRatio(resolvedPixelRatio);
-    renderer.setSize(container.clientWidth, container.clientHeight, false);
+    renderer.setSize(initialWidth, initialHeight, false);
     renderer.setClearColor(0, 0);
     renderer.domElement.style.width = "100%";
     renderer.domElement.style.height = "100%";
     container.appendChild(renderer.domElement);
     const scene = new THREE.Scene();
-    const camera = new THREE.PerspectiveCamera(
-      cameraOptions?.fov ?? 55,
-      container.clientWidth / Math.max(1, container.clientHeight),
-      cameraOptions?.near ?? 0.1,
-      cameraOptions?.far ?? 500
-    );
-    const [x = 0, y = 0, z = 15] = cameraOptions?.position ?? [];
-    camera.position.set(x, y, z);
+    let camera;
+    if (cameraOptions?.type === "orthographic") {
+      const halfWidth = initialWidth / 2;
+      const halfHeight = initialHeight / 2;
+      const orthoCamera = new THREE.OrthographicCamera(
+        -halfWidth,
+        halfWidth,
+        halfHeight,
+        -halfHeight,
+        cameraOptions?.near ?? 0.1,
+        cameraOptions?.far ?? 1e3
+      );
+      const [, , z = 10] = cameraOptions?.position ?? [];
+      orthoCamera.position.set(0, 0, z);
+      camera = orthoCamera;
+    } else {
+      const perspectiveCamera = new THREE.PerspectiveCamera(
+        cameraOptions?.fov ?? 55,
+        initialWidth / Math.max(1, initialHeight),
+        cameraOptions?.near ?? 0.1,
+        cameraOptions?.far ?? 500
+      );
+      const [x = 0, y = 0, z = 15] = cameraOptions?.position ?? [];
+      perspectiveCamera.position.set(x, y, z);
+      camera = perspectiveCamera;
+    }
     const clock = new THREE.Clock();
-    const context = { renderer, scene, camera, clock };
+    const context = {
+      renderer,
+      scene,
+      camera,
+      clock,
+      size: { ...sizeRef.current }
+    };
     contextRef.current = context;
     const teardownCreate = onCreateRef.current?.(context);
+    let elapsedTime = 0;
     let animationFrameId = 0;
     const renderLoop = () => {
-      onRenderRef.current?.(context);
+      const delta = clock.getDelta();
+      elapsedTime += delta;
+      context.size = { ...sizeRef.current };
+      onRenderRef.current?.(context, delta, elapsedTime);
       renderer.render(scene, camera);
       animationFrameId = requestAnimationFrame(renderLoop);
     };
     animationFrameId = requestAnimationFrame(renderLoop);
     const resizeObserver = new ResizeObserver(() => {
-      const width = container.clientWidth;
-      const height = container.clientHeight;
+      const width = container.clientWidth || 1;
+      const height = container.clientHeight || 1;
       renderer.setSize(width, height, false);
-      camera.aspect = width / Math.max(1, height);
+      sizeRef.current = { width, height };
+      if (camera instanceof THREE.PerspectiveCamera) {
+        camera.aspect = width / Math.max(1, height);
+      } else if (camera instanceof THREE.OrthographicCamera) {
+        camera.left = -width / 2;
+        camera.right = width / 2;
+        camera.top = height / 2;
+        camera.bottom = -height / 2;
+      }
       camera.updateProjectionMatrix();
+      context.size = { ...sizeRef.current };
       onResizeRef.current?.(context, { width, height });
     });
     resizeObserver.observe(container);
@@ -130,15 +171,14 @@ function ShaderArt({
       assetsRef.current = null;
     };
   }, []);
-  const handleRender = useCallback((context) => {
-    shaderUniformsRef.current.iTime.value = context.clock.getElapsedTime();
-    const canvas = context.renderer.domElement;
-    shaderUniformsRef.current.iResolution.value.set(
-      canvas.width,
-      canvas.height,
-      1
-    );
-  }, []);
+  const handleRender = useCallback(
+    (context, _delta, elapsedTime) => {
+      shaderUniformsRef.current.iTime.value = elapsedTime;
+      const { width: width2, height: height2 } = context.size;
+      shaderUniformsRef.current.iResolution.value.set(width2, height2, 1);
+    },
+    []
+  );
   const { containerRef } = useScene({
     onCreate: handleCreate,
     onRender: handleRender
@@ -285,7 +325,12 @@ function FractalFlower({
       const points = new THREE3.Points(geometry, material);
       points.frustumCulled = false;
       scene.add(points);
-      assetsRef.current = { points, geometry, material, uniforms: uniformValues };
+      assetsRef.current = {
+        points,
+        geometry,
+        material,
+        uniforms: uniformValues
+      };
       return () => {
         scene.remove(points);
         geometry.dispose();
@@ -293,25 +338,29 @@ function FractalFlower({
         assetsRef.current = null;
       };
     },
-    [attributes.eValues, attributes.kValues, attributes.positions, attributes.rotations]
+    [
+      attributes.eValues,
+      attributes.kValues,
+      attributes.positions,
+      attributes.rotations
+    ]
   );
   const handleRender = useCallback2(
-    (context) => {
+    (context, delta, elapsedTime) => {
       const assets = assetsRef.current;
       if (!assets) return;
       const uniforms = assets.uniforms;
-      uniforms.uTime.value = context.clock.getElapsedTime();
-      const canvas = context.renderer.domElement;
-      uniforms.uResolution.value.set(canvas.width, canvas.height);
+      uniforms.uTime.value = elapsedTime;
+      const { width: width2, height: height2 } = context.size;
+      uniforms.uResolution.value.set(width2, height2);
       const basePointSize = Math.max(
         2,
-        canvas.height / 400 * (uniforms.uPetalRadius.value * 32)
+        height2 / 400 * (uniforms.uPetalRadius.value * 32)
       );
       const pointSize = Math.min(basePointSize, 6);
       uniforms.uPointSize.value = pointSize;
       const morph = morphRef.current;
       if (Math.abs(morph.target - morph.progress) > 1e-3) {
-        const delta = context.clock.getDelta();
         const direction = Math.sign(morph.target - morph.progress);
         morph.progress = clamp(
           morph.progress + direction * delta * MORPH_SPEED,
@@ -462,11 +511,14 @@ function OranoParticles({
       particlesRef.current = null;
     };
   }, []);
-  const handleRender = useCallback3((context) => {
-    const assets = particlesRef.current;
-    if (!assets) return;
-    assets.uniforms.uTime.value = context.clock.getElapsedTime();
-  }, []);
+  const handleRender = useCallback3(
+    (_context, _delta, elapsedTime) => {
+      const assets = particlesRef.current;
+      if (!assets) return;
+      assets.uniforms.uTime.value = elapsedTime;
+    },
+    []
+  );
   const { containerRef } = useScene({
     onCreate: handleCreate,
     onRender: handleRender
@@ -525,8 +577,477 @@ function OranoParticles({
     }
   );
 }
+
+// src/components/MenuGlitch.tsx
+import { gsap } from "gsap";
+import {
+  useCallback as useCallback4,
+  useEffect as useEffect5,
+  useMemo as useMemo2,
+  useRef as useRef5
+} from "react";
+import * as THREE5 from "three";
+
+// src/shaders/menu-glitch/fragment.glsl
+var fragment_default4 = "#define M_PI 3.1415926535897932384626433832795\n\nuniform sampler2D tDiffuse;\nuniform sampler2D tGradient;\n\nuniform float uTime;\n\nuniform float uTileProgressVertical;\nuniform float uTileProgressHorizontal;\nuniform float uTileAmplitude;\nuniform vec2  uTileFrequency;\nuniform vec2  uTileOffset;\n\nuniform float uWaveProgress;\nuniform float uWaveAmplitude;\nuniform vec2  uWaveStrength;\n\nuniform float uGradientProgress;\nuniform float uGradientOffset;\nuniform float uGradientAmplitude;\n\nuniform float uBlueProgress;\nuniform float uBlueAmplitude;\n\nuniform float uWhiteTileChances;\nuniform float uWhiteTileFrequency;\nuniform float uWhiteTileStrength;\n\nuniform float uSaturation;\n\nvarying vec2 vUv;\n\n\n// --------------------------------------------------\n// Utilities\n// --------------------------------------------------\n\nfloat random(in vec2 st) {\n    return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);\n}\n\nvec2 getTileCoord(vec2 pos, vec2 frequency) {\n    vec2 coord = vec2(\n        floor(pos.x * frequency.x),\n        floor(pos.y * frequency.y)\n    );\n\n    coord /= frequency;\n    return coord;\n}\n\nfloat toSin(float value) {\n    return (sin((value - 0.5) * M_PI) + 1.0) * 0.5;\n}\n\n\n// --------------------------------------------------\n// Main\n// --------------------------------------------------\n\nvoid main() {\n\n    // ------------------------\n    // Tiles\n    // ------------------------\n    vec2 tileCoord1 = getTileCoord(vUv, uTileFrequency * 1.8942);\n    vec2 tileCoord2 = getTileCoord(vUv, uTileFrequency * 1.0);\n    vec2 tileCoord3 = getTileCoord(vUv, uTileFrequency * 2.1245);\n\n    vec2 tileCoord = tileCoord2 +\n        step(random(tileCoord1), 0.5) * (tileCoord3 - tileCoord2);\n\n    float tileRandom = random(tileCoord);\n    float tileAngle  = tileRandom * M_PI * 2.0;\n\n    vec2 tileOffset = vec2(sin(tileAngle), cos(tileAngle)) * uTileOffset;\n\n    float tileProgress = 1.0 -\n        (distance(tileCoord.y, uTileProgressVertical) / (uTileAmplitude * 0.5));\n\n    tileProgress = clamp(tileProgress, 0.0, 1.0);\n\n    float tileProgressHorizontal = 1.0 -\n        (distance(tileCoord.x, uTileProgressHorizontal) / (uTileAmplitude * 0.5));\n    tileProgressHorizontal = clamp(tileProgressHorizontal, 0.0, 1.0);\n\n    // ------------------------\n    // Wave\n    // ------------------------\n    float waveProgress = 1.0 -\n        (distance(vUv.x, uWaveProgress) / (uWaveAmplitude * 0.5));\n\n    waveProgress = clamp(waveProgress, 0.0, 1.0);\n\n    vec2 waveOffset = toSin(waveProgress) * uWaveStrength;\n\n\n    // ------------------------\n    // Gradient\n    // ------------------------\n    float gradientProgress = (tileCoord.x - uGradientProgress) / uGradientAmplitude;\n    gradientProgress      += (tileRandom - 0.5) * uGradientOffset;\n\n    vec4 gradientColor = texture2D(\n        tGradient,\n        vec2(clamp(gradientProgress, 0.0, 1.0), 0.0)\n    );\n\n\n    // ------------------------\n    // Blue tint\n    // ------------------------\n    float blueProgress = (tileCoord.x - uBlueProgress) / uBlueAmplitude;\n    blueProgress      += tileOffset.x;\n    blueProgress       = clamp(blueProgress, 0.0, 1.0);\n\n\n    // ------------------------\n    // White flickering tiles\n    // ------------------------\n    float whiteTileProgress =\n        sin(uTime * uWhiteTileFrequency + tileRandom * M_PI * 2.0) * 0.5 + 0.5;\n\n    whiteTileProgress =\n        clamp(whiteTileProgress - (1.0 - uWhiteTileChances), 0.0, 1.0) *\n        (1.0 / uWhiteTileChances) *\n        uWhiteTileStrength;\n\n\n    // ------------------------\n    // Final color pipeline\n    // ------------------------\n    vec2 uv = vUv;\n\n    // Apply tile offset\n    uv += tileOffset * tileProgress;\n\n    // Apply waves (optional)\n    // uv += waveOffset;\n\n    // Repeat UV\n    uv = mod(uv, vec2(1.0));\n\n    // Base color removed so overlay only contains glitch elements\n    vec4 color = vec4(0.0);\n\n    // Add gradient\n    color.rgb += gradientColor.rgb * gradientColor.a * tileProgressHorizontal;\n\n    // Add white flicker effect\n    color.rgb += vec3(whiteTileProgress) * tileProgressHorizontal;\n\n    // Blue tone shift\n    vec3 blueColor = vec3((color.r + color.g + color.b) / 3.0) *\n                     vec3(0.3, 0.5, 1.0);\n\n    color.rgb = mix(color.rgb, blueColor, vec3(blueProgress));\n\n    // Saturation\n    color.rgb *= uSaturation;\n\n    float effectAlpha =\n        clamp(tileProgressHorizontal * (tileProgress * 0.6 + whiteTileProgress + gradientColor.a), 0.0, 1.0);\n\n    // Output\n    gl_FragColor = vec4(color.rgb, effectAlpha);\n}\n";
+
+// src/shaders/menu-glitch/vertex.glsl
+var vertex_default4 = "varying vec2 vUv;\n\nvoid main() {\n  vUv = uv;\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n";
+
+// src/components/MenuGlitch.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var GRADIENT_DATA_URL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAxWXB3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTVBRkY1OTJDREMyMTFFODhGRjFFRjgxRjM2QjM2MDMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTVBRkY1OTNDREMyMTFFODhGRjFFRjgxRjM2QjM2MDMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFNUFGRjU5MENEQzIxMUU4OEZGMUVGODFGMzZCMzYwMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFNUFGRjU5MUNEQzIxMUU4OEZGMUVGODFGMzZCMzYwMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pksi3ywAAADMSURBVHjarFDLDoMwDDMtUDjtME3TtMcn7f9/hngBCoTSTjsMydixnVZqxTcAX51Quwsad1M80PonWvdCUA7+rrii82eEulcG+hoTdwsrQtRB0UZu3KxrN8OPqIBKgRHxI8qaUTD1RuY2p90V+hOjmWix2uSSeGLPKrDdKc5GHzqZLPWY7XEG+F1PLBktpiuzf8ilkMvqcZfLLqf1ltnu7rLh4G88ZPxh4uUOmjMYO3aPqz8Yve0tGiaDduNr/xn8cWbBY8HLzQd8BBgAgOx+ERYDbIEAAAAASUVORK5CYII=";
+var BASE_TRANSITION_PROGRESS = 0.5;
+var SHOW_BASE_DURATION = 2.72;
+var HIDE_BASE_DURATION = 1.8;
+var SHOW_PRIMARY_DURATION = 1.1;
+var MIN_GLITCH_DURATION = 0.25;
+function MenuGlitch({
+  settings,
+  onShowDone,
+  onHideDone,
+  className,
+  style,
+  width,
+  height,
+  ...divProps
+}) {
+  const diffuseTexture = useMemo2(() => createDiffuseTexture(), []);
+  const gradientTextureRef = useRef5(new THREE5.Texture());
+  const sanitizedValues = useMemo2(() => {
+    const clamp2 = THREE5.MathUtils.clamp;
+    return {
+      tileAmplitude: Math.max(0.1, settings.tileAmplitude),
+      planeScale: Math.max(0.1, settings.planeScale ?? 1),
+      tileOffsetX: settings.tileOffset.x,
+      tileOffsetY: settings.tileOffset.y,
+      tileFrequencyX: Math.max(0.1, settings.tileFrequency.x),
+      tileFrequencyY: Math.max(0.1, settings.tileFrequency.y),
+      gradientAmplitude: Math.max(0.05, settings.gradientAmplitude),
+      gradientOffset: settings.gradientOffset,
+      gradientProgress: settings.gradientProgress ?? 1,
+      blueAmplitude: Math.max(0.05, settings.blueAmplitude),
+      blueProgress: settings.blueProgress ?? 1,
+      waveAmplitude: Math.max(0.05, settings.waveAmplitude),
+      waveProgress: settings.waveProgress ?? 0.5,
+      waveStrengthX: settings.waveStrength.x,
+      waveStrengthY: settings.waveStrength.y,
+      whiteTileChances: clamp2(settings.whiteTileChances, 0.05, 1),
+      whiteTileFrequency: Math.max(0.01, settings.whiteTileFrequency),
+      whiteTileStrength: Math.max(0, settings.whiteTileStrength),
+      saturation: Math.max(0, settings.saturation),
+      duration: Math.max(
+        MIN_GLITCH_DURATION,
+        settings.duration ?? SHOW_PRIMARY_DURATION
+      ),
+      debug: settings.debug
+    };
+  }, [settings]);
+  const sanitizedRef = useRef5(sanitizedValues);
+  sanitizedRef.current = sanitizedValues;
+  const sizeRef = useRef5({ width: 0, height: 0 });
+  const assetsRef = useRef5(null);
+  const animationVisibleRef = useRef5(false);
+  const shaderUniforms = useRef5({
+    tDiffuse: { value: diffuseTexture },
+    tGradient: { value: gradientTextureRef.current },
+    uTime: { value: 0 },
+    uTileProgressVertical: { value: -0.5 },
+    uTileProgressHorizontal: { value: -0.5 },
+    uTileAmplitude: { value: settings.tileAmplitude },
+    uTileOffset: {
+      value: new THREE5.Vector2(settings.tileOffset.x, settings.tileOffset.y)
+    },
+    uTileFrequency: {
+      value: new THREE5.Vector2(
+        settings.tileFrequency.x,
+        settings.tileFrequency.y
+      )
+    },
+    uWaveProgress: { value: settings.waveProgress },
+    uWaveAmplitude: { value: settings.waveAmplitude },
+    uWaveStrength: {
+      value: new THREE5.Vector2(
+        settings.waveStrength.x,
+        settings.waveStrength.y
+      )
+    },
+    uGradientProgress: { value: settings.gradientProgress },
+    uGradientOffset: { value: settings.gradientOffset },
+    uGradientAmplitude: { value: settings.gradientAmplitude },
+    uBlueProgress: { value: settings.blueProgress },
+    uBlueAmplitude: { value: settings.blueAmplitude },
+    uWhiteTileChances: { value: settings.whiteTileChances },
+    uWhiteTileFrequency: { value: settings.whiteTileFrequency },
+    uWhiteTileStrength: { value: settings.whiteTileStrength },
+    uSaturation: { value: settings.saturation }
+  });
+  useEffect5(() => {
+    let disposed = false;
+    const loader = new THREE5.TextureLoader();
+    loader.load(
+      GRADIENT_DATA_URL,
+      (texture) => {
+        if (disposed) return;
+        texture.wrapS = THREE5.ClampToEdgeWrapping;
+        texture.wrapT = THREE5.ClampToEdgeWrapping;
+        texture.magFilter = THREE5.LinearFilter;
+        texture.minFilter = THREE5.LinearFilter;
+        texture.colorSpace = THREE5.SRGBColorSpace;
+        gradientTextureRef.current = texture;
+        shaderUniforms.current.tGradient.value = texture;
+      },
+      void 0,
+      () => {
+        if (disposed) return;
+        gradientTextureRef.current = new THREE5.Texture();
+        shaderUniforms.current.tGradient.value = gradientTextureRef.current;
+      }
+    );
+    return () => {
+      disposed = true;
+    };
+  }, []);
+  const updateMeshScale = useCallback4(() => {
+    const assets = assetsRef.current;
+    if (!assets) return;
+    const base = Math.max(
+      sizeRef.current.width || 1,
+      sizeRef.current.height || 1
+    );
+    const scale = base * sanitizedRef.current.planeScale;
+    assets.mesh.scale.set(scale, scale, 1);
+  }, []);
+  const updateVisibility = useCallback4(() => {
+    const mesh = assetsRef.current?.mesh;
+    if (!mesh) return;
+    mesh.visible = sanitizedRef.current.debug || animationVisibleRef.current;
+  }, []);
+  const handleCreate = useCallback4(
+    ({ scene, size }) => {
+      const geometry = new THREE5.PlaneGeometry(1, 1);
+      const material = new THREE5.ShaderMaterial({
+        vertexShader: vertex_default4,
+        fragmentShader: fragment_default4,
+        uniforms: shaderUniforms.current,
+        depthWrite: false,
+        depthTest: false,
+        transparent: true,
+        blending: THREE5.AdditiveBlending
+      });
+      const mesh = new THREE5.Mesh(geometry, material);
+      scene.add(mesh);
+      assetsRef.current = { mesh, geometry, material };
+      sizeRef.current = size;
+      updateMeshScale();
+      updateVisibility();
+      return () => {
+        scene.remove(mesh);
+        geometry.dispose();
+        material.dispose();
+        assetsRef.current = null;
+      };
+    },
+    [updateMeshScale, updateVisibility]
+  );
+  const handleRender = useCallback4(
+    (_context, _delta, elapsedTime) => {
+      shaderUniforms.current.uTime.value = elapsedTime;
+    },
+    []
+  );
+  const handleResize = useCallback4(
+    (_context, size) => {
+      sizeRef.current = size;
+      updateMeshScale();
+    },
+    [updateMeshScale]
+  );
+  const { containerRef } = useScene({
+    camera: { type: "orthographic", position: [0, 0, 10], near: 0.1, far: 100 },
+    onCreate: handleCreate,
+    onRender: handleRender,
+    onResize: handleResize
+  });
+  const showTimeline = useRef5(null);
+  const hideTimeline = useRef5(null);
+  const transitionTimeline = useRef5(null);
+  const timelineParams = useMemo2(
+    () => ({
+      tileAmplitude: sanitizedValues.tileAmplitude,
+      gradientAmplitude: sanitizedValues.gradientAmplitude,
+      gradientOffset: sanitizedValues.gradientOffset,
+      tileOffsetX: sanitizedValues.tileOffsetX,
+      duration: sanitizedValues.duration
+    }),
+    [
+      sanitizedValues.duration,
+      sanitizedValues.gradientAmplitude,
+      sanitizedValues.gradientOffset,
+      sanitizedValues.tileAmplitude,
+      sanitizedValues.tileOffsetX
+    ]
+  );
+  const primeShowAnimation = useCallback4(() => {
+    const uniforms = shaderUniforms.current;
+    uniforms.uTileProgressHorizontal.value = 1 + timelineParams.tileAmplitude * 0.5;
+    uniforms.uGradientProgress.value = 1 + timelineParams.gradientOffset;
+    uniforms.uBlueProgress.value = 1 + timelineParams.tileOffsetX;
+    uniforms.uSaturation.value = 1;
+    uniforms.uWhiteTileStrength.value = 0;
+  }, [
+    timelineParams.gradientOffset,
+    timelineParams.tileAmplitude,
+    timelineParams.tileOffsetX
+  ]);
+  const buildTimelines = useCallback4(() => {
+    const uniforms = shaderUniforms.current;
+    const glitchDuration = sanitizedRef.current.duration;
+    const desiredShowTotal = glitchDuration * (SHOW_BASE_DURATION / SHOW_PRIMARY_DURATION);
+    const desiredHideTotal = glitchDuration * (HIDE_BASE_DURATION / SHOW_PRIMARY_DURATION);
+    const showScale = desiredShowTotal / SHOW_BASE_DURATION;
+    const hideScale = desiredHideTotal / HIDE_BASE_DURATION;
+    const showAt = (time) => time / SHOW_BASE_DURATION * desiredShowTotal;
+    const hideAt = (time) => time / HIDE_BASE_DURATION * desiredHideTotal;
+    showTimeline.current?.kill();
+    hideTimeline.current?.kill();
+    transitionTimeline.current?.kill();
+    const showTl = gsap.timeline({ paused: true });
+    showTl.add(() => {
+      animationVisibleRef.current = true;
+      updateVisibility();
+    }, 0);
+    showTl.fromTo(
+      uniforms.uTileProgressHorizontal,
+      { value: 1 + timelineParams.tileAmplitude * 0.5 },
+      {
+        value: -timelineParams.tileAmplitude * 0.5,
+        duration: glitchDuration,
+        ease: "sine.inOut"
+      },
+      0
+    );
+    showTl.fromTo(
+      uniforms.uGradientProgress,
+      { value: 1 + timelineParams.gradientOffset },
+      {
+        value: -timelineParams.gradientOffset * 0.5 - timelineParams.gradientAmplitude,
+        duration: 0.6 * showScale,
+        ease: "sine.inOut"
+      },
+      showAt(0.1)
+    );
+    showTl.fromTo(
+      uniforms.uBlueProgress,
+      { value: 1 + timelineParams.tileOffsetX },
+      {
+        value: -timelineParams.tileOffsetX * 0.5 - timelineParams.gradientAmplitude,
+        duration: 0.6 * showScale,
+        ease: "sine.inOut"
+      },
+      showAt(0.125)
+    );
+    showTl.fromTo(
+      uniforms.uSaturation,
+      { value: 1 },
+      { value: 1.01, duration: 0.52 * showScale, ease: "sine.inOut" },
+      0
+    );
+    showTl.fromTo(
+      uniforms.uSaturation,
+      { value: 1 },
+      { value: 2.5, duration: 0.1 * showScale, ease: "sine.inOut" },
+      showAt(0.32)
+    );
+    showTl.fromTo(
+      uniforms.uSaturation,
+      { value: 2.5 },
+      { value: 1, duration: 1.8 * showScale, ease: "sine.out" },
+      showAt(0.92)
+    );
+    showTl.fromTo(
+      uniforms.uWhiteTileStrength,
+      { value: 0 },
+      { value: 0.1, duration: 1 * showScale, ease: "sine.inOut" },
+      showAt(0.3)
+    );
+    const hideTl = gsap.timeline({ paused: true });
+    hideTl.fromTo(
+      uniforms.uWhiteTileStrength,
+      { value: 0.1 },
+      { value: 0, duration: 1 * hideScale, ease: "sine.inOut" },
+      0
+    );
+    hideTl.fromTo(
+      uniforms.uSaturation,
+      { value: 1 },
+      { value: 1.5, duration: 0.4 * hideScale, ease: "sine.inOut" },
+      hideAt(0.4)
+    );
+    hideTl.fromTo(
+      uniforms.uSaturation,
+      { value: 1.5 },
+      { value: 1, duration: 1 * hideScale, ease: "sine.inOut" },
+      hideAt(0.8)
+    );
+    hideTl.fromTo(
+      uniforms.uBlueProgress,
+      {
+        value: -timelineParams.tileOffsetX * 0.5 - timelineParams.gradientAmplitude
+      },
+      {
+        value: 1 + timelineParams.tileOffsetX,
+        duration: 0.6 * hideScale,
+        ease: "sine.inOut"
+      },
+      hideAt(0.2)
+    );
+    hideTl.fromTo(
+      uniforms.uTileProgressHorizontal,
+      { value: -timelineParams.tileAmplitude * 0.5 },
+      {
+        value: 1 + timelineParams.tileAmplitude * 0.5,
+        duration: 0.9 * hideScale,
+        ease: "sine.inOut"
+      },
+      hideAt(0.2)
+    );
+    hideTl.fromTo(
+      uniforms.uGradientProgress,
+      {
+        value: -timelineParams.gradientOffset * 0.5 - timelineParams.gradientAmplitude
+      },
+      {
+        value: 1 + timelineParams.gradientOffset,
+        duration: 0.6 * hideScale,
+        ease: "sine.inOut"
+      },
+      hideAt(0.225)
+    );
+    hideTl.add(() => {
+      animationVisibleRef.current = false;
+      updateVisibility();
+      onHideDone?.();
+    }, hideAt(HIDE_BASE_DURATION));
+    showTl.call(
+      () => {
+        onShowDone?.();
+      },
+      void 0,
+      showAt(0.65)
+    );
+    showTimeline.current = showTl;
+    hideTimeline.current = hideTl;
+  }, [onHideDone, onShowDone, timelineParams, updateVisibility]);
+  useEffect5(() => {
+    const uniforms = shaderUniforms.current;
+    uniforms.tDiffuse.value = diffuseTexture;
+    if (gradientTextureRef.current) {
+      uniforms.tGradient.value = gradientTextureRef.current;
+    }
+    uniforms.uTileAmplitude.value = sanitizedValues.tileAmplitude;
+    uniforms.uTileOffset.value.set(
+      sanitizedValues.tileOffsetX,
+      sanitizedValues.tileOffsetY
+    );
+    uniforms.uTileFrequency.value.set(
+      sanitizedValues.tileFrequencyX,
+      sanitizedValues.tileFrequencyY
+    );
+    uniforms.uWaveAmplitude.value = sanitizedValues.waveAmplitude;
+    uniforms.uWaveProgress.value = sanitizedValues.waveProgress;
+    uniforms.uWaveStrength.value.set(
+      sanitizedValues.waveStrengthX,
+      sanitizedValues.waveStrengthY
+    );
+    uniforms.uGradientProgress.value = sanitizedValues.gradientProgress;
+    uniforms.uGradientOffset.value = sanitizedValues.gradientOffset;
+    uniforms.uGradientAmplitude.value = sanitizedValues.gradientAmplitude;
+    uniforms.uBlueProgress.value = sanitizedValues.blueProgress;
+    uniforms.uBlueAmplitude.value = sanitizedValues.blueAmplitude;
+    uniforms.uWhiteTileChances.value = sanitizedValues.whiteTileChances;
+    uniforms.uWhiteTileFrequency.value = sanitizedValues.whiteTileFrequency;
+    uniforms.uWhiteTileStrength.value = sanitizedValues.whiteTileStrength;
+    uniforms.uSaturation.value = sanitizedValues.saturation;
+    uniforms.uTileProgressVertical.value = BASE_TRANSITION_PROGRESS;
+    updateMeshScale();
+    updateVisibility();
+  }, [diffuseTexture, sanitizedValues, updateMeshScale, updateVisibility]);
+  useEffect5(() => {
+    buildTimelines();
+    return () => {
+      showTimeline.current?.kill();
+      hideTimeline.current?.kill();
+      transitionTimeline.current?.kill();
+    };
+  }, [buildTimelines]);
+  useEffect5(() => {
+    const mesh = assetsRef.current?.mesh;
+    if (mesh) {
+      mesh.visible = sanitizedValues.debug || animationVisibleRef.current;
+    }
+  }, [sanitizedValues.debug]);
+  const lastShowSignal = useRef5(settings.showSignal);
+  useEffect5(() => {
+    if (settings.showSignal === lastShowSignal.current) {
+      return;
+    }
+    lastShowSignal.current = settings.showSignal;
+    hideTimeline.current?.pause(0);
+    primeShowAnimation();
+    showTimeline.current?.seek(0).play();
+  }, [primeShowAnimation, settings.showSignal]);
+  const lastHideSignal = useRef5(settings.hideSignal);
+  useEffect5(() => {
+    if (settings.hideSignal === lastHideSignal.current) {
+      return;
+    }
+    lastHideSignal.current = settings.hideSignal;
+    showTimeline.current?.pause(0);
+    hideTimeline.current?.seek(0).play();
+  }, [settings.hideSignal]);
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        width: width ?? "100%",
+        height: height ?? "100%",
+        ...style
+      },
+      ...divProps
+    }
+  );
+}
+function createDiffuseTexture() {
+  const size = 256;
+  const data = new Uint8Array(size * size * 4);
+  for (let y = 0; y < size; y += 1) {
+    for (let x = 0; x < size; x += 1) {
+      const i = (y * size + x) * 4;
+      const stripe = Math.sin(y / size * Math.PI * 8) * 0.5 + 0.5;
+      const tint = 0.25 + Math.sin(x / size * Math.PI * 2) * 0.15;
+      const base = THREE5.MathUtils.clamp(stripe * 0.7 + tint, 0, 1);
+      data[i] = base * 255;
+      data[i + 1] = base * 200;
+      data[i + 2] = base * 150;
+      data[i + 3] = 255;
+    }
+  }
+  const texture = new THREE5.DataTexture(data, size, size, THREE5.RGBAFormat);
+  texture.needsUpdate = true;
+  texture.colorSpace = THREE5.SRGBColorSpace;
+  texture.wrapS = THREE5.RepeatWrapping;
+  texture.wrapT = THREE5.RepeatWrapping;
+  texture.magFilter = THREE5.LinearFilter;
+  texture.minFilter = THREE5.LinearMipmapLinearFilter;
+  texture.generateMipmaps = true;
+  return texture;
+}
 export {
   FractalFlower,
+  MenuGlitch,
   OranoParticles,
   ShaderArt
 };