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

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

@@ -0,0 +1,9 @@
+import React from "react";
+import type { LiquidMetalProps } from "./LiquidMetal.types";
+/**
+ * Animated chrome/mercury-like liquid metal surface with chromatic-dispersion
+ * stripes, masked into a shape. WebGL2-powered; falls back to a static CSS
+ * metallic gradient when WebGL2 is unavailable or the user prefers reduced
+ * motion.
+ */
+export declare const LiquidMetal: React.FC<LiquidMetalProps>;

package/dist/components/effects/LiquidMetal/LiquidMetal.js

@@ -0,0 +1,61 @@
+"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 { liquidMetalFragmentShader } from './LiquidMetal.shaders.js';
+import { LIQUID_METAL_SHAPES } from './LiquidMetal.types.js';
+
+const DEFAULT_COLOR_BACK = "var(--color-background)";
+const DEFAULT_COLOR_TINT = "transparent";
+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 chrome/mercury-like liquid metal surface with chromatic-dispersion
+ * stripes, masked into a shape. WebGL2-powered; falls back to a static CSS
+ * metallic gradient when WebGL2 is unavailable or the user prefers reduced
+ * motion.
+ */
+const LiquidMetal = ({ colorBack = DEFAULT_COLOR_BACK, colorTint = DEFAULT_COLOR_TINT, shape = "circle", softness = 0.3, repetition = 4, shiftRed = 0.3, shiftBlue = 0.3, distortion = 0.15, contour = 0.3, angle = 0, speed = 1, className, style, ...props }) => {
+    const isClient = useIsClient();
+    const shouldReduceMotion = useReducedMotion();
+    const isDark = useDarkMode();
+    const webglSupported = useWebgl2Supported(!!shouldReduceMotion);
+    const resolvedBack = useMemo(() => resolveShaderColor(colorBack), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [colorBack, isDark]);
+    const resolvedTint = useMemo(() => resolveShaderColor(colorTint, [0, 0, 0, 0]), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [colorTint, isDark]);
+    const uniformsRef = useRef({});
+    uniformsRef.current.u_colorBack = resolvedBack;
+    uniformsRef.current.u_colorTint = resolvedTint;
+    uniformsRef.current.u_shape = LIQUID_METAL_SHAPES[shape];
+    uniformsRef.current.u_softness = softness;
+    uniformsRef.current.u_repetition = repetition;
+    uniformsRef.current.u_shiftRed = shiftRed;
+    uniformsRef.current.u_shiftBlue = shiftBlue;
+    uniformsRef.current.u_distortion = distortion;
+    uniformsRef.current.u_contour = contour;
+    uniformsRef.current.u_angle = angle;
+    uniformsRef.current.u_speed = speed;
+    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: liquidMetalFragmentShader, uniformsRef: uniformsRef })) : (jsx("div", { className: "absolute inset-0", style: {
+                background: `linear-gradient(120deg, #f5f5f7 0%, #1a1a1a 25%, #f5f5f7 50%, #1a1a1a 75%, #f5f5f7 100%)`,
+            } })) }));
+};
+
+export { LiquidMetal };

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

