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

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

@@ -0,0 +1,25 @@
+import type React from "react";
+export declare const GOD_RAYS_MAX_COLORS = 5;
+export interface GodRaysProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Background CSS color. Default: 'var(--color-background)'. */
+    colorBack?: string;
+    /** Additive highlight/bloom overlay color. Default: 'var(--color-primary-100)'. */
+    colorBloom?: string;
+    /** Ray colors, up to 5. Default: a 3-stop primary ramp. */
+    colors?: string[];
+    /** How fragmented/spotty the rays look, 0-1+. Default: 0.3. */
+    spotty?: number;
+    /** Central glow size. Default: 0.4. */
+    midSize?: number;
+    /** Central glow intensity, 0-1. Default: 0.5. */
+    midIntensity?: number;
+    /** Ray density. Default: 0.5. */
+    density?: number;
+    /** Ray sharpness, 0-1. Default: 0.5. */
+    intensity?: number;
+    /** Additive-vs-alpha blend for overlapping rays, 0-1. Default: 0.5. */
+    bloom?: number;
+    /** Animation speed multiplier. Default: 1. */
+    speed?: number;
+    className?: string;
+}

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

@@ -0,0 +1,3 @@
+const GOD_RAYS_MAX_COLORS = 5;
+
+export { GOD_RAYS_MAX_COLORS };

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

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

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

@@ -0,0 +1,9 @@
+import React from "react";
+import type { GradientMeshProps } from "./GradientMesh.types";
+/**
+ * Animated blob mesh gradient — several drifting, weighted color blobs
+ * blended into a soft organic gradient, with subtle grain. WebGL2-powered;
+ * falls back to a static CSS gradient when WebGL2 is unavailable or the
+ * user prefers reduced motion.
+ */
+export declare const GradientMesh: React.FC<GradientMeshProps>;

package/dist/components/effects/GradientMesh/GradientMesh.js

@@ -0,0 +1,56 @@
+"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 { resolveShaderColors } from '../shared/resolveShaderColor.js';
+import { gradientMeshFragmentShader } from './GradientMesh.shaders.js';
+import { GRADIENT_MESH_MAX_COLORS } from './GradientMesh.types.js';
+
+const DEFAULT_COLORS = ["var(--color-primary-300)", "var(--color-primary)", "var(--color-primary-700)"];
+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 blob mesh gradient — several drifting, weighted color blobs
+ * blended into a soft organic gradient, with subtle grain. WebGL2-powered;
+ * falls back to a static CSS gradient when WebGL2 is unavailable or the
+ * user prefers reduced motion.
+ */
+const GradientMesh = ({ colors = DEFAULT_COLORS, distortion = 0.4, swirl = 0.3, grainMixer = 0.2, grainOverlay = 0.1, speed = 1, className, style, ...props }) => {
+    var _a, _b;
+    const isClient = useIsClient();
+    const shouldReduceMotion = useReducedMotion();
+    const isDark = useDarkMode();
+    const webglSupported = useWebgl2Supported(!!shouldReduceMotion);
+    const safeColors = colors.length > 0 ? colors.slice(0, GRADIENT_MESH_MAX_COLORS) : DEFAULT_COLORS;
+    const resolvedColors = useMemo(() => resolveShaderColors(safeColors), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [safeColors.join("|"), isDark]);
+    const uniformsRef = useRef({});
+    for (let i = 0; i < GRADIENT_MESH_MAX_COLORS; i++) {
+        uniformsRef.current[`u_colors[${i}]`] = (_b = (_a = resolvedColors[i]) !== null && _a !== void 0 ? _a : resolvedColors[resolvedColors.length - 1]) !== null && _b !== void 0 ? _b : [0, 0, 0, 0];
+    }
+    uniformsRef.current.u_colorsCount = resolvedColors.length;
+    uniformsRef.current.u_distortion = distortion;
+    uniformsRef.current.u_swirl = swirl;
+    uniformsRef.current.u_grainMixer = grainMixer;
+    uniformsRef.current.u_grainOverlay = grainOverlay;
+    uniformsRef.current.u_speed = speed;
+    const fallbackGradient = `linear-gradient(135deg, ${safeColors.join(", ")})`;
+    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: gradientMeshFragmentShader, uniformsRef: uniformsRef })) : (jsx("div", { className: "absolute inset-0", style: { background: fallbackGradient } })) }));
+};
+
+export { GradientMesh };

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

