@flikk/ui 1.0.0-beta.26 → 1.0.0-beta.29

package/dist/components/effects/Preloader/Preloader.animations.js

@@ -0,0 +1,150 @@
+const CURTAIN_EASE = [0.76, 0, 0.24, 1];
+const exitTransition = (duration, delay = 0) => ({
+    duration,
+    ease: CURTAIN_EASE,
+    delay,
+});
+const exitMap = {
+    up: { y: '-100%', x: 0 },
+    down: { y: '100%', x: 0 },
+    left: { x: '-100%', y: 0 },
+    right: { x: '100%', y: 0 },
+};
+const buildCurtainVariants = (direction, duration) => ({
+    covered: { y: 0, x: 0 },
+    exit: {
+        ...exitMap[direction],
+        transition: exitTransition(duration),
+    },
+});
+// Logo is rendered INSIDE the curtain. These are relative offsets that
+// counteract ~30% of the curtain's motion, making the logo appear to
+// move at ~70% of the curtain's speed (parallax lag effect). It also
+// fades out so the mark dissolves while lagging instead of riding the
+// curtain edge off-screen.
+const logoInnerOffsetMap = {
+    up: { y: '30vh', x: 0 },
+    down: { y: '-30vh', x: 0 },
+    left: { x: '30vw', y: 0 },
+    right: { x: '-30vw', y: 0 },
+};
+const buildLogoParallaxVariants = (direction, duration) => ({
+    covered: { y: 0, x: 0, opacity: 1 },
+    exit: {
+        ...logoInnerOffsetMap[direction],
+        opacity: 0,
+        transition: exitTransition(duration),
+    },
+});
+// Plain fade-out for logos that don't translate on their own: every
+// non-slide type renders the logo in a static centered layer over the
+// panels, so it must fade or it would linger over the revealed page.
+// Slightly faster than the panels so the mark is gone before the
+// reveal completes.
+const buildLogoFadeVariants = (duration) => ({
+    covered: { opacity: 1 },
+    exit: {
+        opacity: 0,
+        transition: { duration: duration * 0.5, ease: CURTAIN_EASE },
+    },
+});
+// Strips travel slightly past their own span so sub-pixel rounding never
+// leaves a hairline of curtain at the edge.
+const STRIP_EXIT = 102;
+const buildStripDescriptors = ({ type, direction, duration, panels, stagger, }) => {
+    // Strips orient perpendicular to the exit axis: up/down → vertical strips
+    // translating Y; left/right → horizontal strips translating X.
+    const axis = direction === 'left' || direction === 'right' ? 'x' : 'y';
+    const sign = direction === 'up' || direction === 'left' ? -1 : 1;
+    const size = 100 / panels;
+    return Array.from({ length: panels }, (_, i) => {
+        // +0.4% overlap so adjacent strips never show a seam between them
+        const span = `${size + (i < panels - 1 ? 0.4 : 0)}%`;
+        const offset = `${i * size}%`;
+        const panelSign = type === 'shutters' && i % 2 === 1 ? -sign : sign;
+        return {
+            key: `strip-${i}`,
+            style: axis === 'y'
+                ? { top: 0, bottom: 0, left: offset, width: span, willChange: 'transform' }
+                : { left: 0, right: 0, top: offset, height: span, willChange: 'transform' },
+            variants: {
+                covered: { x: 0, y: 0 },
+                exit: {
+                    [axis]: `${panelSign * STRIP_EXIT}%`,
+                    transition: exitTransition(duration, i * stagger),
+                },
+            },
+        };
+    });
+};
+const buildLayerDescriptors = ({ direction, duration, panels, stagger, color, }) => {
+    const base = color !== null && color !== void 0 ? color : 'var(--color-primary)';
+    return Array.from({ length: panels }, (_, i) => ({
+        key: `layer-${i}`,
+        // First-leaving layer sits on top; deeper layers get progressively lighter
+        style: { inset: 0, zIndex: panels - i, willChange: 'transform' },
+        backgroundColor: i === 0 ? color : `color-mix(in oklab, ${base}, white ${Math.min(i * 30, 75)}%)`,
+        variants: {
+            covered: { x: 0, y: 0 },
+            exit: {
+                ...exitMap[direction],
+                transition: exitTransition(duration, i * stagger),
+            },
+        },
+    }));
+};
+const buildSplitDescriptors = ({ direction, duration, }) => {
+    const make = (key, place, exit) => ({
+        key,
+        style: { ...place, willChange: 'transform' },
+        variants: {
+            covered: {},
+            exit: { ...exit, transition: exitTransition(duration) },
+        },
+    });
+    return direction === 'up' || direction === 'down'
+        ? [
+            make('split-1', { top: 0, left: 0, right: 0, height: '50%' }, { y: '-100%' }),
+            make('split-2', { bottom: 0, left: 0, right: 0, height: '50%' }, { y: '100%' }),
+        ]
+        : [
+            make('split-1', { top: 0, bottom: 0, left: 0, width: '50%' }, { x: '-100%' }),
+            make('split-2', { top: 0, bottom: 0, right: 0, width: '50%' }, { x: '100%' }),
+        ];
+};
+const buildPanelDescriptors = (opts) => {
+    switch (opts.type) {
+        case 'blinds':
+        case 'shutters':
+            return buildStripDescriptors(opts);
+        case 'layers':
+            return buildLayerDescriptors(opts);
+        case 'iris':
+            return [
+                {
+                    key: 'iris',
+                    style: { inset: 0 },
+                    variants: {
+                        covered: { clipPath: 'circle(125% at 50% 50%)' },
+                        exit: {
+                            clipPath: 'circle(0% at 50% 50%)',
+                            transition: exitTransition(opts.duration),
+                        },
+                    },
+                },
+            ];
+        case 'split':
+            return buildSplitDescriptors(opts);
+        case 'slide':
+        default:
+            return [
+                {
+                    key: 'curtain',
+                    style: { inset: 0, willChange: 'transform' },
+                    variants: buildCurtainVariants(opts.direction, opts.duration),
+                },
+            ];
+    }
+};
+
+export { CURTAIN_EASE, buildCurtainVariants, buildLogoFadeVariants, buildLogoParallaxVariants, buildPanelDescriptors };

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

