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

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

@@ -0,0 +1,27 @@
+import React from "react";
+import type { PulsingBorderProps } from "./PulsingBorder.types";
+/**
+ * Map a px corner radius to the shader's normalized `u_roundness`.
+ * The shader computes the radius against the post-margin border rect, so
+ * `minDimension` must be the smaller dimension of the rect the border hugs —
+ * the HOST element (wrapper minus 2·glow per axis when a `glow` halo is set).
+ * px → normalized is `2·px / minDimension`, clamped to the shader's 0–1
+ * domain. (Exact at the default `margin` of 0.)
+ */
+export declare const pxToRoundness: (px: number, minDimension: number) => number;
+/**
+ * Map a px border width to the shader's normalized `u_thickness`.
+ * The shader computes thickness BEFORE margins, so `minDimension` must be the
+ * smaller dimension of the full CANVAS (the wrapper, including any `glow`
+ * halo). `thicknessUV = 0.5 * u_thickness * 0.5` — so px → normalized is
+ * `4·px / minDimension` (the shader accepts values past 1).
+ */
+export declare const pxToThickness: (px: number, minDimension: number) => number;
+/**
+ * Animated glowing pulsing border — colored spots sweep around a rounded
+ * rectangle's edge with a beat-driven pulse and bloom. An accent effect for
+ * cards, CTAs, and AI-active states — not a background. WebGL2-powered;
+ * falls back to a static CSS border glow when WebGL2 is unavailable or the
+ * user prefers reduced motion.
+ */
+export declare const PulsingBorder: React.FC<PulsingBorderProps>;

package/dist/components/effects/PulsingBorder/PulsingBorder.js