@@ -0,0 +1,19 @@
+/**
+ * LiquidMetal fragment shader — adapted from paper-design/shaders'
+ * `liquid-metal.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/simplex GLSL (see
+ * shared/shaderNoise.glsl.ts) instead of pre-generated noise-texture
+ * sampling.
+ *
+ * Image-input mode omitted: paper-design's `u_isImage` path expects a
+ * specially pre-processed texture (red channel = edge/SDF mask, green
+ * channel = alpha) rather than an ordinary photo — that pre-processing step
+ * is out of scope for this port. This ships the generative-shape modes only
+ * (none/circle/daisy/diamond/metaballs); image-driven logo mode may be
+ * added later alongside a documented preprocessing story.
+ */
+export declare const liquidMetalFragmentShader = "#version 300 es\nprecision mediump float;\n\nuniform float iTime;\nuniform vec2 iResolution;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorTint;\n\nuniform float u_softness;\nuniform float u_repetition;\nuniform float u_shiftRed;\nuniform float u_shiftBlue;\nuniform float u_distortion;\nuniform float u_contour;\nuniform float u_angle;\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\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 getColorChanges(float c1, float c2, float stripe_p, vec3 w, float blur, float bump, float tint) {\n  float ch = mix(c2, c1, smoothstep(.0, 2. * blur, stripe_p));\n  float border = w[0];\n  ch = mix(ch, c2, smoothstep(border, border + 2. * blur, stripe_p));\n  border = w[0] + .4 * (1. - bump) * w[1];\n  ch = mix(ch, c1, smoothstep(border, border + 2. * blur, stripe_p));\n  border = w[0] + .5 * (1. - bump) * w[1];\n  ch = mix(ch, c2, smoothstep(border, border + 2. * blur, stripe_p));\n  border = w[0] + w[1];\n  ch = mix(ch, c1, smoothstep(border, border + 2. * blur, stripe_p));\n  float gradient_t = (stripe_p - w[0] - w[1]) / w[2];\n  float gradient = mix(c1, c2, smoothstep(0., 1., gradient_t));\n  ch = mix(ch, gradient, smoothstep(border, border + .5 * blur, stripe_p));\n  ch = mix(ch, 1. - min(1., (1. - ch) / max(tint, 0.0001)), u_colorTint.a);\n  return ch;\n}\n\nvoid main() {\n  const float firstFrameOffset = 2.8;\n  float t = .3 * u_speed * iTime + firstFrameOffset;\n\n  vec2 objectUV = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);\n  vec2 uv = objectUV + .5;\n  uv.y = 1. - uv.y;\n\n  float cycleWidth = u_repetition;\n  float edge = 0.;\n  vec2 rotatedUV = uv - vec2(.5);\n  float angle = (-u_angle + 70.) * PI / 180.;\n  float cosA = cos(angle);\n  float sinA = sin(angle);\n  rotatedUV = vec2(\n    rotatedUV.x * cosA - rotatedUV.y * sinA,\n    rotatedUV.x * sinA + rotatedUV.y * cosA\n  ) + vec2(.5);\n\n  if (u_shape < 1.) {\n    vec2 borderUV = objectUV + .5;\n    vec2 mask = min(borderUV, 1. - borderUV);\n    vec2 pixel_thickness = min(250. / iResolution.xy, vec2(.5));\n    float maskX = pow(smoothstep(0.0, pixel_thickness.x, mask.x), .25);\n    float maskY = pow(smoothstep(0.0, pixel_thickness.y, mask.y), .25);\n    edge = clamp(1. - maskX * maskY, 0., 1.);\n    cycleWidth *= 2.;\n  } else if (u_shape < 2.) {\n    vec2 shapeUV = (uv - .5) * .67;\n    edge = pow(clamp(3. * length(shapeUV), 0., 1.), 18.);\n  } else if (u_shape < 3.) {\n    vec2 shapeUV = (uv - .5) * 1.68;\n    float r = length(shapeUV) * 2.;\n    float a = atan(shapeUV.y, shapeUV.x) + .2;\n    r *= (1. + .05 * sin(3. * a + 2. * t));\n    float f = abs(cos(a * 3.));\n    edge = smoothstep(f, f + .7, r);\n    edge *= edge;\n    uv *= .8;\n    cycleWidth *= 1.6;\n  } else if (u_shape < 4.) {\n    vec2 shapeUV = uv - .5;\n    shapeUV = rotate(shapeUV, .25 * PI);\n    shapeUV *= 1.42;\n    shapeUV += .5;\n    vec2 mask = min(shapeUV, 1. - shapeUV);\n    vec2 pixel_thickness = vec2(.15);\n    float maskX = pow(smoothstep(0.0, pixel_thickness.x, mask.x), .25);\n    float maskY = pow(smoothstep(0.0, pixel_thickness.y, mask.y), .25);\n    edge = clamp(1. - maskX * maskY, 0., 1.);\n  } else {\n    vec2 shapeUV = (uv - .5) * 1.3;\n    edge = 0.;\n    for (int i = 0; i < 5; i++) {\n      float fi = float(i);\n      float speed = 1.5 + 2. / 3. * sin(fi * 12.345);\n      float ang = -fi * 1.5;\n      vec2 dir1 = vec2(cos(ang), sin(ang));\n      vec2 dir2 = vec2(cos(ang + 1.57), sin(ang + 1.));\n      vec2 traj = .4 * (dir1 * sin(t * speed + fi * 1.23) + dir2 * cos(t * (speed * 0.7) + fi * 2.17));\n      float d = length(shapeUV + traj);\n      edge += pow(1.0 - clamp(d, 0.0, 1.0), 4.0);\n    }\n    edge = 1. - smoothstep(.65, .9, edge);\n    edge = pow(edge, 4.);\n  }\n  edge = mix(smoothstep(.9 - 2. * fwidth(edge), .9, edge), edge, smoothstep(0.0, 0.4, u_contour));\n\n  float opacity = 1. - smoothstep(.9 - 2. * fwidth(edge), .9, edge);\n  if (u_shape < 2.) {\n    edge = 1.2 * edge;\n  } else {\n    edge = 1.8 * pow(edge, 1.5);\n  }\n\n  float diagBLtoTR = rotatedUV.x - rotatedUV.y;\n  float diagTLtoBR = rotatedUV.x + rotatedUV.y;\n  vec3 color1 = vec3(.98, .98, 1.);\n  vec3 color2 = vec3(.1, .1, .1 + .1 * smoothstep(.7, 1.3, diagTLtoBR));\n  vec2 grad_uv = uv - .5;\n  float dist = length(grad_uv + vec2(0., .2 * diagBLtoTR));\n  grad_uv = rotate(grad_uv, (.25 - .2 * diagBLtoTR) * PI);\n  float direction = grad_uv.x;\n  float bump = pow(1.8 * dist, 1.2);\n  bump = 1. - bump;\n  bump *= pow(uv.y, .3);\n  float thin_strip_1_ratio = .12 / cycleWidth * (1. - .4 * bump);\n  float thin_strip_2_ratio = .07 / cycleWidth * (1. + .4 * bump);\n  float wide_strip_ratio = (1. - thin_strip_1_ratio - thin_strip_2_ratio);\n  float thin_strip_1_width = cycleWidth * thin_strip_1_ratio;\n  float thin_strip_2_width = cycleWidth * thin_strip_2_ratio;\n  float noiseVal = snoise(uv - t);\n  edge += (1. - edge) * u_distortion * noiseVal;\n  direction += diagBLtoTR;\n  direction -= 2. * noiseVal * diagBLtoTR * (smoothstep(0., 1., edge) * (1.0 - smoothstep(0., 1., edge)));\n  direction *= mix(1., 1. - edge, smoothstep(.5, 1., u_contour));\n  direction -= 1.7 * edge * smoothstep(.5, 1., u_contour);\n  direction += .2 * pow(u_contour, 4.) * (1.0 - smoothstep(0., 1., edge));\n  bump *= clamp(pow(uv.y, .1), .3, 1.);\n  direction *= (.1 + (1.1 - edge) * bump);\n  direction *= (.4 + .6 * (1.0 - smoothstep(.5, 1., edge)));\n  direction += .18 * (smoothstep(.1, .2, uv.y) * (1.0 - smoothstep(.2, .4, uv.y)));\n  direction += .03 * (smoothstep(.1, .2, 1. - uv.y) * (1.0 - smoothstep(.2, .4, 1. - uv.y)));\n  direction *= (.5 + .5 * pow(uv.y, 2.));\n  direction *= cycleWidth;\n  direction -= t;\n  float colorDispersion = clamp(1. - bump, 0., 1.);\n  float dispersionRed = colorDispersion;\n  dispersionRed += .03 * bump * noiseVal;\n  dispersionRed += 5. * (smoothstep(-.1, .2, uv.y) * (1.0 - smoothstep(.1, .5, uv.y))) * (smoothstep(.4, .6, bump) * (1.0 - smoothstep(.4, 1., bump)));\n  dispersionRed -= diagBLtoTR;\n  float dispersionBlue = colorDispersion * 1.3;\n  dispersionBlue += (smoothstep(0., .4, uv.y) * (1.0 - smoothstep(.1, .8, uv.y))) * (smoothstep(.4, .6, bump) * (1.0 - smoothstep(.4, .8, bump)));\n  dispersionBlue -= .2 * edge;\n  dispersionRed *= (u_shiftRed / 20.);\n  dispersionBlue *= (u_shiftBlue / 20.);\n  float blur = u_softness / 15.;\n\n  vec3 w = vec3(thin_strip_1_width, thin_strip_2_width, wide_strip_ratio);\n  w[1] -= .02 * smoothstep(.0, 1., edge + bump);\n  float stripe_r = fract(direction + dispersionRed);\n  float rC = getColorChanges(color1.r, color2.r, stripe_r, w, blur + fwidth(stripe_r), bump, u_colorTint.r);\n  float stripe_g = fract(direction);\n  float gC = getColorChanges(color1.g, color2.g, stripe_g, w, blur + fwidth(stripe_g), bump, u_colorTint.g);\n  float stripe_b = fract(direction - dispersionBlue);\n  float bC = getColorChanges(color1.b, color2.b, stripe_b, w, blur + fwidth(stripe_b), bump, u_colorTint.b);\n\n  vec3 color = vec3(rC, gC, bC);\n  color *= opacity;\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1. - opacity);\n  opacity = opacity + u_colorBack.a * (1. - opacity);\n\n  fragColor = vec4(color, opacity);\n}\n";

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

