@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.20

package/dist/components/effects/Overlay/Overlay.js

@@ -97,14 +97,16 @@ const Overlay = React__default.forwardRef(({ isOpen, onClose, closeOnOverlayClic
     const finalContentAnimations = { ...contentAnimations };
     if (animationDuration) {
         if (animationDuration.enter && finalOverlayAnimations.animate) {
-            finalOverlayAnimations.animate.transition = {
-                ...finalOverlayAnimations.animate.transition,
+            const animate = finalOverlayAnimations.animate;
+            animate.transition = {
+                ...animate.transition,
                 duration: animationDuration.enter,
             };
         }
         if (animationDuration.exit && finalOverlayAnimations.exit) {
-            finalOverlayAnimations.exit.transition = {
-                ...finalOverlayAnimations.exit.transition,
+            const exit = finalOverlayAnimations.exit;
+            exit.transition = {
+                ...exit.transition,
                 duration: animationDuration.exit,
             };
         }

package/dist/components/effects/PageTransition/PageTransition.animations.d.ts

@@ -0,0 +1,8 @@
+import type { PageTransitionDirection } from './PageTransition.types';
+import type { Variants } from 'motion/react';
+export declare const buildCurtainVariants: (direction: PageTransitionDirection, duration: number) => Variants;
+export declare const buildLogoParallaxVariants: (direction: PageTransitionDirection, duration: number) => Variants;
+export declare const buildSplitVariants: (axis: "h" | "v", duration: number) => {
+    panel1: Variants;
+    panel2: Variants;
+};

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

@@ -0,0 +1,53 @@
+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: {
+            duration,
+            ease: [0.76, 0, 0.24, 1],
+        },
+    },
+});
+// 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).
+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 },
+    exit: {
+        ...logoInnerOffsetMap[direction],
+        transition: {
+            duration,
+            ease: [0.76, 0, 0.24, 1],
+        },
+    },
+});
+const buildSplitVariants = (axis, duration) => ({
+    panel1: {
+        covered: {},
+        exit: {
+            [axis === 'h' ? 'y' : 'x']: '-100%',
+            transition: { duration, ease: [0.76, 0, 0.24, 1] },
+        },
+    },
+    panel2: {
+        covered: {},
+        exit: {
+            [axis === 'h' ? 'y' : 'x']: '100%',
+            transition: { duration, ease: [0.76, 0, 0.24, 1] },
+        },
+    },
+});
+
+export { buildCurtainVariants, buildLogoParallaxVariants, buildSplitVariants };

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

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

package/dist/components/effects/PageTransition/PageTransition.js

