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

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

@@ -0,0 +1,13 @@
+/**
+ * StaticRadialGradient fragment shader — adapted from paper-design/shaders'
+ * `static-radial-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. This shader's own UV
+ * convention already matched a roughly unit-scale range, so its magic
+ * numbers port over unchanged.
+ */
+export declare const staticRadialGradientFragmentShader = "#version 300 es\nprecision mediump float;\n\nuniform vec2 iResolution;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[10];\nuniform float u_colorsCount;\n\nuniform float u_radius;\nuniform float u_focalDistance;\nuniform float u_focalAngle;\nuniform float u_falloff;\nuniform float u_mixing;\nuniform float u_distortion;\nuniform float u_distortionShift;\nuniform float u_distortionFreq;\nuniform float u_grainMixer;\nuniform float u_grainOverlay;\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\nvoid main() {\n  vec2 objectUV = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);\n  vec2 uv = 2. * objectUV;\n  vec2 grainUV = uv * 1000.;\n\n  vec2 center = vec2(0.);\n  float angleRad = -radians(u_focalAngle + 90.);\n  vec2 focalPoint = vec2(cos(angleRad), sin(angleRad)) * u_focalDistance;\n  float radius = u_radius;\n\n  vec2 c_to_uv = uv - center;\n  vec2 f_to_uv = uv - focalPoint;\n  vec2 f_to_c = center - focalPoint;\n  float r = length(c_to_uv);\n\n  float fragAngle = atan(c_to_uv.y, c_to_uv.x);\n  float angleDiff = fract((fragAngle - angleRad + PI) / TWO_PI) * TWO_PI - PI;\n\n  float halfAngle = acos(clamp(radius / max(u_focalDistance, 1e-4), 0.0, 1.0));\n  float e0 = 0.6 * PI;\n  float e1 = halfAngle;\n  float lo = min(e0, e1);\n  float hi = max(e0, e1);\n  float s = smoothstep(lo, hi, abs(angleDiff));\n  float isInSector = (e1 >= e0) ? (1.0 - s) : s;\n\n  float a = dot(f_to_uv, f_to_uv);\n  float b = -2.0 * dot(f_to_uv, f_to_c);\n  float c = dot(f_to_c, f_to_c) - radius * radius;\n\n  float discriminant = b * b - 4.0 * a * c;\n  float t = 1.0;\n  if (discriminant >= 0.0) {\n    float sqrtD = sqrt(discriminant);\n    float div = max(1e-4, 2.0 * a);\n    float t0 = (-b - sqrtD) / div;\n    float t1 = (-b + sqrtD) / div;\n    t = max(t0, t1);\n    if (t < 0.0) t = 0.0;\n  }\n\n  float dist = length(f_to_uv);\n  float normalized = dist / max(1e-4, length(f_to_uv * t));\n  float shape = clamp(normalized, 0.0, 1.0);\n\n  float falloffMapped = mix(.2 + .8 * max(0., u_falloff + 1.), mix(1., 15., u_falloff * u_falloff), step(.0, u_falloff));\n  float falloffExp = mix(falloffMapped, 1., shape);\n  shape = pow(shape, falloffExp);\n  shape = 1. - clamp(shape, 0., 1.);\n\n  float outerMask = .002;\n  float outer = 1.0 - smoothstep(radius - outerMask, radius + outerMask, r);\n  outer = mix(outer, 1., isInSector);\n\n  shape = mix(0., shape, outer);\n  shape *= 1. - smoothstep(radius - .01, radius, r);\n\n  float angle = atan(f_to_uv.y, f_to_uv.x);\n  shape -= pow(u_distortion, 2.) * shape * pow(abs(sin(PI * clamp(length(f_to_uv) - 0.2 + u_distortionShift, 0.0, 1.0))), 4.0) * (sin(u_distortionFreq * angle) + cos(floor(0.65 * u_distortionFreq) * angle));\n\n  float grain = noise(grainUV, vec2(0.));\n  float mixerGrain = .4 * u_grainMixer * (grain - .5);\n\n  float mixer = shape * u_colorsCount + mixerGrain;\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n\n  float outerShape = 0.;\n  for (int i = 1; i < 11; i++) {\n    if (i > int(u_colorsCount)) break;\n    float mLinear = clamp(mixer - float(i - 1), 0.0, 1.0);\n    float aa = fwidth(mLinear);\n    float width = min(u_mixing, 0.5);\n    float tt = clamp((mLinear - (0.5 - width - aa)) / (2. * width + 2. * aa), 0., 1.);\n    float p = mix(2., 1., clamp((u_mixing - 0.5) * 2., 0., 1.));\n    float m = tt < 0.5 ? 0.5 * pow(2. * tt, p) : 1. - 0.5 * pow(2. * (1. - tt), p);\n    float quadBlend = clamp((u_mixing - 0.5) * 2., 0., 1.);\n    m = mix(m, m * m, 0.5 * quadBlend);\n    if (i == 1) outerShape = m;\n    vec4 c2 = u_colors[i - 1];\n    c2.rgb *= c2.a;\n    gradient = mix(gradient, c2, m);\n  }\n\n  vec3 color = gradient.rgb * outerShape;\n  float opacity = gradient.a * outerShape;\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  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/StaticRadialGradient/StaticRadialGradient.shaders.js