@@ -0,0 +1,3 @@
+import React from "react";
+import type { PreloaderProps } from "./Preloader.types";
+export declare const Preloader: React.FC<PreloaderProps>;

package/dist/components/effects/Preloader/Preloader.js

@@ -0,0 +1,119 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { buildPanelDescriptors, buildLogoParallaxVariants, buildLogoFadeVariants } from './Preloader.animations.js';
+
+const DEFAULT_COLOR_CLASS = "bg-[var(--color-primary)]";
+const PANEL_DEFAULTS = {
+    blinds: 5,
+    shutters: 4,
+    layers: 3,
+};
+const STAGGER_DEFAULTS = {
+    blinds: 0.08,
+    shutters: 0.08,
+    layers: 0.14,
+};
+const Preloader = ({ children, logo, type = "slide", direction = "up", duration = 0.8, delay = 0.8, color, className, parallax = true, contained = false, panels, stagger, onStart, onComplete, }) => {
+    var _a, _b;
+    const [phase, setPhase] = useState("covered");
+    const [completedPanels, setCompletedPanels] = useState(0);
+    const shouldReduceMotion = useReducedMotion();
+    const isMultiPanel = type === "blinds" || type === "shutters" || type === "layers";
+    let panelCount = (_a = PANEL_DEFAULTS[type]) !== null && _a !== void 0 ? _a : (type === "split" ? 2 : 1);
+    if (isMultiPanel && panels !== undefined) {
+        if (process.env.NODE_ENV !== "production" && (panels < 2 || panels > 12)) {
+            console.warn("[Preloader]: panels must be between 2 and 12; clamping.");
+        }
+        panelCount = Math.min(12, Math.max(2, Math.round(panels)));
+    }
+    const resolvedStagger = isMultiPanel ? (_b = stagger !== null && stagger !== void 0 ? stagger : STAGGER_DEFAULTS[type]) !== null && _b !== void 0 ? _b : 0 : 0;
+    // Stable refs for callbacks/reduced-motion to avoid stale closures without re-running the effect
+    const onStartRef = useRef(onStart);
+    const onCompleteRef = useRef(onComplete);
+    const reducedMotionRef = useRef(shouldReduceMotion);
+    // Guards against re-triggering the exit if the effect re-runs (e.g. `delay` change)
+    const startedRef = useRef(false);
+    useEffect(() => { onStartRef.current = onStart; }, [onStart]);
+    useEffect(() => { onCompleteRef.current = onComplete; }, [onComplete]);
+    useEffect(() => { reducedMotionRef.current = shouldReduceMotion; }, [shouldReduceMotion]);
+    useEffect(() => {
+        if (typeof window === "undefined" || typeof document === "undefined")
+            return;
+        let cancelled = false;
+        let delayTimer;
+        let loadListener;
+        const loadPromise = new Promise((resolve) => {
+            if (document.readyState === "complete") {
+                resolve();
+            }
+            else {
+                loadListener = () => resolve();
+                window.addEventListener("load", loadListener, { once: true });
+            }
+        });
+        const delayPromise = new Promise((resolve) => {
+            delayTimer = setTimeout(resolve, delay * 1000);
+        });
+        Promise.all([loadPromise, delayPromise]).then(() => {
+            var _a, _b;
+            if (cancelled || startedRef.current)
+                return;
+            startedRef.current = true;
+            if (reducedMotionRef.current) {
+                // Skip the animation entirely but keep the callback contract
+                (_a = onStartRef.current) === null || _a === void 0 ? void 0 : _a.call(onStartRef);
+                setPhase("done");
+                (_b = onCompleteRef.current) === null || _b === void 0 ? void 0 : _b.call(onCompleteRef);
+            }
+            else {
+                setPhase("exit");
+            }
+        });
+        return () => {
+            cancelled = true;
+            if (delayTimer !== undefined)
+                clearTimeout(delayTimer);
+            if (loadListener)
+                window.removeEventListener("load", loadListener);
+        };
+    }, [delay]);
+    useEffect(() => {
+        var _a;
+        if (completedPanels >= panelCount) {
+            setPhase("done");
+            (_a = onCompleteRef.current) === null || _a === void 0 ? void 0 : _a.call(onCompleteRef);
+        }
+    }, [completedPanels, panelCount]);
+    if (phase === "done") {
+        return jsx(Fragment, { children: children });
+    }
+    const positionClass = contained ? "absolute inset-0" : "fixed inset-0";
+    const descriptors = buildPanelDescriptors({
+        type,
+        direction,
+        duration,
+        panels: panelCount,
+        stagger: resolvedStagger,
+        color,
+    });
+    const handleExitStart = (def) => {
+        var _a;
+        if (def === "exit")
+            (_a = onStartRef.current) === null || _a === void 0 ? void 0 : _a.call(onStartRef);
+    };
+    // Slide carries its logo inside the curtain (parallax lag or plain fade);
+    // every other type renders it in the static centered layer below.
+    const slideLogoNode = type === "slide" && logo ? (parallax ? (jsx(motion.div, { className: "relative z-10 select-none", variants: buildLogoParallaxVariants(direction, duration), initial: "covered", animate: phase, children: logo })) : (jsx(motion.div, { className: "relative z-10 select-none", variants: buildLogoFadeVariants(duration), initial: "covered", animate: phase, children: logo }))) : null;
+    return (jsxs(Fragment, { children: [children, jsxs("div", { "aria-hidden": "true", className: cn(positionClass, "z-[9999] pointer-events-none"), children: [descriptors.map((d, i) => {
+                        var _a;
+                        const bg = (_a = d.backgroundColor) !== null && _a !== void 0 ? _a : color;
+                        return (jsx(motion.div, { className: cn("absolute pointer-events-auto", type === "slide" && "flex items-center justify-center", !bg && DEFAULT_COLOR_CLASS, className), style: { ...d.style, ...(bg ? { backgroundColor: bg } : undefined) }, variants: d.variants, initial: "covered", animate: phase, onAnimationStart: i === 0 ? handleExitStart : undefined, onAnimationComplete: (def) => {
+                                if (def === "exit")
+                                    setCompletedPanels((n) => n + 1);
+                            }, children: slideLogoNode }, d.key));
+                    }), type !== "slide" && logo && (jsx(motion.div, { className: "absolute inset-0 flex items-center justify-center select-none", style: { zIndex: 50 }, variants: buildLogoFadeVariants(duration), initial: "covered", animate: phase, children: logo }))] })] }));
+};
+
+export { Preloader };

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