@@ -0,0 +1,202 @@
+import 'react/jsx-runtime';
+import 'react';
+import { glslDeclarePI, glslRotate2, glslSimplexNoise2D } from '../shared/shaderNoise.glsl.js';
+
+/**
+ * LiquidMetal fragment shader — adapted from paper-design/shaders'
+ * `liquid-metal.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/simplex GLSL (see
+ * shared/shaderNoise.glsl.ts) instead of pre-generated noise-texture
+ * sampling.
+ *
+ * Image-input mode omitted: paper-design's `u_isImage` path expects a
+ * specially pre-processed texture (red channel = edge/SDF mask, green
+ * channel = alpha) rather than an ordinary photo — that pre-processing step
+ * is out of scope for this port. This ships the generative-shape modes only
+ * (none/circle/daisy/diamond/metaballs); image-driven logo mode may be
+ * added later alongside a documented preprocessing story.
+ */
+const liquidMetalFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform float iTime;
+uniform vec2 iResolution;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colorTint;
+
+uniform float u_softness;
+uniform float u_repetition;
+uniform float u_shiftRed;
+uniform float u_shiftBlue;
+uniform float u_distortion;
+uniform float u_contour;
+uniform float u_angle;
+uniform float u_shape;
+uniform float u_speed;
+
+out vec4 fragColor;
+
+${glslDeclarePI}
+${glslRotate2}
+${glslSimplexNoise2D}
+
+float getColorChanges(float c1, float c2, float stripe_p, vec3 w, float blur, float bump, float tint) {
+  float ch = mix(c2, c1, smoothstep(.0, 2. * blur, stripe_p));
+  float border = w[0];
+  ch = mix(ch, c2, smoothstep(border, border + 2. * blur, stripe_p));
+  border = w[0] + .4 * (1. - bump) * w[1];
+  ch = mix(ch, c1, smoothstep(border, border + 2. * blur, stripe_p));
+  border = w[0] + .5 * (1. - bump) * w[1];
+  ch = mix(ch, c2, smoothstep(border, border + 2. * blur, stripe_p));
+  border = w[0] + w[1];
+  ch = mix(ch, c1, smoothstep(border, border + 2. * blur, stripe_p));
+  float gradient_t = (stripe_p - w[0] - w[1]) / w[2];
+  float gradient = mix(c1, c2, smoothstep(0., 1., gradient_t));
+  ch = mix(ch, gradient, smoothstep(border, border + .5 * blur, stripe_p));
+  ch = mix(ch, 1. - min(1., (1. - ch) / max(tint, 0.0001)), u_colorTint.a);
+  return ch;
+}
+
+void main() {
+  const float firstFrameOffset = 2.8;
+  float t = .3 * u_speed * iTime + firstFrameOffset;
+
+  vec2 objectUV = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);
+  vec2 uv = objectUV + .5;
+  uv.y = 1. - uv.y;
+
+  float cycleWidth = u_repetition;
+  float edge = 0.;
+  vec2 rotatedUV = uv - vec2(.5);
+  float angle = (-u_angle + 70.) * PI / 180.;
+  float cosA = cos(angle);
+  float sinA = sin(angle);
+  rotatedUV = vec2(
+    rotatedUV.x * cosA - rotatedUV.y * sinA,
+    rotatedUV.x * sinA + rotatedUV.y * cosA
+  ) + vec2(.5);
+
+  if (u_shape < 1.) {
+    vec2 borderUV = objectUV + .5;
+    vec2 mask = min(borderUV, 1. - borderUV);
+    vec2 pixel_thickness = min(250. / iResolution.xy, vec2(.5));
+    float maskX = pow(smoothstep(0.0, pixel_thickness.x, mask.x), .25);
+    float maskY = pow(smoothstep(0.0, pixel_thickness.y, mask.y), .25);
+    edge = clamp(1. - maskX * maskY, 0., 1.);
+    cycleWidth *= 2.;
+  } else if (u_shape < 2.) {
+    vec2 shapeUV = (uv - .5) * .67;
+    edge = pow(clamp(3. * length(shapeUV), 0., 1.), 18.);
+  } else if (u_shape < 3.) {
+    vec2 shapeUV = (uv - .5) * 1.68;
+    float r = length(shapeUV) * 2.;
+    float a = atan(shapeUV.y, shapeUV.x) + .2;
+    r *= (1. + .05 * sin(3. * a + 2. * t));
+    float f = abs(cos(a * 3.));
+    edge = smoothstep(f, f + .7, r);
+    edge *= edge;
+    uv *= .8;
+    cycleWidth *= 1.6;
+  } else if (u_shape < 4.) {
+    vec2 shapeUV = uv - .5;
+    shapeUV = rotate(shapeUV, .25 * PI);
+    shapeUV *= 1.42;
+    shapeUV += .5;
+    vec2 mask = min(shapeUV, 1. - shapeUV);
+    vec2 pixel_thickness = vec2(.15);
+    float maskX = pow(smoothstep(0.0, pixel_thickness.x, mask.x), .25);
+    float maskY = pow(smoothstep(0.0, pixel_thickness.y, mask.y), .25);
+    edge = clamp(1. - maskX * maskY, 0., 1.);
+  } else {
+    vec2 shapeUV = (uv - .5) * 1.3;
+    edge = 0.;
+    for (int i = 0; i < 5; i++) {
+      float fi = float(i);
+      float speed = 1.5 + 2. / 3. * sin(fi * 12.345);
+      float ang = -fi * 1.5;
+      vec2 dir1 = vec2(cos(ang), sin(ang));
+      vec2 dir2 = vec2(cos(ang + 1.57), sin(ang + 1.));
+      vec2 traj = .4 * (dir1 * sin(t * speed + fi * 1.23) + dir2 * cos(t * (speed * 0.7) + fi * 2.17));
+      float d = length(shapeUV + traj);
+      edge += pow(1.0 - clamp(d, 0.0, 1.0), 4.0);
+    }
+    edge = 1. - smoothstep(.65, .9, edge);
+    edge = pow(edge, 4.);
+  }
+  edge = mix(smoothstep(.9 - 2. * fwidth(edge), .9, edge), edge, smoothstep(0.0, 0.4, u_contour));
+
+  float opacity = 1. - smoothstep(.9 - 2. * fwidth(edge), .9, edge);
+  if (u_shape < 2.) {
+    edge = 1.2 * edge;
+  } else {
+    edge = 1.8 * pow(edge, 1.5);
+  }
+
+  float diagBLtoTR = rotatedUV.x - rotatedUV.y;
+  float diagTLtoBR = rotatedUV.x + rotatedUV.y;
+  vec3 color1 = vec3(.98, .98, 1.);
+  vec3 color2 = vec3(.1, .1, .1 + .1 * smoothstep(.7, 1.3, diagTLtoBR));
+  vec2 grad_uv = uv - .5;
+  float dist = length(grad_uv + vec2(0., .2 * diagBLtoTR));
+  grad_uv = rotate(grad_uv, (.25 - .2 * diagBLtoTR) * PI);
+  float direction = grad_uv.x;
+  float bump = pow(1.8 * dist, 1.2);
+  bump = 1. - bump;
+  bump *= pow(uv.y, .3);
+  float thin_strip_1_ratio = .12 / cycleWidth * (1. - .4 * bump);
+  float thin_strip_2_ratio = .07 / cycleWidth * (1. + .4 * bump);
+  float wide_strip_ratio = (1. - thin_strip_1_ratio - thin_strip_2_ratio);
+  float thin_strip_1_width = cycleWidth * thin_strip_1_ratio;
+  float thin_strip_2_width = cycleWidth * thin_strip_2_ratio;
+  float noiseVal = snoise(uv - t);
+  edge += (1. - edge) * u_distortion * noiseVal;
+  direction += diagBLtoTR;
+  direction -= 2. * noiseVal * diagBLtoTR * (smoothstep(0., 1., edge) * (1.0 - smoothstep(0., 1., edge)));
+  direction *= mix(1., 1. - edge, smoothstep(.5, 1., u_contour));
+  direction -= 1.7 * edge * smoothstep(.5, 1., u_contour);
+  direction += .2 * pow(u_contour, 4.) * (1.0 - smoothstep(0., 1., edge));
+  bump *= clamp(pow(uv.y, .1), .3, 1.);
+  direction *= (.1 + (1.1 - edge) * bump);
+  direction *= (.4 + .6 * (1.0 - smoothstep(.5, 1., edge)));
+  direction += .18 * (smoothstep(.1, .2, uv.y) * (1.0 - smoothstep(.2, .4, uv.y)));
+  direction += .03 * (smoothstep(.1, .2, 1. - uv.y) * (1.0 - smoothstep(.2, .4, 1. - uv.y)));
+  direction *= (.5 + .5 * pow(uv.y, 2.));
+  direction *= cycleWidth;
+  direction -= t;
+  float colorDispersion = clamp(1. - bump, 0., 1.);
+  float dispersionRed = colorDispersion;
+  dispersionRed += .03 * bump * noiseVal;
+  dispersionRed += 5. * (smoothstep(-.1, .2, uv.y) * (1.0 - smoothstep(.1, .5, uv.y))) * (smoothstep(.4, .6, bump) * (1.0 - smoothstep(.4, 1., bump)));
+  dispersionRed -= diagBLtoTR;
+  float dispersionBlue = colorDispersion * 1.3;
+  dispersionBlue += (smoothstep(0., .4, uv.y) * (1.0 - smoothstep(.1, .8, uv.y))) * (smoothstep(.4, .6, bump) * (1.0 - smoothstep(.4, .8, bump)));
+  dispersionBlue -= .2 * edge;
+  dispersionRed *= (u_shiftRed / 20.);
+  dispersionBlue *= (u_shiftBlue / 20.);
+  float blur = u_softness / 15.;
+
+  vec3 w = vec3(thin_strip_1_width, thin_strip_2_width, wide_strip_ratio);
+  w[1] -= .02 * smoothstep(.0, 1., edge + bump);
+  float stripe_r = fract(direction + dispersionRed);
+  float rC = getColorChanges(color1.r, color2.r, stripe_r, w, blur + fwidth(stripe_r), bump, u_colorTint.r);
+  float stripe_g = fract(direction);
+  float gC = getColorChanges(color1.g, color2.g, stripe_g, w, blur + fwidth(stripe_g), bump, u_colorTint.g);
+  float stripe_b = fract(direction - dispersionBlue);
+  float bC = getColorChanges(color1.b, color2.b, stripe_b, w, blur + fwidth(stripe_b), bump, u_colorTint.b);
+
+  vec3 color = vec3(rC, gC, bC);
+  color *= opacity;
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  color = color + bgColor * (1. - opacity);
+  opacity = opacity + u_colorBack.a * (1. - opacity);
+
+  fragColor = vec4(color, opacity);
+}
+`;
+
+export { liquidMetalFragmentShader };

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

@@ -0,0 +1,34 @@
+import type React from "react";
+export declare const LIQUID_METAL_SHAPES: {
+    readonly none: 0;
+    readonly circle: 1;
+    readonly daisy: 2;
+    readonly diamond: 3;
+    readonly metaballs: 4;
+};
+export type LiquidMetalShape = keyof typeof LIQUID_METAL_SHAPES;
+export interface LiquidMetalProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Background CSS color. Default: 'var(--color-background)'. */
+    colorBack?: string;
+    /** Tint color mixed into the chrome highlights; alpha controls tint strength. Default: 'transparent'. */
+    colorTint?: string;
+    /** Shape the metal stripes are masked into. Default: 'circle'. */
+    shape?: LiquidMetalShape;
+    /** Stripe blur/softness. Default: 0.3. */
+    softness?: number;
+    /** Stripe repetition count. Default: 4. */
+    repetition?: number;
+    /** Red-channel chromatic shift, 0-1+. Default: 0.3. */
+    shiftRed?: number;
+    /** Blue-channel chromatic shift, 0-1+. Default: 0.3. */
+    shiftBlue?: number;
+    /** Turbulent distortion strength, 0-1. Default: 0.15. */
+    distortion?: number;
+    /** Edge contour sharpness, 0-1. Default: 0.3. */
+    contour?: number;
+    /** Stripe rotation angle, degrees. Default: 0. */
+    angle?: number;
+    /** Animation speed multiplier. Default: 1. */
+    speed?: number;
+    className?: string;
+}

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

@@ -0,0 +1,9 @@
+const LIQUID_METAL_SHAPES = {
+    none: 0,
+    circle: 1,
+    daisy: 2,
+    diamond: 3,
+    metaballs: 4,
+};
+
+export { LIQUID_METAL_SHAPES };

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

@@ -0,0 +1,3 @@
+export { LiquidMetal } from "./LiquidMetal";
+export type { LiquidMetalProps, LiquidMetalShape } from "./LiquidMetal.types";
+export { LIQUID_METAL_SHAPES } from "./LiquidMetal.types";

package/dist/components/effects/MagneticElement/MagneticElement.js

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

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

@@ -0,0 +1,25 @@
+import React from "react";
+import type { MeshGradientProps } from "./MeshGradient.types";
+/**
+ * MeshGradient renders a smooth, marble-style gradient background, derived
+ * deterministically from a `seed` string — the same seed always produces the
+ * same gradient. It's a faithful port of boring-avatars' marble: a solid base
+ * color overlaid with a couple of irregular polygon shapes that are
+ * translated/rotated/scaled by the seed and heavily Gaussian-blurred, melting
+ * into soft flowing veins. Colors are consecutive palette entries (always
+ * neighbouring hues → harmonious), and an optional `NoiseOverlay` adds grain.
+ *
+ * Because it's drawn in an SVG viewBox, the blur is resolution-independent — it
+ * looks identical at 24px or 480px. Use it inside a `position: relative`
+ * container with your content at `z-10`+; it is non-interactive and clips to the
+ * container via `overflow-hidden`.
+ *
+ * @example
+ * ```tsx
+ * <div className="relative overflow-hidden h-96">
+ *   <MeshGradient seed="Maria Mitchell" />
+ *   <div className="relative z-10">Your content here</div>
+ * </div>
+ * ```
+ */
+export declare const MeshGradient: React.ForwardRefExoticComponent<MeshGradientProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/effects/MeshGradient/MeshGradient.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useId, useMemo } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { NoiseOverlay } from '../NoiseOverlay/NoiseOverlay.js';
+import { DEFAULT_MESH_COLORS, generateMarble, MESH_SIZE } from './MeshGradient.utils.js';
+
+/**
+ * MeshGradient renders a smooth, marble-style gradient background, derived
+ * deterministically from a `seed` string — the same seed always produces the
+ * same gradient. It's a faithful port of boring-avatars' marble: a solid base
+ * color overlaid with a couple of irregular polygon shapes that are
+ * translated/rotated/scaled by the seed and heavily Gaussian-blurred, melting
+ * into soft flowing veins. Colors are consecutive palette entries (always
+ * neighbouring hues → harmonious), and an optional `NoiseOverlay` adds grain.
+ *
+ * Because it's drawn in an SVG viewBox, the blur is resolution-independent — it
+ * looks identical at 24px or 480px. Use it inside a `position: relative`
+ * container with your content at `z-10`+; it is non-interactive and clips to the
+ * container via `overflow-hidden`.
+ *
+ * @example
+ * ```tsx
+ * <div className="relative overflow-hidden h-96">
+ *   <MeshGradient seed="Maria Mitchell" />
+ *   <div className="relative z-10">Your content here</div>
+ * </div>
+ * ```
+ */
+const MeshGradient = React__default.forwardRef(({ seed = "flikk", colors, count = 2, blur = 7, opacity = 1, blendMode = "normal", animated = false, noise = true, className, style, ...rest }, ref) => {
+    const shouldReduceMotion = useReducedMotion();
+    const enableAnimation = animated && !shouldReduceMotion;
+    const filterId = useId();
+    // Defaults to the curated marble palette; the seed picks consecutive colors
+    // from it (override with `colors`).
+    const palette = colors && colors.length ? colors : DEFAULT_MESH_COLORS;
+    const { base, shapes } = useMemo(() => generateMarble(seed, palette, Math.max(1, count)), 
+    // palette is derived per render; key on its contents to stay stable
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [seed, count, palette.join("|")]);
+    const shapeNodes = shapes.map((shape, i) => (jsx("path", { d: shape.path, fill: shape.color, filter: `url(#${filterId})`, style: shape.blend !== "normal" ? { mixBlendMode: shape.blend } : undefined, transform: `translate(${shape.translateX} ${shape.translateY}) rotate(${shape.rotate} ${MESH_SIZE / 2} ${MESH_SIZE / 2}) scale(${shape.scale})` }, i)));
+    return (jsxs("div", { ref: ref, className: cn("absolute inset-0 pointer-events-none z-0 overflow-hidden isolate", className), style: { opacity, mixBlendMode: blendMode, ...style }, "aria-hidden": "true", ...rest, children: [jsxs("svg", { className: "absolute inset-0 size-full", viewBox: `0 0 ${MESH_SIZE} ${MESH_SIZE}`, preserveAspectRatio: "xMidYMid slice", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("defs", { children: jsx("filter", { id: filterId, filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: jsx("feGaussianBlur", { stdDeviation: blur }) }) }), jsx("rect", { width: MESH_SIZE, height: MESH_SIZE, fill: base }), enableAnimation ? (jsx(motion.g, { animate: { rotate: [0, 4, 0, -4, 0], scale: [1, 1.04, 1, 1.04, 1] }, transition: { duration: 18, ease: "easeInOut", repeat: Infinity }, style: { transformBox: "fill-box", transformOrigin: "center" }, children: shapeNodes })) : (jsx("g", { children: shapeNodes }))] }), noise && (jsx(NoiseOverlay, { opacity: 0.14, blendMode: "soft-light", animated: enableAnimation }))] }));
+});
+MeshGradient.displayName = "MeshGradient";
+
+export { MeshGradient };

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