@@ -0,0 +1,169 @@
+import 'react/jsx-runtime';
+import 'react';
+import { glslDeclarePI, glslRotate2, glslHashFloat } from '../shared/shaderNoise.glsl.js';
+
+/**
+ * StaticRadialGradient fragment shader — adapted from paper-design/shaders'
+ * `static-radial-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. This shader's own UV
+ * convention already matched a roughly unit-scale range, so its magic
+ * numbers port over unchanged.
+ */
+const staticRadialGradientFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform vec2 iResolution;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colors[10];
+uniform float u_colorsCount;
+
+uniform float u_radius;
+uniform float u_focalDistance;
+uniform float u_focalAngle;
+uniform float u_falloff;
+uniform float u_mixing;
+uniform float u_distortion;
+uniform float u_distortionShift;
+uniform float u_distortionFreq;
+uniform float u_grainMixer;
+uniform float u_grainOverlay;
+
+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);
+}
+
+void main() {
+  vec2 objectUV = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);
+  vec2 uv = 2. * objectUV;
+  vec2 grainUV = uv * 1000.;
+
+  vec2 center = vec2(0.);
+  float angleRad = -radians(u_focalAngle + 90.);
+  vec2 focalPoint = vec2(cos(angleRad), sin(angleRad)) * u_focalDistance;
+  float radius = u_radius;
+
+  vec2 c_to_uv = uv - center;
+  vec2 f_to_uv = uv - focalPoint;
+  vec2 f_to_c = center - focalPoint;
+  float r = length(c_to_uv);
+
+  float fragAngle = atan(c_to_uv.y, c_to_uv.x);
+  float angleDiff = fract((fragAngle - angleRad + PI) / TWO_PI) * TWO_PI - PI;
+
+  float halfAngle = acos(clamp(radius / max(u_focalDistance, 1e-4), 0.0, 1.0));
+  float e0 = 0.6 * PI;
+  float e1 = halfAngle;
+  float lo = min(e0, e1);
+  float hi = max(e0, e1);
+  float s = smoothstep(lo, hi, abs(angleDiff));
+  float isInSector = (e1 >= e0) ? (1.0 - s) : s;
+
+  float a = dot(f_to_uv, f_to_uv);
+  float b = -2.0 * dot(f_to_uv, f_to_c);
+  float c = dot(f_to_c, f_to_c) - radius * radius;
+
+  float discriminant = b * b - 4.0 * a * c;
+  float t = 1.0;
+  if (discriminant >= 0.0) {
+    float sqrtD = sqrt(discriminant);
+    float div = max(1e-4, 2.0 * a);
+    float t0 = (-b - sqrtD) / div;
+    float t1 = (-b + sqrtD) / div;
+    t = max(t0, t1);
+    if (t < 0.0) t = 0.0;
+  }
+
+  float dist = length(f_to_uv);
+  float normalized = dist / max(1e-4, length(f_to_uv * t));
+  float shape = clamp(normalized, 0.0, 1.0);
+
+  float falloffMapped = mix(.2 + .8 * max(0., u_falloff + 1.), mix(1., 15., u_falloff * u_falloff), step(.0, u_falloff));
+  float falloffExp = mix(falloffMapped, 1., shape);
+  shape = pow(shape, falloffExp);
+  shape = 1. - clamp(shape, 0., 1.);
+
+  float outerMask = .002;
+  float outer = 1.0 - smoothstep(radius - outerMask, radius + outerMask, r);
+  outer = mix(outer, 1., isInSector);
+
+  shape = mix(0., shape, outer);
+  shape *= 1. - smoothstep(radius - .01, radius, r);
+
+  float angle = atan(f_to_uv.y, f_to_uv.x);
+  shape -= pow(u_distortion, 2.) * shape * pow(abs(sin(PI * clamp(length(f_to_uv) - 0.2 + u_distortionShift, 0.0, 1.0))), 4.0) * (sin(u_distortionFreq * angle) + cos(floor(0.65 * u_distortionFreq) * angle));
+
+  float grain = noise(grainUV, vec2(0.));
+  float mixerGrain = .4 * u_grainMixer * (grain - .5);
+
+  float mixer = shape * u_colorsCount + mixerGrain;
+  vec4 gradient = u_colors[0];
+  gradient.rgb *= gradient.a;
+
+  float outerShape = 0.;
+  for (int i = 1; i < 11; i++) {
+    if (i > int(u_colorsCount)) break;
+    float mLinear = clamp(mixer - float(i - 1), 0.0, 1.0);
+    float aa = fwidth(mLinear);
+    float width = min(u_mixing, 0.5);
+    float tt = clamp((mLinear - (0.5 - width - aa)) / (2. * width + 2. * aa), 0., 1.);
+    float p = mix(2., 1., clamp((u_mixing - 0.5) * 2., 0., 1.));
+    float m = tt < 0.5 ? 0.5 * pow(2. * tt, p) : 1. - 0.5 * pow(2. * (1. - tt), p);
+    float quadBlend = clamp((u_mixing - 0.5) * 2., 0., 1.);
+    m = mix(m, m * m, 0.5 * quadBlend);
+    if (i == 1) outerShape = m;
+    vec4 c2 = u_colors[i - 1];
+    c2.rgb *= c2.a;
+    gradient = mix(gradient, c2, m);
+  }
+
+  vec3 color = gradient.rgb * outerShape;
+  float opacity = gradient.a * outerShape;
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  color = color + bgColor * (1.0 - opacity);
+  opacity = opacity + u_colorBack.a * (1.0 - opacity);
+
+  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 { staticRadialGradientFragmentShader };

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

