react-next-tilt - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

dist/index.d.ts

 import { HTMLAttributes, CSSProperties, PropsWithChildren, MouseEventHandler, TouchEventHandler, FocusEventHandler, FC, RefObject } from 'react';
 import { Property } from 'csstype';
-export type SpotGlarePosition = 'top' | 'right' | 'bottom' | 'left';
+export type SpotGlarePosition = 'top' | 'right' | 'bottom' | 'left' | 'all';
 export type LineGlareDirection = 'to-bottom-right' | 'to-bottom-left';
@@ -5,0 +5,0 @@ export type LineGlareHoverPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';

dist/react-next-tilt.js

@@ -18,3 +18,3 @@ import fr, { forwardRef as pr, useRef as Ce, useCallback as R, useMemo as tr, useImperativeHandle as mr, useEffect as nr, memo as hr } from "react";
   var a = fr, o = Symbol.for("react.element"), v = Symbol.for("react.fragment"), i = Object.prototype.hasOwnProperty, h = a.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, m = { key: !0, ref: !0, __self: !0, __source: !0 };
-  function ne(q, b, C) {
+  function le(H, b, C) {
     var O, x = {}, S = null, _e = null;
@@ -24,8 +24,8 @@ C !== void 0 && (S = "" + C), b.key !== void 0 && (S = "" + b.key), b.ref !== void 0 && (_e = b.ref);
       i.call(b, O) && !m.hasOwnProperty(O) && (x[O] = b[O]);
-    if (q && q.defaultProps)
-      for (O in b = q.defaultProps, b)
+    if (H && H.defaultProps)
+      for (O in b = H.defaultProps, b)
         x[O] === void 0 && (x[O] = b[O]);
-    return { $$typeof: o, type: q, key: S, ref: _e, props: x, _owner: h.current };
+    return { $$typeof: o, type: H, key: S, ref: _e, props: x, _owner: h.current };
   }
-  return De.Fragment = v, De.jsx = ne, De.jsxs = ne, De;
+  return De.Fragment = v, De.jsx = le, De.jsxs = le, De;
 }