@@ -0,0 +1,40 @@
+import type React from "react";
+export type MeshGradientBlendMode = "normal" | "overlay" | "soft-light" | "multiply" | "screen";
+export interface MeshGradientProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Deterministic source string — the same seed always renders the same
+     * gradient. Pass a name/id to give each entity a stable identity.
+     * @default "flikk"
+     */
+    seed?: string;
+    /**
+     * Palette the color fields are picked from. Accepts any CSS color, including
+     * theme variables like `var(--color-primary)`. When omitted, the `seed`
+     * deterministically selects one of the curated `MESH_PALETTES`.
+     */
+    colors?: string[];
+    /** Number of blurred polygon shapes layered over the base. @default 2 */
+    count?: number;
+    /**
+     * Gaussian blur radius, in viewBox units (the marble is drawn in an 80-unit
+     * square), so it's resolution-independent — identical at any render size.
+     * @default 7
+     */
+    blur?: number;
+    /** Overall opacity of the gradient layer, 0–1. @default 1 */
+    opacity?: number;
+    /** CSS mix-blend-mode for the layer. @default "normal" */
+    blendMode?: MeshGradientBlendMode;
+    /**
+     * Whether to apply a subtle looping drift to the color fields. Respects
+     * prefers-reduced-motion automatically. @default false
+     */
+    animated?: boolean;
+    /**
+     * Overlay a subtle grain texture (via `NoiseOverlay`) for a richer, less
+     * digital surface. @default true
+     */
+    noise?: boolean;
+    /** Additional className for style overrides (shadcn pattern). */
+    className?: string;
+}

