@flikk/ui 1.0.0-beta.29 → 1.0.0-beta.30

package/dist/components/effects/StaticRadialGradient/StaticRadialGradient.shaders.d.ts

@@ -0,0 +1,13 @@
+/**
+ * StaticRadialGradient fragment shader — adapted from paper-design/shaders'
+ * `static-radial-gradient.ts` (https://github.com/paper-design/shaders,
+ * Apache License 2.0).
+ *
+ * Simplified from the original: plain centered/aspect-corrected UV
+ * (gl_FragCoord/iResolution) instead of paper-design's ShaderSizingParams
+ * fit/scale/rotation engine; pure-hash GLSL (see shared/shaderNoise.glsl.ts)
+ * instead of pre-generated noise-texture sampling. This shader's own UV
+ * convention already matched a roughly unit-scale range, so its magic
+ * numbers port over unchanged.
+ */
+export declare const staticRadialGradientFragmentShader = "#version 300 es\nprecision mediump float;\n\nuniform vec2 iResolution;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[10];\nuniform float u_colorsCount;\n\nuniform float u_radius;\nuniform float u_focalDistance;\nuniform float u_focalAngle;\nuniform float u_falloff;\nuniform float u_mixing;\nuniform float u_distortion;\nuniform float u_distortionShift;\nuniform float u_distortionFreq;\nuniform float u_grainMixer;\nuniform float u_grainOverlay;\n\nout vec4 fragColor;\n\n\nconst float PI = 3.14159265359;\nconst float TWO_PI = 6.28318530718;\n\n\nvec2 rotate(vec2 v, float angle) {\n  float s = sin(angle);\n  float c = cos(angle);\n  return mat2(c, -s, s, c) * v;\n}\n\n\nfloat randomR(vec2 st) {\n  return fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453123);\n}\n\n\nfloat hash21(vec2 p) {\n  return randomR(p);\n}\n\nfloat valueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = hash21(i);\n  float b = hash21(i + vec2(1.0, 0.0));\n  float c = hash21(i + vec2(0.0, 1.0));\n  float d = hash21(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n}\n\nfloat noise(vec2 n, vec2 seedOffset) {\n  return valueNoise(n + seedOffset);\n}\n\nvoid main() {\n  vec2 objectUV = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);\n  vec2 uv = 2. * objectUV;\n  vec2 grainUV = uv * 1000.;\n\n  vec2 center = vec2(0.);\n  float angleRad = -radians(u_focalAngle + 90.);\n  vec2 focalPoint = vec2(cos(angleRad), sin(angleRad)) * u_focalDistance;\n  float radius = u_radius;\n\n  vec2 c_to_uv = uv - center;\n  vec2 f_to_uv = uv - focalPoint;\n  vec2 f_to_c = center - focalPoint;\n  float r = length(c_to_uv);\n\n  float fragAngle = atan(c_to_uv.y, c_to_uv.x);\n  float angleDiff = fract((fragAngle - angleRad + PI) / TWO_PI) * TWO_PI - PI;\n\n  float halfAngle = acos(clamp(radius / max(u_focalDistance, 1e-4), 0.0, 1.0));\n  float e0 = 0.6 * PI;\n  float e1 = halfAngle;\n  float lo = min(e0, e1);\n  float hi = max(e0, e1);\n  float s = smoothstep(lo, hi, abs(angleDiff));\n  float isInSector = (e1 >= e0) ? (1.0 - s) : s;\n\n  float a = dot(f_to_uv, f_to_uv);\n  float b = -2.0 * dot(f_to_uv, f_to_c);\n  float c = dot(f_to_c, f_to_c) - radius * radius;\n\n  float discriminant = b * b - 4.0 * a * c;\n  float t = 1.0;\n  if (discriminant >= 0.0) {\n    float sqrtD = sqrt(discriminant);\n    float div = max(1e-4, 2.0 * a);\n    float t0 = (-b - sqrtD) / div;\n    float t1 = (-b + sqrtD) / div;\n    t = max(t0, t1);\n    if (t < 0.0) t = 0.0;\n  }\n\n  float dist = length(f_to_uv);\n  float normalized = dist / max(1e-4, length(f_to_uv * t));\n  float shape = clamp(normalized, 0.0, 1.0);\n\n  float falloffMapped = mix(.2 + .8 * max(0., u_falloff + 1.), mix(1., 15., u_falloff * u_falloff), step(.0, u_falloff));\n  float falloffExp = mix(falloffMapped, 1., shape);\n  shape = pow(shape, falloffExp);\n  shape = 1. - clamp(shape, 0., 1.);\n\n  float outerMask = .002;\n  float outer = 1.0 - smoothstep(radius - outerMask, radius + outerMask, r);\n  outer = mix(outer, 1., isInSector);\n\n  shape = mix(0., shape, outer);\n  shape *= 1. - smoothstep(radius - .01, radius, r);\n\n  float angle = atan(f_to_uv.y, f_to_uv.x);\n  shape -= pow(u_distortion, 2.) * shape * pow(abs(sin(PI * clamp(length(f_to_uv) - 0.2 + u_distortionShift, 0.0, 1.0))), 4.0) * (sin(u_distortionFreq * angle) + cos(floor(0.65 * u_distortionFreq) * angle));\n\n  float grain = noise(grainUV, vec2(0.));\n  float mixerGrain = .4 * u_grainMixer * (grain - .5);\n\n  float mixer = shape * u_colorsCount + mixerGrain;\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n\n  float outerShape = 0.;\n  for (int i = 1; i < 11; i++) {\n    if (i > int(u_colorsCount)) break;\n    float mLinear = clamp(mixer - float(i - 1), 0.0, 1.0);\n    float aa = fwidth(mLinear);\n    float width = min(u_mixing, 0.5);\n    float tt = clamp((mLinear - (0.5 - width - aa)) / (2. * width + 2. * aa), 0., 1.);\n    float p = mix(2., 1., clamp((u_mixing - 0.5) * 2., 0., 1.));\n    float m = tt < 0.5 ? 0.5 * pow(2. * tt, p) : 1. - 0.5 * pow(2. * (1. - tt), p);\n    float quadBlend = clamp((u_mixing - 0.5) * 2., 0., 1.);\n    m = mix(m, m * m, 0.5 * quadBlend);\n    if (i == 1) outerShape = m;\n    vec4 c2 = u_colors[i - 1];\n    c2.rgb *= c2.a;\n    gradient = mix(gradient, c2, m);\n  }\n\n  vec3 color = gradient.rgb * outerShape;\n  float opacity = gradient.a * outerShape;\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1.0 - opacity);\n  opacity = opacity + u_colorBack.a * (1.0 - opacity);\n\n  float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.));\n  grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5);\n  grainOverlay = pow(grainOverlay, 1.3);\n  float grainOverlayV = grainOverlay * 2. - 1.;\n  vec3 grainOverlayColor = vec3(step(0., grainOverlayV));\n  float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);\n  grainOverlayStrength = pow(grainOverlayStrength, .8);\n  color = mix(color, grainOverlayColor, .35 * grainOverlayStrength);\n  opacity += .5 * grainOverlayStrength;\n  opacity = clamp(opacity, 0., 1.);\n\n  fragColor = vec4(color, opacity);\n}\n";

