@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.31

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

@@ -0,0 +1,178 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { useReducedMotion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * TiltCard wraps content in a damped 3D mouse tilt. The tilt is a pure CSS
+ * transform — no WebGL. The optional `glow` spotlight border lazy-loads the
+ * `three` peer dependency on demand (see TiltCard.glow.ts).
+ *
+ * The animation loop is demand-driven: it runs only while the pointer is near
+ * the card or the damped values are still settling, then stops — an idle
+ * TiltCard costs nothing per frame.
+ */
+const TiltCard = ({ children, tiltIntensity = 6, glow = false, variation = "rounded-rect", rounded, borderWidth = 2, glowColor = "#ffffff", spotlightSize = 0.4, spotlightEdge = 0.5, glowExtent = 20, glowIntensity = 0.6, shouldAnimate = true, className, style, ...props }) => {
+    const outerRef = useRef(null);
+    const contentRef = useRef(null);
+    const glowRef = useRef(null);
+    // Loop reads live prop values from refs so prop changes never tear down WebGL
+    const tiltRef = useRef(tiltIntensity);
+    tiltRef.current = tiltIntensity;
+    const glowParamsRef = useRef({ glowColor, spotlightSize, spotlightEdge, glowIntensity, borderWidth });
+    glowParamsRef.current = { glowColor, spotlightSize, spotlightEdge, glowIntensity, borderWidth };
+    // useReducedMotion is SSR-safe (null on server, real value after hydration)
+    const prefersReducedMotion = useReducedMotion();
+    const isAnimating = shouldAnimate && !prefersReducedMotion;
+    useEffect(() => {
+        const outer = outerRef.current;
+        const content = contentRef.current;
+        if (!outer || !content || !isAnimating)
+            return;
+        let disposed = false;
+        // Pointer in client coords — the handler does NO layout reads; the loop
+        // converts to content-local with one getBoundingClientRect per frame.
+        let pointer = null;
+        let cachedRect = null;
+        const st = { mx: -1e4, my: -1e4, dmx: -1e4, dmy: -1e4, rx: 0, ry: 0, raf: 0, running: false, last: 0 };
+        // How far outside the card the pointer still matters (glow lights up on approach)
+        const proximity = glow ? Math.max(glowExtent * 3, 120) : 0;
+        const loop = (now) => {
+            var _a;
+            if (disposed)
+                return;
+            const dt = Math.min(Math.max((now - st.last) / 1000, 0.001), 0.05);
+            st.last = now;
+            const rect = content.getBoundingClientRect();
+            cachedRect = rect;
+            if (pointer) {
+                const nx = pointer.x - rect.left;
+                const ny = pointer.y - rect.top;
+                // First arrival: snap the damped position instead of easing in from the
+                // far-away sentinel (easing from -10000 produces a violent tilt/glow sweep)
+                if (st.mx <= -9e3) {
+                    st.dmx = nx;
+                    st.dmy = ny;
+                }
+                st.mx = nx;
+                st.my = ny;
+            }
+            // dt-normalized damping — same feel at 60Hz and 120Hz
+            const aMouse = 1 - Math.exp(-12 * dt);
+            st.dmx += (st.mx - st.dmx) * aMouse;
+            st.dmy += (st.my - st.dmy) * aMouse;
+            const w = rect.width;
+            const h = rect.height;
+            // Gate on the DAMPED position — the tilt target derives from it, so the
+            // gate and the target must agree or transient positions leak through
+            const inside = !!pointer && st.dmx >= 0 && st.dmx <= w && st.dmy >= 0 && st.dmy <= h;
+            let targetRX = 0;
+            let targetRY = 0;
+            if (tiltRef.current > 0 && inside && w > 0 && h > 0) {
+                targetRY = (st.dmx / w - 0.5) * tiltRef.current;
+                targetRX = -(st.dmy / h - 0.5) * tiltRef.current;
+            }
+            const aTilt = 1 - Math.exp(-10 * dt);
+            st.rx += (targetRX - st.rx) * aTilt;
+            st.ry += (targetRY - st.ry) * aTilt;
+            const settledFlat = Math.abs(st.rx) < 0.01 && Math.abs(st.ry) < 0.01 && !inside;
+            outer.style.transform = settledFlat
+                ? ""
+                : `perspective(1000px) rotateX(${st.rx}deg) rotateY(${st.ry}deg)`;
+            (_a = glowRef.current) === null || _a === void 0 ? void 0 : _a.render(st.dmx, st.dmy);
+            // Idle detection: stop once everything converged — a motionless hover
+            // renders nothing new. Any pointermove (or leave) restarts the loop.
+            const mouseSettled = Math.abs(st.mx - st.dmx) < 0.1 && Math.abs(st.my - st.dmy) < 0.1;
+            const tiltSettled = Math.abs(targetRX - st.rx) < 0.005 && Math.abs(targetRY - st.ry) < 0.005;
+            if (mouseSettled && tiltSettled) {
+                st.running = false;
+                return;
+            }
+            st.raf = requestAnimationFrame(loop);
+        };
+        const start = () => {
+            if (st.running || disposed)
+                return;
+            st.running = true;
+            st.last = performance.now();
+            st.raf = requestAnimationFrame(loop);
+        };
+        const onPointerMove = (e) => {
+            pointer = { x: e.clientX, y: e.clientY };
+            if (proximity > 0) {
+                // Document-level listener (glow reacts on approach): cheap pre-check
+                // against the cached rect so far-away moves don't wake the loop.
+                if (!cachedRect)
+                    cachedRect = content.getBoundingClientRect();
+                const r = cachedRect;
+                if (e.clientX < r.left - proximity ||
+                    e.clientX > r.right + proximity ||
+                    e.clientY < r.top - proximity ||
+                    e.clientY > r.bottom + proximity)
+                    return;
+            }
+            start();
+        };
+        const onPointerLeave = () => {
+            pointer = null;
+            st.mx = -1e4;
+            st.my = -1e4;
+            start(); // let the tilt ease back to rest, then the loop self-stops
+        };
+        const invalidateRect = () => {
+            cachedRect = null;
+        };
+        // Tilt-only: element-scoped listeners. Glow: document-scoped (the border
+        // lights up as the cursor approaches from outside).
+        const moveTarget = glow ? document : outer;
+        moveTarget.addEventListener("pointermove", onPointerMove, { passive: true });
+        const leaveTarget = glow ? document.documentElement : outer;
+        leaveTarget.addEventListener("pointerleave", onPointerLeave);
+        window.addEventListener("scroll", invalidateRect, { passive: true, capture: true });
+        const ro = new ResizeObserver(() => {
+            var _a;
+            invalidateRect();
+            (_a = glowRef.current) === null || _a === void 0 ? void 0 : _a.resize();
+            start(); // re-render the glow at the new size, then settle
+        });
+        ro.observe(content);
+        if (glow) {
+            import('./TiltCard.glow.js')
+                .then(({ createGlowEffect }) => {
+                if (disposed)
+                    return;
+                const effect = createGlowEffect({ host: outer, content, variation, glowExtent, rounded });
+                effect.setParams(glowParamsRef.current);
+                effect.resize();
+                glowRef.current = effect;
+                start();
+            })
+                .catch((err) => {
+                if (process.env.NODE_ENV !== "production") {
+                    console.error('[TiltCard] `glow` requires the optional "three" peer dependency.', err);
+                }
+            });
+        }
+        return () => {
+            var _a;
+            disposed = true;
+            moveTarget.removeEventListener("pointermove", onPointerMove);
+            leaveTarget.removeEventListener("pointerleave", onPointerLeave);
+            window.removeEventListener("scroll", invalidateRect, { capture: true });
+            ro.disconnect();
+            cancelAnimationFrame(st.raf);
+            outer.style.transform = "";
+            (_a = glowRef.current) === null || _a === void 0 ? void 0 : _a.dispose();
+            glowRef.current = null;
+        };
+    }, [isAnimating, glow, variation, glowExtent, rounded]);
+    // Live-update glow uniforms without tearing down the WebGL context
+    useEffect(() => {
+        var _a;
+        (_a = glowRef.current) === null || _a === void 0 ? void 0 : _a.setParams({ glowColor, spotlightSize, spotlightEdge, glowIntensity, borderWidth });
+    }, [glowColor, spotlightSize, spotlightEdge, glowIntensity, borderWidth]);
+    return (jsx("div", { ref: outerRef, className: cn("relative overflow-visible", className), style: { ...style, ...(rounded ? { borderRadius: rounded } : {}) }, ...props, children: jsx("div", { ref: contentRef, className: "relative h-full w-full", style: { borderRadius: "inherit", zIndex: 20 }, children: children }) }));
+};
+
+export { TiltCard };

package/dist/components/effects/{SpotlightBorder/SpotlightBorder.shaders.d.ts → TiltCard/TiltCard.shaders.d.ts}

@@ -1,5 +1,5 @@
 /**
- * GLSL Shaders for SpotlightBorder effect
+ * GLSL Shaders for TiltCard glow border
  * Uses Signed Distance Functions (SDFs) with aspect-correct coordinates
  * Supports larger canvas for external glow and suppresses inner glow.
  */

package/dist/components/effects/{SpotlightBorder/SpotlightBorder.shaders.js → TiltCard/TiltCard.shaders.js}

@@ -1,5 +1,5 @@
 /**
- * GLSL Shaders for SpotlightBorder effect
+ * GLSL Shaders for TiltCard glow border
  * Uses Signed Distance Functions (SDFs) with aspect-correct coordinates
  * Supports larger canvas for external glow and suppresses inner glow.
  */

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

@@ -0,0 +1,88 @@
+import React from "react";
+export type TiltCardVariation = "rounded-rect" | "circle" | "circle-ring" | "triangle";
+export declare const variationMap: Record<TiltCardVariation, number>;
+/**
+ * TiltCard — wraps content in a damped 3D mouse tilt (pure CSS transform,
+ * no WebGL cost), with an optional `glow` spotlight border (lazy-loads the
+ * `three` optional peer dependency only when enabled).
+ *
+ * @example Tilt only — cheap, no WebGL
+ * ```tsx
+ * <TiltCard tiltIntensity={6}>
+ *   <Card>…</Card>
+ * </TiltCard>
+ * ```
+ *
+ * @example With the spotlight border glow
+ * ```tsx
+ * <TiltCard glow glowColor="#3b82f6" borderWidth={2} glowExtent={30}>
+ *   <Card className="bg-gray-900">…</Card>
+ * </TiltCard>
+ * ```
+ */
+export interface TiltCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Content to wrap with the effect */
+    children: React.ReactNode;
+    /**
+     * Max tilt in degrees as the mouse moves across the card. 0 disables the tilt.
+     * @default 6
+     */
+    tiltIntensity?: number;
+    /**
+     * Enable the WebGL spotlight border (illuminates near the cursor with a soft
+     * outer glow). Lazy-loads `three` — without it, TiltCard never touches WebGL.
+     * ⚠️ Each glowing instance owns a WebGL context; browsers cap ~8–16 live
+     * contexts, so avoid enabling it on large collections of cards.
+     * @default false
+     */
+    glow?: boolean;
+    /**
+     * Shape variation for the glow border
+     * @default 'rounded-rect'
+     */
+    variation?: TiltCardVariation;
+    /**
+     * Border radius for the container (e.g., "1rem", "var(--card-radius)").
+     * Controls both the container clip and the shader's corner roundness.
+     * @default undefined (inherits from className like rounded-xl)
+     */
+    rounded?: string;
+    /**
+     * Glow border stroke width in pixels
+     * @default 2
+     */
+    borderWidth?: number;
+    /**
+     * Color of the glow border (any CSS color three.js can parse)
+     * @default '#ffffff'
+     */
+    glowColor?: string;
+    /**
+     * Size of the mouse-following spotlight (0-1)
+     * @default 0.4
+     */
+    spotlightSize?: number;
+    /**
+     * Edge softness of the spotlight (higher = softer falloff)
+     * @default 0.5
+     */
+    spotlightEdge?: number;
+    /**
+     * How far the glow can spread outside the container in pixels.
+     * Also prevents clipping of child shadows.
+     * @default 20
+     */
+    glowExtent?: number;
+    /**
+     * Overall intensity of the glow halo (0-1)
+     * @default 0.6
+     */
+    glowIntensity?: number;
+    /**
+     * Whether to animate (respects prefers-reduced-motion)
+     * @default true
+     */
+    shouldAnimate?: boolean;
+    /** Additional className for the container */
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { TiltCard } from "./TiltCard";
+export type { TiltCardProps, TiltCardVariation } from "./TiltCard.types";

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

@@ -1,15 +1,11 @@
-export { CustomCursor } from "./CustomCursor";
-export type { CustomCursorProps } from "./CustomCursor";
+export { CustomCursorProvider, CustomCursor, CustomCursorFollow, useCustomCursor } from "./CustomCursor";
+export type { CustomCursorProps, CustomCursorProviderProps, CustomCursorFollowProps, CustomCursorContextType, CustomCursorSize, CustomCursorColor, CustomCursorVariant, CustomCursorShape, CustomCursorTheme, CustomCursorThemeOverrides, } from "./CustomCursor";
 export { GlassEffect } from "./GlassEffect";
 export type { GlassEffectProps, BlendMode } from "./GlassEffect";
 export { Overlay } from "./Overlay";
 export type { OverlayProps, OverlayPosition, OverlayAnimations, } from "./Overlay";
-export { SpotlightBorder } from "./SpotlightBorder";
-export type { SpotlightBorderProps, SpotlightBorderVariation, } from "./SpotlightBorder";
 export { GlassSurface } from "./GlassSurface";
 export type { GlassSurfaceProps, GlassChannel, GlassMixBlendMode, } from "./GlassSurface";
-export { AIOrb } from "./AIOrb";
-export type { AIOrbProps, DotSphereProps, LiquidProps } from "./AIOrb";
 export { Animated } from "./Animated";
 export type { AnimatedGroupProps, AnimatedItemProps, AnimationPreset, AnimatedElement, } from "./Animated";
 export { ProgressiveBlur } from "./ProgressiveBlur";
@@ -18,21 +14,66 @@ export { Aurora } from "./Aurora";
 export type { AuroraProps } from "./Aurora";
 export { MagneticElement } from "./MagneticElement";
 export type { MagneticElementProps } from "./MagneticElement";
-export { MorphingText } from "./MorphingText";
-export type { MorphingTextProps } from "./MorphingText";
 export { GridPattern } from "./GridPattern";
 export type { GridPatternProps, GridPatternFadeDirection, } from "./GridPattern";
 export { DotPattern } from "./DotPattern";
 export type { DotPatternProps, DotPatternFadeDirection, } from "./DotPattern";
+export { StripePattern } from "./StripePattern";
+export type { StripePatternProps, StripePatternFadeDirection, } from "./StripePattern";
 export { NoiseOverlay } from "./NoiseOverlay";
 export type { NoiseOverlayProps, NoiseBlendMode } from "./NoiseOverlay";
-export { Spotlight } from "./Spotlight";
-export type { SpotlightProps } from "./Spotlight";
-export { Particles } from "./Particles";
-export type { ParticlesProps } from "./Particles";
-export { ParallaxSection } from "./ParallaxSection";
-export type { ParallaxSectionProps } from "./ParallaxSection";
+export { TiltCard } from "./TiltCard";
+export type { TiltCardProps, TiltCardVariation } from "./TiltCard";
 export { ScrollReveal } from "./ScrollReveal";
 export type { ScrollRevealProps, ScrollRevealPreset } from "./ScrollReveal";
-export { StickyScroll } from "./StickyScroll";
-export type { StickyScrollProps, StickyScrollSection, } from "./StickyScroll";
+export { Preloader } from "./Preloader";
+export type { PreloaderProps, PreloaderDirection, PreloaderType, } from "./Preloader";
+export { InteractiveCharacters } from "./InteractiveCharacters";
+export type { InteractiveCharactersProps, CharacterState, CharacterSize, } from "./InteractiveCharacters";
+export { InsetCircleButton, InsetPill } from "./Neumorphic";
+export type { InsetCircleButtonProps, InsetPillProps, } from "./Neumorphic";
+export { AIOrb } from "./AIOrb";
+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";