@@ -0,0 +1,15 @@
+/**
+ * GradientMesh fragment shader — adapted from paper-design/shaders' `mesh-gradient.ts`
+ * (https://github.com/paper-design/shaders, Apache License 2.0). Renamed from
+ * paper-design's "Mesh Gradient" to avoid a naming collision with this
+ * library's existing `MeshGradient` (an unrelated SVG-based deterministic
+ * seed→blob avatar generator).
+ *
+ * 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 (grain UV *1000, distance^3.5, etc.) port over unchanged.
+ */
+export declare const gradientMeshFragmentShader = "#version 300 es\nprecision mediump float;\n\nuniform float iTime;\nuniform vec2 iResolution;\n\nuniform vec4 u_colors[10];\nuniform float u_colorsCount;\nuniform float u_distortion;\nuniform float u_swirl;\nuniform float u_grainMixer;\nuniform float u_grainOverlay;\nuniform float u_speed;\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\nvec2 getPosition(int i, float t) {\n  float a = float(i) * .37;\n  float b = .6 + fract(float(i) / 3.) * .9;\n  float c = .8 + fract(float(i + 1) / 4.);\n  float x = sin(t * b + a);\n  float y = cos(t * c + a * 1.5);\n  return .5 + .5 * vec2(x, y);\n}\n\nvoid main() {\n  vec2 uv = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);\n  uv += .5;\n  vec2 grainUV = uv * 1000.;\n\n  float grain = noise(grainUV, vec2(0.));\n  float mixerGrain = .4 * u_grainMixer * (grain - .5);\n\n  const float firstFrameOffset = 41.5;\n  float t = .5 * u_speed * iTime + firstFrameOffset;\n\n  float radius = smoothstep(0., 1., length(uv - .5));\n  float center = 1. - radius;\n  for (float i = 1.; i <= 2.; i++) {\n    uv.x += u_distortion * center / i * sin(t + i * .4 * smoothstep(.0, 1., uv.y)) * cos(.2 * t + i * 2.4 * smoothstep(.0, 1., uv.y));\n    uv.y += u_distortion * center / i * cos(t + i * 2. * smoothstep(.0, 1., uv.x));\n  }\n\n  vec2 uvRotated = uv;\n  uvRotated -= vec2(.5);\n  float angle = 3. * u_swirl * radius;\n  uvRotated = rotate(uvRotated, -angle);\n  uvRotated += vec2(.5);\n\n  vec3 color = vec3(0.);\n  float opacity = 0.;\n  float totalWeight = 0.;\n\n  for (int i = 0; i < 10; i++) {\n    if (i >= int(u_colorsCount)) break;\n    vec2 pos = getPosition(i, t) + mixerGrain;\n    vec3 colorFraction = u_colors[i].rgb * u_colors[i].a;\n    float opacityFraction = u_colors[i].a;\n    float dist = length(uvRotated - pos);\n    dist = pow(dist, 3.5);\n    float weight = 1. / (dist + 1e-3);\n    color += colorFraction * weight;\n    opacity += opacityFraction * weight;\n    totalWeight += weight;\n  }\n  color /= max(1e-4, totalWeight);\n  opacity /= max(1e-4, totalWeight);\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/GradientMesh/GradientMesh.shaders.js