@@ -0,0 +1,29 @@
+import type React from "react";
+export declare const STATIC_RADIAL_GRADIENT_MAX_COLORS = 10;
+export interface StaticRadialGradientProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Background CSS color. Default: 'var(--color-background)'. */
+    colorBack?: string;
+    /** Radial ramp colors, up to 10. Default: a 3-stop primary ramp. */
+    colors?: string[];
+    /** Radius of the radial shape, in unit terms (~0-1.5). Default: 0.8. */
+    radius?: number;
+    /** Distance of the light source from center. Default: 1. */
+    focalDistance?: number;
+    /** Angle of the light source, in degrees. Default: 0. */
+    focalAngle?: number;
+    /** Falloff curve, roughly -1 to 1. Default: 0. */
+    falloff?: number;
+    /** Blend sharpness between ramp stops, 0-1. Default: 0.3. */
+    mixing?: number;
+    /** Radial-edge distortion strength, 0-1. Default: 0. */
+    distortion?: number;
+    /** Distortion phase shift. Default: 0. */
+    distortionShift?: number;
+    /** Distortion angular frequency. Default: 0. */
+    distortionFreq?: number;
+    /** Grain influence on the gradient stops, 0-1. Default: 0.1. */
+    grainMixer?: number;
+    /** Post-composite grain overlay strength, 0-1. Default: 0.05. */
+    grainOverlay?: number;
+    className?: string;
+}

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

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

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

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

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

