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

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

@@ -0,0 +1,218 @@
+import 'react/jsx-runtime';
+import 'react';
+import { glslDeclarePI } from '../shared/shaderNoise.glsl.js';
+
+/**
+ * ColorPanels fragment shader — adapted from paper-design/shaders'
+ * `color-panels.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 — the `u_scale` uniform that engine supplied
+ * (used only for an anti-aliasing threshold) is hardcoded to 1.0 here since
+ * there's no external scale/zoom control in this port.
+ */
+const colorPanelsFragmentShader = `#version 300 es
+precision lowp float;
+
+uniform float iTime;
+uniform vec2 iResolution;
+
+uniform vec4 u_colors[7];
+uniform float u_colorsCount;
+uniform vec4 u_colorBack;
+uniform float u_density;
+uniform float u_angle1;
+uniform float u_angle2;
+uniform float u_length;
+uniform float u_edges;
+uniform float u_blur;
+uniform float u_fadeIn;
+uniform float u_fadeOut;
+uniform float u_gradient;
+uniform float u_speed;
+
+out vec4 fragColor;
+
+${glslDeclarePI}
+
+const float zLimit = .5;
+const float SCALE = 1.0;
+
+vec2 getPanel(float angle, vec2 uv, float invLength, float aa) {
+  float sinA = sin(angle);
+  float cosA = cos(angle);
+
+  float denom = sinA - uv.y * cosA;
+  if (abs(denom) < .01) return vec2(0.);
+
+  float z = uv.y / denom;
+
+  if (z <= 0. || z > zLimit) return vec2(0.);
+
+  float zRatio = z / zLimit;
+  float panelMap = 1. - zRatio;
+  float x = uv.x * (cosA * z + 1.) * invLength;
+
+  float zOffset = zRatio - .5;
+  float left = -.5 + zOffset * u_angle1;
+  float right = .5 - zOffset * u_angle2;
+  float blurX = aa + 2. * panelMap * u_blur;
+
+  float leftEdge1 = left - blurX;
+  float leftEdge2 = left + .25 * blurX;
+  float rightEdge1 = right - .25 * blurX;
+  float rightEdge2 = right + blurX;
+
+  float panel = smoothstep(leftEdge1, leftEdge2, x) * (1.0 - smoothstep(rightEdge1, rightEdge2, x));
+  panel *= mix(0., panel, smoothstep(0., .01 / max(SCALE, 1e-6), panelMap));
+
+  float midScreen = abs(sinA);
+  if (u_edges > 0.5) {
+    panelMap = mix(.99, panelMap, panel * clamp(panelMap / (.15 * (1. - pow(midScreen, .1))), 0.0, 1.0));
+  } else if (midScreen < .07) {
+    panel *= (midScreen * 15.);
+  }
+
+  return vec2(panel, panelMap);
+}
+
+vec4 blendColor(vec4 colorA, float panelMask, float panelMap) {
+  float fade = 1. - smoothstep(.97 - .97 * u_fadeIn, 1., panelMap);
+  fade *= smoothstep(-.2 * (1. - u_fadeOut), u_fadeOut, panelMap);
+
+  vec3 blendedRGB = mix(vec3(0.), colorA.rgb, fade);
+  float blendedAlpha = mix(0., colorA.a, fade);
+
+  return vec4(blendedRGB, blendedAlpha) * panelMask;
+}
+
+void main() {
+  vec2 uv = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);
+  uv *= 1.25;
+
+  float t = .02 * u_speed * iTime;
+  t = fract(t);
+  bool reverseTime = (t < 0.5);
+
+  vec3 color = vec3(0.);
+  float opacity = 0.;
+
+  float aa = .005 / SCALE;
+  int colorsCount = int(u_colorsCount);
+
+  vec4 premultipliedColors[7];
+  for (int i = 0; i < 7; i++) {
+    if (i >= colorsCount) break;
+    vec4 c = u_colors[i];
+    c.rgb *= c.a;
+    premultipliedColors[i] = c;
+  }
+
+  float invLength = 1.5 / max(u_length, .001);
+
+  int panelsNumber = 12;
+  float densityNormalizer = 1.;
+  if (colorsCount == 4) {
+    panelsNumber = 16;
+    densityNormalizer = 1.34;
+  } else if (colorsCount == 5) {
+    panelsNumber = 20;
+    densityNormalizer = 1.67;
+  } else if (colorsCount == 7) {
+    panelsNumber = 14;
+    densityNormalizer = 1.17;
+  }
+
+  float fPanelsNumber = float(panelsNumber);
+  float panelGrad = 1. - clamp(u_gradient, 0., 1.);
+
+  for (int set = 0; set < 2; set++) {
+    bool isForward = (set == 0 && !reverseTime) || (set == 1 && reverseTime);
+    if (!isForward) continue;
+
+    for (int i = 0; i <= 20; i++) {
+      if (i >= panelsNumber) break;
+
+      int idx = panelsNumber - 1 - i;
+
+      float offset = float(idx) / fPanelsNumber;
+      if (set == 1) {
+        offset += .5;
+      }
+
+      float densityFract = densityNormalizer * fract(t + offset);
+      float angleNorm = densityFract / u_density;
+      if (densityFract >= .5 || angleNorm >= .3) continue;
+
+      float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.);
+      float smoothAngle = clamp((.3 - angleNorm) / .05, 0., 1.);
+      if (smoothDensity * smoothAngle < .001) continue;
+
+      if (angleNorm > .5) {
+        angleNorm = 0.5;
+      }
+      vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength, aa);
+      if (panel[0] <= .001) continue;
+      float panelMask = panel[0] * smoothDensity * smoothAngle;
+      float panelMap = panel[1];
+
+      int colorIdx = idx % colorsCount;
+      int nextColorIdx = (idx + 1) % colorsCount;
+
+      vec4 colorA = premultipliedColors[colorIdx];
+      vec4 colorB = premultipliedColors[nextColorIdx];
+
+      colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad));
+      vec4 blended = blendColor(colorA, panelMask, panelMap);
+      color = blended.rgb + color * (1. - blended.a);
+      opacity = blended.a + opacity * (1. - blended.a);
+    }
+
+    for (int i = 0; i <= 20; i++) {
+      if (i >= panelsNumber) break;
+
+      int idx = panelsNumber - 1 - i;
+
+      float offset = float(idx) / fPanelsNumber;
+      if (set == 0) {
+        offset += .5;
+      }
+
+      float densityFract = densityNormalizer * fract(-t + offset);
+      float angleNorm = -densityFract / u_density;
+      if (densityFract >= .5 || angleNorm < -.3) continue;
+
+      float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.);
+      float smoothAngle = clamp((angleNorm + .3) / .05, 0., 1.);
+      if (smoothDensity * smoothAngle < .001) continue;
+
+      vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength, aa);
+      float panelMask = panel[0] * smoothDensity * smoothAngle;
+      if (panelMask <= .001) continue;
+      float panelMap = panel[1];
+
+      int colorIdx = (colorsCount - (idx % colorsCount)) % colorsCount;
+      if (colorIdx < 0) colorIdx += colorsCount;
+      int nextColorIdx = (colorIdx + 1) % colorsCount;
+
+      vec4 colorA = premultipliedColors[colorIdx];
+      vec4 colorB = premultipliedColors[nextColorIdx];
+
+      colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad));
+      vec4 blended = blendColor(colorA, panelMask, panelMap);
+      color = blended.rgb + color * (1. - blended.a);
+      opacity = blended.a + opacity * (1. - blended.a);
+    }
+  }
+
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  color = color + bgColor * (1.0 - opacity);
+  opacity = opacity + u_colorBack.a * (1.0 - opacity);
+
+  fragColor = vec4(color, opacity);
+}
+`;
+
+export { colorPanelsFragmentShader };

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

