@zuzjs/ui 0.9.3 → 0.9.5

package/dist/esm/hooks/useBase.js

@@ -57,6 +57,7 @@ const useBase = (props, ref) => {
         // { transition: `all ${duration || `0.2`}s ${getAnimationCurve(curve)} ${delay || 0}s` }
         const _curve = getAnimationCurve(curve);
         const _transitionList = [];
+        const _willChangeList = [];
         Object.keys(_style).forEach(ck => {
             let prop = ck;
             let _subTrans = ck;
@@ -68,11 +69,15 @@ const useBase = (props, ref) => {
             else if (cssTransformKeys.includes(prop)) {
                 _subTrans = `transform`;
             }
+            // will-change: ${_subTrans}; 
             const _newTransition = `${_subTrans} ${duration || `0.2`}s ${_curve} ${delay || 0}s`;
+            if (!_willChangeList.includes(_subTrans))
+                _willChangeList.push(_subTrans);
             if (!_transitionList.includes(_newTransition))
                 _transitionList.push(_newTransition);
         });
         _transition.transition = _transitionList.join(`, `);
+        _transition.willChange = _willChangeList.join(`, `);
     }
     // // console.log(_style, _transition)
     const is = typeof window !== "undefined";
@@ -98,7 +103,7 @@ const useBase = (props, ref) => {
             };
         }
     }