@@ -0,0 +1,18 @@
+import React from "react";
+import type { StripePatternProps } from "./StripePattern.types";
+/**
+ * StripePattern renders an SVG-based diagonal stripe background pattern.
+ *
+ * Use it as an absolute-positioned decorative or placeholder fill inside a
+ * container with `position: relative`. The pattern is non-interactive
+ * (`pointer-events: none`) and sits at `z-index: 0` by default.
+ *
+ * @example
+ * ```tsx
+ * <div className="relative overflow-hidden h-40 rounded-lg">
+ *   <StripePattern />
+ *   <div className="relative z-10">Empty cover slot</div>
+ * </div>
+ * ```
+ */
+export declare const StripePattern: React.ForwardRefExoticComponent<StripePatternProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/effects/StripePattern/StripePattern.js

@@ -0,0 +1,55 @@
+"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';
+
+function buildMaskImage(direction, fadeSize) {
+    const stop = Math.max(0, Math.min(100, fadeSize));
+    if (direction === "radial") {
+        return `radial-gradient(ellipse at center, black ${100 - stop}%, transparent 100%)`;
+    }
+    const directionMap = {
+        top: "to top",
+        bottom: "to bottom",
+        left: "to left",
+        right: "to right",
+    };
+    return `linear-gradient(${directionMap[direction]}, black ${100 - stop}%, transparent 100%)`;
+}
+/**
+ * StripePattern renders an SVG-based diagonal stripe background pattern.
+ *
+ * Use it as an absolute-positioned decorative or placeholder fill inside a
+ * container with `position: relative`. The pattern is non-interactive
+ * (`pointer-events: none`) and sits at `z-index: 0` by default.
+ *
+ * @example
+ * ```tsx
+ * <div className="relative overflow-hidden h-40 rounded-lg">
+ *   <StripePattern />
+ *   <div className="relative z-10">Empty cover slot</div>
+ * </div>
+ * ```
+ */
+const StripePattern = React__default.forwardRef(({ spacing = 12, strokeWidth = 6, angle = -45, color = "color-mix(in srgb, var(--color-border) 50%, transparent)", fade = false, fadeDirection = "radial", fadeSize = 50, animated = false, className, style, ...rest }, ref) => {
+    const patternId = useId();
+    const shouldReduceMotion = useReducedMotion();
+    const enableAnimation = animated && !shouldReduceMotion;
+    const maskImage = useMemo(() => (fade ? buildMaskImage(fadeDirection, fadeSize) : undefined), [fade, fadeDirection, fadeSize]);
+    const containerStyle = {
+        ...style,
+        ...(maskImage
+            ? {
+                maskImage,
+                WebkitMaskImage: maskImage,
+            }
+            : {}),
+    };
+    const lineX = spacing / 2;
+    const lineElement = enableAnimation ? (jsx(motion.line, { x1: lineX, y1: 0, x2: lineX, y2: spacing, stroke: color, strokeWidth: strokeWidth, animate: { opacity: [0.4, 1, 0.4] }, transition: { duration: 4, ease: "easeInOut", repeat: Infinity } })) : (jsx("line", { x1: lineX, y1: 0, x2: lineX, y2: spacing, stroke: color, strokeWidth: strokeWidth }));
+    return (jsx("div", { ref: ref, className: cn("absolute inset-0 pointer-events-none z-0 overflow-hidden", className), style: containerStyle, ...rest, children: jsxs("svg", { "aria-hidden": "true", className: "absolute inset-0 w-full h-full", children: [jsx("defs", { children: jsx("pattern", { id: patternId, x: "0", y: "0", width: spacing, height: spacing, patternUnits: "userSpaceOnUse", patternTransform: `rotate(${angle})`, children: lineElement }) }), jsx("rect", { width: "100%", height: "100%", fill: `url(#${patternId})` })] }) }));
+});
+StripePattern.displayName = "StripePattern";
+
+export { StripePattern };

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