@@ -0,0 +1,63 @@
+export type PreloaderDirection = 'up' | 'down' | 'left' | 'right';
+export type PreloaderType = 'slide' | 'split' | 'blinds' | 'shutters' | 'layers' | 'iris';
+export interface PreloaderProps {
+    /** Page content revealed once the curtain exits. */
+    children: React.ReactNode;
+    /** Decorative mark centered on the curtain (hidden from assistive tech). */
+    logo?: React.ReactNode;
+    /**
+     * `slide` = one full curtain exits; `split` = two half panels part in
+     * opposite directions; `blinds` = staggered strips sweep the same way;
+     * `shutters` = strips alternate directions; `layers` = stacked curtains
+     * trail each other in lightening shades; `iris` = a circular mask closes
+     * on the curtain from the edges to the center.
+     */
+    type?: PreloaderType;
+    /**
+     * Exit direction. For `split`, `up`/`down` split along the horizontal seam
+     * and `left`/`right` along the vertical seam (the two are equivalent per axis).
+     * For `blinds`/`shutters`, strips orient perpendicular to the exit axis.
+     * Ignored by `iris` (always closes to center).
+     */
+    direction?: PreloaderDirection;
+    /**
+     * Exit animation duration in seconds (not ms), per panel. For staggered
+     * types the total exit time is `duration + (panels - 1) * stagger`.
+     */
+    duration?: number;
+    /**
+     * Minimum hold time in seconds (not ms). The curtain exits once BOTH the
+     * window `load` event has fired and this delay has elapsed.
+     */
+    delay?: number;
+    /**
+     * Curtain fill as a CSS color value (e.g. `"var(--color-primary-900)"`, `"#0a0a0a"`).
+     * Applied as an inline `background-color`, so it wins over `className`.
+     * When omitted, the curtain uses `bg-[var(--color-primary)]` as a class,
+     * which `className` background utilities can override.
+     */
+    color?: string;
+    className?: string;
+    /** Slide only: the logo lags behind the curtain for a depth effect. */
+    parallax?: boolean;
+    /**
+     * Position the overlay `absolute` within the nearest positioned ancestor
+     * instead of `fixed` to the viewport. Use when embedding the transition in
+     * a container (demos, hero sections) rather than covering the whole page.
+     */
+    contained?: boolean;
+    /**
+     * Strip/slat/layer count for `blinds` (default 5), `shutters` (default 4),
+     * and `layers` (default 3). Clamped to 2–12. Ignored by other types.
+     */
+    panels?: number;
+    /**
+     * Seconds between successive panels for `blinds`/`shutters` (default 0.08)
+     * and `layers` (default 0.14). Ignored by other types.
+     */
+    stagger?: number;
+    /** Fires when the exit animation starts (immediately if reduced motion is on). */
+    onStart?: () => void;
+    /** Fires once the reveal finishes; the overlay unmounts from the DOM. */
+    onComplete?: () => void;
+}

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