package/dist/components/effects/MeshGradient/MeshGradient.utils.d.ts

@@ -0,0 +1,83 @@
+import { type ContrastTone } from "../../../utils/colorUtils";
+/**
+ * Deterministic hashing + color helpers for MeshGradient.
+ *
+ * The string-hash idea comes from boring-avatars
+ * (https://github.com/boringdesigners/boring-avatars, MIT License). We turn the
+ * `seed` into a numeric seed, then draw well-distributed blob positions/colors
+ * from a tiny deterministic PRNG so the same `seed` always yields the same
+ * mesh — but the blobs spread across the surface instead of clustering.
+ */
+/**
+ * Curated vibrant palettes. Each is a designer-grade cool→warm sweep (so within
+ * one tile distinct colors meet and blend, the way boring-avatars' marble does).
+ * The DEFAULT is the boring-avatars marble palette itself — variety comes from
+ * each `seed` emphasizing different colors *within* the palette (not from
+ * swapping palettes), which keeps a whole set cohesive yet distinct. Pass any of
+ * these (or your own) to the `colors` prop; `pickPalette` is offered for
+ * consumers who instead want the seed to choose a palette.
+ */
+export declare const MESH_PALETTES: ReadonlyArray<readonly string[]>;
+/** Default palette — the boring-avatars marble set. */
+export declare const DEFAULT_MESH_COLORS: string[];
+/** Named handles for the curated palettes (ergonomic alternative to indexing). */
+export declare const MESH_PALETTE_BY_NAME: {
+    readonly marble: string[];
+    readonly terra: string[];
+    readonly spectrum: string[];
+    readonly mint: string[];
+    readonly neon: string[];
+};
+/** One of the curated palette names. */
+export type MeshPaletteName = keyof typeof MESH_PALETTE_BY_NAME;
+/** Deterministic 32-bit hash of a string. Same input → same output. */
+export declare const hashCode: (name: string) => number;
+/** Deterministically pick one of the curated `MESH_PALETTES` from a seed. */
+export declare const pickPalette: (seed: string) => readonly string[];
+/** viewBox size the marble is authored in (mirrors boring-avatars). */
+export declare const MESH_SIZE = 80;
+/**
+ * Two fixed, irregular polygon paths (verbatim from boring-avatars' marble,
+ * MIT). Filled with a color, transformed per-seed, and heavily Gaussian-blurred,
+ * they melt into the smooth flowing veins that define the marble look.
+ */
+export declare const MARBLE_PATHS: readonly string[];
+/** How a marble shape composites against the base + the other shapes. */
+export type MeshBlendMode = "normal" | "overlay" | "soft-light";
+export interface MeshShape {
+    color: string;
+    /** SVG transform pieces, in viewBox units / degrees. */
+    translateX: number;
+    translateY: number;
+    rotate: number;
+    scale: number;
+    /** Polygon path data (one of MARBLE_PATHS). */
+    path: string;
+    /** Composite mode; the 2nd shape onward uses overlay/soft-light. */
+    blend: MeshBlendMode;
+}
+export interface MeshField {
+    /** Solid ground color (the base rect). */
+    base: string;
+    /** Blurred polygon shapes layered over the base. */
+    shapes: MeshShape[];
+}
+/**
+ * Derive a deterministic marble field from a seed + palette — a faithful port of
+ * boring-avatars' marble. Colors are *consecutive* palette entries
+ * (`palette[(hash + i) % len]`): always neighbouring hues, which is what keeps
+ * every tile harmonious and smooth. Each shape gets a seeded translate/rotate/
+ * scale and is heavily blurred at render; the 2nd shape onward composites with
+ * overlay/soft-light. Same `seed` → same field.
+ */
+export declare const generateMarble: (seed: string, colors: string[], count: number) => MeshField;
+/**
+ * The text tone (`"light"` | `"dark"`) that reads best over the mesh a given
+ * seed produces. Decided from the **base** color — the full-tile ground that
+ * best predicts overall darkness. (Averaging in the small, blurred bright shapes
+ * mis-reads dark tiles like a teal base with a cream accent.) Pass `threshold`
+ * to bias toward light text on more mid-tones (see `contrastTone`). Map the
+ * result to the theme-stable neutral tokens at the call site, e.g.
+ * `tone === "dark" ? "var(--color-mono-950)" : "var(--color-mono-50)"`.
+ */
+export declare const getMeshTextTone: (seed: string, colors: string[], count: number, threshold?: number) => ContrastTone;