@@ -0,0 +1,127 @@
+import 'react/jsx-runtime';
+import 'react';
+import { glslDeclarePI, glslRotate2, glslHashFloat } from '../shared/shaderNoise.glsl.js';
+
+/**
+ * GradientMesh fragment shader — adapted from paper-design/shaders' `mesh-gradient.ts`
+ * (https://github.com/paper-design/shaders, Apache License 2.0). Renamed from
+ * paper-design's "Mesh Gradient" to avoid a naming collision with this
+ * library's existing `MeshGradient` (an unrelated SVG-based deterministic
+ * seed→blob avatar generator).
+ *
+ * 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 (grain UV *1000, distance^3.5, etc.) port over unchanged.
+ */
+const gradientMeshFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform float iTime;
+uniform vec2 iResolution;
+
+uniform vec4 u_colors[10];
+uniform float u_colorsCount;
+uniform float u_distortion;
+uniform float u_swirl;
+uniform float u_grainMixer;
+uniform float u_grainOverlay;
+uniform float u_speed;
+
+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);
+}
+
+vec2 getPosition(int i, float t) {
+  float a = float(i) * .37;
+  float b = .6 + fract(float(i) / 3.) * .9;
+  float c = .8 + fract(float(i + 1) / 4.);
+  float x = sin(t * b + a);
+  float y = cos(t * c + a * 1.5);
+  return .5 + .5 * vec2(x, y);
+}
+
+void main() {
+  vec2 uv = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);
+  uv += .5;
+  vec2 grainUV = uv * 1000.;
+
+  float grain = noise(grainUV, vec2(0.));
+  float mixerGrain = .4 * u_grainMixer * (grain - .5);
+
+  const float firstFrameOffset = 41.5;
+  float t = .5 * u_speed * iTime + firstFrameOffset;
+
+  float radius = smoothstep(0., 1., length(uv - .5));
+  float center = 1. - radius;
+  for (float i = 1.; i <= 2.; i++) {
+    uv.x += u_distortion * center / i * sin(t + i * .4 * smoothstep(.0, 1., uv.y)) * cos(.2 * t + i * 2.4 * smoothstep(.0, 1., uv.y));
+    uv.y += u_distortion * center / i * cos(t + i * 2. * smoothstep(.0, 1., uv.x));
+  }
+
+  vec2 uvRotated = uv;
+  uvRotated -= vec2(.5);
+  float angle = 3. * u_swirl * radius;
+  uvRotated = rotate(uvRotated, -angle);
+  uvRotated += vec2(.5);
+
+  vec3 color = vec3(0.);
+  float opacity = 0.;
+  float totalWeight = 0.;
+
+  for (int i = 0; i < 10; i++) {
+    if (i >= int(u_colorsCount)) break;
+    vec2 pos = getPosition(i, t) + mixerGrain;
+    vec3 colorFraction = u_colors[i].rgb * u_colors[i].a;
+    float opacityFraction = u_colors[i].a;
+    float dist = length(uvRotated - pos);
+    dist = pow(dist, 3.5);
+    float weight = 1. / (dist + 1e-3);
+    color += colorFraction * weight;
+    opacity += opacityFraction * weight;
+    totalWeight += weight;
+  }
+  color /= max(1e-4, totalWeight);
+  opacity /= max(1e-4, totalWeight);
+
+  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 { gradientMeshFragmentShader };

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

@@ -0,0 +1,17 @@
+import type React from "react";
+export declare const GRADIENT_MESH_MAX_COLORS = 10;
+export interface GradientMeshProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Blob colors (hex, rgb(), named, or var(--...)), up to 10. Default: a 3-stop primary ramp. */
+    colors?: string[];
+    /** Domain-warp strength, 0-1+. Default: 0.4. */
+    distortion?: number;
+    /** Swirl/rotation strength, 0-1+. Default: 0.3. */
+    swirl?: number;
+    /** Grain influence on blob positions, 0-1. Default: 0.2. */
+    grainMixer?: number;
+    /** Post-composite grain overlay strength, 0-1. Default: 0.1. */
+    grainOverlay?: number;
+    /** Animation speed multiplier. Default: 1. */
+    speed?: number;
+    className?: string;
+}

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

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

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

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

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