@@ -0,0 +1,29 @@
+import type React from "react";
+export declare const COLOR_PANELS_MAX_COLORS = 7;
+export interface ColorPanelsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Panel colors, cycled around the perspective sweep, up to 7. Default: a 3-stop primary ramp. */
+    colors?: string[];
+    /** Background CSS color. Default: 'var(--color-background)'. */
+    colorBack?: string;
+    /** Left-edge perspective skew. Default: 0.3. */
+    angle1?: number;
+    /** Right-edge perspective skew. Default: 0.3. */
+    angle2?: number;
+    /** Panel length (inverse of how stretched panels appear). Default: 1. */
+    length?: number;
+    /** Sharpen panel edges toward the vanishing point. Default: false. */
+    edges?: boolean;
+    /** Panel edge blur/softness. Default: 0.3. */
+    blur?: number;
+    /** Fade-in strength near the near edge. Default: 0.3. */
+    fadeIn?: number;
+    /** Fade-out strength near the vanishing point. Default: 0.3. */
+    fadeOut?: number;
+    /** Panel spacing/frequency. Default: 0.5. */
+    density?: number;
+    /** Cross-panel color gradient blend, 0-1. Default: 0.2. */
+    gradient?: number;
+    /** Animation speed multiplier. Default: 1. */
+    speed?: number;
+    className?: string;
+}

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