@@ -0,0 +1,53 @@
+import React from "react";
+/** Direction for the fade gradient mask */
+export type StripePatternFadeDirection = "radial" | "top" | "bottom" | "left" | "right";
+export interface StripePatternProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Distance between adjacent stripes in pixels (center to center).
+     * @default 12
+     */
+    spacing?: number;
+    /**
+     * Thickness of each stripe in pixels.
+     * @default 6
+     */
+    strokeWidth?: number;
+    /**
+     * Stripe rotation in degrees. `-45` runs bottom-left to top-right.
+     * @default -45
+     */
+    angle?: number;
+    /**
+     * Stroke color of the stripes.
+     * Accepts any valid CSS color value or CSS variable.
+     * @default "color-mix(in srgb, var(--color-border) 50%, transparent)"
+     */
+    color?: string;
+    /**
+     * Whether to apply a gradient mask that fades the pattern at the edges.
+     * Defaults to `false` so the pattern reads as a flat fill — useful for
+     * placeholder surfaces. Set to `true` for decorative backgrounds.
+     * @default false
+     */
+    fade?: boolean;
+    /**
+     * Direction of the fade gradient.
+     * - "radial" fades from center outward
+     * - "top" | "bottom" | "left" | "right" fades toward that edge
+     * @default "radial"
+     */
+    fadeDirection?: StripePatternFadeDirection;
+    /**
+     * Size of the fade area as a percentage (0-100).
+     * @default 50
+     */
+    fadeSize?: number;
+    /**
+     * Whether to apply a subtle pulse animation to the stripes.
+     * Respects prefers-reduced-motion automatically.
+     * @default false
+     */
+    animated?: boolean;
+    /** Additional className for style overrides (shadcn pattern). */
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { StripePattern } from "./StripePattern";
+export type { StripePatternProps, StripePatternFadeDirection, } from "./StripePattern.types";

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

@@ -0,0 +1,12 @@
+import React from "react";
+import type { TiltCardProps } from "./TiltCard.types";
+/**
+ * TiltCard wraps content in a damped 3D mouse tilt. The tilt is a pure CSS
+ * transform — no WebGL. The optional `glow` spotlight border lazy-loads the
+ * `three` peer dependency on demand (see TiltCard.glow.ts).
+ *
+ * The animation loop is demand-driven: it runs only while the pointer is near
+ * the card or the damped values are still settling, then stops — an idle
+ * TiltCard costs nothing per frame.
+ */
+export declare const TiltCard: React.FC<TiltCardProps>;

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

@@ -0,0 +1,28 @@
+import { type TiltCardVariation } from "./TiltCard.types";
+/**
+ * WebGL spotlight-border renderer for TiltCard. Kept in its own module so the
+ * `three` optional peer dependency is only loaded (dynamic import) when a
+ * TiltCard actually enables `glow` — tilt-only cards never touch WebGL.
+ */
+export interface GlowParams {
+    glowColor: string;
+    spotlightSize: number;
+    spotlightEdge: number;
+    glowIntensity: number;
+    borderWidth: number;
+}
+export interface GlowEffect {
+    /** Render one frame with the damped mouse position (content-local px). */
+    render(mouseX: number, mouseY: number): void;
+    /** Re-measure the content box and update sizes/uniforms. */
+    resize(): void;
+    setParams(params: GlowParams): void;
+    dispose(): void;
+}
+export declare function createGlowEffect(opts: {
+    host: HTMLElement;
+    content: HTMLElement;
+    variation: TiltCardVariation;
+    glowExtent: number;
+    rounded?: string;
+}): GlowEffect;

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