@@ -0,0 +1,9 @@
+import React from "react";
+import type { GrainGradientProps } from "./GrainGradient.types";
+/**
+ * Animated grainy color-band gradient — a shaped mask (corners/ripple/blob/
+ * sphere) blended through a colored ramp with a film-grain distortion.
+ * WebGL2-powered; falls back to a static CSS gradient when WebGL2 is
+ * unavailable or the user prefers reduced motion.
+ */
+export declare const GrainGradient: React.FC<GrainGradientProps>;

package/dist/components/effects/GrainGradient/GrainGradient.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 { resolveShaderColors, resolveShaderColor } from '../shared/resolveShaderColor.js';
+import { grainGradientFragmentShader } from './GrainGradient.shaders.js';
+import { GRAIN_GRADIENT_MAX_COLORS, GRAIN_GRADIENT_SHAPES } from './GrainGradient.types.js';
+
+const DEFAULT_COLORS = ["var(--color-primary-300)", "var(--color-primary)", "var(--color-primary-700)"];
+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 grainy color-band gradient — a shaped mask (corners/ripple/blob/
+ * sphere) blended through a colored ramp with a film-grain distortion.
+ * WebGL2-powered; falls back to a static CSS gradient when WebGL2 is
+ * unavailable or the user prefers reduced motion.
+ */
+const GrainGradient = ({ colorBack = DEFAULT_COLOR_BACK, colors = DEFAULT_COLORS, shape = "blob", softness = 0.4, intensity = 0.3, noise = 0.15, speed = 1, className, style, ...props }) => {
+    var _a, _b;
+    const isClient = useIsClient();
+    const shouldReduceMotion = useReducedMotion();
+    const isDark = useDarkMode();
+    const webglSupported = useWebgl2Supported(!!shouldReduceMotion);
+    const safeColors = colors.length > 0 ? colors.slice(0, GRAIN_GRADIENT_MAX_COLORS) : DEFAULT_COLORS;
+    const resolvedColors = useMemo(() => resolveShaderColors(safeColors), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [safeColors.join("|"), isDark]);
+    const resolvedBack = useMemo(() => resolveShaderColor(colorBack), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [colorBack, isDark]);
+    const uniformsRef = useRef({});
+    for (let i = 0; i < GRAIN_GRADIENT_MAX_COLORS; i++) {
+        uniformsRef.current[`u_colors[${i}]`] =
+            (_b = (_a = resolvedColors[i]) !== null && _a !== void 0 ? _a : resolvedColors[resolvedColors.length - 1]) !== null && _b !== void 0 ? _b : [0, 0, 0, 0];
+    }
+    uniformsRef.current.u_colorsCount = resolvedColors.length;
+    uniformsRef.current.u_colorBack = resolvedBack;
+    uniformsRef.current.u_shape = GRAIN_GRADIENT_SHAPES[shape];
+    uniformsRef.current.u_softness = softness;
+    uniformsRef.current.u_intensity = intensity;
+    uniformsRef.current.u_noise = noise;
+    uniformsRef.current.u_speed = speed;
+    const fallbackGradient = `linear-gradient(135deg, ${safeColors.join(", ")}, ${colorBack})`;
+    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: grainGradientFragmentShader, uniformsRef: uniformsRef })) : (jsx("div", { className: "absolute inset-0", style: { background: fallbackGradient } })) }));
+};
+
+export { GrainGradient };

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