@@ -0,0 +1,3 @@
+const COLOR_PANELS_MAX_COLORS = 7;
+
+export { COLOR_PANELS_MAX_COLORS };

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

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

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import type { CustomCursorContextType, CustomCursorProviderProps, CustomCursorProps, CustomCursorFollowProps } from './CustomCursor.types';
+import * as React from "react";
+import type { CustomCursorContextType, CustomCursorProviderProps, CustomCursorProps, CustomCursorFollowProps } from "./CustomCursor.types";
 /**
  * Hook to access CustomCursor context
  * @throws Error if used outside CustomCursorProvider
@@ -31,5 +31,5 @@ export declare const CustomCursorProvider: React.ForwardRefExoticComponent<Omit<
  * </CustomCursor>
  * ```
  */
-export declare const CustomCursor: React.ForwardRefExoticComponent<Omit<CustomCursorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const CustomCursorFollow: React.ForwardRefExoticComponent<Omit<CustomCursorFollowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const CustomCursor: React.ForwardRefExoticComponent<CustomCursorProps & React.RefAttributes<HTMLDivElement>>;
+export declare const CustomCursorFollow: React.ForwardRefExoticComponent<CustomCursorFollowProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/effects/CustomCursor/CustomCursor.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useMotionValue, AnimatePresence, motion, useReducedMotion, useSpring } from 'motion/react';
@@ -18,7 +19,7 @@ const CustomCursorContext = React.createContext(undefined);
 const useCustomCursor = () => {
     const context = React.useContext(CustomCursorContext);
     if (!context) {
-        throw new Error('useCustomCursor must be used within a CustomCursorProvider');
+        throw new Error("useCustomCursor must be used within a CustomCursorProvider");
     }
     return context;
 };