package/dist/components/effects/StaticRadialGradient/StaticRadialGradient.shaders.js

@@ -0,0 +1,169 @@
+import 'react/jsx-runtime';
+import 'react';
+import { glslDeclarePI, glslRotate2, glslHashFloat } from '../shared/shaderNoise.glsl.js';
+
+/**
+ * StaticRadialGradient fragment shader — adapted from paper-design/shaders'
+ * `static-radial-gradient.ts` (https://github.com/paper-design/shaders,
+ * Apache License 2.0).
+ *
+ * Simplified from the original: plain centered/aspect-corrected UV
+ * (gl_FragCoord/iResolution) instead of paper-design's ShaderSizingParams
+ * fit/scale/rotation engine; pure-hash GLSL (see shared/shaderNoise.glsl.ts)
+ * instead of pre-generated noise-texture sampling. This shader's own UV
+ * convention already matched a roughly unit-scale range, so its magic
+ * numbers port over unchanged.
+ */
+const staticRadialGradientFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform vec2 iResolution;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colors[10];
+uniform float u_colorsCount;
+
+uniform float u_radius;
+uniform float u_focalDistance;
+uniform float u_focalAngle;
+uniform float u_falloff;
+uniform float u_mixing;
+uniform float u_distortion;
+uniform float u_distortionShift;
+uniform float u_distortionFreq;
+uniform float u_grainMixer;
+uniform float u_grainOverlay;
+
+out vec4 fragColor;
+
+${glslDeclarePI}
+${glslRotate2}
+${glslHashFloat}
+
+float hash21(vec2 p) {
+  return randomR(p);
+}
+
+float valueNoise(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  float a = hash21(i);
+  float b = hash21(i + vec2(1.0, 0.0));
+  float c = hash21(i + vec2(0.0, 1.0));
+  float d = hash21(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  float x1 = mix(a, b, u.x);
+  float x2 = mix(c, d, u.x);
+  return mix(x1, x2, u.y);
+}
+
+float noise(vec2 n, vec2 seedOffset) {
+  return valueNoise(n + seedOffset);
+}
+
+void main() {
+  vec2 objectUV = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);
+  vec2 uv = 2. * objectUV;
+  vec2 grainUV = uv * 1000.;
+
+  vec2 center = vec2(0.);
+  float angleRad = -radians(u_focalAngle + 90.);
+  vec2 focalPoint = vec2(cos(angleRad), sin(angleRad)) * u_focalDistance;
+  float radius = u_radius;
+
+  vec2 c_to_uv = uv - center;
+  vec2 f_to_uv = uv - focalPoint;
+  vec2 f_to_c = center - focalPoint;
+  float r = length(c_to_uv);
+
+  float fragAngle = atan(c_to_uv.y, c_to_uv.x);
+  float angleDiff = fract((fragAngle - angleRad + PI) / TWO_PI) * TWO_PI - PI;
+
+  float halfAngle = acos(clamp(radius / max(u_focalDistance, 1e-4), 0.0, 1.0));
+  float e0 = 0.6 * PI;
+  float e1 = halfAngle;
+  float lo = min(e0, e1);
+  float hi = max(e0, e1);
+  float s = smoothstep(lo, hi, abs(angleDiff));
+  float isInSector = (e1 >= e0) ? (1.0 - s) : s;
+
+  float a = dot(f_to_uv, f_to_uv);
+  float b = -2.0 * dot(f_to_uv, f_to_c);
+  float c = dot(f_to_c, f_to_c) - radius * radius;
+
+  float discriminant = b * b - 4.0 * a * c;
+  float t = 1.0;
+  if (discriminant >= 0.0) {
+    float sqrtD = sqrt(discriminant);
+    float div = max(1e-4, 2.0 * a);
+    float t0 = (-b - sqrtD) / div;
+    float t1 = (-b + sqrtD) / div;
+    t = max(t0, t1);
+    if (t < 0.0) t = 0.0;
+  }
+
+  float dist = length(f_to_uv);
+  float normalized = dist / max(1e-4, length(f_to_uv * t));
+  float shape = clamp(normalized, 0.0, 1.0);
+
+  float falloffMapped = mix(.2 + .8 * max(0., u_falloff + 1.), mix(1., 15., u_falloff * u_falloff), step(.0, u_falloff));
+  float falloffExp = mix(falloffMapped, 1., shape);
+  shape = pow(shape, falloffExp);
+  shape = 1. - clamp(shape, 0., 1.);
+
+  float outerMask = .002;
+  float outer = 1.0 - smoothstep(radius - outerMask, radius + outerMask, r);
+  outer = mix(outer, 1., isInSector);
+
+  shape = mix(0., shape, outer);
+  shape *= 1. - smoothstep(radius - .01, radius, r);
+
+  float angle = atan(f_to_uv.y, f_to_uv.x);
+  shape -= pow(u_distortion, 2.) * shape * pow(abs(sin(PI * clamp(length(f_to_uv) - 0.2 + u_distortionShift, 0.0, 1.0))), 4.0) * (sin(u_distortionFreq * angle) + cos(floor(0.65 * u_distortionFreq) * angle));
+
+  float grain = noise(grainUV, vec2(0.));
+  float mixerGrain = .4 * u_grainMixer * (grain - .5);
+
+  float mixer = shape * u_colorsCount + mixerGrain;
+  vec4 gradient = u_colors[0];
+  gradient.rgb *= gradient.a;
+
+  float outerShape = 0.;
+  for (int i = 1; i < 11; i++) {
+    if (i > int(u_colorsCount)) break;
+    float mLinear = clamp(mixer - float(i - 1), 0.0, 1.0);
+    float aa = fwidth(mLinear);
+    float width = min(u_mixing, 0.5);
+    float tt = clamp((mLinear - (0.5 - width - aa)) / (2. * width + 2. * aa), 0., 1.);
+    float p = mix(2., 1., clamp((u_mixing - 0.5) * 2., 0., 1.));
+    float m = tt < 0.5 ? 0.5 * pow(2. * tt, p) : 1. - 0.5 * pow(2. * (1. - tt), p);
+    float quadBlend = clamp((u_mixing - 0.5) * 2., 0., 1.);
+    m = mix(m, m * m, 0.5 * quadBlend);
+    if (i == 1) outerShape = m;
+    vec4 c2 = u_colors[i - 1];
+    c2.rgb *= c2.a;
+    gradient = mix(gradient, c2, m);
+  }
+
+  vec3 color = gradient.rgb * outerShape;
+  float opacity = gradient.a * outerShape;
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  color = color + bgColor * (1.0 - opacity);
+  opacity = opacity + u_colorBack.a * (1.0 - opacity);
+
+  float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.));
+  grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5);
+  grainOverlay = pow(grainOverlay, 1.3);
+  float grainOverlayV = grainOverlay * 2. - 1.;
+  vec3 grainOverlayColor = vec3(step(0., grainOverlayV));
+  float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);
+  grainOverlayStrength = pow(grainOverlayStrength, .8);
+  color = mix(color, grainOverlayColor, .35 * grainOverlayStrength);
+  opacity += .5 * grainOverlayStrength;
+  opacity = clamp(opacity, 0., 1.);
+
+  fragColor = vec4(color, opacity);
+}
+`;
+
+export { staticRadialGradientFragmentShader };

package/dist/components/effects/StaticRadialGradient/StaticRadialGradient.types.d.ts

@@ -0,0 +1,29 @@
+import type React from "react";
+export declare const STATIC_RADIAL_GRADIENT_MAX_COLORS = 10;
+export interface StaticRadialGradientProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Background CSS color. Default: 'var(--color-background)'. */
+    colorBack?: string;
+    /** Radial ramp colors, up to 10. Default: a 3-stop primary ramp. */
+    colors?: string[];
+    /** Radius of the radial shape, in unit terms (~0-1.5). Default: 0.8. */
+    radius?: number;
+    /** Distance of the light source from center. Default: 1. */
+    focalDistance?: number;
+    /** Angle of the light source, in degrees. Default: 0. */
+    focalAngle?: number;
+    /** Falloff curve, roughly -1 to 1. Default: 0. */
+    falloff?: number;
+    /** Blend sharpness between ramp stops, 0-1. Default: 0.3. */
+    mixing?: number;
+    /** Radial-edge distortion strength, 0-1. Default: 0. */
+    distortion?: number;
+    /** Distortion phase shift. Default: 0. */
+    distortionShift?: number;
+    /** Distortion angular frequency. Default: 0. */
+    distortionFreq?: number;
+    /** Grain influence on the gradient stops, 0-1. Default: 0.1. */
+    grainMixer?: number;
+    /** Post-composite grain overlay strength, 0-1. Default: 0.05. */
+    grainOverlay?: number;
+    className?: string;
+}

package/dist/components/effects/StaticRadialGradient/StaticRadialGradient.types.js

@@ -0,0 +1,3 @@
+const STATIC_RADIAL_GRADIENT_MAX_COLORS = 10;
+
+export { STATIC_RADIAL_GRADIENT_MAX_COLORS };

package/dist/components/effects/StaticRadialGradient/index.d.ts

@@ -0,0 +1,2 @@
+export { StaticRadialGradient } from "./StaticRadialGradient";
+export type { StaticRadialGradientProps } from "./StaticRadialGradient.types";

package/dist/components/effects/StripePattern/StripePattern.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useId, useMemo } from 'react';
 import { useReducedMotion, motion } from 'motion/react';

package/dist/components/effects/TiltCard/TiltCard.glow.js

@@ -1,3 +1,4 @@
+"use client";
 import * as THREE from 'three';
 import { fragmentShader, vertexShader } from './TiltCard.shaders.js';
 import { variationMap } from './TiltCard.types.js';

package/dist/components/effects/TiltCard/TiltCard.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useRef, useEffect } from 'react';
 import { useReducedMotion } from 'motion/react';

package/dist/components/effects/Water/Water.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { WaterProps } from "./Water.types";
+/**
+ * Animated water-caustic image filter — distorts a source image with
+ * ripple/wave displacement and caustic light highlights. WebGL2-powered;
+ * falls back to the plain source image (via `object-fit: cover`) when
+ * WebGL2 is unavailable or the user prefers reduced motion.
+ */
+export declare const Water: React.FC<WaterProps>;

package/dist/components/effects/Water/Water.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState, useMemo, useRef, useCallback } from 'react';
+import { useReducedMotion } from 'motion/react';
+import { useIsClient } from '../../../hooks/useIsClient.js';
+import { useDarkMode } from '../../../hooks/useDarkMode.js';
+import { cn } from '../../../utils/cn.js';
+import { ShaderCanvas } from '../shared/ShaderCanvas/ShaderCanvas.js';
+import { resolveShaderColor } from '../shared/resolveShaderColor.js';
+import { waterFragmentShader } from './Water.shaders.js';
+
+const DEFAULT_COLOR_BACK = "var(--color-surface-sunken)";
+const DEFAULT_COLOR_HIGHLIGHT = "var(--color-primary-50)";
+function useWebgl2Supported(disabled) {
+    return useMemo(() => {
+        if (disabled || typeof document === "undefined")
+            return false;
+        try {
+            return !!document.createElement("canvas").getContext("webgl2");
+        }
+        catch (_a) {
+            return false;
+        }
+    }, [disabled]);
+}
+/**
+ * Animated water-caustic image filter — distorts a source image with
+ * ripple/wave displacement and caustic light highlights. WebGL2-powered;
+ * falls back to the plain source image (via `object-fit: cover`) when
+ * WebGL2 is unavailable or the user prefers reduced motion.
+ */
+const Water = ({ image, colorBack = DEFAULT_COLOR_BACK, colorHighlight = DEFAULT_COLOR_HIGHLIGHT, highlights = 0.5, layering = 0.3, edges = 0, caustic = 1, waves = 0.3, size = 0.3, speed = 1, className, style, ...props }) => {
+    const isClient = useIsClient();
+    const shouldReduceMotion = useReducedMotion();
+    const isDark = useDarkMode();
+    const webglSupported = useWebgl2Supported(!!shouldReduceMotion);
+    const [imageAspectRatio, setImageAspectRatio] = useState(16 / 9);
+    const resolvedBack = useMemo(() => resolveShaderColor(colorBack), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [colorBack, isDark]);
+    const resolvedHighlight = useMemo(() => resolveShaderColor(colorHighlight), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [colorHighlight, isDark]);
+    const texturesRef = useRef({ u_image: image });
+    texturesRef.current.u_image = image;
+    const handleTextureLoad = useCallback((name, aspectRatio) => {
+        if (name === "u_image")
+            setImageAspectRatio(aspectRatio);
+    }, []);
+    const uniformsRef = useRef({});
+    uniformsRef.current.u_colorBack = resolvedBack;
+    uniformsRef.current.u_colorHighlight = resolvedHighlight;
+    uniformsRef.current.u_imageAspectRatio = imageAspectRatio;
+    uniformsRef.current.u_highlights = highlights;
+    uniformsRef.current.u_layering = layering;
+    uniformsRef.current.u_edges = edges;
+    uniformsRef.current.u_caustic = caustic;
+    uniformsRef.current.u_waves = waves;
+    uniformsRef.current.u_size = size;
+    uniformsRef.current.u_speed = speed;
+    const imageSrc = typeof image === "string" ? image : image.src;
+    return (jsx("div", { className: cn("absolute inset-0 overflow-hidden pointer-events-none select-none", className), style: style, "aria-hidden": "true", ...props, children: isClient && webglSupported ? (jsx(ShaderCanvas, { fragmentShader: waterFragmentShader, uniformsRef: uniformsRef, texturesRef: texturesRef, onTextureLoad: handleTextureLoad })) : (jsx("img", { src: imageSrc, alt: "", className: "absolute inset-0 w-full h-full object-cover" })) }));
+};
+
+export { Water };

package/dist/components/effects/Water/Water.shaders.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Water fragment shader — adapted from paper-design/shaders' `water.ts`
+ * (https://github.com/paper-design/shaders, Apache License 2.0). An image
+ * filter: distorts a source image with caustic-noise ripples and wave
+ * displacement.
+ *
+ * Simplified from the original: image UV computed via the shared
+ * `getImageCoverUV` cover-fit helper (see shared/imageUV.glsl.ts) instead of
+ * paper-design's ShaderSizingParams fit/scale/rotation engine.
+ */
+export declare const waterFragmentShader = "#version 300 es\nprecision mediump float;\n\nuniform float iTime;\nuniform vec2 iResolution;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorHighlight;\n\nuniform sampler2D u_image;\nuniform float u_imageAspectRatio;\n\nuniform float u_size;\nuniform float u_highlights;\nuniform float u_layering;\nuniform float u_edges;\nuniform float u_caustic;\nuniform float u_waves;\nuniform float u_speed;\n\nout vec4 fragColor;\n\n\nvec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec3 permute(vec3 x) { return mod289(((x * 34.0) + 1.0) * x); }\n\nfloat snoise(vec2 v) {\n  const vec4 C = vec4(0.211324865405187, 0.366025403784439,\n                       -0.577350269189626, 0.024390243902439);\n  vec2 i  = floor(v + dot(v, C.yy));\n  vec2 x0 = v - i + dot(i, C.xx);\n\n  vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n  vec4 x12 = x0.xyxy + C.xxzz;\n  x12.xy -= i1;\n\n  i = mod289(i);\n  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0));\n\n  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.0);\n  m = m * m;\n  m = m * m;\n\n  vec3 x = 2.0 * fract(p * C.www) - 1.0;\n  vec3 h = abs(x) - 0.5;\n  vec3 ox = floor(x + 0.5);\n  vec3 a0 = x - ox;\n\n  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);\n\n  vec3 g;\n  g.x = a0.x * x0.x + h.x * x0.y;\n  g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n  return 130.0 * dot(m, g);\n}\n\n\nvec2 getImageCoverUV(vec2 fragUV, vec2 resolution, float imageAspectRatio) {\n  float containerAspect = resolution.x / resolution.y;\n  // Container wider (relative to its height) than the image: sample a\n  // narrower vertical slice of the image (crop top/bottom) so it fills the\n  // container width with no letterboxing. Container narrower/taller than\n  // the image: sample a narrower horizontal slice (crop left/right) instead.\n  vec2 scale = containerAspect > imageAspectRatio\n    ? vec2(1.0, imageAspectRatio / containerAspect)\n    : vec2(containerAspect / imageAspectRatio, 1.0);\n  return (fragUV - 0.5) * scale + 0.5;\n}\n\n\nfloat getUvFrame(vec2 uv) {\n  float aax = 2. * fwidth(uv.x);\n  float aay = 2. * fwidth(uv.y);\n\n  float left = smoothstep(0., aax, uv.x);\n  float right = 1.0 - smoothstep(1. - aax, 1., uv.x);\n  float bottom = smoothstep(0., aay, uv.y);\n  float top = 1.0 - smoothstep(1. - aay, 1., uv.y);\n\n  return left * right * bottom * top;\n}\n\nmat2 rotate2D(float r) {\n  return mat2(cos(r), sin(r), -sin(r), cos(r));\n}\n\nfloat getCausticNoise(vec2 uv, float t, float scale) {\n  vec2 n = vec2(.1);\n  vec2 N = vec2(.1);\n  mat2 m = rotate2D(.5);\n  for (int j = 0; j < 6; j++) {\n    uv *= m;\n    n *= m;\n    vec2 q = uv * scale + float(j) + n + (.5 + .5 * float(j)) * (mod(float(j), 2.) - 1.) * t;\n    n += sin(q);\n    N += cos(q) / scale;\n    scale *= 1.1;\n  }\n  return (N.x + N.y + 1.);\n}\n\nvoid main() {\n  vec2 fragUV = gl_FragCoord.xy / iResolution.xy;\n  vec2 imageUV = getImageCoverUV(fragUV, iResolution, u_imageAspectRatio);\n  vec2 patternUV = imageUV - .5;\n  patternUV = (patternUV * vec2(u_imageAspectRatio, 1.));\n  patternUV /= (.01 + .09 * u_size);\n\n  float t = u_speed * iTime;\n\n  float wavesNoise = snoise((.3 + .1 * sin(t)) * .1 * patternUV + vec2(0., .4 * t));\n\n  float causticNoise = getCausticNoise(patternUV + u_waves * vec2(1., -1.) * wavesNoise, 2. * t, 1.5);\n  causticNoise += u_layering * getCausticNoise(patternUV + 2. * u_waves * vec2(1., -1.) * wavesNoise, 1.5 * t, 2.);\n  causticNoise = causticNoise * causticNoise;\n\n  float edgesDistortion = smoothstep(0., .1, imageUV.x);\n  edgesDistortion *= smoothstep(0., .1, imageUV.y);\n  edgesDistortion *= (smoothstep(1., 1.1, imageUV.x) + (1.0 - smoothstep(.8, .95, imageUV.x)));\n  edgesDistortion *= (1.0 - smoothstep(.9, 1., imageUV.y));\n  edgesDistortion = mix(edgesDistortion, 1., u_edges);\n\n  float causticNoiseDistortion = .02 * causticNoise * edgesDistortion;\n  float wavesDistortion = .1 * u_waves * wavesNoise;\n\n  imageUV += vec2(wavesDistortion, -wavesDistortion);\n  imageUV += (u_caustic * causticNoiseDistortion);\n\n  float frame = getUvFrame(imageUV);\n  vec4 image = texture(u_image, imageUV);\n  vec4 backColor = u_colorBack;\n  backColor.rgb *= backColor.a;\n\n  vec3 color = mix(backColor.rgb, image.rgb, image.a * frame);\n  float opacity = backColor.a + image.a * frame;\n\n  causticNoise = max(-.2, causticNoise);\n\n  float hightlight = .025 * u_highlights * causticNoise;\n  hightlight *= u_colorHighlight.a;\n  color = mix(color, u_colorHighlight.rgb, .05 * u_highlights * causticNoise);\n  opacity += hightlight;\n\n  color += hightlight * (.5 + .5 * wavesNoise);\n  opacity += hightlight * (.5 + .5 * wavesNoise);\n\n  opacity = clamp(opacity, 0., 1.);\n\n  fragColor = vec4(color, opacity);\n}\n";

package/dist/components/effects/Water/Water.shaders.js

@@ -0,0 +1,123 @@
+import 'react/jsx-runtime';
+import 'react';
+import { glslSimplexNoise2D } from '../shared/shaderNoise.glsl.js';
+import { glslImageCoverUV } from '../shared/imageUV.glsl.js';
+
+/**
+ * Water fragment shader — adapted from paper-design/shaders' `water.ts`
+ * (https://github.com/paper-design/shaders, Apache License 2.0). An image
+ * filter: distorts a source image with caustic-noise ripples and wave
+ * displacement.
+ *
+ * Simplified from the original: image UV computed via the shared
+ * `getImageCoverUV` cover-fit helper (see shared/imageUV.glsl.ts) instead of
+ * paper-design's ShaderSizingParams fit/scale/rotation engine.
+ */
+const waterFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform float iTime;
+uniform vec2 iResolution;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colorHighlight;
+
+uniform sampler2D u_image;
+uniform float u_imageAspectRatio;
+
+uniform float u_size;
+uniform float u_highlights;
+uniform float u_layering;
+uniform float u_edges;
+uniform float u_caustic;
+uniform float u_waves;
+uniform float u_speed;
+
+out vec4 fragColor;
+
+${glslSimplexNoise2D}
+${glslImageCoverUV}
+
+float getUvFrame(vec2 uv) {
+  float aax = 2. * fwidth(uv.x);
+  float aay = 2. * fwidth(uv.y);
+
+  float left = smoothstep(0., aax, uv.x);
+  float right = 1.0 - smoothstep(1. - aax, 1., uv.x);
+  float bottom = smoothstep(0., aay, uv.y);
+  float top = 1.0 - smoothstep(1. - aay, 1., uv.y);
+
+  return left * right * bottom * top;
+}
+
+mat2 rotate2D(float r) {
+  return mat2(cos(r), sin(r), -sin(r), cos(r));
+}
+
+float getCausticNoise(vec2 uv, float t, float scale) {
+  vec2 n = vec2(.1);
+  vec2 N = vec2(.1);
+  mat2 m = rotate2D(.5);
+  for (int j = 0; j < 6; j++) {
+    uv *= m;
+    n *= m;
+    vec2 q = uv * scale + float(j) + n + (.5 + .5 * float(j)) * (mod(float(j), 2.) - 1.) * t;
+    n += sin(q);
+    N += cos(q) / scale;
+    scale *= 1.1;
+  }
+  return (N.x + N.y + 1.);
+}
+
+void main() {
+  vec2 fragUV = gl_FragCoord.xy / iResolution.xy;
+  vec2 imageUV = getImageCoverUV(fragUV, iResolution, u_imageAspectRatio);
+  vec2 patternUV = imageUV - .5;
+  patternUV = (patternUV * vec2(u_imageAspectRatio, 1.));
+  patternUV /= (.01 + .09 * u_size);
+
+  float t = u_speed * iTime;
+
+  float wavesNoise = snoise((.3 + .1 * sin(t)) * .1 * patternUV + vec2(0., .4 * t));
+
+  float causticNoise = getCausticNoise(patternUV + u_waves * vec2(1., -1.) * wavesNoise, 2. * t, 1.5);
+  causticNoise += u_layering * getCausticNoise(patternUV + 2. * u_waves * vec2(1., -1.) * wavesNoise, 1.5 * t, 2.);
+  causticNoise = causticNoise * causticNoise;
+
+  float edgesDistortion = smoothstep(0., .1, imageUV.x);
+  edgesDistortion *= smoothstep(0., .1, imageUV.y);
+  edgesDistortion *= (smoothstep(1., 1.1, imageUV.x) + (1.0 - smoothstep(.8, .95, imageUV.x)));
+  edgesDistortion *= (1.0 - smoothstep(.9, 1., imageUV.y));
+  edgesDistortion = mix(edgesDistortion, 1., u_edges);
+
+  float causticNoiseDistortion = .02 * causticNoise * edgesDistortion;
+  float wavesDistortion = .1 * u_waves * wavesNoise;
+
+  imageUV += vec2(wavesDistortion, -wavesDistortion);
+  imageUV += (u_caustic * causticNoiseDistortion);
+
+  float frame = getUvFrame(imageUV);
+  vec4 image = texture(u_image, imageUV);
+  vec4 backColor = u_colorBack;
+  backColor.rgb *= backColor.a;
+
+  vec3 color = mix(backColor.rgb, image.rgb, image.a * frame);
+  float opacity = backColor.a + image.a * frame;
+
+  causticNoise = max(-.2, causticNoise);
+
+  float hightlight = .025 * u_highlights * causticNoise;
+  hightlight *= u_colorHighlight.a;
+  color = mix(color, u_colorHighlight.rgb, .05 * u_highlights * causticNoise);
+  opacity += hightlight;
+
+  color += hightlight * (.5 + .5 * wavesNoise);
+  opacity += hightlight * (.5 + .5 * wavesNoise);
+
+  opacity = clamp(opacity, 0., 1.);
+
+  fragColor = vec4(color, opacity);
+}
+`;
+
+export { waterFragmentShader };