@@ -0,0 +1,2 @@
+export { Preloader } from './Preloader';
+export type { PreloaderProps, PreloaderDirection, PreloaderType } from './Preloader.types';

package/dist/components/effects/ProgressiveBlur/ProgressiveBlur.js

@@ -24,27 +24,27 @@ const GRADIENT_DIRECTIONS = {
  */
 const BlurInstance = forwardRef(({ position, blurLevels, size, theme, className, style, ...rest }, ref) => {
     const isVertical = position === "top" || position === "bottom";
-    const direction = GRADIENT_DIRECTIONS[position];
-    const n = blurLevels.length;
-    const containerStyle = {
-        ...(isVertical ? { height: size } : { width: size }),
-        ...style,
-    };
-    return (jsx("div", { ref: ref, className: cn(theme.baseStyle, theme.positions[position], className), style: containerStyle, ...rest, children: blurLevels.map((blur, i) => {
+    const layerStyles = useMemo(() => {
+        const direction = GRADIENT_DIRECTIONS[position];
+        const step = 100 / blurLevels.length;
+        return blurLevels.map((blur, i) => {
             // MagicUI mask formula: each layer has a 1-step fade-in, 1-step solid,
             // and 1-step fade-out. Adjacent layers overlap by 2 steps, creating
             // smooth transitions. Values beyond 100% are clamped by the browser.
-            const step = 100 / n;
             const gradient = `linear-gradient(${direction}, transparent ${i * step}%, black ${(i + 1) * step}%, black ${(i + 2) * step}%, transparent ${(i + 3) * step}%)`;
-            const layerStyle = {
+            return {
                 maskImage: gradient,
                 WebkitMaskImage: gradient,
                 backdropFilter: `blur(${blur}px)`,
                 WebkitBackdropFilter: `blur(${blur}px)`,
-                zIndex: i + 1,
             };
-            return (jsx("div", { className: theme.layerStyle, style: layerStyle }, i));
-        }) }));
+        });
+    }, [position, blurLevels]);
+    const containerStyle = {
+        ...(isVertical ? { height: size } : { width: size }),
+        ...style,
+    };
+    return (jsx("div", { ref: ref, "aria-hidden": "true", className: cn(theme.baseStyle, theme.positions[position], className), style: containerStyle, ...rest, children: layerStyles.map((layerStyle, i) => (jsx("div", { className: theme.layerStyle, style: layerStyle }, i))) }));
 });
 BlurInstance.displayName = "BlurInstance";
 const ProgressiveBlur = forwardRef(({ position = "bottom", blurLevels: blurLevelsProp, layers = DEFAULT_LAYERS, blurIntensity = DEFAULT_MAX_BLUR, size = DEFAULT_SIZE, className, theme: themeOverrides, ...rest }, ref) => {
@@ -59,10 +59,21 @@ const ProgressiveBlur = forwardRef(({ position = "bottom", blurLevels: blurLevel
             layerStyle: (_b = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.layerStyle) !== null && _b !== void 0 ? _b : progressiveBlurTheme.layerStyle,
         });
     }, [themeOverrides]);
-    const blurLevels = useMemo(() => blurLevelsProp !== null && blurLevelsProp !== void 0 ? blurLevelsProp : generateBlurLevels(layers, blurIntensity), [blurLevelsProp, layers, blurIntensity]);
+    const blurLevels = useMemo(() => {
+        if (blurLevelsProp)
+            return blurLevelsProp;
+        const count = Math.max(1, Math.floor(layers));
+        if (process.env.NODE_ENV !== "production" && count !== layers) {
+            console.warn(`[ProgressiveBlur]: \`layers\` must be a positive integer; received ${layers}, using ${count}.`);
+        }
+        return generateBlurLevels(count, blurIntensity);
+    }, [blurLevelsProp, layers, blurIntensity]);
     const positions = Array.isArray(position)
-        ? position
+        ? Array.from(new Set(position))
         : [position];
+    if (process.env.NODE_ENV !== "production" && ref && positions.length > 1) {
+        console.warn("[ProgressiveBlur]: `ref` is ignored when `position` is an array — render one ProgressiveBlur per position if you need element refs.");
+    }
     // Single position — render directly, forward ref and remaining props
     if (positions.length === 1) {
         return (jsx(BlurInstance, { ref: ref, position: positions[0], blurLevels: blurLevels, size: size, theme: theme, className: className, ...rest }));

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

@@ -4,6 +4,8 @@ export interface ProgressiveBlurProps extends React.HTMLAttributes<HTMLDivElemen
     /**
      * Position(s) where the blur effect should be applied.
      * Can be a single position or array of positions.
+     * With an array, one element renders per position, so `ref` is not
+     * forwarded and `id`/event props apply to every instance.
      * @default "bottom"
      */
     position?: ProgressiveBlurPosition | ProgressiveBlurPosition[];

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,114 @@
+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 };