@@ -0,0 +1,71 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { buildCurtainVariants, buildLogoParallaxVariants, buildSplitVariants } from './PageTransition.animations.js';
+
+const PageTransition = ({ children, logo, type = "slide", direction = "up", duration = 0.8, delay = 0.8, color = "bg-[var(--color-primary)]", className, parallax = true, onStart, onComplete, }) => {
+    const [phase, setPhase] = useState("covered");
+    const [completedPanels, setCompletedPanels] = useState(0);
+    useEffect(() => {
+        let cancelled = false;
+        const loadPromise = new Promise((resolve) => {
+            if (document.readyState === "complete") {
+                resolve();
+            }
+            else {
+                window.addEventListener("load", () => resolve(), { once: true });
+            }
+        });
+        const delayPromise = new Promise((resolve) => {
+            setTimeout(resolve, delay * 1000);
+        });
+        Promise.all([loadPromise, delayPromise]).then(() => {
+            if (!cancelled) {
+                setPhase("exit");
+                setTimeout(() => {
+                    if (!cancelled)
+                        onStart === null || onStart === void 0 ? void 0 : onStart();
+                }, 250);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [delay]);
+    useEffect(() => {
+        if (type === "split" && completedPanels === 2) {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+        }
+    }, [completedPanels, type, onComplete]);
+    if (type === "split") {
+        const axis = direction === "up" || direction === "down" ? "h" : "v";
+        const splitVars = buildSplitVariants(axis, duration);
+        return (jsxs(Fragment, { children: [children, jsxs("div", { className: "fixed inset-0 z-[9999] pointer-events-none", children: [jsx(motion.div, { className: cn(axis === "h"
+                                ? "absolute inset-x-0 top-0 h-1/2"
+                                : "absolute inset-y-0 left-0 w-1/2", color, className), variants: splitVars.panel1, initial: "covered", animate: phase, onAnimationComplete: (def) => {
+                                if (def === "exit")
+                                    setCompletedPanels((n) => n + 1);
+                            } }), jsx(motion.div, { className: cn(axis === "h"
+                                ? "absolute inset-x-0 bottom-0 h-1/2"
+                                : "absolute inset-y-0 right-0 w-1/2", color, className), variants: splitVars.panel2, initial: "covered", animate: phase, onAnimationComplete: (def) => {
+                                if (def === "exit")
+                                    setCompletedPanels((n) => n + 1);
+                            } }), logo && (jsx("div", { className: "absolute inset-0 flex items-center justify-center z-10 pointer-events-none select-none", children: logo }))] })] }));
+    }
+    // Default: slide
+    const curtainVariants = buildCurtainVariants(direction, duration);
+    if (type === "slide" && parallax) {
+        const logoVariants = buildLogoParallaxVariants(direction, duration);
+        return (jsxs(Fragment, { children: [children, jsx(motion.div, { className: cn("fixed inset-0 z-[9999] flex items-center justify-center", color, className), style: { willChange: "transform" }, variants: curtainVariants, initial: "covered", animate: phase, onAnimationComplete: (def) => {
+                        if (def === "exit")
+                            onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+                    }, children: logo && (jsx(motion.div, { className: "relative z-10 select-none", variants: logoVariants, initial: "covered", animate: phase, children: logo })) })] }));
+    }
+    return (jsxs(Fragment, { children: [children, jsx(motion.div, { className: cn("fixed inset-0 z-[9999] flex items-center justify-center", color, className), style: { willChange: "transform" }, variants: curtainVariants, initial: "covered", animate: phase, onAnimationComplete: (def) => {
+                    if (def === "exit")
+                        onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+                }, children: logo && jsx("div", { className: "relative z-10 select-none", children: logo }) })] }));
+};
+
+export { PageTransition };

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

@@ -0,0 +1,15 @@
+export type PageTransitionDirection = 'up' | 'down' | 'left' | 'right';
+export type PageTransitionType = 'slide' | 'split';
+export interface PageTransitionProps {
+    children: React.ReactNode;
+    logo?: React.ReactNode;
+    type?: PageTransitionType;
+    direction?: PageTransitionDirection;
+    duration?: number;
+    delay?: number;
+    color?: string;
+    className?: string;
+    parallax?: boolean;
+    onStart?: () => void;
+    onComplete?: () => void;
+}

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

@@ -0,0 +1,2 @@
+export { PageTransition } from './PageTransition';
+export type { PageTransitionProps, PageTransitionDirection } from './PageTransition.types';

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { ParallaxSectionProps } from './ParallaxSection.types';
+/**
+ * ParallaxSection
+ *
+ * A scroll-driven parallax wrapper that translates its children at a configurable
+ * rate relative to normal scroll, creating depth and visual interest.
+ *
+ * Uses `transform: translate3d` for GPU-accelerated, jank-free animation.
+ *
+ * @example
+ * ```tsx
+ * <ParallaxSection speed={0.3}>
+ *   <img src="/hero-bg.jpg" alt="" className="w-full h-[600px] object-cover" />
+ * </ParallaxSection>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Opposite direction
+ * <ParallaxSection speed={-0.2} direction="horizontal">
+ *   <div className="flex gap-4">{items}</div>
+ * </ParallaxSection>
+ * ```
+ */
+export declare const ParallaxSection: React.ForwardRefExoticComponent<ParallaxSectionProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/effects/ParallaxSection/ParallaxSection.js

@@ -0,0 +1,71 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useRef } from 'react';
+import { useReducedMotion, useScroll, useTransform, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * ParallaxSection
+ *
+ * A scroll-driven parallax wrapper that translates its children at a configurable
+ * rate relative to normal scroll, creating depth and visual interest.
+ *
+ * Uses `transform: translate3d` for GPU-accelerated, jank-free animation.
+ *
+ * @example
+ * ```tsx
+ * <ParallaxSection speed={0.3}>
+ *   <img src="/hero-bg.jpg" alt="" className="w-full h-[600px] object-cover" />
+ * </ParallaxSection>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Opposite direction
+ * <ParallaxSection speed={-0.2} direction="horizontal">
+ *   <div className="flex gap-4">{items}</div>
+ * </ParallaxSection>
+ * ```
+ */
+const ParallaxSection = React__default.forwardRef(({ speed = 0.5, direction = 'vertical', scrollRef, className, children, style, 
+// Destructure HTML event handlers that conflict with motion's API
+onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, onAnimationStart: _onAnimationStart, ...restProps }, ref) => {
+    const shouldReduceMotion = useReducedMotion();
+    const internalRef = useRef(null);
+    // Track scroll progress of the target element through the viewport.
+    // offset: element bottom enters viewport -> element top exits viewport.
+    const { scrollYProgress } = useScroll({
+        target: internalRef,
+        container: scrollRef,
+        offset: ['start end', 'end start'],
+    });
+    // Map 0-1 scroll progress to a pixel displacement.
+    // At progress 0 (element just entering) the offset is positive (pushed down),
+    // and at progress 1 (element leaving) the offset is negative (pulled up),
+    // scaled by the speed multiplier.  This creates the classic parallax feel.
+    const range = 200 * speed;
+    const yTransform = useTransform(scrollYProgress, [0, 1], [range, -range]);
+    const xTransform = useTransform(scrollYProgress, [0, 1], [range, -range]);
+    // When reduced motion is preferred, render without any parallax.
+    if (shouldReduceMotion) {
+        return (jsx("div", { ref: (node) => {
+                internalRef.current = node;
+                if (typeof ref === 'function')
+                    ref(node);
+                else if (ref)
+                    ref.current = node;
+            }, className: cn('will-change-transform', className), style: style, ...restProps, children: children }));
+    }
+    const motionStyle = direction === 'vertical'
+        ? { y: yTransform, ...style }
+        : { x: xTransform, ...style };
+    return (jsx(motion.div, { ref: (node) => {
+            internalRef.current = node;
+            if (typeof ref === 'function')
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }, className: cn('will-change-transform', className), style: motionStyle, ...restProps, children: children }));
+});
+ParallaxSection.displayName = 'ParallaxSection';
+
+export { ParallaxSection };

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

@@ -0,0 +1,11 @@
+import type { RefObject } from 'react';
+export interface ParallaxSectionProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Parallax speed multiplier. Negative = moves opposite direction. (default 0.5) */
+    speed?: number;
+    /** Direction of parallax (default 'vertical') */
+    direction?: 'vertical' | 'horizontal';
+    /** Use scroll container instead of window (ref to container) */
+    scrollRef?: RefObject<HTMLElement>;
+    className?: string;
+    children: React.ReactNode;
+}

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

@@ -0,0 +1,2 @@
+export { ParallaxSection } from './ParallaxSection';
+export type { ParallaxSectionProps } from './ParallaxSection.types';

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

@@ -0,0 +1,22 @@
+import React from "react";
+import type { ParticlesProps } from "./Particles.types";
+/**
+ * Particles creates a floating particle background effect using Three.js.
+ *
+ * Particles drift upward with slight horizontal variation and react to mouse
+ * proximity. Optional connection lines are drawn between nearby particles.
+ *
+ * The component renders as an absolutely-positioned layer, ideal for use as
+ * a section or page background.
+ *
+ * @example
+ * ```tsx
+ * <div className="relative h-screen overflow-hidden bg-gray-950">
+ *   <Particles count={100} color="#6366f1" connectionDistance={120} />
+ *   <div className="relative z-10 p-8">
+ *     <h1 className="text-white text-4xl">Content on top</h1>
+ *   </div>
+ * </div>
+ * ```
+ */
+export declare const Particles: React.FC<ParticlesProps>;

package/dist/components/effects/Particles/Particles.js

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import { Canvas } from '@react-three/fiber';
+import { useReducedMotion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import 'react';
+import { ParticlesScene } from './Particles.scene.js';
+
+/**
+ * Particles creates a floating particle background effect using Three.js.
+ *
+ * Particles drift upward with slight horizontal variation and react to mouse
+ * proximity. Optional connection lines are drawn between nearby particles.
+ *
+ * The component renders as an absolutely-positioned layer, ideal for use as
+ * a section or page background.
+ *
+ * @example
+ * ```tsx
+ * <div className="relative h-screen overflow-hidden bg-gray-950">
+ *   <Particles count={100} color="#6366f1" connectionDistance={120} />
+ *   <div className="relative z-10 p-8">
+ *     <h1 className="text-white text-4xl">Content on top</h1>
+ *   </div>
+ * </div>
+ * ```
+ */
+const Particles = ({ count = 80, color = "#6366f1", size = 2, speed = 1, connectionDistance = 150, connectionColor, mouseRadius = 200, mouseForce = 0.5, opacity = 0.6, className, style, ...rest }) => {
+    var _a;
+    const shouldReduceMotion = (_a = useReducedMotion()) !== null && _a !== void 0 ? _a : false;
+    return (jsx("div", { className: cn("absolute inset-0 pointer-events-none", className), style: style, ...rest, children: jsx(Canvas, { className: "!pointer-events-auto", dpr: [1, 2], orthographic: true, camera: { zoom: 50, near: 0.1, far: 100, position: [0, 0, 10] }, gl: { antialias: false, alpha: true }, style: { position: "absolute", inset: 0, width: "100%", height: "100%" }, children: jsx(ParticlesScene, { count: count, color: color, size: size, speed: speed, connectionDistance: connectionDistance, connectionColor: connectionColor || color, mouseRadius: mouseRadius, mouseForce: mouseForce, opacity: opacity, reducedMotion: shouldReduceMotion }) }) }));
+};
+
+export { Particles };

package/dist/components/effects/Particles/Particles.scene.d.ts

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

package/dist/components/effects/Particles/Particles.scene.js

@@ -0,0 +1,284 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useRef, useMemo, useEffect, useCallback } from 'react';
+import { useThree, useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+/** Convert a hex colour string to a normalised THREE.Color. */
+function hexToColor(hex) {
+    return new THREE.Color(hex);
+}
+/**
+ * Seed particle data: positions scattered across an area that maps to the
+ * viewport, plus per-particle velocity and depth factor.
+ */
+function createParticleData(count, width, height) {
+    const positions = new Float32Array(count * 3);
+    const velocities = new Float32Array(count * 3);
+    const depths = new Float32Array(count); // 0 = far, 1 = near
+    const originals = new Float32Array(count * 3);
+    for (let i = 0; i < count; i++) {
+        const i3 = i * 3;
+        const x = (Math.random() - 0.5) * width;
+        const y = (Math.random() - 0.5) * height;
+        const z = 0;
+        positions[i3] = x;
+        positions[i3 + 1] = y;
+        positions[i3 + 2] = z;
+        originals[i3] = x;
+        originals[i3 + 1] = y;
+        originals[i3 + 2] = z;
+        // Random gentle velocity: slight upward float + horizontal drift
+        velocities[i3] = (Math.random() - 0.5) * 0.3; // vx
+        velocities[i3 + 1] = Math.random() * 0.2 + 0.1; // vy (upward)
+        velocities[i3 + 2] = 0; // vz
+        depths[i] = Math.random();
+    }
+    return { positions, velocities, depths, originals };
+}
+// ── Scene ────────────────────────────────────────────────────────────────────
+const ParticlesScene = ({ count, color, size, speed, connectionDistance, connectionColor, mouseRadius, mouseForce, opacity, reducedMotion, }) => {
+    const { viewport } = useThree();
+    // Refs
+    const pointsRef = useRef(null);
+    const linesRef = useRef(null);
+    const mouseNDC = useRef(new THREE.Vector2(9999, 9999));
+    // Keep latest props in a ref so useFrame reads current values
+    const propsRef = useRef({
+        speed,
+        mouseRadius,
+        mouseForce,
+        connectionDistance,
+        opacity,
+        reducedMotion,
+    });
+    propsRef.current = {
+        speed,
+        mouseRadius,
+        mouseForce,
+        connectionDistance,
+        opacity,
+        reducedMotion,
+    };
+    // Dimensions in world units
+    const worldWidth = viewport.width;
+    const worldHeight = viewport.height;
+    // ── Particle data (re-created when count or viewport changes) ────────────
+    const data = useMemo(() => createParticleData(count, worldWidth, worldHeight), [count, worldWidth, worldHeight]);
+    // ── Points geometry + material ───────────────────────────────────────────
+    const pointsGeometry = useMemo(() => {
+        const geo = new THREE.BufferGeometry();
+        geo.setAttribute("position", new THREE.BufferAttribute(data.positions, 3));
+        geo.setAttribute("depth", new THREE.BufferAttribute(data.depths, 1));
+        return geo;
+    }, [data]);
+    const pointsMaterial = useMemo(() => {
+        return new THREE.ShaderMaterial({
+            transparent: true,
+            depthWrite: false,
+            uniforms: {
+                u_color: { value: hexToColor(color) },
+                u_size: { value: size },
+                u_opacity: { value: opacity },
+                u_pixelRatio: { value: Math.min(window.devicePixelRatio, 2) },
+            },
+            vertexShader: /* glsl */ `
+        attribute float depth;
+        uniform float u_size;
+        uniform float u_pixelRatio;
+        varying float vDepth;
+
+        void main() {
+          vDepth = depth;
+          vec4 mvPos = modelViewMatrix * vec4(position, 1.0);
+          // Larger particles appear closer (depth 1 = near, 0 = far)
+          gl_PointSize = u_size * u_pixelRatio * (0.5 + depth * 0.8);
+          gl_Position = projectionMatrix * mvPos;
+        }
+      `,
+            fragmentShader: /* glsl */ `
+        uniform vec3 u_color;
+        uniform float u_opacity;
+        varying float vDepth;
+
+        void main() {
+          // Circular point shape
+          float dist = length(gl_PointCoord - vec2(0.5));
+          if (dist > 0.5) discard;
+
+          // Soft edge falloff
+          float alpha = 1.0 - smoothstep(0.3, 0.5, dist);
+          // Depth affects brightness: closer = brighter
+          float brightness = 0.4 + vDepth * 0.6;
+          gl_FragColor = vec4(u_color * brightness, alpha * u_opacity * (0.3 + vDepth * 0.7));
+        }
+      `,
+        });
+    }, [color, size, opacity]);
+    // Update material uniforms when props change
+    useEffect(() => {
+        if (pointsMaterial) {
+            pointsMaterial.uniforms.u_color.value = hexToColor(color);
+            pointsMaterial.uniforms.u_size.value = size;
+            pointsMaterial.uniforms.u_opacity.value = opacity;
+        }
+    }, [color, size, opacity, pointsMaterial]);
+    // ── Connection lines geometry + material ─────────────────────────────────
+    const maxLines = count * 6; // upper bound on line segments
+    const linesGeometry = useMemo(() => {
+        const geo = new THREE.BufferGeometry();
+        const linePositions = new Float32Array(maxLines * 6); // 2 verts * 3 coords per segment
+        const lineAlphas = new Float32Array(maxLines * 2); // alpha per vertex
+        geo.setAttribute("position", new THREE.BufferAttribute(linePositions, 3));
+        geo.setAttribute("alpha", new THREE.BufferAttribute(lineAlphas, 1));
+        geo.setDrawRange(0, 0);
+        return geo;
+    }, [maxLines]);
+    const linesMaterial = useMemo(() => {
+        return new THREE.ShaderMaterial({
+            transparent: true,
+            depthWrite: false,
+            uniforms: {
+                u_color: { value: hexToColor(connectionColor || color) },
+                u_opacity: { value: opacity },
+            },
+            vertexShader: /* glsl */ `
+        attribute float alpha;
+        varying float vAlpha;
+
+        void main() {
+          vAlpha = alpha;
+          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+        }
+      `,
+            fragmentShader: /* glsl */ `
+        uniform vec3 u_color;
+        uniform float u_opacity;
+        varying float vAlpha;
+
+        void main() {
+          gl_FragColor = vec4(u_color, vAlpha * u_opacity * 0.35);
+        }
+      `,
+        });
+    }, [color, connectionColor, opacity]);
+    // Update line material when props change
+    useEffect(() => {
+        if (linesMaterial) {
+            linesMaterial.uniforms.u_color.value = hexToColor(connectionColor || color);
+            linesMaterial.uniforms.u_opacity.value = opacity;
+        }
+    }, [color, connectionColor, opacity, linesMaterial]);
+    // ── Mouse tracking ───────────────────────────────────────────────────────
+    const handlePointerMove = useCallback((event) => {
+        mouseNDC.current.set(event.point.x, event.point.y);
+    }, []);
+    const handlePointerLeave = useCallback(() => {
+        // Move mouse far away so it has no effect
+        mouseNDC.current.set(9999, 9999);
+    }, []);
+    // ── Cleanup on unmount ───────────────────────────────────────────────────
+    useEffect(() => {
+        return () => {
+            pointsGeometry.dispose();
+            pointsMaterial.dispose();
+            linesGeometry.dispose();
+            linesMaterial.dispose();
+        };
+    }, [pointsGeometry, pointsMaterial, linesGeometry, linesMaterial]);
+    // ── Animation loop ───────────────────────────────────────────────────────
+    useFrame((_, delta) => {
+        const { speed: spd, mouseRadius: mRadius, mouseForce: mForce, connectionDistance: connDist, opacity: opac, reducedMotion: reduced, } = propsRef.current;
+        if (reduced)
+            return; // Respect reduced motion preference
+        const clampedDelta = Math.min(delta, 0.05); // cap to prevent large jumps
+        const dt = clampedDelta * spd;
+        const posAttr = pointsGeometry.getAttribute("position");
+        const posArr = posAttr.array;
+        const halfW = worldWidth / 2;
+        const halfH = worldHeight / 2;
+        const mx = mouseNDC.current.x;
+        const my = mouseNDC.current.y;
+        // Convert connectionDistance from screen-pixels to world units.
+        // viewport.width corresponds to the canvas pixel width, so we scale.
+        const connDistWorld = (connDist / (viewport.width * 50)) * worldWidth;
+        const mouseRadiusWorld = (mRadius / (viewport.width * 50)) * worldWidth;
+        // ── Update particle positions ────────────────────────────────────────
+        for (let i = 0; i < count; i++) {
+            const i3 = i * 3;
+            // Apply velocity (floating upward + drift)
+            posArr[i3] += data.velocities[i3] * dt;
+            posArr[i3 + 1] += data.velocities[i3 + 1] * dt;
+            // Mouse repulsion
+            if (mRadius > 0) {
+                const dx = posArr[i3] - mx;
+                const dy = posArr[i3 + 1] - my;
+                const distSq = dx * dx + dy * dy;
+                const mRadSq = mouseRadiusWorld * mouseRadiusWorld;
+                if (distSq < mRadSq && distSq > 0.0001) {
+                    const dist = Math.sqrt(distSq);
+                    const force = ((mouseRadiusWorld - dist) / mouseRadiusWorld) * mForce * dt;
+                    posArr[i3] += (dx / dist) * force;
+                    posArr[i3 + 1] += (dy / dist) * force;
+                }
+            }
+            // Wrap around edges
+            if (posArr[i3] > halfW)
+                posArr[i3] = -halfW;
+            if (posArr[i3] < -halfW)
+                posArr[i3] = halfW;
+            if (posArr[i3 + 1] > halfH) {
+                posArr[i3 + 1] = -halfH;
+                // Re-randomize x when wrapping vertically for natural look
+                posArr[i3] = (Math.random() - 0.5) * worldWidth;
+            }
+            if (posArr[i3 + 1] < -halfH)
+                posArr[i3 + 1] = halfH;
+        }
+        posAttr.needsUpdate = true;
+        // ── Update connection lines ──────────────────────────────────────────
+        if (connDist > 0 && linesGeometry) {
+            const linePosAttr = linesGeometry.getAttribute("position");
+            const lineAlphaAttr = linesGeometry.getAttribute("alpha");
+            const linePosArr = linePosAttr.array;
+            const lineAlphaArr = lineAlphaAttr.array;
+            let lineIdx = 0;
+            const connDistSq = connDistWorld * connDistWorld;
+            for (let i = 0; i < count && lineIdx < maxLines; i++) {
+                const i3 = i * 3;
+                for (let j = i + 1; j < count && lineIdx < maxLines; j++) {
+                    const j3 = j * 3;
+                    const dx = posArr[i3] - posArr[j3];
+                    const dy = posArr[i3 + 1] - posArr[j3 + 1];
+                    const distSq = dx * dx + dy * dy;
+                    if (distSq < connDistSq) {
+                        const lineBase = lineIdx * 6;
+                        const alphaBase = lineIdx * 2;
+                        linePosArr[lineBase] = posArr[i3];
+                        linePosArr[lineBase + 1] = posArr[i3 + 1];
+                        linePosArr[lineBase + 2] = 0;
+                        linePosArr[lineBase + 3] = posArr[j3];
+                        linePosArr[lineBase + 4] = posArr[j3 + 1];
+                        linePosArr[lineBase + 5] = 0;
+                        const alpha = 1.0 - Math.sqrt(distSq) / connDistWorld;
+                        lineAlphaArr[alphaBase] = alpha;
+                        lineAlphaArr[alphaBase + 1] = alpha;
+                        lineIdx++;
+                    }
+                }
+            }
+            linesGeometry.setDrawRange(0, lineIdx * 2);
+            linePosAttr.needsUpdate = true;
+            lineAlphaAttr.needsUpdate = true;
+            if (linesMaterial) {
+                linesMaterial.uniforms.u_opacity.value = opac;
+            }
+        }
+        else if (linesGeometry) {
+            linesGeometry.setDrawRange(0, 0);
+        }
+    });
+    return (jsxs(Fragment, { children: [jsxs("mesh", { onPointerMove: handlePointerMove, onPointerLeave: handlePointerLeave, children: [jsx("planeGeometry", { args: [worldWidth * 2, worldHeight * 2] }), jsx("meshBasicMaterial", { transparent: true, opacity: 0, depthWrite: false })] }), jsx("points", { ref: pointsRef, geometry: pointsGeometry, material: pointsMaterial }), connectionDistance > 0 && (jsx("lineSegments", { ref: linesRef, geometry: linesGeometry, material: linesMaterial }))] }));
+};
+
+export { ParticlesScene };