package/dist/components/effects/Water/Water.types.d.ts

@@ -0,0 +1,25 @@
+import type React from "react";
+import type { ShaderTextureSource } from "../shared";
+export interface WaterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Source image (URL or an existing HTMLImageElement). Required. */
+    image: ShaderTextureSource;
+    /** Background CSS color shown behind image edges. Default: 'var(--color-surface-sunken)'. */
+    colorBack?: string;
+    /** Caustic highlight tint color. Default: 'var(--color-primary-50)'. */
+    colorHighlight?: string;
+    /** Caustic highlight strength, 0-1+. Default: 0.5. */
+    highlights?: number;
+    /** Secondary caustic layer strength, 0-1. Default: 0.3. */
+    layering?: number;
+    /** Edge ripple distortion strength, 0-1. Default: 0. */
+    edges?: number;
+    /** Overall caustic distortion strength, 0-1. Default: 1. */
+    caustic?: number;
+    /** Wave displacement strength, 0-1. Default: 0.3. */
+    waves?: number;
+    /** Ripple pattern scale. Default: 0.3. */
+    size?: number;
+    /** Animation speed multiplier. Default: 1. */
+    speed?: number;
+    className?: string;
+}

package/dist/components/effects/Water/index.d.ts

@@ -0,0 +1,2 @@
+export { Water } from "./Water";
+export type { WaterProps } from "./Water.types";