@@ -0,0 +1,174 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useState, useMemo, useLayoutEffect, useEffect } 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 { pulsingBorderFragmentShader } from './PulsingBorder.shaders.js';
+import { PULSING_BORDER_MAX_COLORS } from './PulsingBorder.types.js';
+
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+/**
+ * Map a px corner radius to the shader's normalized `u_roundness`.
+ * The shader computes the radius against the post-margin border rect, so
+ * `minDimension` must be the smaller dimension of the rect the border hugs —
+ * the HOST element (wrapper minus 2·glow per axis when a `glow` halo is set).
+ * px → normalized is `2·px / minDimension`, clamped to the shader's 0–1
+ * domain. (Exact at the default `margin` of 0.)
+ */
+const pxToRoundness = (px, minDimension) => Math.min(Math.max((2 * px) / minDimension, 0), 1);
+/**
+ * Map a px border width to the shader's normalized `u_thickness`.
+ * The shader computes thickness BEFORE margins, so `minDimension` must be the
+ * smaller dimension of the full CANVAS (the wrapper, including any `glow`
+ * halo). `thicknessUV = 0.5 * u_thickness * 0.5` — so px → normalized is
+ * `4·px / minDimension` (the shader accepts values past 1).
+ */
+const pxToThickness = (px, minDimension) => Math.max((4 * px) / minDimension, 0);
+const DEFAULT_COLORS = ["var(--color-primary-300)", "var(--color-primary)", "var(--color-primary-700)"];
+const DEFAULT_COLOR_BACK = "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 glowing pulsing border — colored spots sweep around a rounded
+ * rectangle's edge with a beat-driven pulse and bloom. An accent effect for
+ * cards, CTAs, and AI-active states — not a background. WebGL2-powered;
+ * falls back to a static CSS border glow when WebGL2 is unavailable or the
+ * user prefers reduced motion.
+ */
+const PulsingBorder = ({ colorBack = DEFAULT_COLOR_BACK, colors = DEFAULT_COLORS, radius, borderWidth, glow = 0, offset = 0, lineOpacity = 0, animation = "pulse", roundness, thickness = 0.15, margin = 0, marginLeft, marginRight, marginTop, marginBottom, aspectRatio = 0, softness = 0.3, intensity = 0.3, bloom = 0.3, spotSize = 0.4, spots = 3, pulse = 0.3, speed = 1, className, style, ...props }) => {
+    var _a, _b, _c, _d;
+    const isClient = useIsClient();
+    const shouldReduceMotion = useReducedMotion();
+    const isDark = useDarkMode();
+    const webglSupported = useWebgl2Supported(!!shouldReduceMotion);
+    // The HOST element (our parent) is measured — size for the px→uniform
+    // conversions, computed border-radius for the auto radius match (same trick
+    // as TiltCard's glow). Measuring the parent instead of our own wrapper
+    // avoids a feedback loop with the auto halo expanding the wrapper.
+    const rootRef = useRef(null);
+    const [host, setHost] = useState({ width: 0, height: 0, radiusPx: 0 });
+    useIsomorphicLayoutEffect(() => {
+        var _a;
+        const el = (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+        if (!el)
+            return;
+        const measure = () => {
+            // offsetWidth/Height = LAYOUT px, immune to ancestor scale() transforms
+            // (NodeCanvas zoom!). getBoundingClientRect returns visually-scaled px,
+            // which would put the halo geometry at the wrong scale under zoom.
+            const width = el.offsetWidth;
+            const height = el.offsetHeight;
+            const radiusPx = parseFloat(getComputedStyle(el).borderRadius) || 0;
+            setHost((prev) => prev.width === width && prev.height === height && prev.radiusPx === radiusPx
+                ? prev
+                : { width, height, radiusPx });
+        };
+        measure();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(measure);
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+    const hostMin = Math.min(host.width, host.height);
+    const measured = hostMin > 0;
+    // The border line sits fully OUTSIDE the host: its center is outset from
+    // the host edge by half the line width plus the optional `offset` gap, so
+    // it never overlaps the host's content.
+    const thicknessPx = borderWidth !== null && borderWidth !== void 0 ? borderWidth : 0.25 * thickness * hostMin;
+    const outset = measured ? thicknessPx / 2 + offset : 0;
+    // A glow must fade out, never crop: the wrapper auto-expands past the host
+    // by enough room for the outset line plus the wider of the soft band
+    // (3·softness·thickness, from the shader's band math) and the neon `glow`
+    // falloff. Padded ~15% + 2px for AA/bloom smear.
+    const halo = measured
+        ? Math.ceil((offset + thicknessPx + Math.max(3 * softness * thicknessPx, glow)) * 1.15) + 2
+        : 0;
+    const canvasMin = Math.min(host.width + 2 * halo, host.height + 2 * halo);
+    const haloFracX = halo > 0 ? (halo - outset) / (host.width + 2 * halo) : 0;
+    const haloFracY = halo > 0 ? (halo - outset) / (host.height + 2 * halo) : 0;
+    // Radius precedence: explicit px `radius` › explicit normalized `roundness`
+    // › auto (host's computed border-radius) › shader default 0.4. The border
+    // rect is `outset` bigger than the host per side, so its radius grows by
+    // the same amount to stay concentric.
+    const radiusPx = radius !== null && radius !== void 0 ? radius : (roundness === undefined && host.radiusPx > 0 ? host.radiusPx : undefined);
+    const resolvedRoundness = radiusPx !== undefined && measured
+        ? pxToRoundness(radiusPx + outset, hostMin + 2 * outset)
+        : (roundness !== null && roundness !== void 0 ? roundness : 0.4);
+    // Normalized thickness stays host-relative (scaled down by the halo-grown
+    // canvas) so the auto halo doesn't visually thicken the border.
+    const resolvedThickness = measured
+        ? borderWidth !== undefined
+            ? pxToThickness(borderWidth, canvasMin)
+            : thickness * (hostMin / canvasMin)
+        : thickness;
+    // Only explicit px props are meaningless before measurement — gate the
+    // shader on those (like charts' `measured` flag) so it never paints one
+    // frame at the wrong scale. Auto radius/halo just kick in once measured.
+    const waitingForMeasure = (radius !== undefined || borderWidth !== undefined) && !measured;
+    const safeColors = colors.length > 0 ? colors.slice(0, PULSING_BORDER_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, [0, 0, 0, 0]), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [colorBack, isDark]);
+    const uniformsRef = useRef({});
+    for (let i = 0; i < PULSING_BORDER_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_roundness = resolvedRoundness;
+    uniformsRef.current.u_thickness = resolvedThickness;
+    uniformsRef.current.u_marginLeft = (marginLeft !== null && marginLeft !== void 0 ? marginLeft : margin) + haloFracX;
+    uniformsRef.current.u_marginRight = (marginRight !== null && marginRight !== void 0 ? marginRight : margin) + haloFracX;
+    uniformsRef.current.u_marginTop = (marginTop !== null && marginTop !== void 0 ? marginTop : margin) + haloFracY;
+    uniformsRef.current.u_marginBottom = (marginBottom !== null && marginBottom !== void 0 ? marginBottom : margin) + haloFracY;
+    uniformsRef.current.u_aspectRatio = aspectRatio;
+    uniformsRef.current.u_glow = measured && glow > 0 ? glow / canvasMin : 0;
+    uniformsRef.current.u_lineOpacity = lineOpacity;
+    uniformsRef.current.u_sweep = animation === "sweep" ? 1 : 0;
+    uniformsRef.current.u_softness = softness;
+    uniformsRef.current.u_intensity = intensity;
+    uniformsRef.current.u_bloom = bloom;
+    uniformsRef.current.u_spotSize = spotSize;
+    uniformsRef.current.u_spots = spots;
+    uniformsRef.current.u_pulse = pulse;
+    uniformsRef.current.u_speed = speed;
+    return (jsx("div", { ref: rootRef, className: cn("absolute inset-0 overflow-hidden pointer-events-none select-none", className), style: halo > 0
+            ? {
+                inset: -halo,
+                // Concentric outer rounding so overflow-hidden never clips the
+                // halo against the host's (smaller) radius.
+                borderRadius: radiusPx !== undefined ? radiusPx + halo : undefined,
+                ...style,
+            }
+            : style, "aria-hidden": "true", ...props, children: isClient && webglSupported && !waitingForMeasure ? (jsx(ShaderCanvas, { fragmentShader: pulsingBorderFragmentShader, uniformsRef: uniformsRef })) : (jsx("div", { className: "absolute inset-0 rounded-[inherit]", style: {
+                // With a halo the wrapper is bigger than the host — inset the
+                // static border back to the outset line's box so its outer shadow
+                // can render in the halo band instead of being clipped.
+                inset: halo > 0 ? halo - outset : undefined,
+                borderRadius: radiusPx !== undefined ? radiusPx + outset : undefined,
+                // Outer blur ≤ halo so the shadow fades out before the wrapper's
+                // overflow-hidden edge (a larger blur would clip to a hard line).
+                boxShadow: `inset 0 0 0 ${borderWidth !== null && borderWidth !== void 0 ? borderWidth : 2}px ${(_c = safeColors[0]) !== null && _c !== void 0 ? _c : "var(--color-primary)"}, 0 0 ${halo > 0 ? halo : 24}px ${(_d = safeColors[safeColors.length - 1]) !== null && _d !== void 0 ? _d : "var(--color-primary)"}`,
+            } })) }));
+};
+
+export { PulsingBorder, pxToRoundness, pxToThickness };

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

@@ -0,0 +1,14 @@
+/**
+ * PulsingBorder fragment shader — adapted from paper-design/shaders'
+ * `pulsing-border.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. The `smoke`/`smokeSize`
+ * secondary noise layer is omitted for v1 to reduce first-pass GLSL
+ * complexity on an already-dense shader — the core rounded-border +
+ * per-spot pulsing glow + bloom is unaffected.
+ */
+export declare const pulsingBorderFragmentShader = "#version 300 es\nprecision lowp float;\n\nuniform float iTime;\nuniform vec2 iResolution;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[5];\nuniform float u_colorsCount;\nuniform float u_roundness;\nuniform float u_thickness;\nuniform float u_marginLeft;\nuniform float u_marginRight;\nuniform float u_marginTop;\nuniform float u_marginBottom;\nuniform float u_aspectRatio;\nuniform float u_softness;\nuniform float u_glow;\nuniform float u_lineOpacity;\nuniform float u_sweep;\nuniform float u_intensity;\nuniform float u_bloom;\nuniform float u_spotSize;\nuniform float u_spots;\nuniform float u_pulse;\nuniform float u_speed;\n\nout vec4 fragColor;\n\n\nconst float PI = 3.14159265359;\nconst float TWO_PI = 6.28318530718;\n\n\nvec2 randomGB(vec2 st) {\n  return vec2(\n    fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453123),\n    fract(sin(dot(st, vec2(93.9898, 67.345))) * 24634.6345123)\n  );\n}\n\n\nfloat beat(float time) {\n  float first = pow(abs(sin(time * TWO_PI)), 10.);\n  float second = pow(abs(sin((time - .15) * TWO_PI)), 10.);\n  return clamp(first + 0.6 * second, 0.0, 1.0);\n}\n\nfloat sst(float edge0, float edge1, float x) {\n  return smoothstep(edge0, edge1, x);\n}\n\nfloat roundedBox(vec2 uv, vec2 halfSize, float distance, float cornerDistance, float thickness, float softness) {\n  float borderDistance = abs(distance);\n  float aa = 2. * fwidth(distance);\n  float border = 1. - sst(min(mix(thickness, -thickness, softness), thickness + aa), max(mix(thickness, -thickness, softness), thickness + aa), borderDistance);\n  float cornerFadeCircles = 0.;\n  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv + halfSize) / thickness)));\n  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - vec2(-halfSize.x, halfSize.y)) / thickness)));\n  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - vec2(halfSize.x, -halfSize.y)) / thickness)));\n  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - halfSize) / thickness)));\n  aa = fwidth(cornerDistance);\n  float cornerFade = sst(0., mix(aa, thickness, softness), cornerDistance);\n  cornerFade *= cornerFadeCircles;\n  border += cornerFade;\n  return border;\n}\n\nvoid main() {\n  const float firstFrameOffset = 109.;\n  float t = 1.2 * u_speed * iTime + firstFrameOffset;\n\n  float canvasRatio = iResolution.x / iResolution.y;\n  vec2 halfSize = vec2(max(canvasRatio, 1.) * .5, .5 / min(canvasRatio, 1.));\n  vec2 borderUV = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);\n\n  float pulse = u_pulse * beat(.18 * u_speed * iTime);\n\n  float mL = u_marginLeft;\n  float mR = u_marginRight;\n  float mT = u_marginTop;\n  float mB = u_marginBottom;\n  float mX = mL + mR;\n  float mY = mT + mB;\n\n  if (u_aspectRatio > 0.) {\n    float shapeRatio = canvasRatio * (1. - mX) / max(1. - mY, 1e-6);\n    float freeX = shapeRatio > 1. ? (1. - mX) * (1. - 1. / max(abs(shapeRatio), 1e-6)) : 0.;\n    float freeY = shapeRatio < 1. ? (1. - mY) * (1. - shapeRatio) : 0.;\n    mL += freeX * 0.5;\n    mR += freeX * 0.5;\n    mT += freeY * 0.5;\n    mB += freeY * 0.5;\n    mX = mL + mR;\n    mY = mT + mB;\n  }\n\n  float thickness = .5 * u_thickness * min(halfSize.x, halfSize.y);\n\n  halfSize.x *= (1. - mX);\n  halfSize.y *= (1. - mY);\n\n  vec2 centerShift = vec2(\n    (mL - mR) * max(canvasRatio, 1.) * 0.5,\n    (mB - mT) / min(canvasRatio, 1.) * 0.5\n  );\n\n  borderUV -= centerShift;\n  halfSize -= mix(thickness, 0., u_softness);\n\n  float radius = mix(0., min(halfSize.x, halfSize.y), u_roundness);\n  vec2 d = abs(borderUV) - halfSize + radius;\n  float outsideDistance = length(max(d, .0001)) - radius;\n  float insideDistance = min(max(d.x, d.y), .0001);\n  float cornerDistance = abs(min(max(d.x, d.y) - .45 * radius, .0));\n  float distance = outsideDistance + insideDistance;\n\n  float borderThickness = mix(thickness, 3. * thickness, u_softness);\n  float border = roundedBox(borderUV, halfSize, distance, cornerDistance, borderThickness, u_softness);\n  border = pow(border, 1. + u_softness);\n\n  border = clamp(border, 0., 1.);\n\n  // Neon halo: a soft luminous falloff radiating OUTWARD from the border\n  // line (u_glow = falloff width in UV units, 0 = off). One-sided: it fades\n  // to nothing just inside the line so the host card stays clean - the glow\n  // reads as if the effect sits behind the card. Only the sweeping spots\n  // light it (spotMask), so the crisp hairline below stays thin.\n  float spotMask = border;\n  if (u_glow > 0.) {\n    float halo = 1. - sst(0., u_glow, max(distance, 0.));\n    halo *= sst(-3. * thickness, 0., distance);\n    halo = pow(halo, 2.5);\n    spotMask = max(spotMask, .5 * halo);\n  }\n  spotMask = clamp(spotMask, 0., 1.);\n\n  vec3 blendColor = vec3(0.);\n  float blendAlpha = 0.;\n  vec3 addColor = vec3(0.);\n  float addAlpha = 0.;\n\n  float bloom = 4. * u_bloom;\n  float intensity = 1. + (1. + 4. * u_softness) * u_intensity;\n\n  float angle = atan(borderUV.y, borderUV.x) / TWO_PI;\n\n  // Sweep mode: ONE soft luminous beam anchored to a stretch of the border,\n  // orbiting at constant speed with a long fade on both sides - no flicker,\n  // no multiple spots. Its color glides through u_colors as it travels, so\n  // the border changes color over each lap. Subtle beat breathing via\n  // u_pulse; u_spotSize sets the beam's arc length; u_spots is ignored.\n  if (u_sweep > .5) {\n    // Starts at TOP CENTER (angle .25 turns) and orbits from there.\n    float head = fract(.25 - .084 * u_speed * iTime);\n    float pos = fract(angle - head + .5);\n    float arc = .22 + .6 * pow(u_spotSize, 2.);\n    float beam = sst(.5 - arc, .5, pos) * (1. - sst(.5, .5 + arc, pos));\n    beam = pow(beam, 1.5);\n    beam *= spotMask;\n    beam *= (1. - .4 * u_pulse + .4 * pulse);\n    beam *= intensity;\n    beam = clamp(beam, 0., 1.);\n\n    float cPos = head * u_colorsCount;\n    int ci = int(floor(cPos));\n    int cj = ci + 1;\n    if (cj >= int(u_colorsCount)) cj = 0;\n    vec4 beamC = mix(u_colors[ci], u_colors[cj], fract(cPos));\n    blendColor = beamC.rgb * beamC.a * beam;\n    blendAlpha = beamC.a * beam;\n    addColor = blendColor;\n    addAlpha = blendAlpha;\n  } else {\n  for (int colorIdx = 0; colorIdx < 5; colorIdx++) {\n    if (colorIdx >= int(u_colorsCount)) break;\n    float colorIdxF = float(colorIdx);\n\n    vec3 c = u_colors[colorIdx].rgb * u_colors[colorIdx].a;\n    float a = u_colors[colorIdx].a;\n\n    for (int spotIdx = 0; spotIdx < 4; spotIdx++) {\n      if (spotIdx >= int(u_spots)) break;\n      float spotIdxF = float(spotIdx);\n\n      vec2 randVal = randomGB(vec2(spotIdxF * 10. + 2., 40. + colorIdxF));\n\n      float time = (.1 + .15 * abs(sin(spotIdxF * (2. + colorIdxF)) * cos(spotIdxF * (2. + 2.5 * colorIdxF)))) * t + randVal.x * 3.;\n      time *= mix(1., -1., step(.5, randVal.y));\n\n      float mask = .5 + .5 * mix(\n        sin(t + spotIdxF * (5. - 1.5 * colorIdxF)),\n        cos(t + spotIdxF * (3. + 1.3 * colorIdxF)),\n        step(mod(colorIdxF, 2.), .5)\n      );\n\n      float p = clamp(2. * u_pulse - randVal.x, 0., 1.);\n      mask = mix(mask, pulse, p);\n\n      float atg1 = fract(angle + time);\n      float spotSize = .05 + .6 * pow(u_spotSize, 2.) + .05 * randVal.x;\n      spotSize = mix(spotSize, .1, p);\n      float sector = sst(.5 - spotSize, .5, atg1) * (1. - sst(.5, .5 + spotSize, atg1));\n\n      sector *= mask;\n      sector *= spotMask;\n      sector *= intensity;\n      sector = clamp(sector, 0., 1.);\n\n      vec3 srcColor = c * sector;\n      float srcAlpha = a * sector;\n\n      blendColor += ((1. - blendAlpha) * srcColor);\n      blendAlpha = blendAlpha + (1. - blendAlpha) * srcAlpha;\n      addColor += srcColor;\n      addAlpha += srcAlpha;\n    }\n  }\n  }\n\n  vec3 accumColor = mix(blendColor, addColor, bloom);\n  float accumAlpha = mix(blendAlpha, addAlpha, bloom);\n  accumAlpha = clamp(accumAlpha, 0., 1.);\n\n  // Always-visible hairline (u_lineOpacity 0 = off): the crisp border line\n  // at a faint constant opacity, tinted by blending u_colors around the\n  // perimeter (a subtle gradient ring), rendered UNDER the sweeping spots.\n  if (u_lineOpacity > 0.) {\n    float cPos = fract(angle + .5) * u_colorsCount;\n    int ci = int(floor(cPos));\n    int cj = ci + 1;\n    if (cj >= int(u_colorsCount)) cj = 0;\n    vec4 lineC = mix(u_colors[ci], u_colors[cj], fract(cPos));\n    float lineA = lineC.a * u_lineOpacity * border;\n    accumColor += (1. - accumAlpha) * lineC.rgb * lineA;\n    accumAlpha = accumAlpha + (1. - accumAlpha) * lineA;\n  }\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  vec3 color = accumColor + (1. - accumAlpha) * bgColor;\n  float opacity = accumAlpha + (1. - accumAlpha) * u_colorBack.a;\n\n  // accumColor is PREMULTIPLIED, but ShaderCanvas composites with straight\n  // alpha (blendFunc SRC_ALPHA + premultipliedAlpha:false) - emitting it\n  // as-is multiplies by alpha twice, crushing every soft pixel (the glow\n  // falloff was invisible). Un-premultiply before output.\n  fragColor = vec4(color / max(opacity, 1e-4), opacity);\n}\n";

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

@@ -0,0 +1,258 @@
+import 'react/jsx-runtime';
+import 'react';
+import { glslDeclarePI, glslHashVec2 } from '../shared/shaderNoise.glsl.js';
+
+/**
+ * PulsingBorder fragment shader — adapted from paper-design/shaders'
+ * `pulsing-border.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. The `smoke`/`smokeSize`
+ * secondary noise layer is omitted for v1 to reduce first-pass GLSL
+ * complexity on an already-dense shader — the core rounded-border +
+ * per-spot pulsing glow + bloom is unaffected.
+ */
+const pulsingBorderFragmentShader = `#version 300 es
+precision lowp float;
+
+uniform float iTime;
+uniform vec2 iResolution;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colors[5];
+uniform float u_colorsCount;
+uniform float u_roundness;
+uniform float u_thickness;
+uniform float u_marginLeft;
+uniform float u_marginRight;
+uniform float u_marginTop;
+uniform float u_marginBottom;
+uniform float u_aspectRatio;
+uniform float u_softness;
+uniform float u_glow;
+uniform float u_lineOpacity;
+uniform float u_sweep;
+uniform float u_intensity;
+uniform float u_bloom;
+uniform float u_spotSize;
+uniform float u_spots;
+uniform float u_pulse;
+uniform float u_speed;
+
+out vec4 fragColor;
+
+${glslDeclarePI}
+${glslHashVec2}
+
+float beat(float time) {
+  float first = pow(abs(sin(time * TWO_PI)), 10.);
+  float second = pow(abs(sin((time - .15) * TWO_PI)), 10.);
+  return clamp(first + 0.6 * second, 0.0, 1.0);
+}
+
+float sst(float edge0, float edge1, float x) {
+  return smoothstep(edge0, edge1, x);
+}
+
+float roundedBox(vec2 uv, vec2 halfSize, float distance, float cornerDistance, float thickness, float softness) {
+  float borderDistance = abs(distance);
+  float aa = 2. * fwidth(distance);
+  float border = 1. - sst(min(mix(thickness, -thickness, softness), thickness + aa), max(mix(thickness, -thickness, softness), thickness + aa), borderDistance);
+  float cornerFadeCircles = 0.;
+  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv + halfSize) / thickness)));
+  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - vec2(-halfSize.x, halfSize.y)) / thickness)));
+  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - vec2(halfSize.x, -halfSize.y)) / thickness)));
+  cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - halfSize) / thickness)));
+  aa = fwidth(cornerDistance);
+  float cornerFade = sst(0., mix(aa, thickness, softness), cornerDistance);
+  cornerFade *= cornerFadeCircles;
+  border += cornerFade;
+  return border;
+}
+
+void main() {
+  const float firstFrameOffset = 109.;
+  float t = 1.2 * u_speed * iTime + firstFrameOffset;
+
+  float canvasRatio = iResolution.x / iResolution.y;
+  vec2 halfSize = vec2(max(canvasRatio, 1.) * .5, .5 / min(canvasRatio, 1.));
+  vec2 borderUV = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);
+
+  float pulse = u_pulse * beat(.18 * u_speed * iTime);
+
+  float mL = u_marginLeft;
+  float mR = u_marginRight;
+  float mT = u_marginTop;
+  float mB = u_marginBottom;
+  float mX = mL + mR;
+  float mY = mT + mB;
+
+  if (u_aspectRatio > 0.) {
+    float shapeRatio = canvasRatio * (1. - mX) / max(1. - mY, 1e-6);
+    float freeX = shapeRatio > 1. ? (1. - mX) * (1. - 1. / max(abs(shapeRatio), 1e-6)) : 0.;
+    float freeY = shapeRatio < 1. ? (1. - mY) * (1. - shapeRatio) : 0.;
+    mL += freeX * 0.5;
+    mR += freeX * 0.5;
+    mT += freeY * 0.5;
+    mB += freeY * 0.5;
+    mX = mL + mR;
+    mY = mT + mB;
+  }
+
+  float thickness = .5 * u_thickness * min(halfSize.x, halfSize.y);
+
+  halfSize.x *= (1. - mX);
+  halfSize.y *= (1. - mY);
+
+  vec2 centerShift = vec2(
+    (mL - mR) * max(canvasRatio, 1.) * 0.5,
+    (mB - mT) / min(canvasRatio, 1.) * 0.5
+  );
+
+  borderUV -= centerShift;
+  halfSize -= mix(thickness, 0., u_softness);
+
+  float radius = mix(0., min(halfSize.x, halfSize.y), u_roundness);
+  vec2 d = abs(borderUV) - halfSize + radius;
+  float outsideDistance = length(max(d, .0001)) - radius;
+  float insideDistance = min(max(d.x, d.y), .0001);
+  float cornerDistance = abs(min(max(d.x, d.y) - .45 * radius, .0));
+  float distance = outsideDistance + insideDistance;
+
+  float borderThickness = mix(thickness, 3. * thickness, u_softness);
+  float border = roundedBox(borderUV, halfSize, distance, cornerDistance, borderThickness, u_softness);
+  border = pow(border, 1. + u_softness);
+
+  border = clamp(border, 0., 1.);
+
+  // Neon halo: a soft luminous falloff radiating OUTWARD from the border
+  // line (u_glow = falloff width in UV units, 0 = off). One-sided: it fades
+  // to nothing just inside the line so the host card stays clean - the glow
+  // reads as if the effect sits behind the card. Only the sweeping spots
+  // light it (spotMask), so the crisp hairline below stays thin.
+  float spotMask = border;
+  if (u_glow > 0.) {
+    float halo = 1. - sst(0., u_glow, max(distance, 0.));
+    halo *= sst(-3. * thickness, 0., distance);
+    halo = pow(halo, 2.5);
+    spotMask = max(spotMask, .5 * halo);
+  }
+  spotMask = clamp(spotMask, 0., 1.);
+
+  vec3 blendColor = vec3(0.);
+  float blendAlpha = 0.;
+  vec3 addColor = vec3(0.);
+  float addAlpha = 0.;
+
+  float bloom = 4. * u_bloom;
+  float intensity = 1. + (1. + 4. * u_softness) * u_intensity;
+
+  float angle = atan(borderUV.y, borderUV.x) / TWO_PI;
+
+  // Sweep mode: ONE soft luminous beam anchored to a stretch of the border,
+  // orbiting at constant speed with a long fade on both sides - no flicker,
+  // no multiple spots. Its color glides through u_colors as it travels, so
+  // the border changes color over each lap. Subtle beat breathing via
+  // u_pulse; u_spotSize sets the beam's arc length; u_spots is ignored.
+  if (u_sweep > .5) {
+    // Starts at TOP CENTER (angle .25 turns) and orbits from there.
+    float head = fract(.25 - .084 * u_speed * iTime);
+    float pos = fract(angle - head + .5);
+    float arc = .22 + .6 * pow(u_spotSize, 2.);
+    float beam = sst(.5 - arc, .5, pos) * (1. - sst(.5, .5 + arc, pos));
+    beam = pow(beam, 1.5);
+    beam *= spotMask;
+    beam *= (1. - .4 * u_pulse + .4 * pulse);
+    beam *= intensity;
+    beam = clamp(beam, 0., 1.);
+
+    float cPos = head * u_colorsCount;
+    int ci = int(floor(cPos));
+    int cj = ci + 1;
+    if (cj >= int(u_colorsCount)) cj = 0;
+    vec4 beamC = mix(u_colors[ci], u_colors[cj], fract(cPos));
+    blendColor = beamC.rgb * beamC.a * beam;
+    blendAlpha = beamC.a * beam;
+    addColor = blendColor;
+    addAlpha = blendAlpha;
+  } else {
+  for (int colorIdx = 0; colorIdx < 5; colorIdx++) {
+    if (colorIdx >= int(u_colorsCount)) break;
+    float colorIdxF = float(colorIdx);
+
+    vec3 c = u_colors[colorIdx].rgb * u_colors[colorIdx].a;
+    float a = u_colors[colorIdx].a;
+
+    for (int spotIdx = 0; spotIdx < 4; spotIdx++) {
+      if (spotIdx >= int(u_spots)) break;
+      float spotIdxF = float(spotIdx);
+
+      vec2 randVal = randomGB(vec2(spotIdxF * 10. + 2., 40. + colorIdxF));
+
+      float time = (.1 + .15 * abs(sin(spotIdxF * (2. + colorIdxF)) * cos(spotIdxF * (2. + 2.5 * colorIdxF)))) * t + randVal.x * 3.;
+      time *= mix(1., -1., step(.5, randVal.y));
+
+      float mask = .5 + .5 * mix(
+        sin(t + spotIdxF * (5. - 1.5 * colorIdxF)),
+        cos(t + spotIdxF * (3. + 1.3 * colorIdxF)),
+        step(mod(colorIdxF, 2.), .5)
+      );
+
+      float p = clamp(2. * u_pulse - randVal.x, 0., 1.);
+      mask = mix(mask, pulse, p);
+
+      float atg1 = fract(angle + time);
+      float spotSize = .05 + .6 * pow(u_spotSize, 2.) + .05 * randVal.x;
+      spotSize = mix(spotSize, .1, p);
+      float sector = sst(.5 - spotSize, .5, atg1) * (1. - sst(.5, .5 + spotSize, atg1));
+
+      sector *= mask;
+      sector *= spotMask;
+      sector *= intensity;
+      sector = clamp(sector, 0., 1.);
+
+      vec3 srcColor = c * sector;
+      float srcAlpha = a * sector;
+
+      blendColor += ((1. - blendAlpha) * srcColor);
+      blendAlpha = blendAlpha + (1. - blendAlpha) * srcAlpha;
+      addColor += srcColor;
+      addAlpha += srcAlpha;
+    }
+  }
+  }
+
+  vec3 accumColor = mix(blendColor, addColor, bloom);
+  float accumAlpha = mix(blendAlpha, addAlpha, bloom);
+  accumAlpha = clamp(accumAlpha, 0., 1.);
+
+  // Always-visible hairline (u_lineOpacity 0 = off): the crisp border line
+  // at a faint constant opacity, tinted by blending u_colors around the
+  // perimeter (a subtle gradient ring), rendered UNDER the sweeping spots.
+  if (u_lineOpacity > 0.) {
+    float cPos = fract(angle + .5) * u_colorsCount;
+    int ci = int(floor(cPos));
+    int cj = ci + 1;
+    if (cj >= int(u_colorsCount)) cj = 0;
+    vec4 lineC = mix(u_colors[ci], u_colors[cj], fract(cPos));
+    float lineA = lineC.a * u_lineOpacity * border;
+    accumColor += (1. - accumAlpha) * lineC.rgb * lineA;
+    accumAlpha = accumAlpha + (1. - accumAlpha) * lineA;
+  }
+
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  vec3 color = accumColor + (1. - accumAlpha) * bgColor;
+  float opacity = accumAlpha + (1. - accumAlpha) * u_colorBack.a;
+
+  // accumColor is PREMULTIPLIED, but ShaderCanvas composites with straight
+  // alpha (blendFunc SRC_ALPHA + premultipliedAlpha:false) - emitting it
+  // as-is multiplies by alpha twice, crushing every soft pixel (the glow
+  // falloff was invisible). Un-premultiply before output.
+  fragColor = vec4(color / max(opacity, 1e-4), opacity);
+}
+`;
+
+export { pulsingBorderFragmentShader };

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

@@ -0,0 +1,75 @@
+import type React from "react";
+export declare const PULSING_BORDER_MAX_COLORS = 5;
+export declare const PULSING_BORDER_MAX_SPOTS = 4;
+export interface PulsingBorderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Background CSS color (shows through the non-border area). Default: 'transparent'. */
+    colorBack?: string;
+    /** Pulsing spot colors, up to 5. Default: a 3-stop primary ramp. */
+    colors?: string[];
+    /**
+     * Corner radius in px (e.g. 12) — constant at any element size, unlike
+     * `roundness`. Wins over `roundness` and the auto-detected host radius.
+     * Default: auto — the host element's computed CSS border-radius, so the
+     * border hugs the card it wraps with zero configuration.
+     */
+    radius?: number;
+    /**
+     * Border thickness in px (e.g. 2) — constant at any element size, unlike
+     * `thickness`. Wins over `thickness` when both are set. Also used by the
+     * static no-WebGL fallback border.
+     */
+    borderWidth?: number;
+    /**
+     * Neon halo width in px (e.g. 24): a luminous falloff radiating outward
+     * from the border line, lit by the sweeping spots. The effect auto-expands
+     * past the host so the halo always fades out, never crops. Default: 0.
+     */
+    glow?: number;
+    /**
+     * Extra gap in px between the host's edge and the border line. The line
+     * always sits fully OUTSIDE the host (inner edge touching at 0). Default: 0.
+     */
+    offset?: number;
+    /**
+     * Opacity (0-1) of an always-visible hairline tracing the full border —
+     * tinted as a subtle gradient through `colors` — under the sweeping spots.
+     * 0 (default) = the line only lights up where spots pass.
+     */
+    lineOpacity?: number;
+    /**
+     * Spot motion. `'pulse'` (default) — spots flicker and drift with the beat
+     * (the original look). `'sweep'` — ONE soft beam anchored to a stretch of
+     * the border orbits it at constant speed with a long fade on both sides;
+     * its color glides through `colors` each lap. `spotSize` sets the beam's
+     * arc, `speed` the orbit rate, `pulse` a subtle breathing; `spots` is
+     * ignored. The polished running-state look.
+     */
+    animation?: "pulse" | "sweep";
+    /** Corner roundness, 0-1 of the element's smaller half-dimension (size-relative — prefer `radius` for a fixed px value). Default: auto from the host's border-radius, else 0.4. */
+    roundness?: number;
+    /** Border thickness, 0-1+ (size-relative — prefer `borderWidth` for a fixed px value). Default: 0.15. */
+    thickness?: number;
+    /** Inset margin on all sides, 0-1 (overridable per-side). Default: 0. */
+    margin?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    marginTop?: number;
+    marginBottom?: number;
+    /** Force a specific aspect ratio for the border rect: 0 = auto (fill container), 1 = square. Default: 0. */
+    aspectRatio?: number;
+    /** Edge softness, 0-1. Default: 0.3. */
+    softness?: number;
+    /** Glow intensity. Default: 0.3. */
+    intensity?: number;
+    /** Additive-vs-alpha blend for overlapping spots, 0-1. Default: 0.3. */
+    bloom?: number;
+    /** Individual spot size, 0-1. Default: 0.4. */
+    spotSize?: number;
+    /** Number of pulsing spots per color, 1-4. Default: 3. */
+    spots?: number;
+    /** Beat-driven pulse strength, 0-1. Default: 0.3. */
+    pulse?: number;
+    /** Animation speed multiplier. Default: 1. */
+    speed?: number;
+    className?: string;
+}

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

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

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

@@ -0,0 +1,2 @@
+export { PulsingBorder, pxToRoundness, pxToThickness } from "./PulsingBorder";
+export type { PulsingBorderProps } from "./PulsingBorder.types";

package/dist/components/effects/ScrollReveal/ScrollReveal.js

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

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

@@ -0,0 +1,21 @@
+import React from "react";
+import type { ShimmerProps } from "./Shimmer.types";
+/**
+ * Shimmer applies a CSS-only shimmer effect to text or any box — the "AI
+ * thinking" look you see in chat apps, plus a surface sweep for loading
+ * placeholders. Pure CSS (`background-clip: text` for text, a compositor-only
+ * `translateX` sweep for surfaces), so it is cheap and smooth, and it respects
+ * `prefers-reduced-motion` automatically.
+ *
+ * Use the polymorphic `as` prop to render Shimmer *as* the element instead of
+ * wrapping it (no extra DOM node).
+ *
+ * @example
+ * ```tsx
+ * <Shimmer>Thinking…</Shimmer>
+ * <Shimmer as="h1" className="text-2xl font-semibold">Generating report</Shimmer>
+ * <Shimmer active={isLoading}>Searching the web…</Shimmer>
+ * <Shimmer variant="surface" className="h-40 w-full rounded-xl bg-[var(--color-surface-sunken)]" />
+ * ```
+ */
+export declare const Shimmer: React.ForwardRefExoticComponent<ShimmerProps & React.RefAttributes<HTMLElement>>;

package/dist/components/effects/Shimmer/Shimmer.js

@@ -0,0 +1,44 @@
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * Shimmer applies a CSS-only shimmer effect to text or any box — the "AI
+ * thinking" look you see in chat apps, plus a surface sweep for loading
+ * placeholders. Pure CSS (`background-clip: text` for text, a compositor-only
+ * `translateX` sweep for surfaces), so it is cheap and smooth, and it respects
+ * `prefers-reduced-motion` automatically.
+ *
+ * Use the polymorphic `as` prop to render Shimmer *as* the element instead of
+ * wrapping it (no extra DOM node).
+ *
+ * @example
+ * ```tsx
+ * <Shimmer>Thinking…</Shimmer>
+ * <Shimmer as="h1" className="text-2xl font-semibold">Generating report</Shimmer>
+ * <Shimmer active={isLoading}>Searching the web…</Shimmer>
+ * <Shimmer variant="surface" className="h-40 w-full rounded-xl bg-[var(--color-surface-sunken)]" />
+ * ```
+ */
+const Shimmer = React__default.forwardRef(({ as, variant = "text", active = true, duration, spread, color, highlightColor, className, style, children, ...rest }, ref) => {
+    const Component = (as !== null && as !== void 0 ? as : (variant === "surface" ? "div" : "span"));
+    const cssVars = {};
+    if (duration != null)
+        cssVars["--shimmer-duration"] = `${duration}s`;
+    if (spread != null)
+        cssVars["--shimmer-spread"] = `${spread}%`;
+    if (color != null)
+        cssVars["--shimmer-color"] = color;
+    if (highlightColor != null) {
+        cssVars[variant === "surface" ? "--shimmer-surface-highlight" : "--shimmer-highlight"] =
+            highlightColor;
+    }
+    return React__default.createElement(Component, {
+        ref,
+        className: cn(active && (variant === "surface" ? "flikk-shimmer-surface" : "flikk-shimmer-text"), className),
+        style: { ...cssVars, ...style },
+        ...rest,
+    }, children);
+});
+Shimmer.displayName = "Shimmer";
+
+export { Shimmer };