@@ -36,7 +37,7 @@ const useCustomCursor = () => {
  * </CustomCursorProvider>
  * ```
  */
-const CustomCursorProvider = React.forwardRef(({ children, className, allowedPointerTypes = ['mouse'], ...props }, ref) => {
+const CustomCursorProvider = React.forwardRef(({ children, className, allowedPointerTypes = ["mouse"], ...props }, ref) => {
     const [cursorPos, setCursorPos] = React.useState({ x: 0, y: 0 });
     const [isActive, setIsActive] = React.useState(false);
     const containerRef = React.useRef(null);
@@ -52,12 +53,13 @@ const CustomCursorProvider = React.forwardRef(({ children, className, allowedPoi
         // Ensure parent has positioning context for absolute children
         const computedPosition = getComputedStyle(parent).position;
         const previousInlinePosition = parent.style.position;
-        const shouldOverridePosition = computedPosition === 'static';
+        const shouldOverridePosition = computedPosition === "static";
         if (shouldOverridePosition) {
-            parent.style.position = 'relative';
+            parent.style.position = "relative";
         }
         const handlePointerMove = (event) => {
-            const pointerType = (event.pointerType || 'mouse');
+            const pointerType = (event.pointerType ||
+                "mouse");
             if (!allowedPointerTypesSet.has(pointerType))
                 return;
             const rect = parent.getBoundingClientRect();
@@ -69,7 +71,8 @@ const CustomCursorProvider = React.forwardRef(({ children, className, allowedPoi
             setIsActive(true);
         };
         const handlePointerLeave = (event) => {
-            const pointerType = (event.pointerType || 'mouse');
+            const pointerType = (event.pointerType ||
+                "mouse");
             if (!allowedPointerTypesSet.has(pointerType))
                 return;
             setIsActive(false);
@@ -85,23 +88,23 @@ const CustomCursorProvider = React.forwardRef(({ children, className, allowedPoi
         const handleMouseLeave = () => {
             setIsActive(false);
         };
-        const supportsPointerEvents = typeof window !== 'undefined' && 'PointerEvent' in window;
+        const supportsPointerEvents = typeof window !== "undefined" && "PointerEvent" in window;
         if (supportsPointerEvents) {
-            parent.addEventListener('pointermove', handlePointerMove);
-            parent.addEventListener('pointerleave', handlePointerLeave);
+            parent.addEventListener("pointermove", handlePointerMove);
+            parent.addEventListener("pointerleave", handlePointerLeave);
         }
         else {
-            parent.addEventListener('mousemove', handleMouseMove);
-            parent.addEventListener('mouseleave', handleMouseLeave);
+            parent.addEventListener("mousemove", handleMouseMove);
+            parent.addEventListener("mouseleave", handleMouseLeave);
         }
         return () => {
             if (supportsPointerEvents) {
-                parent.removeEventListener('pointermove', handlePointerMove);
-                parent.removeEventListener('pointerleave', handlePointerLeave);
+                parent.removeEventListener("pointermove", handlePointerMove);
+                parent.removeEventListener("pointerleave", handlePointerLeave);
             }
             else {
-                parent.removeEventListener('mousemove', handleMouseMove);
-                parent.removeEventListener('mouseleave', handleMouseLeave);
+                parent.removeEventListener("mousemove", handleMouseMove);
+                parent.removeEventListener("mouseleave", handleMouseLeave);
             }
             if (shouldOverridePosition) {
                 parent.style.position = previousInlinePosition;
@@ -111,7 +114,7 @@ const CustomCursorProvider = React.forwardRef(({ children, className, allowedPoi
     const contextValue = React.useMemo(() => ({ cursorPos, isActive, containerRef, cursorRef }), [cursorPos, isActive]);
     return (jsx(CustomCursorContext.Provider, { value: contextValue, children: jsx("div", { ref: containerRef, "data-slot": "custom-cursor-provider", className: className, ...props, children: children }) }));
 });
-CustomCursorProvider.displayName = 'CustomCursorProvider';
+CustomCursorProvider.displayName = "CustomCursorProvider";
 /**
  * CustomCursor - Main cursor element component
  * Follows mouse position exactly with instant movement
@@ -123,7 +126,7 @@ CustomCursorProvider.displayName = 'CustomCursorProvider';
  * </CustomCursor>
  * ```
  */
-const CustomCursor = React.forwardRef(({ children, size = 'md', color = 'primary', variant = 'default', shape = 'arrow', className, style, ...props }, ref) => {
+const CustomCursor = React.forwardRef(({ children, size = "md", color = "primary", variant = "default", shape = "arrow", className, style, onAnimationStart: _onAnimationStart, onAnimationEnd: _onAnimationEnd, onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, ...props }, ref) => {
     const { cursorPos, isActive, containerRef, cursorRef } = useCustomCursor();
     React.useImperativeHandle(ref, () => cursorRef.current);
     const x = useMotionValue(0);
@@ -136,7 +139,7 @@ const CustomCursor = React.forwardRef(({ children, size = 'md', color = 'primary
             return;
         }
         const previousInlineCursor = parentElement.style.cursor;
-        parentElement.style.cursor = 'none';
+        parentElement.style.cursor = "none";
         return () => {
             parentElement.style.cursor = previousInlineCursor;
         };
@@ -147,32 +150,32 @@ const CustomCursor = React.forwardRef(({ children, size = 'md', color = 'primary
         y.set(cursorPos.y);
     }, [cursorPos, x, y]);
     // Default content based on shape
-    const defaultContent = shape === 'arrow' ? (jsx(PaperAirplaneIcon, { className: "w-full h-full rotate-180" })) : (jsx("div", { className: "w-full h-full" }));
+    const defaultContent = shape === "arrow" ? (jsx(PaperAirplaneIcon, { className: "w-full h-full rotate-180" })) : (jsx("div", { className: "w-full h-full" }));
     return (jsx(AnimatePresence, { children: isActive && (jsx(motion.div, { ref: cursorRef, "data-slot": "custom-cursor", className: cn(customCursorTheme.baseStyle, customCursorTheme.cursorStyle, customCursorTheme.sizes[size], customCursorTheme.colors[color], customCursorTheme.variants[variant], customCursorTheme.shapes[shape], className), style: { top: y, left: x, ...style }, variants: customCursorVariants, initial: "initial", animate: "animate", exit: "exit", role: "presentation", "aria-hidden": "true", ...props, children: children || defaultContent })) }));
 });
-CustomCursor.displayName = 'CustomCursor';
+CustomCursor.displayName = "CustomCursor";
 /**
  * Calculate offset based on alignment and element dimensions
  */
 const calculateOffset = (align, sideOffset, width, height) => {
     switch (align) {
-        case 'center':
+        case "center":
             return { x: width / 2, y: height / 2 };
-        case 'top':
+        case "top":
             return { x: width / 2, y: height + sideOffset };
-        case 'top-left':
+        case "top-left":
             return { x: width + sideOffset, y: height + sideOffset };
-        case 'top-right':
+        case "top-right":
             return { x: -sideOffset, y: height + sideOffset };
-        case 'bottom':
+        case "bottom":
             return { x: width / 2, y: -sideOffset };
-        case 'bottom-left':
+        case "bottom-left":
             return { x: width + sideOffset, y: -sideOffset };
-        case 'bottom-right':
+        case "bottom-right":
             return { x: -sideOffset, y: -sideOffset };
-        case 'left':
+        case "left":
             return { x: width + sideOffset, y: height / 2 };
-        case 'right':
+        case "right":
             return { x: -sideOffset, y: height / 2 };
         default:
             return { x: 0, y: 0 };
@@ -193,22 +196,18 @@ const calculateOffset = (align, sideOffset, width, height) => {
  */
 /** Available colors for random selection in user variant */
 const userVariantColors = [
-    'primary',
-    'success',
-    'warning',
-    'danger',
+    "primary",
+    "success",
+    "warning",
+    "danger",
 ];
-const CustomCursorFollow = React.forwardRef(({ children, sideOffset = 15, align = 'bottom-right', transition, variant = 'default', avatar, name, color, className, style, ...props }, ref) => {
+const CustomCursorFollow = React.forwardRef(({ children, sideOffset = 15, align = "bottom-right", transition, variant = "default", avatar, name, color, className, style, onAnimationStart: _onAnimationStart2, onAnimationEnd: _onAnimationEnd2, onDrag: _onDrag2, onDragStart: _onDragStart2, onDragEnd: _onDragEnd2, ...props }, ref) => {
     const { cursorPos, isActive, cursorRef } = useCustomCursor();
     const cursorFollowRef = React.useRef(null);
     const shouldReduceMotion = useReducedMotion();
-    // Select random color for user variant if not provided (stable across renders)
-    const resolvedColor = React.useMemo(() => {
-        if (color)
-            return color;
-        const randomIndex = Math.floor(Math.random() * userVariantColors.length);
-        return userVariantColors[randomIndex];
-    }, [color]);
+    // Select random color for user variant if not provided (stable across renders via ref)
+    const randomColorRef = React.useRef(userVariantColors[Math.floor(Math.random() * userVariantColors.length)]);
+    const resolvedColor = color !== null && color !== void 0 ? color : randomColorRef.current;
     React.useImperativeHandle(ref, () => cursorFollowRef.current);
     const x = useMotionValue(0);
     const y = useMotionValue(0);
@@ -223,7 +222,7 @@ const CustomCursorFollow = React.forwardRef(({ children, sideOffset = 15, align
     // Apply spring physics for smooth following
     const springConfig = shouldReduceMotion
         ? reducedMotionSpringConfig
-        : transition !== null && transition !== void 0 ? transition : defaultSpringConfig;
+        : (transition !== null && transition !== void 0 ? transition : defaultSpringConfig);
     const springX = useSpring(x, springConfig);
     const springY = useSpring(y, springConfig);
     // Track size changes on the follow element
@@ -244,14 +243,14 @@ const CustomCursorFollow = React.forwardRef(({ children, sideOffset = 15, align
         };
         updateDimensions();
         const cleanupFns = [];
-        if (typeof ResizeObserver !== 'undefined') {
+        if (typeof ResizeObserver !== "undefined") {
             const observer = new ResizeObserver(updateDimensions);
             observer.observe(followElement);
             cleanupFns.push(() => observer.disconnect());
         }
-        if (typeof window !== 'undefined') {
-            window.addEventListener('resize', updateDimensions);
-            cleanupFns.push(() => window.removeEventListener('resize', updateDimensions));
+        if (typeof window !== "undefined") {
+            window.addEventListener("resize", updateDimensions);
+            cleanupFns.push(() => window.removeEventListener("resize", updateDimensions));
         }
         return () => {
             cleanupFns.forEach((cleanup) => cleanup());
@@ -275,14 +274,14 @@ const CustomCursorFollow = React.forwardRef(({ children, sideOffset = 15, align
         };
         updateCursorDimensions();
         const cleanupFns = [];
-        if (typeof ResizeObserver !== 'undefined') {
+        if (typeof ResizeObserver !== "undefined") {
             const observer = new ResizeObserver(updateCursorDimensions);
             observer.observe(cursorElement);
             cleanupFns.push(() => observer.disconnect());
         }
-        if (typeof window !== 'undefined') {
-            window.addEventListener('resize', updateCursorDimensions);
-            cleanupFns.push(() => window.removeEventListener('resize', updateCursorDimensions));
+        if (typeof window !== "undefined") {
+            window.addEventListener("resize", updateCursorDimensions);
+            cleanupFns.push(() => window.removeEventListener("resize", updateCursorDimensions));
         }
         return () => {
             cleanupFns.forEach((cleanup) => cleanup());
@@ -311,13 +310,14 @@ const CustomCursorFollow = React.forwardRef(({ children, sideOffset = 15, align
     ]);
     // Determine content based on variant
     const renderContent = () => {
-        if (variant === 'user') {
-            return (jsxs(Fragment, { children: [avatar && jsx(Avatar, { src: avatar, alt: name || 'User', size: "xs" }), name && (jsx("span", { className: "text-white text-xs font-medium whitespace-nowrap", children: name }))] }));
+        if (variant === "user") {
+            return (jsxs(Fragment, { children: [avatar && jsx(Avatar, { src: avatar, name: name || "User", size: "xs" }), name && (jsx("span", { className: "text-white text-sm font-medium whitespace-nowrap", children: name }))] }));
         }
         return children;
     };
-    return (jsx(AnimatePresence, { children: isActive && (jsx(motion.div, { ref: cursorFollowRef, "data-slot": "custom-cursor-follow", className: cn(customCursorTheme.baseStyle, customCursorTheme.cursorFollowVariants[variant], variant === 'user' && customCursorTheme.cursorFollowColors[resolvedColor], className), style: { top: springY, left: springX, ...style }, variants: customCursorVariants, initial: "initial", animate: "animate", exit: "exit", role: "presentation", "aria-hidden": "true", ...props, children: renderContent() })) }));
+    return (jsx(AnimatePresence, { children: isActive && (jsx(motion.div, { ref: cursorFollowRef, "data-slot": "custom-cursor-follow", className: cn(customCursorTheme.baseStyle, customCursorTheme.cursorFollowVariants[variant], variant === "user" &&
+                customCursorTheme.cursorFollowColors[resolvedColor], className), style: { top: springY, left: springX, ...style }, variants: customCursorVariants, initial: "initial", animate: "animate", exit: "exit", role: "presentation", "aria-hidden": "true", ...props, children: renderContent() })) }));
 });
-CustomCursorFollow.displayName = 'CustomCursorFollow';
+CustomCursorFollow.displayName = "CustomCursorFollow";
 
 export { CustomCursor, CustomCursorFollow, CustomCursorProvider, useCustomCursor };

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import type { HTMLMotionProps, SpringOptions } from 'motion/react';
+import type { SpringOptions } from 'motion/react';
+import { SemanticColor } from '../../../utils/colorUtils';
 /**
  * Alignment positions for CustomCursorFollow relative to the main cursor
  */
@@ -11,7 +12,7 @@ export type CustomCursorSize = 'sm' | 'md' | 'lg';
 /**
  * Color variants for the custom cursor
  */
-export type CustomCursorColor = 'neutral' | 'dark' | 'primary' | 'success' | 'warning' | 'danger';
+export type CustomCursorColor = SemanticColor | 'dark';
 /**
  * Visual variants for the custom cursor
  */
@@ -48,7 +49,7 @@ export interface CustomCursorProviderProps extends React.ComponentProps<'div'> {
 /**
  * Props for CustomCursor component
  */
-export interface CustomCursorProps extends HTMLMotionProps<'div'> {
+export interface CustomCursorProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     size?: CustomCursorSize;
     color?: CustomCursorColor;
@@ -59,7 +60,7 @@ export interface CustomCursorProps extends HTMLMotionProps<'div'> {
 /**
  * Props for CustomCursorFollow component
  */
-export interface CustomCursorFollowProps extends HTMLMotionProps<'div'> {
+export interface CustomCursorFollowProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     sideOffset?: number;
     align?: AlignType;

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

@@ -0,0 +1,10 @@
+import React from "react";
+import type { DitheringProps } from "./Dithering.types";
+/**
+ * Animated ordered-dithering background — quantizes a procedural pattern
+ * (simplex noise, warp, dots, wave, ripple, swirl, sphere) through a Bayer
+ * or random dither matrix into two flat colors. WebGL2-powered; falls back
+ * to a static two-tone CSS gradient when WebGL2 is unavailable or the user
+ * prefers reduced motion.
+ */
+export declare const Dithering: React.FC<DitheringProps>;

package/dist/components/effects/Dithering/Dithering.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useMemo, useRef } 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 { ditheringFragmentShader } from './Dithering.shaders.js';
+import { DITHERING_TYPES, DITHERING_SHAPES } from './Dithering.types.js';
+
+const DEFAULT_COLOR_FRONT = "var(--color-primary)";
+const DEFAULT_COLOR_BACK = "var(--color-background)";
+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 ordered-dithering background — quantizes a procedural pattern
+ * (simplex noise, warp, dots, wave, ripple, swirl, sphere) through a Bayer
+ * or random dither matrix into two flat colors. WebGL2-powered; falls back
+ * to a static two-tone CSS gradient when WebGL2 is unavailable or the user
+ * prefers reduced motion.
+ */
+const Dithering = ({ colorFront = DEFAULT_COLOR_FRONT, colorBack = DEFAULT_COLOR_BACK, shape = "wave", type = "8x8", size = 2, className, style, ...props }) => {
+    const isClient = useIsClient();
+    const shouldReduceMotion = useReducedMotion();
+    const isDark = useDarkMode();
+    const webglSupported = useWebgl2Supported(!!shouldReduceMotion);
+    const resolvedFront = useMemo(() => resolveShaderColor(colorFront), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [colorFront, isDark]);
+    const resolvedBack = useMemo(() => resolveShaderColor(colorBack), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [colorBack, isDark]);
+    const uniformsRef = useRef({
+        u_colorFront: resolvedFront,
+        u_colorBack: resolvedBack,
+        u_shape: DITHERING_SHAPES[shape],
+        u_type: DITHERING_TYPES[type],
+        u_pxSize: size,
+    });
+    uniformsRef.current.u_colorFront = resolvedFront;
+    uniformsRef.current.u_colorBack = resolvedBack;
+    uniformsRef.current.u_shape = DITHERING_SHAPES[shape];
+    uniformsRef.current.u_type = DITHERING_TYPES[type];
+    uniformsRef.current.u_pxSize = size;
+    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: ditheringFragmentShader, uniformsRef: uniformsRef })) : (jsx("div", { className: "absolute inset-0", style: {
+                background: `linear-gradient(135deg, ${colorFront}, ${colorBack})`,
+            } })) }));
+};
+
+export { Dithering };

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

@@ -0,0 +1,11 @@
+/**
+ * Dithering fragment shader — adapted from paper-design/shaders' `dithering.ts`
+ * (https://github.com/paper-design/shaders, Apache License 2.0).
+ *
+ * Simplified from the original: plain gl_FragCoord/iResolution UV 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. The dithering pixel grid still comes directly from gl_FragCoord
+ * (unaffected by the simplification), matching the original's design.
+ */
+export declare const ditheringFragmentShader = "#version 300 es\nprecision mediump float;\n\nuniform float iTime;\nuniform vec2 iResolution;\n\nuniform float u_pxSize;\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\nuniform float u_shape;\nuniform float u_type;\n\nout vec4 fragColor;\n\n\nconst float PI = 3.14159265359;\nconst float TWO_PI = 6.28318530718;\n\n\nfloat randomR(vec2 st) {\n  return fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453123);\n}\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\nfloat hash11(float p) {\n  return randomR(vec2(p, p * 0.7919));\n}\n\nfloat getSimplexNoise(vec2 uv, float t) {\n  float n = .5 * snoise(uv - vec2(0., .3 * t));\n  n += .5 * snoise(2. * uv + vec2(0., .32 * t));\n  return n;\n}\n\nconst int bayer2x2[4] = int[4](0, 2, 3, 1);\nconst int bayer4x4[16] = int[16](\n  0, 8, 2, 10,\n  12, 4, 14, 6,\n  3, 11, 1, 9,\n  15, 7, 13, 5\n);\nconst int bayer8x8[64] = int[64](\n  0, 32, 8, 40, 2, 34, 10, 42,\n  48, 16, 56, 24, 50, 18, 58, 26,\n  12, 44, 4, 36, 14, 46, 6, 38,\n  60, 28, 52, 20, 62, 30, 54, 22,\n  3, 35, 11, 43, 1, 33, 9, 41,\n  51, 19, 59, 27, 49, 17, 57, 25,\n  15, 47, 7, 39, 13, 45, 5, 37,\n  63, 31, 55, 23, 61, 29, 53, 21\n);\n\nfloat getBayerValue(vec2 uv, int size) {\n  ivec2 pos = ivec2(fract(uv / float(size)) * float(size));\n  int index = pos.y * size + pos.x;\n  if (size == 2) return float(bayer2x2[index]) / 4.0;\n  if (size == 4) return float(bayer4x4[index]) / 16.0;\n  if (size == 8) return float(bayer8x8[index]) / 64.0;\n  return 0.0;\n}\n\nvoid main() {\n  float t = .5 * iTime;\n\n  float pxSize = max(u_pxSize, 1.0);\n  vec2 pxSizeUV = gl_FragCoord.xy - .5 * iResolution.xy;\n  pxSizeUV /= pxSize;\n  vec2 canvasPixelizedUV = (floor(pxSizeUV) + .5) * pxSize;\n  vec2 normalizedUV = canvasPixelizedUV / iResolution.xy;\n\n  vec2 ditheringNoiseUV = canvasPixelizedUV;\n  vec2 shapeUV = normalizedUV - 0.5;\n  shapeUV.x *= iResolution.x / max(iResolution.y, 1.0);\n\n  float shape = 0.;\n  if (u_shape < 1.5) {\n    // simplex\n    shapeUV *= .001;\n    shape = 0.5 + 0.5 * getSimplexNoise(shapeUV, t);\n    shape = smoothstep(0.3, 0.9, shape);\n  } else if (u_shape < 2.5) {\n    // warp\n    shapeUV *= .003;\n    for (float i = 1.0; i < 6.0; i++) {\n      shapeUV.x += 0.6 / i * cos(i * 2.5 * shapeUV.y + t);\n      shapeUV.y += 0.6 / i * cos(i * 1.5 * shapeUV.x + t);\n    }\n    shape = .15 / max(0.001, abs(sin(t - shapeUV.y - shapeUV.x)));\n    shape = smoothstep(0.02, 1., shape);\n  } else if (u_shape < 3.5) {\n    // dots\n    // Note: scaled up vs. the paper-design original (.05) \u2014 this port uses a\n    // small normalized UV range (see file doc comment), so the constant is\n    // recalibrated to produce a visible multi-cycle pattern at that scale.\n    shapeUV *= 20.;\n    float stripeIdx = floor(2. * shapeUV.x / TWO_PI);\n    float rand = hash11(stripeIdx * 10.);\n    rand = sign(rand - .5) * pow(.1 + abs(rand), .4);\n    shape = sin(shapeUV.x) * cos(shapeUV.y - 5. * rand * t);\n    shape = pow(abs(shape), 6.);\n  } else if (u_shape < 4.5) {\n    // sine wave\n    shapeUV *= 4.;\n    float wave = cos(.5 * shapeUV.x - 2. * t) * sin(1.5 * shapeUV.x + t) * (.75 + .25 * cos(3. * t));\n    shape = 1. - smoothstep(-1., 1., shapeUV.y + wave);\n  } else if (u_shape < 5.5) {\n    // ripple\n    float dist = length(shapeUV);\n    float waves = sin(pow(dist, 1.7) * 7. - 3. * t) * .5 + .5;\n    shape = waves;\n  } else if (u_shape < 6.5) {\n    // swirl\n    float l = length(shapeUV);\n    float angle = 6. * atan(shapeUV.y, shapeUV.x) + 4. * t;\n    float twist = 1.2;\n    float offset = 1. / pow(max(l, 1e-6), twist) + angle / TWO_PI;\n    float mid = smoothstep(0., 1., pow(l, twist));\n    shape = mix(0., fract(offset), mid);\n  } else {\n    // sphere\n    shapeUV *= 2.;\n    float d = 1. - pow(length(shapeUV), 2.);\n    vec3 pos = vec3(shapeUV, sqrt(max(0., d)));\n    vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));\n    shape = .5 + .5 * dot(lightPos, pos);\n    shape *= step(0., d);\n  }\n\n  int type = int(floor(u_type));\n  float dithering = 0.0;\n  if (type == 1) {\n    dithering = step(randomR(ditheringNoiseUV), shape);\n  } else if (type == 2) {\n    dithering = getBayerValue(pxSizeUV, 2);\n  } else if (type == 3) {\n    dithering = getBayerValue(pxSizeUV, 4);\n  } else {\n    dithering = getBayerValue(pxSizeUV, 8);\n  }\n\n  dithering -= .5;\n  float res = step(.5, shape + dithering);\n\n  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;\n  float fgOpacity = u_colorFront.a;\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  float bgOpacity = u_colorBack.a;\n\n  vec3 color = fgColor * res;\n  float opacity = fgOpacity * res;\n  color += bgColor * (1. - opacity);\n  opacity += bgOpacity * (1. - opacity);\n\n  fragColor = vec4(color, opacity);\n}\n";