package/dist/components/effects/index.d.ts

@@ -37,3 +37,43 @@ export type { AIOrbProps, OrbState } from "./AIOrb";
 export type { DotSphereProps, LiquidProps, AuraProps } from "./AIOrb";
 export { Particles } from "./Particles";
 export type { ParticlesProps } from "./Particles";
+export { MeshGradient, DEFAULT_MESH_COLORS, MESH_PALETTES, pickPalette, getMeshTextTone, } from "./MeshGradient";
+export type { MeshGradientProps, MeshGradientBlendMode, } from "./MeshGradient";
+export { Shimmer } from "./Shimmer";
+export type { ShimmerProps, ShimmerVariant } from "./Shimmer";
+export { Dithering } from "./Dithering";
+export type { DitheringProps, DitheringShape, DitheringType } from "./Dithering";
+export { GradientMesh } from "./GradientMesh";
+export type { GradientMeshProps } from "./GradientMesh";
+export { StaticGradientMesh } from "./StaticGradientMesh";
+export type { StaticGradientMeshProps } from "./StaticGradientMesh";
+export { StaticRadialGradient } from "./StaticRadialGradient";
+export type { StaticRadialGradientProps } from "./StaticRadialGradient";
+export { Metaballs } from "./Metaballs";
+export type { MetaballsProps } from "./Metaballs";
+export { ColorPanels } from "./ColorPanels";
+export type { ColorPanelsProps } from "./ColorPanels";
+export { SmokeRing } from "./SmokeRing";
+export type { SmokeRingProps } from "./SmokeRing";
+export { GodRays } from "./GodRays";
+export type { GodRaysProps } from "./GodRays";
+export { GrainGradient } from "./GrainGradient";
+export type { GrainGradientProps, GrainGradientShape } from "./GrainGradient";
+export { PulsingBorder } from "./PulsingBorder";
+export type { PulsingBorderProps } from "./PulsingBorder";
+export { LiquidMetal } from "./LiquidMetal";
+export type { LiquidMetalProps, LiquidMetalShape } from "./LiquidMetal";
+export { GemSmoke } from "./GemSmoke";
+export type { GemSmokeProps, GemSmokeShape } from "./GemSmoke";
+export { Water } from "./Water";
+export type { WaterProps } from "./Water";
+export { ImageDithering } from "./ImageDithering";
+export type { ImageDitheringProps, ImageDitheringType } from "./ImageDithering";
+export { PaperTexture } from "./PaperTexture";
+export type { PaperTextureProps } from "./PaperTexture";
+export { FlutedGlass } from "./FlutedGlass";
+export type { FlutedGlassProps, FlutedGlassShape, FlutedGlassDistortionShape, } from "./FlutedGlass";
+export { HalftoneDots } from "./HalftoneDots";
+export type { HalftoneDotsProps, HalftoneDotsType, HalftoneDotsGrid, } from "./HalftoneDots";
+export { HalftoneCmyk } from "./HalftoneCmyk";
+export type { HalftoneCmykProps } from "./HalftoneCmyk";