@@ -0,0 +1,17 @@
+/**
+ * GrainGradient fragment shader — adapted from paper-design/shaders'
+ * `grain-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.
+ *
+ * Shape variants trimmed for v1: the original ships 7 (wave, dots, truchet,
+ * corners, ripple, blob, sphere) — this port ships 4 (corners, ripple, blob,
+ * sphere), the ones whose shape-space UV mapping is simplest to port onto a
+ * plain object-space UV without paper-design's separate pattern-tiling fit
+ * engine. wave/dots/truchet may be added later as a follow-up.
+ */
+export declare const grainGradientFragmentShader = "#version 300 es\nprecision lowp float;\n\nuniform float iTime;\nuniform vec2 iResolution;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[7];\nuniform float u_colorsCount;\nuniform float u_softness;\nuniform float u_intensity;\nuniform float u_noise;\nuniform float u_shape;\nuniform float u_speed;\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\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 valueNoiseR(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = randomR(i);\n  float b = randomR(i + vec2(1.0, 0.0));\n  float c = randomR(i + vec2(0.0, 1.0));\n  float d = randomR(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\nvec4 fbmR(vec2 n0, vec2 n1, vec2 n2, vec2 n3) {\n  float amplitude = 0.2;\n  vec4 total = vec4(0.);\n  for (int i = 0; i < 3; i++) {\n    n0 = rotate(n0, 0.3);\n    n1 = rotate(n1, 0.3);\n    n2 = rotate(n2, 0.3);\n    n3 = rotate(n3, 0.3);\n    total.x += valueNoiseR(n0) * amplitude;\n    total.y += valueNoiseR(n1) * amplitude;\n    total.z += valueNoiseR(n2) * amplitude;\n    total.w += valueNoiseR(n3) * amplitude;\n    n0 *= 1.99;\n    n1 *= 1.99;\n    n2 *= 1.99;\n    n3 *= 1.99;\n    amplitude *= 0.6;\n  }\n  return total;\n}\n\nvoid main() {\n  const float firstFrameOffset = 7.;\n  float t = .1 * u_speed * iTime + firstFrameOffset;\n\n  vec2 shape_uv = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);\n  vec2 grain_uv = shape_uv * .7;\n\n  float shape = 0.;\n  if (u_shape < 1.5) {\n    // corners\n    shape_uv *= .6;\n    vec2 outer = vec2(.5);\n    vec2 bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(3. * t), .2 - .1 * sin(5.25 * t)));\n    vec2 tr = smoothstep(vec2(0.), outer, 1. - shape_uv);\n    shape = 1. - bl.x * bl.y * tr.x * tr.y;\n    shape_uv = -shape_uv;\n    bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(3. * t), .2 - .1 * cos(5.25 * t)));\n    tr = smoothstep(vec2(0.), outer, 1. - shape_uv);\n    shape -= bl.x * bl.y * tr.x * tr.y;\n    shape = 1. - smoothstep(0., 1., shape);\n  } else if (u_shape < 2.5) {\n    // ripple\n    shape_uv *= 2.;\n    float dist = length(.4 * shape_uv);\n    float waves = sin(pow(dist, 1.2) * 5. - 3. * t) * .5 + .5;\n    shape = waves;\n  } else if (u_shape < 3.5) {\n    // blob\n    float t2 = t * 2.;\n    vec2 f1_traj = .25 * vec2(1.3 * sin(t2), .2 + 1.3 * cos(.6 * t2 + 4.));\n    vec2 f2_traj = .2 * vec2(1.2 * sin(-t2), 1.3 * sin(1.6 * t2));\n    vec2 f3_traj = .25 * vec2(1.7 * cos(-.6 * t2), cos(-1.6 * t2));\n    vec2 f4_traj = .3 * vec2(1.4 * cos(.8 * t2), 1.2 * sin(-.6 * t2 - 3.));\n    shape = .5 * pow(1. - clamp(length(shape_uv + f1_traj), 0., 1.), 5.);\n    shape += .5 * pow(1. - clamp(length(shape_uv + f2_traj), 0., 1.), 5.);\n    shape += .5 * pow(1. - clamp(length(shape_uv + f3_traj), 0., 1.), 5.);\n    shape += .5 * pow(1. - clamp(length(shape_uv + f4_traj), 0., 1.), 5.);\n    shape = smoothstep(.0, .9, shape);\n    float edge = smoothstep(.25, .3, shape);\n    shape = mix(.0, shape, edge);\n  } else {\n    // sphere\n    shape_uv *= 2.;\n    float d = 1. - pow(length(shape_uv), 2.);\n    vec3 pos = vec3(shape_uv, sqrt(max(d, 0.)));\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  float baseNoise = snoise(grain_uv * .5);\n  vec4 fbmVals = fbmR(\n    .002 * grain_uv + 10.,\n    .003 * grain_uv,\n    .001 * grain_uv,\n    rotate(.4 * grain_uv, 2.)\n  );\n  float grainDist = baseNoise * snoise(grain_uv * .2) - fbmVals.x - fbmVals.y;\n  float rawNoise = .75 * baseNoise - fbmVals.w - fbmVals.z;\n  float noiseVal = clamp(rawNoise, 0., 1.);\n\n  shape += u_intensity * 2. / u_colorsCount * (grainDist + .5);\n  shape += u_noise * 10. / u_colorsCount * noiseVal;\n\n  float aa = fwidth(shape);\n  shape = clamp(shape - .5 / u_colorsCount, 0., 1.);\n  float totalShape = smoothstep(0., u_softness + 2. * aa, clamp(shape * u_colorsCount, 0., 1.));\n  float mixer = shape * (u_colorsCount - 1.);\n\n  int cntStop = int(u_colorsCount) - 1;\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  for (int i = 1; i < 7; i++) {\n    if (i > cntStop) break;\n    float localT = clamp(mixer - float(i - 1), 0., 1.);\n    localT = smoothstep(.5 - .5 * u_softness - aa, .5 + .5 * u_softness + aa, localT);\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, localT);\n  }\n\n  vec3 color = gradient.rgb * totalShape;\n  float opacity = gradient.a * totalShape;\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  fragColor = vec4(color, opacity);\n}\n";

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