@@ -45,3 +45,3 @@ var Pe = {};
   return or || (or = 1, process.env.NODE_ENV !== "production" && function() {
-    var a = fr, o = Symbol.for("react.element"), v = Symbol.for("react.portal"), i = Symbol.for("react.fragment"), h = Symbol.for("react.strict_mode"), m = Symbol.for("react.profiler"), ne = Symbol.for("react.provider"), q = Symbol.for("react.context"), b = Symbol.for("react.forward_ref"), C = Symbol.for("react.suspense"), O = Symbol.for("react.suspense_list"), x = Symbol.for("react.memo"), S = Symbol.for("react.lazy"), _e = Symbol.for("react.offscreen"), Se = Symbol.iterator, ze = "@@iterator";
+    var a = fr, o = Symbol.for("react.element"), v = Symbol.for("react.portal"), i = Symbol.for("react.fragment"), h = Symbol.for("react.strict_mode"), m = Symbol.for("react.profiler"), le = Symbol.for("react.provider"), H = Symbol.for("react.context"), b = Symbol.for("react.forward_ref"), C = Symbol.for("react.suspense"), O = Symbol.for("react.suspense_list"), x = Symbol.for("react.memo"), S = Symbol.for("react.lazy"), _e = Symbol.for("react.offscreen"), Se = Symbol.iterator, ze = "@@iterator";
     function Ye(e) {
@@ -53,4 +53,4 @@ if (e === null || typeof e != "object")
     }
-    var ae = a.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-    function E(e) {
+    var ne = a.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    function y(e) {
       {
@@ -64,3 +64,3 @@ for (var r = arguments.length, t = new Array(r > 1 ? r - 1 : 0), f = 1; f < r; f++)
       {
-        var f = ae.ReactDebugCurrentFrame, d = f.getStackAddendum();
+        var f = ne.ReactDebugCurrentFrame, d = f.getStackAddendum();
         d !== "" && (r += "%s", t = t.concat([d]));
@@ -73,6 +73,6 @@ var p = t.map(function(c) {
     }
-    var Le = !1, B = !1, z = !1, Ie = !1, be = !1, F;
+    var Le = !1, B = !1, q = !1, Ie = !1, be = !1, F;
     F = Symbol.for("react.module.reference");
     function V(e) {
-      return !!(typeof e == "string" || typeof e == "function" || e === i || e === m || be || e === h || e === C || e === O || Ie || e === _e || Le || B || z || typeof e == "object" && e !== null && (e.$$typeof === S || e.$$typeof === x || e.$$typeof === ne || e.$$typeof === q || e.$$typeof === b || // This needs to include all possible module reference object
+      return !!(typeof e == "string" || typeof e == "function" || e === i || e === m || be || e === h || e === C || e === O || Ie || e === _e || Le || B || q || typeof e == "object" && e !== null && (e.$$typeof === S || e.$$typeof === x || e.$$typeof === le || e.$$typeof === H || e.$$typeof === b || // This needs to include all possible module reference object
       // types supported by any Flight configuration anywhere since
@@ -83,3 +83,3 @@ // we don't know which Flight build this will end up being used
     }
-    function J(e, r, t) {
+    function z(e, r, t) {
       var f = e.displayName;
@@ -97,3 +97,3 @@ if (f)
         return null;
-      if (typeof e.tag == "number" && E("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
+      if (typeof e.tag == "number" && y("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
         return e.displayName || e.name || null;
@@ -118,10 +118,10 @@ if (typeof e == "string")
         switch (e.$$typeof) {
-          case q:
+          case H:
             var r = e;
             return Ve(r) + ".Consumer";
-          case ne:
+          case le:
             var t = e;
             return Ve(t._context) + ".Provider";
           case b:
-            return J(e, e.render, "ForwardRef");
+            return z(e, e.render, "ForwardRef");
           case x:
@@ -145,3 +145,3 @@ var f = e.displayName || null;
     U.__reactDisabledLog = !0;
-    function He() {
+    function Ae() {
       {
@@ -169,3 +169,3 @@ if (j === 0) {
     }
-    function oe() {
+    function ae() {
       {
@@ -202,7 +202,7 @@ if (j--, j === 0) {
         }
-        j < 0 && E("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
+        j < 0 && y("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
       }
     }
-    var de = ae.ReactCurrentDispatcher, ve;
-    function ie(e, r, t) {
+    var de = ne.ReactCurrentDispatcher, ve;
+    function oe(e, r, t) {
       {
@@ -220,6 +220,6 @@ if (ve === void 0)
     }
-    var pe = !1, fe;
+    var pe = !1, ie;
     {
       var $e = typeof WeakMap == "function" ? WeakMap : Map;
-      fe = new $e();
+      ie = new $e();
     }
@@ -230,3 +230,3 @@ function we(e, r) {
       {
-        var t = fe.get(e);
+        var t = ie.get(e);
         if (t !== void 0)
@@ -240,3 +240,3 @@ return t;
       var p;
-      p = de.current, de.current = null, He();
+      p = de.current, de.current = null, Ae();
       try {
@@ -278,14 +278,14 @@ if (r) {
 `), T = f.stack.split(`
-`), y = u.length - 1, g = T.length - 1; y >= 1 && g >= 0 && u[y] !== T[g]; )
-            g--;
-          for (; y >= 1 && g >= 0; y--, g--)
-            if (u[y] !== T[g]) {
-              if (y !== 1 || g !== 1)
+`), g = u.length - 1, E = T.length - 1; g >= 1 && E >= 0 && u[g] !== T[E]; )
+            E--;
+          for (; g >= 1 && E >= 0; g--, E--)
+            if (u[g] !== T[E]) {
+              if (g !== 1 || E !== 1)
                 do
-                  if (y--, g--, g < 0 || u[y] !== T[g]) {
+                  if (g--, E--, E < 0 || u[g] !== T[E]) {
                     var I = `
-` + u[y].replace(" at new ", " at ");
-                    return e.displayName && I.includes("<anonymous>") && (I = I.replace("<anonymous>", e.displayName)), typeof e == "function" && fe.set(e, I), I;
+` + u[g].replace(" at new ", " at ");
+                    return e.displayName && I.includes("<anonymous>") && (I = I.replace("<anonymous>", e.displayName)), typeof e == "function" && ie.set(e, I), I;
                   }
-                while (y >= 1 && g >= 0);
+                while (g >= 1 && E >= 0);
               break;
@@ -295,8 +295,8 @@ }
       } finally {
-        pe = !1, de.current = p, oe(), Error.prepareStackTrace = d;
+        pe = !1, de.current = p, ae(), Error.prepareStackTrace = d;
       }
-      var je = e ? e.displayName || e.name : "", rr = je ? ie(je) : "";
-      return typeof e == "function" && fe.set(e, rr), rr;
+      var je = e ? e.displayName || e.name : "", rr = je ? oe(je) : "";
+      return typeof e == "function" && ie.set(e, rr), rr;
     }
-    function Ae(e, r, t) {
+    function He(e, r, t) {
       return we(e, !1);
@@ -314,8 +314,8 @@ }
       if (typeof e == "string")
-        return ie(e);
+        return oe(e);
       switch (e) {
         case C:
-          return ie("Suspense");
+          return oe("Suspense");
         case O:
-          return ie("SuspenseList");
+          return oe("SuspenseList");
       }
@@ -325,3 +325,3 @@ if (typeof e == "object")
           case b:
-            return Ae(e.render);
+            return He(e.render);
           case x:
@@ -339,4 +339,4 @@ return Oe(e.type, r, t);
     }
-    var _ = Object.prototype.hasOwnProperty, se = {}, Z = ae.ReactDebugCurrentFrame;
-    function H(e) {
+    var _ = Object.prototype.hasOwnProperty, fe = {}, Z = ne.ReactDebugCurrentFrame;
+    function J(e) {
       if (e) {
@@ -360,6 +360,6 @@ var r = e._owner, t = Oe(e.type, e._source, r ? r.type : null);
               u = e[c](r, c, f, t, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
-            } catch (y) {
-              u = y;
+            } catch (g) {
+              u = g;
             }
-            u && !(u instanceof Error) && (H(d), E("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", f || "React class", t, c, typeof u), H(null)), u instanceof Error && !(u.message in se) && (se[u.message] = !0, H(d), E("Failed %s type: %s", t, u.message), H(null));
+            u && !(u instanceof Error) && (J(d), y("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", f || "React class", t, c, typeof u), J(null)), u instanceof Error && !(u.message in fe) && (fe[u.message] = !0, J(d), y("Failed %s type: %s", t, u.message), J(null));
           }
@@ -390,5 +390,5 @@ }
       if (Qe(e))
-        return E("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Ze(e)), me(e);
+        return y("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Ze(e)), me(e);
     }
-    var Y = ae.ReactCurrentOwner, ue = {
+    var Y = ne.ReactCurrentOwner, se = {
       key: !0,
@@ -400,3 +400,3 @@ ref: !0,
     A = {};
-    function ce(e) {
+    function ue(e) {
       if (_.call(e, "ref")) {
@@ -420,3 +420,3 @@ var r = Object.getOwnPropertyDescriptor(e, "ref").get;
         var t = W(Y.current.type);
-        A[t] || (E('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', W(Y.current.type), e.ref), A[t] = !0);
+        A[t] || (y('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', W(Y.current.type), e.ref), A[t] = !0);
       }
@@ -427,3 +427,3 @@ }
         var t = function() {
-          M || (M = !0, E("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
+          M || (M = !0, y("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
         };
@@ -439,3 +439,3 @@ t.isReactWarning = !0, Object.defineProperty(e, "key", {
         var t = function() {
-          Fe || (Fe = !0, E("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
+          Fe || (Fe = !0, y("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
         };
@@ -480,13 +480,13 @@ t.isReactWarning = !0, Object.defineProperty(e, "ref", {
         var p, c = {}, u = null, T = null;
-        t !== void 0 && (xe(t), u = "" + t), G(r) && (xe(r.key), u = "" + r.key), ce(r) && (T = r.ref, Te(r, d));
+        t !== void 0 && (xe(t), u = "" + t), G(r) && (xe(r.key), u = "" + r.key), ue(r) && (T = r.ref, Te(r, d));
         for (p in r)
-          _.call(r, p) && !ue.hasOwnProperty(p) && (c[p] = r[p]);
+          _.call(r, p) && !se.hasOwnProperty(p) && (c[p] = r[p]);
         if (e && e.defaultProps) {
-          var y = e.defaultProps;
-          for (p in y)
-            c[p] === void 0 && (c[p] = y[p]);
+          var g = e.defaultProps;
+          for (p in g)
+            c[p] === void 0 && (c[p] = g[p]);
         }
         if (u || T) {
-          var g = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
-          u && $(c, g), T && he(c, g);
+          var E = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
+          u && $(c, E), T && he(c, E);
         }
@@ -496,9 +496,9 @@ return ye(e, u, T, d, f, Y.current, c);
     }
-    var ee = ae.ReactCurrentOwner, le = ae.ReactDebugCurrentFrame;
+    var ee = ne.ReactCurrentOwner, ce = ne.ReactDebugCurrentFrame;
     function L(e) {
       if (e) {
         var r = e._owner, t = Oe(e.type, e._source, r ? r.type : null);
-        le.setExtraStackFrame(t);
+        ce.setExtraStackFrame(t);
       } else
-        le.setExtraStackFrame(null);
+        ce.setExtraStackFrame(null);
     }
@@ -556,6 +556,6 @@ var Ee;
         var f = "";
-        e && e._owner && e._owner !== ee.current && (f = " It was passed a child from " + W(e._owner.type) + "."), L(e), E('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', t, f), L(null);
+        e && e._owner && e._owner !== ee.current && (f = " It was passed a child from " + W(e._owner.type) + "."), L(e), y('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', t, f), L(null);
       }
     }
-    function qe(e, r) {
+    function Be(e, r) {
       {
@@ -599,5 +599,5 @@ if (typeof e != "object")
           var d = W(r);
-          E("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", d || "Unknown");
+          y("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", d || "Unknown");
         }
-        typeof r.getDefaultProps == "function" && !r.getDefaultProps.isReactClassApproved && E("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
+        typeof r.getDefaultProps == "function" && !r.getDefaultProps.isReactClassApproved && y("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
       }
@@ -610,7 +610,7 @@ }
           if (f !== "children" && f !== "key") {
-            L(e), E("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", f), L(null);
+            L(e), y("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", f), L(null);
             break;
           }
         }
-        e.ref !== null && (L(e), E("Invalid attribute `ref` supplied to `React.Fragment`."), L(null));
+        e.ref !== null && (L(e), y("Invalid attribute `ref` supplied to `React.Fragment`."), L(null));
       }
@@ -626,8 +626,8 @@ }
           T ? u += T : u += s();
-          var y;
-          e === null ? y = "null" : P(e) ? y = "array" : e !== void 0 && e.$$typeof === o ? (y = "<" + (W(e.type) || "Unknown") + " />", u = " Did you accidentally export a JSX literal instead of a component?") : y = typeof e, E("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", y, u);
+          var g;
+          e === null ? g = "null" : P(e) ? g = "array" : e !== void 0 && e.$$typeof === o ? (g = "<" + (W(e.type) || "Unknown") + " />", u = " Did you accidentally export a JSX literal instead of a component?") : g = typeof e, y("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", g, u);
         }
-        var g = ge(e, r, t, d, p);
-        if (g == null)
-          return g;
+        var E = ge(e, r, t, d, p);
+        if (E == null)
+          return E;
         if (c) {
@@ -639,10 +639,10 @@ var I = r.children;
                 for (var je = 0; je < I.length; je++)
-                  qe(I[je], e);
+                  Be(I[je], e);
                 Object.freeze && Object.freeze(I);
               } else
-                E("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
+                y("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
             else
-              qe(I, e);
+              Be(I, e);
         }
-        return e === i ? ur(g) : sr(g), g;
+        return e === i ? ur(E) : sr(E), E;
       }
@@ -664,8 +664,11 @@ }
   let i = 0;
-  return o === "top" ? i = (a.offsetY * 2 - 1) * -1 : o === "bottom" ? i = (a.offsetY - 0.5) * 2 : o === "left" ? i = (a.offsetX * 2 - 1) * -1 : o === "right" && (i = (a.offsetX - 0.5) * 2), (i * v).toFixed(2);
+  return o === "top" ? i = (a.offsetY * 2 - 1) * -1 : o === "bottom" ? i = (a.offsetY - 0.5) * 2 : o === "left" ? i = (a.offsetX * 2 - 1) * -1 : o === "right" ? i = (a.offsetX - 0.5) * 2 : o === "all" && (i = Math.max(
+    Math.abs(a.offsetX - 0.5) * 2,
+    Math.abs(a.offsetY - 0.5) * 2
+  )), (i * v).toFixed(2);
 }, _r = (a, o, v) => {
   let i = a.offsetX, h = a.offsetY;
   v || (i = 1 - i, h = 1 - h);
-  let m = "translateX(0deg) translateY(0deg)";
-  return o === "top" ? m = `translateX( ${i * 50}% )` : o === "bottom" ? m = `translateX( ${i * 50}% ) translateY(50%)` : o === "left" ? m = `translateY( ${h * 50}% )` : o === "right" && (m = `translateX(50%) translateY( ${h * 50}% ) `), m;
+  let m = "translateX(0%) translateY(0%)";
+  return o === "top" ? m = `translateX( ${i * 50}% )` : o === "bottom" ? m = `translateX( ${i * 50}% ) translateY(50%)` : o === "left" ? m = `translateY( ${h * 50}% )` : o === "right" ? m = `translateX(50%) translateY( ${h * 50}% ) ` : o === "all" && (m = `translateX(${(i - 0.5) * 50}%) translateY(${(h - 0.5) * 50}%) `), m;
 }, br = (a, o, v) => {
@@ -683,3 +686,3 @@ let i = a.offsetX, h = a.offsetY;
     return a.current;
-}, Be = (a, o) => {
+}, qe = (a, o) => {
   if (a === o)
@@ -695,3 +698,3 @@ return !0;
       for (i = v; i-- !== 0; )
-        if (!Be(a[i], o[i]))
+        if (!qe(a[i], o[i]))
           return !1;
@@ -707,3 +710,3 @@ return !0;
       for (i of a.entries())
-        if (!Be(i[1], o.get(i[0])))
+        if (!qe(i[1], o.get(i[0])))
           return !1;
@@ -742,3 +745,3 @@ return !0;
       const m = h[i];
-      if (!(m === "_owner" && a.$$typeof) && !Be(a[m], o[m]))
+      if (!(m === "_owner" && a.$$typeof) && !qe(a[m], o[m]))
         return !1;
@@ -757,4 +760,4 @@ }
     lineGlareEnable: m = !0,
-    lineGlareBlurEnable: ne = !0,
-    lineGlareBlurAmount: q = "4px",
+    lineGlareBlurEnable: le = !0,
+    lineGlareBlurAmount: H = "4px",
     lineGlareMaxOpacity: b = 0.1,
@@ -769,8 +772,8 @@ lineGlareWidthPercent: C = 10,
     spotGlareMaxOpacity: Ye = 0.5,
-    spotGlareMixBlendMode: ae = "normal",
-    spotGlarePosition: E = "top",
+    spotGlareMixBlendMode: ne = "normal",
+    spotGlarePosition: y = "top",
     spotGlareColor: Je = "white",
     spotGlareReverse: Le = !1,
     tiltMaxAngleX: B = 20,
-    tiltMaxAngleY: z = 20,
+    tiltMaxAngleY: q = 20,
     tiltReverse: Ie = !1,
@@ -780,3 +783,3 @@ tiltReset: be = !0,
     initialAngleY: V = 0,
-    disableScrollOnTouch: J = !0,
+    disableScrollOnTouch: z = !0,
     style: Ve,
@@ -794,19 +797,19 @@ tiltStyle: W,
     controlElement: U,
-    controlElementOnly: He = !1,
-    testIdEnable: oe = !1,
+    controlElementOnly: Ae = !1,
+    testIdEnable: ae = !1,
     onTilt: de,
     onMouseEnter: ve,
-    onMouseMove: ie,
+    onMouseMove: oe,
     onMouseLeave: pe,
-    onTouchStart: fe,
+    onTouchStart: ie,
     onTouchMove: $e,
     onTouchEnd: we,
-    children: Ae,
+    children: He,
     ...Ke
   }, Oe) => {
-    const _ = Ce(), se = Ce(!1), Z = !k && (!U || U && !He), H = Ce(null), Q = Ce(null), D = Ce(null), P = Ce(null), Ze = R(
+    const _ = Ce(), fe = Ce(!1), Z = !k && (!U || U && !Ae), J = Ce(null), Q = Ce(null), D = Ce(null), P = Ce(null), Ze = R(
       ({ children: n }) => /* @__PURE__ */ te.jsx(te.Fragment, { children: n }),
       []
     ), Qe = Ne || Ze;
-    m && (C = X(C, 0, 50) / 2), B = X(B, 0, 90), z = X(z, 0, 90), j = X(j, 0, 90), N = X(N, 0, 90), F && (F = X(
+    m && (C = X(C, 0, 50) / 2), B = X(B, 0, 90), q = X(q, 0, 90), j = X(j, 0, 90), N = X(N, 0, 90), F && (F = X(
       F,
@@ -817,15 +820,15 @@ -B,
       V,
-      -z,
-      z
+      -q,
+      q
     ));
     const me = tr(() => m ? (100 - C) / 2 : 0, [m, C]), xe = tr(() => m ? me + C : 0, [m, C, me]), Y = R(() => {
-      if (!H.current || !D.current || !_.current)
+      if (!J.current || !D.current || !_.current)
         return;
       const n = Er(
         _.current,
-        E,
+        y,
         Ye
       ), s = _r(
         _.current,
-        E,
+        y,
         Le
@@ -836,4 +839,4 @@ );
       });
-    }, [E, Ye, Le]), ue = R(() => {
-      if (!H.current || !P.current || !_.current)
+    }, [y, Ye, Le]), se = R(() => {
+      if (!J.current || !P.current || !_.current)
         return;
@@ -850,14 +853,14 @@ const n = br(
       (n = !0) => {
-        if (!H.current || !_.current)
+        if (!J.current || !_.current)
           return { angleX: 0, angleY: 0 };
-        let s = -(_.current.offsetY - 0.5) * 2 * B, l = (_.current.offsetX - 0.5) * 2 * z;
+        let s = -(_.current.offsetY - 0.5) * 2 * B, l = (_.current.offsetX - 0.5) * 2 * q;
         return Ie && n && (s = -s, l = -l), { angleX: s, angleY: l };
       },
-      [B, z, Ie]
+      [B, q, Ie]
     ), Fe = R(
       (n) => {
-        const s = (n.angleY / z + 1) / 2, l = (-n.angleX / B + 1) / 2;
+        const s = (n.angleY / q + 1) / 2, l = (-n.angleX / B + 1) / 2;
         _.current = { offsetX: s, offsetY: l };
       },
-      [B, z]
+      [B, q]
     ), A = R(
@@ -874,15 +877,15 @@ (n, s = !0) => {
       [de, h]
-    ), ce = R(
+    ), ue = R(
       (n, s = !1) => {
-        Fe(n), A(n, s), ue(), Y();
+        Fe(n), A(n, s), se(), Y();
       },
-      [ue, Fe, Y, A]
+      [se, Fe, Y, A]
     ), G = R(() => {
-      F || V ? ce({
+      F || V ? ue({
         angleX: F || 0,
         angleY: V || 0
       }) : (_.current = void 0, requestAnimationFrame(() => {
-        P.current && (P.current.style.transform = `translateX(${S ? "50%" : "-100%"})`), D.current && (D.current.style.transform = "translateX(0%)", D.current.style.opacity = "0"), Q.current && (Q.current.style.transform = "rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)");
+        P.current && (P.current.style.transform = `translateX(${S ? "50%" : "-100%"})`), D.current && (D.current.style.transform = "translateX(0%) translateY(0%)", D.current.style.opacity = "0"), Q.current && (Q.current.style.transform = "rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)");
       }));
-    }, [F, V, S, ce]), Te = R(
+    }, [F, V, S, ue]), Te = R(
       (n, s) => {
@@ -909,4 +912,4 @@ if (!s)
           l.bottom
-        ), Xe = (Ue - l.left) / l.width, qe = (Me - l.top) / l.height;
-        _.current = { offsetX: Xe, offsetY: qe };
+        ), Xe = (Ue - l.left) / l.width, Be = (Me - l.top) / l.height;
+        _.current = { offsetX: Xe, offsetY: Be };
       },
@@ -920,15 +923,15 @@ [k]
       () => ({
-        tilt: ce,
+        tilt: ue,
         reset: G,
         angle: () => M(!1),
         updateWillChange: $,
-        element: H.current
+        element: J.current
       }),
-      [ce, G, $, M]
+      [ue, G, $, M]
     );
     const he = R(() => {
-      w || (se.current = !0, $());
+      w || (fe.current = !0, $());
     }, [w, $]), ye = R(() => {
-      w || (J && !k && (typeof J == "boolean" ? document.body.style.overflow = "hidden" : J.style.overflow = "hidden"), se.current = !0, $());
-    }, [J, w, k, $]), ge = R(
+      w || (z && !k && (typeof z == "boolean" ? document.body.style.overflow = "hidden" : z.style.overflow = "hidden"), fe.current = !0, $());
+    }, [z, w, k, $]), ge = R(
       (n) => {
@@ -938,3 +941,3 @@ w || (Te(
           n.currentTarget
-        ), A(M()), ue(), Y());
+        ), A(M()), se(), Y());
       },
@@ -946,3 +949,3 @@ [
         A,
-        ue,
+        se,
         Y
@@ -961,3 +964,3 @@ ]
           n.currentTarget
-        ), A(M()), ue(), Y());
+        ), A(M()), se(), Y());
       },
@@ -969,11 +972,11 @@ [
         A,
-        ue,
+        se,
         Y
       ]
-    ), le = R(() => {
-      w || (se.current = !1, $(!1), be && G());
+    ), ce = R(() => {
+      w || (fe.current = !1, $(!1), be && G());
     }, [w, G, be, $]), L = R(() => {
-      w || (J && !k && (typeof J == "boolean" ? document.body.style.overflow = "" : J.style.overflow = ""), se.current = !1, $(!1), be && G());
+      w || (z && !k && (typeof z == "boolean" ? document.body.style.overflow = "" : z.style.overflow = ""), fe.current = !1, $(!1), be && G());
     }, [
-      J,
+      z,
       w,
@@ -992,3 +995,3 @@ k,
         const l = ir(s);
-        l && (s = l, s.addEventListener("mouseenter", he), s.addEventListener("mousemove", ge), s.addEventListener("mouseleave", le), s.addEventListener("touchstart", ye, { passive: !0 }), s.addEventListener("touchmove", ee, { passive: !0 }), s.addEventListener("touchend", L, { passive: !0 }));
+        l && (s = l, s.addEventListener("mouseenter", he), s.addEventListener("mousemove", ge), s.addEventListener("mouseleave", ce), s.addEventListener("touchstart", ye, { passive: !0 }), s.addEventListener("touchmove", ee, { passive: !0 }), s.addEventListener("touchend", L, { passive: !0 }));
       }
@@ -998,3 +1001,3 @@ return () => {
           const l = ir(s);
-          l && (s = l, s.removeEventListener("mouseenter", he), s.removeEventListener("mousemove", ge), s.removeEventListener("mouseleave", le), s.removeEventListener("touchstart", ye), s.removeEventListener("touchmove", ee), s.removeEventListener("touchend", L));
+          l && (s = l, s.removeEventListener("mouseenter", he), s.removeEventListener("mousemove", ge), s.removeEventListener("mouseleave", ce), s.removeEventListener("touchstart", ye), s.removeEventListener("touchmove", ee), s.removeEventListener("touchend", L));
         }
@@ -1006,3 +1009,3 @@ };
       ge,
-      le,
+      ce,
       ye,
@@ -1015,6 +1018,6 @@ ee,
       (n) => {
-        if (se.current || n.beta === null && n.gamma === null)
+        if (fe.current || n.beta === null && n.gamma === null)
           return;
         let s = j && n.beta ? X(-n.beta, -j, j) : F || 0, l = N && n.gamma ? X(n.gamma, -N, N) : V || 0;
-        ke && (s = -s, l = -l), ce({ angleX: s, angleY: l });
+        ke && (s = -s, l = -l), ue({ angleX: s, angleY: l });
       },
@@ -1027,3 +1030,3 @@ [
         ke,
-        ce
+        ue
       ]
@@ -1038,5 +1041,5 @@ );
         ref: (n) => {
-          n && (H.current = n, (F || V) && !_.current && G());
+          n && (J.current = n, (F || V) && !_.current && G());
         },
-        "data-testid": oe ? "container" : void 0,
+        "data-testid": ae ? "container" : void 0,
         style: Object.assign(
@@ -1058,8 +1061,8 @@ {
         } : he : ve,
-        onTouchStart: Z ? fe ? (n) => {
-          ye(), fe(n);
-        } : ye : fe,
-        onMouseMove: Z ? ie ? (n) => {
-          ge(n), ie(n);
-        } : ge : ie,
+        onTouchStart: Z ? ie ? (n) => {
+          ye(), ie(n);
+        } : ye : ie,
+        onMouseMove: Z ? oe ? (n) => {
+          ge(n), oe(n);
+        } : ge : oe,
         onTouchMove: Z ? $e ? (n) => {
@@ -1069,4 +1072,4 @@ ee(n), $e(n);
         onMouseLeave: Z ? pe ? (n) => {
-          le(), pe(n);
-        } : le : pe,
+          ce(), pe(n);
+        } : ce : pe,
         onTouchEnd: Z ? we ? (n) => {
@@ -1080,3 +1083,3 @@ L(), we(n);
             ref: Q,
-            "data-testid": oe ? "tilt" : void 0,
+            "data-testid": ae ? "tilt" : void 0,
             style: Object.assign(
@@ -1098,7 +1101,7 @@ {
             children: [
-              Ae,
+              He,
               ze && /* @__PURE__ */ te.jsx(
                 "div",
                 {
-                  "data-testid": oe ? "spot-glare-container" : void 0,
+                  "data-testid": ae ? "spot-glare-container" : void 0,
                   style: {
@@ -1111,3 +1114,3 @@ pointerEvents: "none",
                     backfaceVisibility: "hidden",
-                    mixBlendMode: ae
+                    mixBlendMode: ne
                   },
@@ -1118,13 +1121,12 @@ children: /* @__PURE__ */ te.jsx(
                       ref: D,
-                      "data-testid": oe ? "spot-glare" : void 0,
+                      "data-testid": ae ? "spot-glare" : void 0,
                       style: {
                         position: "absolute",
-                        left: "-100%",
-                        top: "-100%",
+                        left: y === "all" ? "-50%" : "-100%",
+                        top: y === "all" ? "-50%" : "-100%",
                         width: "200%",
                         height: "200%",
-                        filter: ne ? `blur(${q})` : void 0,
                         transition: Re,
                         backgroundImage: `radial-gradient(${Je}, transparent)`,
-                        transform: "translateX(0%)",
+                        transform: "translateX(0%) translateY(0%)",
                         opacity: "0"
@@ -1139,3 +1141,3 @@ }
                 {
-                  "data-testid": oe ? "line-glare-container" : void 0,
+                  "data-testid": ae ? "line-glare-container" : void 0,
                   style: {
@@ -1153,3 +1155,3 @@ pointerEvents: "none",
                     {
-                      "data-testid": oe ? "line-glare" : void 0,
+                      "data-testid": ae ? "line-glare" : void 0,
                       ref: P,
@@ -1162,3 +1164,3 @@ style: {
                         height: "200%",
-                        filter: ne ? `blur(${q})` : "",
+                        filter: le ? `blur(${H})` : "",
                         transition: Re,
@@ -1181,3 +1183,3 @@ opacity: String(b),
   Rr,
-  (a, o) => Be(a, o)
+  (a, o) => qe(a, o)
 );
@@ -1184,0 +1186,0 @@ wr.displayName = "Tilt";

package.json

 {
   "name": "react-next-tilt",
   "private": false,
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A Performant Customizable Tilt Component for React",
@@ -6,0 +6,0 @@ "main": "./dist/react-next-tilt.umd.cjs",

README.md

@@ -103,3 +103,3 @@ <h1 align="center">
 
-<table aria-hidden="false" ><thead><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th></tr></thead><tbody><tr><td><span>width</span></td><td><div><span>Width of the component</span></div><div><span>note: You can also set the width using "className", "style", etc. instead of using this property</span></div><div>example: 100, '200px', '10rem', '20%'</div><div><div><code><span>string</span> | <span>number</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>height</span></td><td><div><span>Height of the component</span></div><div><span>note: You can also set the height using "className", "style", etc. instead of using this property</span></div><div>example: 100, '200px', '10rem', '20%'</div><div><div><code><span>string</span> | <span>number</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>borderRadius</span></td><td><div><span>Border radius of the component (applied to glare elements as well)</span></div><div>example: '4px', '1em', '2rem'</div><div><div><code><span>string</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>perspective</span></td><td><div><span>Determines how far the elements are from the user</span></div><div>example: '1000px', '60em', '50rem'</div><div><div><code><span>string</span></code></div></div></td><td><div><span>"1000px"</span></div></td></tr><tr><td><span>scale</span></td><td><div><span>Amount of scale applied to the component on hover/touch</span></div><div><div><code><span>number</span></div></code></div></td><td><div><span>1</span></div></td></tr><tr><td><span>lineGlareEnable</span></td><td><div><span>Enables/Disables the line glare effect</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>true</span></div></td></tr><tr><td><span>lineGlareBlurEnable</span></td><td><div><span>Enables/Disables the blur applied to the line glare effect</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>true</span></div></td></tr><tr><td><span>lineGlareBlurAmount</span></td><td><div><span>Amount of blur applied to the line glare effect</span></div><div>example: '4px', '1em', '2rem'</div><div><div><code><span>string</span></code></div></div></td><td><div><span>"4px"</span></div></td></tr><tr><td><span>lineGlareWidthPercent</span></td><td><div><span>Width of the line glare in relation to the component</span></div><div><div><code><span>number</span></code></div></div></td><td><div><span>10</span></div></td></tr><tr><td><span>lineGlareMaxOpacity</span></td><td><div><span>Maximum opacity of the line glare effect</span></div><div><div><code><span>number</span></code></div></div></td><td><div><span>0.1</span></div></td></tr><tr><td><span>lineGlareMixBlendMode</span></td><td><div><span><code>mix-blend-mode</code> applied to the line glare effect</span></div><div>note: Using a "mix-blend-mode" other than "normal" will break the parallax effect</div><div><div><code><span>string (Property.MixBlendMode)</span></code></div></div></td><td><div><span>"normal"</span></div></td></tr><tr><td><span>lineGlareColor</span></td><td><div><span>Color of the line glare effect</span></div><div>example: 'lightblue', '#445566AA', 'rgba(50,150,250,0.5)', 'hsla(100,50%,50%,0.2)'</div><div><div><code><span>string (Property.Color)</span></code></div></div></td><td><div><span>"white"</span></div></td></tr><tr><td><span>lineGlareReverse</span></td><td><div><span>Reverses the movement of the line glare effect</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>false</span></div></td></tr><tr><td><span>lineGlareDirection</span></td><td><div><span>Changes the direction/angle of the line glare effect</span></div><div><div><code><span>"to-bottom-right"</span> | <span>"to-bottom-left"</span></div></div></td><td><div><span>"to-bottom-right"</span></code></div></td></tr><tr><td><span>lineGlareHoverPosition</span></td><td><div><span>Determines the areas of the component that show the line glare effect when hovered/touched</span></div><div><div><code><span>"top-left"</span> | <span>"top-right"</span> | <span>"bottom-left"</span> | <span>"bottom-right"</span></code></div></div></td><td><div><span>"top-left"</span></div></td></tr><tr><td><span>spotGlareEnable</span></td><td><div><span>Enables/Disables the spot glare effect</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>true</span></div></td></tr><tr><td><span>spotGlareMaxOpacity</span></td><td><div><span>Maximum opacity of the spot glare effect</span></div><div><div><code><span>number</span></code></div></div></td><td><div><span>0.5</span></div></td></tr><tr><td><span>spotGlareMixBlendMode</span></td><td><div><span><code>mix-blend-mode</code> applied to the spot glare effect</span></div><div>note: Using a "mix-blend-mode" other than "normal" will break the parallax effect</div><div><div><code><span>string (Property.MixBlendMode)</span></code></div></div></td><td><div><span>"normal"</span></div></td></tr><tr><td><span>spotGlarePosition</span></td><td><div><span>Determines the position of the spot glare effect inside the component</span></div><div><div><code><span>"top"</span> | <span>"right"</span> | <span>"bottom"</span> | <span>"left"</span></code></div></div></td><td><div><span>"top"</span></div></td></tr><tr><td><span>spotGlareColor</span></td><td><div><span>Color of the line glare effect</span></div><div>example: 'lightblue', '#445566AA', 'rgba(50,150,250,0.5)', 'hsla(100,50%,50%,0.2)'</div><div><div><code><span>string (Property.Color)</span></code></div></div></td><td><div><span>"white"</span></div></td></tr><tr><td><span>spotGlareReverse</span></td><td><div><span>Reverses the movement of the spot glare effect</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>false</span></div></td></tr><tr><td><span>tiltMaxAngleX</span></td><td><div><span>Maximum tilt angle around the X axis between 0 to 90</span></div><div>note: Setting to 0 will disable rotation around the X axis</div><div><div><code><span>number</span></code></div></div></td><td><div><span>20</span></div></td></tr><tr><td><span>tiltMaxAngleY</span></td><td><div><span>Maximum tilt angle around the Y axis between 0 to 90</span></div><div>note: Setting to 0 will disable rotation around the Y axis</div><div><div><code><span>number</span></code></div></div></td><td><div><span>20</span></div></td></tr><tr><td><span>tiltReverse</span></td><td><div><span>Reverses the tilt direction/movement</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>false</span></div></td></tr><tr><td><span>tiltReset</span></td><td><div><span>Enables/Disables resetting the tilt effect on mouseLeave/touchEnd</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>true</span></div></td></tr><tr><td><span>initialAngleX</span></td><td><div><span>Initial tilt/rotation angle around the X axis</span></div><div>note: Is limited to [-tiltMaxAngleX - tiltMaxAngleX] range</div><div><div><code><span>number</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>initialAngleY</span></td><td><div><span>Initial tilt/rotation angle around the Y axis</span></div><div>note: Is limited to [-tiltMaxAngleY - tiltMaxAngleY] range</div><div><div><code><span>number</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>disableScrollOnTouch</span></td><td><div><span>Disables scrolling (<code>overflow: hidden</code>) during touch inetraction to prevent unwanted movement</span></div><div>note: Disables scrolling on "body" if set to "boolean". You can also pass an "HTMLElement" which scrolling will be disabled for, instead of "body"</div><div><div><code><span>boolean</span> | <span>HTMLElement</span></code></div></div></td><td><div><span>true</span></div></td></tr><tr><td><span>style</span></td><td><div><span>Style passed to the component's container element</span></div><div><div><code><span>CSSProperties</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>tiltStyle</span></td><td><div><span>Style passed to the component's tilt element</span></div><div><div><code><span>CSSProperties</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>tiltProps</span></td><td><div><span>Properties passed to the tilt element</span></div><div><code><span>HTMLAttributes&lt;HTMLDivElement&gt; &amp; { [data: `data-${string}`]: string; }</span></code></div></td><td><span>-</span></td></tr><tr><td><span>gyroMaxAngleX</span></td><td><div><span>Maximum tilt angle around the X axis for gyroscope between 0 to 90</span></div><div>note: Setting to 0 will disable rotation around the X axis for gyroscope</div><div><div><code><span>number</span></code></div></div></td><td><div><span>0</span></div></td></tr><tr><td><span>gyroMaxAngleY</span></td><td><div><span>Maximum tilt angle around the Y axis for gyroscope between 0 to 90</span></div><div>note: Setting to 0 will disable rotation around the Y axis for gyroscope</div><div><div><code><span>number</span></code></div></div></td><td><div><span>0</span></div></td></tr><tr><td><span>gyroReverse</span></td><td><div><span>Reverses the tilt direction for gyroscope</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>false</span></div></td></tr><tr><td><span>disabled</span></td><td><div><span>Disables the tilt effect and applies the disabledFilter to the container</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>false</span></div></td></tr><tr><td><span>disabledFilter</span></td><td><div><span>CSS filter applied to the container when <code>disabled = true</code></span></div><div><div><code><span>string</span></code></div></div></td><td><span>"grayscale(1) brightness(125%)"</span></td></tr><tr><td><span>CSSTransition</span></td><td><div><span>CSS transition applied to the tilt, line glare, and spot glare elements</span></div><div><code><span>string</span></code></div></td><td><span>"all 0.4s cubic-bezier(0.03, 0.98, 0.52, 0.99)"</span></td></tr><tr><td><span>TiltWrapper</span></td><td><div><span>Component wrapping the tilt element</span></div><div>note: Is useful when integrating this component into another component</div><div><code><span>FC<{ children?: ReactNode; }></span></code></div></td><td><span>({ children }: PropsWithChildren) =&gt; &lt;&gt;{children}&lt;/&gt;</span></td></tr><tr><td><span>fullPageListening</span></td><td><div><span>Enables/Disables full-page listening. This component's event handlers will be added to the "document"</span></div><div>note: If set to "true", "controlElement", "controlElementOnly", and "disableScrollOnTouch" properties will have no effect</div><div><code><span>boolean</span></code></div></td><td><span>false</span></td></tr><tr><td><span>controlElement</span></td><td><div><span>	
+<table aria-hidden="false" ><thead><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th></tr></thead><tbody><tr><td><span>width</span></td><td><div><span>Width of the component</span></div><div><span>note: You can also set the width using "className", "style", etc. instead of using this property</span></div><div>example: 100, '200px', '10rem', '20%'</div><div><div><code><span>string</span> | <span>number</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>height</span></td><td><div><span>Height of the component</span></div><div><span>note: You can also set the height using "className", "style", etc. instead of using this property</span></div><div>example: 100, '200px', '10rem', '20%'</div><div><div><code><span>string</span> | <span>number</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>borderRadius</span></td><td><div><span>Border radius of the component (applied to glare elements as well)</span></div><div>example: '4px', '1em', '2rem'</div><div><div><code><span>string</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>perspective</span></td><td><div><span>Determines how far the elements are from the user</span></div><div>example: '1000px', '60em', '50rem'</div><div><div><code><span>string</span></code></div></div></td><td><div><span>"1000px"</span></div></td></tr><tr><td><span>scale</span></td><td><div><span>Amount of scale applied to the component on hover/touch</span></div><div><div><code><span>number</span></div></code></div></td><td><div><span>1</span></div></td></tr><tr><td><span>lineGlareEnable</span></td><td><div><span>Enables/Disables the line glare effect</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>true</span></div></td></tr><tr><td><span>lineGlareBlurEnable</span></td><td><div><span>Enables/Disables the blur applied to the line glare effect</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>true</span></div></td></tr><tr><td><span>lineGlareBlurAmount</span></td><td><div><span>Amount of blur applied to the line glare effect</span></div><div>example: '4px', '1em', '2rem'</div><div><div><code><span>string</span></code></div></div></td><td><div><span>"4px"</span></div></td></tr><tr><td><span>lineGlareWidthPercent</span></td><td><div><span>Width of the line glare in relation to the component</span></div><div><div><code><span>number</span></code></div></div></td><td><div><span>10</span></div></td></tr><tr><td><span>lineGlareMaxOpacity</span></td><td><div><span>Maximum opacity of the line glare effect</span></div><div><div><code><span>number</span></code></div></div></td><td><div><span>0.1</span></div></td></tr><tr><td><span>lineGlareMixBlendMode</span></td><td><div><span><code>mix-blend-mode</code> applied to the line glare effect</span></div><div>note: Using a "mix-blend-mode" other than "normal" will break the parallax effect</div><div><div><code><span>string (Property.MixBlendMode)</span></code></div></div></td><td><div><span>"normal"</span></div></td></tr><tr><td><span>lineGlareColor</span></td><td><div><span>Color of the line glare effect</span></div><div>example: 'lightblue', '#445566AA', 'rgba(50,150,250,0.5)', 'hsla(100,50%,50%,0.2)'</div><div><div><code><span>string (Property.Color)</span></code></div></div></td><td><div><span>"white"</span></div></td></tr><tr><td><span>lineGlareReverse</span></td><td><div><span>Reverses the movement of the line glare effect</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>false</span></div></td></tr><tr><td><span>lineGlareDirection</span></td><td><div><span>Changes the direction/angle of the line glare effect</span></div><div><div><code><span>"to-bottom-right"</span> | <span>"to-bottom-left"</span></div></div></td><td><div><span>"to-bottom-right"</span></code></div></td></tr><tr><td><span>lineGlareHoverPosition</span></td><td><div><span>Determines the areas of the component that show the line glare effect when hovered/touched</span></div><div><div><code><span>"top-left"</span> | <span>"top-right"</span> | <span>"bottom-left"</span> | <span>"bottom-right"</span></code></div></div></td><td><div><span>"top-left"</span></div></td></tr><tr><td><span>spotGlareEnable</span></td><td><div><span>Enables/Disables the spot glare effect</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>true</span></div></td></tr><tr><td><span>spotGlareMaxOpacity</span></td><td><div><span>Maximum opacity of the spot glare effect</span></div><div><div><code><span>number</span></code></div></div></td><td><div><span>0.5</span></div></td></tr><tr><td><span>spotGlareMixBlendMode</span></td><td><div><span><code>mix-blend-mode</code> applied to the spot glare effect</span></div><div>note: Using a "mix-blend-mode" other than "normal" will break the parallax effect</div><div><div><code><span>string (Property.MixBlendMode)</span></code></div></div></td><td><div><span>"normal"</span></div></td></tr><tr><td><span>spotGlarePosition</span></td><td><div><span>Determines the position of the spot glare effect inside the component</span></div><div><div><code><span>"top"</span> | <span>"right"</span> | <span>"bottom"</span> | <span>"left"</span> | <span>"all"</span></code></div></div></td><td><div><span>"top"</span></div></td></tr><tr><td><span>spotGlareColor</span></td><td><div><span>Color of the line glare effect</span></div><div>example: 'lightblue', '#445566AA', 'rgba(50,150,250,0.5)', 'hsla(100,50%,50%,0.2)'</div><div><div><code><span>string (Property.Color)</span></code></div></div></td><td><div><span>"white"</span></div></td></tr><tr><td><span>spotGlareReverse</span></td><td><div><span>Reverses the movement of the spot glare effect</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>false</span></div></td></tr><tr><td><span>tiltMaxAngleX</span></td><td><div><span>Maximum tilt angle around the X axis between 0 to 90</span></div><div>note: Setting to 0 will disable rotation around the X axis</div><div><div><code><span>number</span></code></div></div></td><td><div><span>20</span></div></td></tr><tr><td><span>tiltMaxAngleY</span></td><td><div><span>Maximum tilt angle around the Y axis between 0 to 90</span></div><div>note: Setting to 0 will disable rotation around the Y axis</div><div><div><code><span>number</span></code></div></div></td><td><div><span>20</span></div></td></tr><tr><td><span>tiltReverse</span></td><td><div><span>Reverses the tilt direction/movement</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>false</span></div></td></tr><tr><td><span>tiltReset</span></td><td><div><span>Enables/Disables resetting the tilt effect on mouseLeave/touchEnd</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>true</span></div></td></tr><tr><td><span>initialAngleX</span></td><td><div><span>Initial tilt/rotation angle around the X axis</span></div><div>note: Is limited to [-tiltMaxAngleX - tiltMaxAngleX] range</div><div><div><code><span>number</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>initialAngleY</span></td><td><div><span>Initial tilt/rotation angle around the Y axis</span></div><div>note: Is limited to [-tiltMaxAngleY - tiltMaxAngleY] range</div><div><div><code><span>number</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>disableScrollOnTouch</span></td><td><div><span>Disables scrolling (<code>overflow: hidden</code>) during touch inetraction to prevent unwanted movement</span></div><div>note: Disables scrolling on "body" if set to "boolean". You can also pass an "HTMLElement" which scrolling will be disabled for, instead of "body"</div><div><div><code><span>boolean</span> | <span>HTMLElement</span></code></div></div></td><td><div><span>true</span></div></td></tr><tr><td><span>style</span></td><td><div><span>Style passed to the component's container element</span></div><div><div><code><span>CSSProperties</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>tiltStyle</span></td><td><div><span>Style passed to the component's tilt element</span></div><div><div><code><span>CSSProperties</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>tiltProps</span></td><td><div><span>Properties passed to the tilt element</span></div><div><code><span>HTMLAttributes&lt;HTMLDivElement&gt; &amp; { [data: `data-${string}`]: string; }</span></code></div></td><td><span>-</span></td></tr><tr><td><span>gyroMaxAngleX</span></td><td><div><span>Maximum tilt angle around the X axis for gyroscope between 0 to 90</span></div><div>note: Setting to 0 will disable rotation around the X axis for gyroscope</div><div><div><code><span>number</span></code></div></div></td><td><div><span>0</span></div></td></tr><tr><td><span>gyroMaxAngleY</span></td><td><div><span>Maximum tilt angle around the Y axis for gyroscope between 0 to 90</span></div><div>note: Setting to 0 will disable rotation around the Y axis for gyroscope</div><div><div><code><span>number</span></code></div></div></td><td><div><span>0</span></div></td></tr><tr><td><span>gyroReverse</span></td><td><div><span>Reverses the tilt direction for gyroscope</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>false</span></div></td></tr><tr><td><span>disabled</span></td><td><div><span>Disables the tilt effect and applies the disabledFilter to the container</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>false</span></div></td></tr><tr><td><span>disabledFilter</span></td><td><div><span>CSS filter applied to the container when <code>disabled = true</code></span></div><div><div><code><span>string</span></code></div></div></td><td><span>"grayscale(1) brightness(125%)"</span></td></tr><tr><td><span>CSSTransition</span></td><td><div><span>CSS transition applied to the tilt, line glare, and spot glare elements</span></div><div><code><span>string</span></code></div></td><td><span>"all 0.4s cubic-bezier(0.03, 0.98, 0.52, 0.99)"</span></td></tr><tr><td><span>TiltWrapper</span></td><td><div><span>Component wrapping the tilt element</span></div><div>note: Is useful when integrating this component into another component</div><div><code><span>FC<{ children?: ReactNode; }></span></code></div></td><td><span>({ children }: PropsWithChildren) =&gt; &lt;&gt;{children}&lt;/&gt;</span></td></tr><tr><td><span>fullPageListening</span></td><td><div><span>Enables/Disables full-page listening. This component's event handlers will be added to the "document"</span></div><div>note: If set to "true", "controlElement", "controlElementOnly", and "disableScrollOnTouch" properties will have no effect</div><div><code><span>boolean</span></code></div></td><td><span>false</span></td></tr><tr><td><span>controlElement</span></td><td><div><span>	
 Element(s) that control(s) this component. This component's event handlers will be added to them</span></div><div>note: You can pass an HTMLElement, a ref, or an array of them</div><div><span>This property will have no effect if "fullPageListening" is set to "true"</span></div><div>example: element, ref, [element, ref], [ref1, ref2]</div><div><code><span>HTMLElement | RefObject&lt;HTMLElement&gt; | (HTMLElement | RefObject&lt;HTMLElement&gt;)[]</span></code></div></td><td><span>-</span></td></tr><tr><td><span>controlElementOnly</span></td><td><div><span>If set to "true", events will be disabled for the component and it will be controlled by the controlElement(s) only</span></div><div><span>This property will have no effect if "fullPageListening" is set to "true"</span></div><div><code><span>boolean</span></code></div></td><td><span>false</span></td></tr><tr><td><span>testIdEnable</span></td><td><div><span>Adds the <code>data-testid=...</code> property to all elements for testing purposes</span></div><div>note: Can also be used to select/grab and modify each element if you want to do heavy customization</div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>false</span></div></td></tr></tbody></table>
@@ -106,0 +106,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

100544

increased by0.4%

Lines of code

1702

increased by0.18%

No dependency changes