-    const handleScroll = () => {
+    const handleScrollParallax = () => {
         if (fx && fx.scroll && typeof window !== 'undefined') {
             const now = performance.now();
             const dt = (now - lastTime.current) / 1000;
@@ -110,22 +115,58 @@ const useBase = (props, ref) => {
             if (ref?.current) {
                 const translateX = x ? currentScroll.current.x * x * (multiplier || xMultiplier || .25) : 0;
                 const translateY = y ? currentScroll.current.y * y * (multiplier || yMultiplier || .25) : 0;
-                // ref.current.style.setProperty(`--scroll-y`, `${translateY}px`)
-                // transform = `translate3d(${translateX}px, ${translateY}px, 0)`.trim()
                 animateCSSVar(ref, "--scroll-y", translateY);
+                animateCSSVar(ref, "--scroll-x", translateX);
             }
         }
     };
+    const handleMouseParallax = (e) => {
+        if (!fx || !fx.mouse || typeof window === 'undefined')
+            return;
+        const now = performance.now();
+        const dt = (now - lastTime.current) / 1000;
+        lastTime.current = now;
+        const { lerpFactor, x, y, multiplier, xMultiplier, yMultiplier } = fx.mouse;
+        // Normalize mouse position to center (0) range (-1 to 1)
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const nx = (e.clientX - vw / 2) / (vw / 2); // -1 to 1
+        const ny = (e.clientY - vh / 2) / (vh / 2); // -1 to 1
+        const dx = nx - currentScroll.current.x;
+        const dy = ny - currentScroll.current.y;
+        currentScroll.current.x += dx * (lerpFactor || 0.1);
+        currentScroll.current.y += dy * (lerpFactor || 0.1);
+        if (ref?.current) {
+            const translateX = x ? currentScroll.current.x * (multiplier || xMultiplier || 20) : 0;
+            const translateY = y ? currentScroll.current.y * (multiplier || yMultiplier || 20) : 0;
+            animateCSSVar(ref, '--mouse-x', translateX);
+            animateCSSVar(ref, '--mouse-y', translateY);
+        }
+    };
     useEffect(() => {
-        if (fx && fx.scroll && typeof window !== 'undefined') {
-            if (ref) {
-                ref.current.style.transform = `translate3d(0px, var(--scroll-y), 0)`;
-                ref.current.style.transition = `transform 0.1s ${fx.curve ? getAnimationCurve(fx.curve) : `var(--spring)`}`;
+        if (typeof window !== 'undefined') {
+            if (fx && fx.scroll) {
+                if (ref) {
+                    ref.current.style.willChange = `transform`;
+                    ref.current.style.transform = `translate3d(0px, var(--scroll-y), 0)`;
+                    ref.current.style.transition = `transform 0.1s ${fx.curve ? getAnimationCurve(fx.curve) : `var(--spring)`}`;
+                }
+                window.addEventListener('scroll', handleScrollParallax, { passive: true });
+                return () => {
+                    window.removeEventListener('scroll', handleScrollParallax);
+                };
+            }
+            if (fx && fx.mouse) {
+                if (ref) {
+                    ref.current.style.willChange = `transform`;
+                    ref.current.style.transform = `translate3d(0px, var(--mouse-y), 0)`;
+                    ref.current.style.transition = `transform 0.1s ${fx.curve ? getAnimationCurve(fx.curve) : `var(--spring)`}`;
+                }
+                window.document.addEventListener('mousemove', handleMouseParallax, { passive: true });
+                return () => {
+                    window.removeEventListener('mousemove', handleMouseParallax);
+                };
             }
-            window.addEventListener('scroll', handleScroll, { passive: true });
-            return () => {
-                window.removeEventListener('scroll', handleScroll);
-            };
         }
     }, [ref]);
     return {

package/dist/esm/hooks/useScrollbar.d.ts

@@ -1,7 +1,7 @@
 export interface ScrollBreakpoint {
     [key: number]: () => void;
 }
-declare const useScrollbar: (breakpoints?: ScrollBreakpoint) => {
+declare const useScrollbar: (speed: number, breakpoints?: ScrollBreakpoint) => {
     rootRef: import("react").RefObject<HTMLDivElement | null>;
     containerRef: import("react").RefObject<HTMLDivElement | null>;
     thumbY: import("react").RefObject<HTMLDivElement | null>;

package/dist/esm/hooks/useScrollbar.js

@@ -1,11 +1,12 @@
 "use client";
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import { useMutationObserver } from "..";
-const useScrollbar = (breakpoints = {}) => {
+const useScrollbar = (speed, breakpoints = {}) => {
     const rootRef = useRef(null);
     const containerRef = useRef(null);
     const thumbY = useRef(null);
     const thumbX = useRef(null);
+    const SCROLL_SPEED = useMemo(() => speed ?? 1, [speed]); // default to 1x multiplier
     const isDraggingY = useRef(false);
     const isDraggingX = useRef(false);
     const dragStartX = useRef(0);
@@ -52,7 +53,13 @@ const useScrollbar = (breakpoints = {}) => {
         });
     };
     const handleScroll = useCallback(() => {
-        if (!containerRef.current)
+        if (!containerRef.current
+        // || 
+        // (
+        //     typeof window !== `undefined` &&
+        //     window.document.body.classList.contains(`--no-scroll`)
+        // )
+        )
             return;
         const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = containerRef.current;
         const scrollPercentY = (scrollTop / (scrollHeight - clientHeight)) * 100;
@@ -122,13 +129,13 @@ const useScrollbar = (breakpoints = {}) => {
                 const maxScrollY = scrollHeight - clientHeight;
                 let newScrollTop = scrollTop + e.deltaY;
                 newScrollTop = Math.max(0, Math.min(newScrollTop, maxScrollY));
-                containerRef.current.scrollTop = newScrollTop;
+                containerRef.current.scrollTop = newScrollTop * SCROLL_SPEED;
             }
             if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
                 const maxScrollX = scrollWidth - clientWidth;
                 let newScrollLeft = scrollLeft + e.deltaX;
                 newScrollLeft = Math.max(0, Math.min(newScrollLeft, maxScrollX));
-                containerRef.current.scrollLeft = newScrollLeft;
+                containerRef.current.scrollLeft = newScrollLeft * SCROLL_SPEED;
             }
             const scrollPercentY = (containerRef.current.scrollTop / (containerRef.current.scrollHeight - clientHeight)) * 100;
             const scrollPercentX = (containerRef.current.scrollLeft / (containerRef.current.scrollWidth - clientWidth)) * 100;

package/dist/esm/types/interfaces.d.ts

@@ -1,6 +1,6 @@
 import { dynamicObject } from ".";
 import { SKELETON, TRANSITION_CURVES, TRANSITIONS } from "./enums";
-export interface scrollEffectProps {
+export interface parallaxEffectProps {
     lerpFactor?: number;
     x?: number;
     y?: number;
@@ -34,7 +34,8 @@ export interface animationProps {
     delay?: number;
     /** Easing curve applied to the animation, as a string or {@link TRANSITION_CURVES} */
     curve?: string | TRANSITION_CURVES;
-    scroll?: scrollEffectProps;
+    scroll?: parallaxEffectProps;
+    mouse?: parallaxEffectProps;
 }
 /**
  * `Skeleton` defines properties for a skeleton loader, used to indicate