@@ -0,0 +1,168 @@
+import 'react/jsx-runtime';
+import 'react';
+import { glslDeclarePI, glslRotate2, glslHashFloat, glslSimplexNoise2D } from '../shared/shaderNoise.glsl.js';
+
+/**
+ * GrainGradient fragment shader — adapted from paper-design/shaders'
+ * `grain-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.
+ *
+ * Shape variants trimmed for v1: the original ships 7 (wave, dots, truchet,
+ * corners, ripple, blob, sphere) — this port ships 4 (corners, ripple, blob,
+ * sphere), the ones whose shape-space UV mapping is simplest to port onto a
+ * plain object-space UV without paper-design's separate pattern-tiling fit
+ * engine. wave/dots/truchet may be added later as a follow-up.
+ */
+const grainGradientFragmentShader = `#version 300 es
+precision lowp float;
+
+uniform float iTime;
+uniform vec2 iResolution;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colors[7];
+uniform float u_colorsCount;
+uniform float u_softness;
+uniform float u_intensity;
+uniform float u_noise;
+uniform float u_shape;
+uniform float u_speed;
+
+out vec4 fragColor;
+
+${glslDeclarePI}
+${glslRotate2}
+${glslHashFloat}
+${glslSimplexNoise2D}
+
+float valueNoiseR(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  float a = randomR(i);
+  float b = randomR(i + vec2(1.0, 0.0));
+  float c = randomR(i + vec2(0.0, 1.0));
+  float d = randomR(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);
+}
+
+vec4 fbmR(vec2 n0, vec2 n1, vec2 n2, vec2 n3) {
+  float amplitude = 0.2;
+  vec4 total = vec4(0.);
+  for (int i = 0; i < 3; i++) {
+    n0 = rotate(n0, 0.3);
+    n1 = rotate(n1, 0.3);
+    n2 = rotate(n2, 0.3);
+    n3 = rotate(n3, 0.3);
+    total.x += valueNoiseR(n0) * amplitude;
+    total.y += valueNoiseR(n1) * amplitude;
+    total.z += valueNoiseR(n2) * amplitude;
+    total.w += valueNoiseR(n3) * amplitude;
+    n0 *= 1.99;
+    n1 *= 1.99;
+    n2 *= 1.99;
+    n3 *= 1.99;
+    amplitude *= 0.6;
+  }
+  return total;
+}
+
+void main() {
+  const float firstFrameOffset = 7.;
+  float t = .1 * u_speed * iTime + firstFrameOffset;
+
+  vec2 shape_uv = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);
+  vec2 grain_uv = shape_uv * .7;
+
+  float shape = 0.;
+  if (u_shape < 1.5) {
+    // corners
+    shape_uv *= .6;
+    vec2 outer = vec2(.5);
+    vec2 bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(3. * t), .2 - .1 * sin(5.25 * t)));
+    vec2 tr = smoothstep(vec2(0.), outer, 1. - shape_uv);
+    shape = 1. - bl.x * bl.y * tr.x * tr.y;
+    shape_uv = -shape_uv;
+    bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(3. * t), .2 - .1 * cos(5.25 * t)));
+    tr = smoothstep(vec2(0.), outer, 1. - shape_uv);
+    shape -= bl.x * bl.y * tr.x * tr.y;
+    shape = 1. - smoothstep(0., 1., shape);
+  } else if (u_shape < 2.5) {
+    // ripple
+    shape_uv *= 2.;
+    float dist = length(.4 * shape_uv);
+    float waves = sin(pow(dist, 1.2) * 5. - 3. * t) * .5 + .5;
+    shape = waves;
+  } else if (u_shape < 3.5) {
+    // blob
+    float t2 = t * 2.;
+    vec2 f1_traj = .25 * vec2(1.3 * sin(t2), .2 + 1.3 * cos(.6 * t2 + 4.));
+    vec2 f2_traj = .2 * vec2(1.2 * sin(-t2), 1.3 * sin(1.6 * t2));
+    vec2 f3_traj = .25 * vec2(1.7 * cos(-.6 * t2), cos(-1.6 * t2));
+    vec2 f4_traj = .3 * vec2(1.4 * cos(.8 * t2), 1.2 * sin(-.6 * t2 - 3.));
+    shape = .5 * pow(1. - clamp(length(shape_uv + f1_traj), 0., 1.), 5.);
+    shape += .5 * pow(1. - clamp(length(shape_uv + f2_traj), 0., 1.), 5.);
+    shape += .5 * pow(1. - clamp(length(shape_uv + f3_traj), 0., 1.), 5.);
+    shape += .5 * pow(1. - clamp(length(shape_uv + f4_traj), 0., 1.), 5.);
+    shape = smoothstep(.0, .9, shape);
+    float edge = smoothstep(.25, .3, shape);
+    shape = mix(.0, shape, edge);
+  } else {
+    // sphere
+    shape_uv *= 2.;
+    float d = 1. - pow(length(shape_uv), 2.);
+    vec3 pos = vec3(shape_uv, sqrt(max(d, 0.)));
+    vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));
+    shape = .5 + .5 * dot(lightPos, pos);
+    shape *= step(0., d);
+  }
+
+  float baseNoise = snoise(grain_uv * .5);
+  vec4 fbmVals = fbmR(
+    .002 * grain_uv + 10.,
+    .003 * grain_uv,
+    .001 * grain_uv,
+    rotate(.4 * grain_uv, 2.)
+  );
+  float grainDist = baseNoise * snoise(grain_uv * .2) - fbmVals.x - fbmVals.y;
+  float rawNoise = .75 * baseNoise - fbmVals.w - fbmVals.z;
+  float noiseVal = clamp(rawNoise, 0., 1.);
+
+  shape += u_intensity * 2. / u_colorsCount * (grainDist + .5);
+  shape += u_noise * 10. / u_colorsCount * noiseVal;
+
+  float aa = fwidth(shape);
+  shape = clamp(shape - .5 / u_colorsCount, 0., 1.);
+  float totalShape = smoothstep(0., u_softness + 2. * aa, clamp(shape * u_colorsCount, 0., 1.));
+  float mixer = shape * (u_colorsCount - 1.);
+
+  int cntStop = int(u_colorsCount) - 1;
+  vec4 gradient = u_colors[0];
+  gradient.rgb *= gradient.a;
+  for (int i = 1; i < 7; i++) {
+    if (i > cntStop) break;
+    float localT = clamp(mixer - float(i - 1), 0., 1.);
+    localT = smoothstep(.5 - .5 * u_softness - aa, .5 + .5 * u_softness + aa, localT);
+    vec4 c = u_colors[i];
+    c.rgb *= c.a;
+    gradient = mix(gradient, c, localT);
+  }
+
+  vec3 color = gradient.rgb * totalShape;
+  float opacity = gradient.a * totalShape;
+  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 { grainGradientFragmentShader };

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

@@ -0,0 +1,26 @@
+import type React from "react";
+export declare const GRAIN_GRADIENT_MAX_COLORS = 7;
+export declare const GRAIN_GRADIENT_SHAPES: {
+    readonly corners: 1;
+    readonly ripple: 2;
+    readonly blob: 3;
+    readonly sphere: 4;
+};
+export type GrainGradientShape = keyof typeof GRAIN_GRADIENT_SHAPES;
+export interface GrainGradientProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Background CSS color. Default: 'var(--color-background)'. */
+    colorBack?: string;
+    /** Gradient ramp colors, up to 7. Default: a 3-stop primary ramp. */
+    colors?: string[];
+    /** Underlying animated shape mask. Default: 'blob'. */
+    shape?: GrainGradientShape;
+    /** Blend softness between color stops, 0-1. Default: 0.4. */
+    softness?: number;
+    /** Grain-driven color-band distortion, 0-1+. Default: 0.3. */
+    intensity?: number;
+    /** Fine grain texture strength, 0-1. Default: 0.15. */
+    noise?: number;
+    /** Animation speed multiplier. Default: 1. */
+    speed?: number;
+    className?: string;
+}

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

@@ -0,0 +1,9 @@
+const GRAIN_GRADIENT_MAX_COLORS = 7;
+const GRAIN_GRADIENT_SHAPES = {
+    corners: 1,
+    ripple: 2,
+    blob: 3,
+    sphere: 4,
+};
+
+export { GRAIN_GRADIENT_MAX_COLORS, GRAIN_GRADIENT_SHAPES };

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

@@ -0,0 +1,3 @@
+export { GrainGradient } from "./GrainGradient";
+export type { GrainGradientProps, GrainGradientShape } from "./GrainGradient.types";
+export { GRAIN_GRADIENT_SHAPES } from "./GrainGradient.types";

package/dist/components/effects/GridPattern/GridPattern.js

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

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

@@ -0,0 +1,10 @@
+import React from "react";
+import type { HalftoneCmykProps } from "./HalftoneCmyk.types";
+/**
+ * CMYK halftone image filter — separates a source image into 4 classic
+ * print-screen-angled ink dot layers (cyan/magenta/yellow/black). WebGL2-
+ * powered; falls back to the plain source image (via `object-fit: cover`)
+ * when WebGL2 is unavailable. The most GPU-expensive effect in this
+ * library — avoid using it as a full-page background at low `size` values.
+ */
+export declare const HalftoneCmyk: React.FC<HalftoneCmykProps>;