@@ -0,0 +1,115 @@
+"use client";
+import * as THREE from 'three';
+import { fragmentShader, vertexShader } from './TiltCard.shaders.js';
+import { variationMap } from './TiltCard.types.js';
+
+function createGlowEffect(opts) {
+    var _a;
+    const { host, content, variation, glowExtent, rounded } = opts;
+    const scene = new THREE.Scene();
+    const camera = new THREE.OrthographicCamera();
+    camera.position.z = 1;
+    const renderer = new THREE.WebGLRenderer({ alpha: true });
+    renderer.setClearColor(0x000000, 0);
+    const canvas = renderer.domElement;
+    canvas.style.position = "absolute";
+    canvas.style.pointerEvents = "none";
+    canvas.style.zIndex = "10";
+    host.appendChild(canvas);
+    const geo = new THREE.PlaneGeometry(1, 1);
+    const material = new THREE.ShaderMaterial({
+        vertexShader,
+        fragmentShader,
+        uniforms: {
+            u_mouse: { value: new THREE.Vector2(-1e4, -1e4) },
+            u_resolution: { value: new THREE.Vector2() },
+            u_contentResolution: { value: new THREE.Vector2() },
+            u_offset: { value: new THREE.Vector2() },
+            u_pixelRatio: { value: 1 },
+            u_color: { value: new THREE.Color("#ffffff") },
+            u_shapeSize: { value: 1.0 },
+            u_roundness: { value: 0.0 },
+            u_borderSize: { value: 0.0 },
+            u_spotlightSize: { value: 0.4 },
+            u_spotlightEdge: { value: 0.5 },
+            u_glowIntensity: { value: 0.6 },
+        },
+        defines: { VAR: (_a = variationMap[variation]) !== null && _a !== void 0 ? _a : 0 },
+        transparent: true,
+    });
+    const quad = new THREE.Mesh(geo, material);
+    scene.add(quad);
+    let borderWidthPx = 2;
+    let contextLost = false;
+    const onContextLost = (e) => {
+        e.preventDefault();
+        contextLost = true;
+    };
+    const onContextRestored = () => {
+        contextLost = false;
+        resize();
+    };
+    canvas.addEventListener("webglcontextlost", onContextLost);
+    canvas.addEventListener("webglcontextrestored", onContextRestored);
+    const resize = () => {
+        var _a;
+        const w = content.clientWidth;
+        const h = content.clientHeight;
+        if (w === 0 || h === 0)
+            return;
+        const dpr = Math.min(window.devicePixelRatio || 1, 2);
+        const canvasW = w + glowExtent * 2;
+        const canvasH = h + glowExtent * 2;
+        renderer.setSize(canvasW, canvasH);
+        renderer.setPixelRatio(dpr);
+        canvas.style.top = `-${glowExtent}px`;
+        canvas.style.left = `-${glowExtent}px`;
+        canvas.style.width = `${canvasW}px`;
+        canvas.style.height = `${canvasH}px`;
+        camera.left = -canvasW / 2;
+        camera.right = canvasW / 2;
+        camera.top = canvasH / 2;
+        camera.bottom = -canvasH / 2;
+        camera.updateProjectionMatrix();
+        quad.scale.set(canvasW, canvasH, 1);
+        material.uniforms.u_resolution.value.set(canvasW, canvasH).multiplyScalar(dpr);
+        material.uniforms.u_contentResolution.value.set(w, h).multiplyScalar(dpr);
+        material.uniforms.u_offset.value.set(glowExtent, glowExtent).multiplyScalar(dpr);
+        material.uniforms.u_pixelRatio.value = dpr;
+        const shortestDim = Math.min(w, h);
+        const radiusSource = rounded ? host : ((_a = content.firstElementChild) !== null && _a !== void 0 ? _a : host);
+        const radiusPx = parseFloat(getComputedStyle(radiusSource).borderRadius) || 0;
+        material.uniforms.u_roundness.value = Math.min((radiusPx / shortestDim) * 2, 1);
+        material.uniforms.u_borderSize.value = borderWidthPx / shortestDim;
+    };
+    return {
+        render(mouseX, mouseY) {
+            if (contextLost)
+                return;
+            material.uniforms.u_mouse.value.set(mouseX, mouseY);
+            renderer.render(scene, camera);
+        },
+        resize,
+        setParams({ glowColor, spotlightSize, spotlightEdge, glowIntensity, borderWidth }) {
+            material.uniforms.u_color.value.set(glowColor);
+            material.uniforms.u_spotlightSize.value = spotlightSize;
+            material.uniforms.u_spotlightEdge.value = spotlightEdge;
+            material.uniforms.u_glowIntensity.value = glowIntensity;
+            borderWidthPx = borderWidth;
+            const shortestDim = Math.min(content.clientWidth, content.clientHeight);
+            if (shortestDim > 0)
+                material.uniforms.u_borderSize.value = borderWidthPx / shortestDim;
+        },
+        dispose() {
+            canvas.removeEventListener("webglcontextlost", onContextLost);
+            canvas.removeEventListener("webglcontextrestored", onContextRestored);
+            if (host.contains(canvas))
+                host.removeChild(canvas);
+            renderer.dispose();
+            geo.dispose();
+            material.dispose();
+        },
+    };
+}
+
+export { createGlowEffect };