package/dist/components/effects/index.js

@@ -18,3 +18,24 @@ export { InsetCircleButton } from './Neumorphic/InsetCircleButton.js';
 export { InsetPill } from './Neumorphic/InsetPill.js';
 export { AIOrb } from './AIOrb/AIOrb.js';
 export { Particles } from './Particles/Particles.js';
+export { MeshGradient } from './MeshGradient/MeshGradient.js';
+export { DEFAULT_MESH_COLORS, MESH_PALETTES, getMeshTextTone, pickPalette } from './MeshGradient/MeshGradient.utils.js';
+export { Shimmer } from './Shimmer/Shimmer.js';
+export { Dithering } from './Dithering/Dithering.js';
+export { GradientMesh } from './GradientMesh/GradientMesh.js';
+export { StaticGradientMesh } from './StaticGradientMesh/StaticGradientMesh.js';
+export { StaticRadialGradient } from './StaticRadialGradient/StaticRadialGradient.js';
+export { Metaballs } from './Metaballs/Metaballs.js';
+export { ColorPanels } from './ColorPanels/ColorPanels.js';
+export { SmokeRing } from './SmokeRing/SmokeRing.js';
+export { GodRays } from './GodRays/GodRays.js';
+export { GrainGradient } from './GrainGradient/GrainGradient.js';
+export { PulsingBorder } from './PulsingBorder/PulsingBorder.js';
+export { LiquidMetal } from './LiquidMetal/LiquidMetal.js';
+export { GemSmoke } from './GemSmoke/GemSmoke.js';
+export { Water } from './Water/Water.js';
+export { ImageDithering } from './ImageDithering/ImageDithering.js';
+export { PaperTexture } from './PaperTexture/PaperTexture.js';
+export { FlutedGlass } from './FlutedGlass/FlutedGlass.js';
+export { HalftoneDots } from './HalftoneDots/HalftoneDots.js';
+export { HalftoneCmyk } from './HalftoneCmyk/HalftoneCmyk.js';

package/dist/components/effects/{AIOrb/variants/Aura → shared/ShaderCanvas}/ShaderCanvas.d.ts

@@ -1,17 +1,13 @@
 import React from "react";
-export interface ShaderCanvasProps {
-    fragmentShader: string;
-    uniformsRef: React.MutableRefObject<Record<string, number | number[]>>;
-    maxDpr?: number;
-    className?: string;
-    style?: React.CSSProperties;
-}
+import type { ShaderCanvasProps } from "./ShaderCanvas.types";
 /**
  * Minimal raw WebGL2 canvas renderer for fullscreen fragment shaders.
  * - Built-in uniforms: iTime (float), iResolution (vec2)
  * - Custom uniforms read from `uniformsRef` each frame (no stale closures)
+ * - Optional sampler2D uniforms read from `texturesRef` (image loading,
+ *   texture upload, mipmaps, transparent-pixel placeholder while unset/loading)
  * - ResizeObserver for responsive canvas sizing
- * - rAF animation loop with cleanup on unmount
+ * - rAF animation loop, paused while the tab is hidden, with cleanup on unmount
  * - Graceful degradation: renders nothing if WebGL2 unavailable
  */
 export declare const ShaderCanvas: React.FC<ShaderCanvasProps>;