react-next-tilt - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

dist/index.d.ts

@@ -105,2 +105,20 @@ import { HTMLAttributes, CSSProperties, PropsWithChildren, MouseEventHandler, TouchEventHandler, FocusEventHandler, FC, RefObject } from 'react';
     /**
+     * Enables/Disables the box shadow applied to the tilt element on hover/touch
+     *
+     * @default false
+     *
+     * @see {@link https://rashidshamloo.github.io/react-next-tilt/?path=/story/tilt-react-next-tilt--shadow Storybook}
+     */
+    shadowEnable?: boolean;
+    /**
+     * Box shadow applied to the tilt element on hover/touch
+     *
+     * @default '0 0 1rem rgba(0,0,0,0.5)'
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow MDN - box-shadow}
+     *
+     * @see {@link https://rashidshamloo.github.io/react-next-tilt/?path=/story/tilt-react-next-tilt--shadow Storybook}
+     */
+    shadow?: string;
+    /**
      * Enables/Disables the line glare effect
@@ -234,3 +252,3 @@ *
      *
-     * @example 'top', 'bottom', 'left', 'right'
+     * @example 'top', 'bottom', 'left', 'right', 'all'
      *
@@ -237,0 +255,0 @@ * @see {@link https://rashidshamloo.github.io/react-next-tilt/?path=/story/tilt-react-next-tilt--spot-glare Storybook}

dist/react-next-tilt.js

@@ -1,3 +0,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 Ge = { exports: {} }, De = {};
+import ur, { forwardRef as pr, useRef as Ce, useCallback as b, useMemo as ar, useImperativeHandle as mr, useEffect as or, memo as hr } from "react";
+var tr = { exports: {} }, Le = {};
 /**
@@ -12,21 +12,21 @@ * @license React
  */
-var ar;
+var ir;
 function yr() {
-  if (ar)
-    return De;
-  ar = 1;
-  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 le(H, b, C) {
-    var O, x = {}, S = null, _e = null;
-    C !== void 0 && (S = "" + C), b.key !== void 0 && (S = "" + b.key), b.ref !== void 0 && (_e = b.ref);
-    for (O in b)
-      i.call(b, O) && !m.hasOwnProperty(O) && (x[O] = b[O]);
-    if (H && H.defaultProps)
-      for (O in b = H.defaultProps, b)
-        x[O] === void 0 && (x[O] = b[O]);
-    return { $$typeof: o, type: H, key: S, ref: _e, props: x, _owner: h.current };
+  if (ir)
+    return Le;
+  ir = 1;
+  var a = ur, o = Symbol.for("react.element"), v = Symbol.for("react.fragment"), i = Object.prototype.hasOwnProperty, m = a.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, h = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function oe(C, R, ie) {
+    var j, w = {}, K = null, he = null;
+    ie !== void 0 && (K = "" + ie), R.key !== void 0 && (K = "" + R.key), R.ref !== void 0 && (he = R.ref);
+    for (j in R)
+      i.call(R, j) && !h.hasOwnProperty(j) && (w[j] = R[j]);
+    if (C && C.defaultProps)
+      for (j in R = C.defaultProps, R)
+        w[j] === void 0 && (w[j] = R[j]);
+    return { $$typeof: o, type: C, key: K, ref: he, props: w, _owner: m.current };
   }
-  return De.Fragment = v, De.jsx = le, De.jsxs = le, De;
+  return Le.Fragment = v, Le.jsx = oe, Le.jsxs = oe, Le;
 }
-var Pe = {};
+var Ie = {};
 /**
@@ -41,23 +41,23 @@ * @license React
  */
-var or;
+var fr;
 function gr() {
-  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"), 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) {
+  return fr || (fr = 1, process.env.NODE_ENV !== "production" && function() {
+    var a = ur, o = Symbol.for("react.element"), v = Symbol.for("react.portal"), i = Symbol.for("react.fragment"), m = Symbol.for("react.strict_mode"), h = Symbol.for("react.profiler"), oe = Symbol.for("react.provider"), C = Symbol.for("react.context"), R = Symbol.for("react.forward_ref"), ie = Symbol.for("react.suspense"), j = Symbol.for("react.suspense_list"), w = Symbol.for("react.memo"), K = Symbol.for("react.lazy"), he = Symbol.for("react.offscreen"), fe = Symbol.iterator, Qe = "@@iterator";
+    function Ve(e) {
       if (e === null || typeof e != "object")
         return null;
-      var r = Se && e[Se] || e[ze];
+      var r = fe && e[fe] || e[Qe];
       return typeof r == "function" ? r : null;
     }
-    var ne = a.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-    function y(e) {
+    var se = a.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    function E(e) {
       {
         for (var r = arguments.length, t = new Array(r > 1 ? r - 1 : 0), f = 1; f < r; f++)
           t[f - 1] = arguments[f];
-        Je("error", e, t);
+        Me("error", e, t);
       }
     }
-    function Je(e, r, t) {
+    function Me(e, r, t) {
       {
-        var f = ne.ReactDebugCurrentFrame, d = f.getStackAddendum();
+        var f = se.ReactDebugCurrentFrame, d = f.getStackAddendum();
         d !== "" && (r += "%s", t = t.concat([d]));
@@ -70,12 +70,12 @@ var p = t.map(function(c) {
     }
-    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 || 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
+    var ye = !1, Ge = !1, We = !1, N = !1, B = !1, ke;
+    ke = Symbol.for("react.module.reference");
+    function be(e) {
+      return !!(typeof e == "string" || typeof e == "function" || e === i || e === h || B || e === m || e === ie || e === j || N || e === he || ye || Ge || We || typeof e == "object" && e !== null && (e.$$typeof === K || e.$$typeof === w || e.$$typeof === oe || e.$$typeof === C || e.$$typeof === R || // This needs to include all possible module reference object
       // types supported by any Flight configuration anywhere since
       // we don't know which Flight build this will end up being used
       // with.
-      e.$$typeof === F || e.getModuleId !== void 0));
+      e.$$typeof === ke || e.getModuleId !== void 0));
     }
-    function z(e, r, t) {
+    function L(e, r, t) {
       var f = e.displayName;
@@ -87,9 +87,9 @@ if (f)
     }
-    function Ve(e) {
+    function $(e) {
       return e.displayName || "Context";
     }
-    function W(e) {
+    function _(e) {
       if (e == null)
         return null;
-      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")
+      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")
         return e.displayName || e.name || null;
@@ -103,9 +103,9 @@ if (typeof e == "string")
           return "Portal";
+        case h:
+          return "Profiler";
         case m:
-          return "Profiler";
-        case h:
           return "StrictMode";
-        case C:
+        case ie:
           return "Suspense";
-        case O:
+        case j:
           return "SuspenseList";
@@ -115,17 +115,17 @@ }
         switch (e.$$typeof) {
-          case H:
+          case C:
             var r = e;
-            return Ve(r) + ".Consumer";
-          case le:
+            return $(r) + ".Consumer";
+          case oe:
             var t = e;
-            return Ve(t._context) + ".Provider";
-          case b:
-            return z(e, e.render, "ForwardRef");
-          case x:
+            return $(t._context) + ".Provider";
+          case R:
+            return L(e, e.render, "ForwardRef");
+          case w:
             var f = e.displayName || null;
-            return f !== null ? f : W(e.type) || "Memo";
-          case S: {
+            return f !== null ? f : _(e.type) || "Memo";
+          case K: {
             var d = e, p = d._payload, c = d._init;
             try {
-              return W(c(p));
+              return _(c(p));
             } catch {
@@ -138,14 +138,14 @@ return null;
     }
-    var K = Object.assign, j = 0, N, ke, w, We, Re, Ne, k;
-    function U() {
+    var Z = Object.assign, ge = 0, Ne, I, V, xe, O, Be, Re;
+    function Ue() {
     }
-    U.__reactDisabledLog = !0;
-    function Ae() {
+    Ue.__reactDisabledLog = !0;
+    function F() {
       {
-        if (j === 0) {
-          N = console.log, ke = console.info, w = console.warn, We = console.error, Re = console.group, Ne = console.groupCollapsed, k = console.groupEnd;
+        if (ge === 0) {
+          Ne = console.log, I = console.info, V = console.warn, xe = console.error, O = console.group, Be = console.groupCollapsed, Re = console.groupEnd;
           var e = {
             configurable: !0,
             enumerable: !0,
-            value: U,
+            value: Ue,
             writable: !0
@@ -163,8 +163,8 @@ };
         }
-        j++;
+        ge++;
       }
     }
-    function ae() {
+    function U() {
       {
-        if (j--, j === 0) {
+        if (ge--, ge === 0) {
           var e = {
@@ -176,32 +176,32 @@ configurable: !0,
           Object.defineProperties(console, {
-            log: K({}, e, {
-              value: N
+            log: Z({}, e, {
+              value: Ne
             }),
-            info: K({}, e, {
-              value: ke
+            info: Z({}, e, {
+              value: I
             }),
-            warn: K({}, e, {
-              value: w
+            warn: Z({}, e, {
+              value: V
             }),
-            error: K({}, e, {
-              value: We
+            error: Z({}, e, {
+              value: xe
             }),
-            group: K({}, e, {
-              value: Re
+            group: Z({}, e, {
+              value: O
             }),
-            groupCollapsed: K({}, e, {
-              value: Ne
+            groupCollapsed: Z({}, e, {
+              value: Be
             }),
-            groupEnd: K({}, e, {
-              value: k
+            groupEnd: Z({}, e, {
+              value: Re
             })
           });
         }
-        j < 0 && y("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
+        ge < 0 && E("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
       }
     }
-    var de = ne.ReactCurrentDispatcher, ve;
-    function oe(e, r, t) {
+    var $e = se.ReactCurrentDispatcher, X;
+    function ue(e, r, t) {
       {
-        if (ve === void 0)
+        if (X === void 0)
           try {
@@ -211,18 +211,18 @@ throw Error();
             var f = d.stack.trim().match(/\n( *(at )?)/);
-            ve = f && f[1] || "";
+            X = f && f[1] || "";
           }
         return `
-` + ve + e;
+` + X + e;
       }
     }
-    var pe = !1, ie;
+    var Ee = !1, ce;
     {
-      var $e = typeof WeakMap == "function" ? WeakMap : Map;
-      ie = new $e();
+      var Fe = typeof WeakMap == "function" ? WeakMap : Map;
+      ce = new Fe();
     }
     function we(e, r) {
-      if (!e || pe)
+      if (!e || Ee)
         return "";
       {
-        var t = ie.get(e);
+        var t = ce.get(e);
         if (t !== void 0)
@@ -232,7 +232,7 @@ return t;
       var f;
-      pe = !0;
+      Ee = !0;
       var d = Error.prepareStackTrace;
       Error.prepareStackTrace = void 0;
       var p;
-      p = de.current, de.current = null, Ae();
+      p = $e.current, $e.current = null, F();
       try {
@@ -250,4 +250,4 @@ if (r) {
               Reflect.construct(c, []);
-            } catch (re) {
-              f = re;
+            } catch (ne) {
+              f = ne;
             }
@@ -258,4 +258,4 @@ Reflect.construct(e, [], c);
               c.call();
-            } catch (re) {
-              f = re;
+            } catch (ne) {
+              f = ne;
             }
@@ -267,23 +267,23 @@ e.call(c.prototype);
             throw Error();
-          } catch (re) {
-            f = re;
+          } catch (ne) {
+            f = ne;
           }
           e();
         }
-      } catch (re) {
-        if (re && f && typeof re.stack == "string") {
-          for (var u = re.stack.split(`
-`), T = f.stack.split(`
-`), 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)
+      } catch (ne) {
+        if (ne && f && typeof ne.stack == "string") {
+          for (var u = ne.stack.split(`
+`), S = f.stack.split(`
+`), y = u.length - 1, g = S.length - 1; y >= 1 && g >= 0 && u[y] !== S[g]; )
+            g--;
+          for (; y >= 1 && g >= 0; y--, g--)
+            if (u[y] !== S[g]) {
+              if (y !== 1 || g !== 1)
                 do
-                  if (g--, E--, E < 0 || u[g] !== T[E]) {
-                    var 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;
+                  if (y--, g--, g < 0 || u[y] !== S[g]) {
+                    var Y = `
+` + u[y].replace(" at new ", " at ");
+                    return e.displayName && Y.includes("<anonymous>") && (Y = Y.replace("<anonymous>", e.displayName)), typeof e == "function" && ce.set(e, Y), Y;
                   }
-                while (g >= 1 && E >= 0);
+                while (y >= 1 && g >= 0);
               break;
@@ -293,11 +293,11 @@ }
       } finally {
-        pe = !1, de.current = p, ae(), Error.prepareStackTrace = d;
+        Ee = !1, $e.current = p, U(), Error.prepareStackTrace = d;
       }
-      var je = e ? e.displayName || e.name : "", rr = je ? oe(je) : "";
-      return typeof e == "function" && ie.set(e, rr), rr;
+      var Se = e ? e.displayName || e.name : "", nr = Se ? ue(Se) : "";
+      return typeof e == "function" && ce.set(e, nr), nr;
     }
-    function He(e, r, t) {
+    function De(e, r, t) {
       return we(e, !1);
     }
-    function Ke(e) {
+    function Pe(e) {
       var r = e.prototype;
@@ -310,18 +310,18 @@ return !!(r && r.isReactComponent);
       if (typeof e == "function")
-        return we(e, Ke(e));
+        return we(e, Pe(e));
       if (typeof e == "string")
-        return oe(e);
+        return ue(e);
       switch (e) {
-        case C:
-          return oe("Suspense");
-        case O:
-          return oe("SuspenseList");
+        case ie:
+          return ue("Suspense");
+        case j:
+          return ue("SuspenseList");
       }
       if (typeof e == "object")
         switch (e.$$typeof) {
-          case b:
-            return He(e.render);
-          case x:
+          case R:
+            return De(e.render);
+          case w:
             return Oe(e.type, r, t);
-          case S: {
+          case K: {
             var f = e, d = f._payload, p = f._init;
@@ -336,13 +336,13 @@ try {
     }
-    var _ = Object.prototype.hasOwnProperty, fe = {}, Z = ne.ReactDebugCurrentFrame;
-    function J(e) {
+    var Te = Object.prototype.hasOwnProperty, Xe = {}, T = se.ReactDebugCurrentFrame;
+    function q(e) {
       if (e) {
         var r = e._owner, t = Oe(e.type, e._source, r ? r.type : null);
-        Z.setExtraStackFrame(t);
+        T.setExtraStackFrame(t);
       } else
-        Z.setExtraStackFrame(null);
+        T.setExtraStackFrame(null);
     }
-    function Q(e, r, t, f, d) {
+    function le(e, r, t, f, d) {
       {
-        var p = Function.call.bind(_);
+        var p = Function.call.bind(Te);
         for (var c in e)
@@ -353,18 +353,18 @@ if (p(e, c)) {
               if (typeof e[c] != "function") {
-                var T = Error((f || "React class") + ": " + t + " type `" + c + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[c] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
-                throw T.name = "Invariant Violation", T;
+                var S = Error((f || "React class") + ": " + t + " type `" + c + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[c] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+                throw S.name = "Invariant Violation", S;
               }
               u = e[c](r, c, f, t, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
-            } catch (g) {
-              u = g;
+            } catch (y) {
+              u = y;
             }
-            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));
+            u && !(u instanceof Error) && (q(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), q(null)), u instanceof Error && !(u.message in Xe) && (Xe[u.message] = !0, q(d), E("Failed %s type: %s", t, u.message), q(null));
           }
       }
     }
-    var D = Array.isArray;
-    function P(e) {
-      return D(e);
+    var _e = Array.isArray;
+    function k(e) {
+      return _e(e);
     }
-    function Ze(e) {
+    function D(e) {
       {
@@ -375,5 +375,5 @@ var r = typeof Symbol == "function" && Symbol.toStringTag, t = r && e[Symbol.toStringTag] || e.constructor.name || "Object";
     }
-    function Qe(e) {
+    function z(e) {
       try {
-        return me(e), !1;
+        return qe(e), !1;
       } catch {
@@ -383,10 +383,10 @@ return !0;
     }
-    function me(e) {
+    function qe(e) {
       return "" + e;
     }
-    function xe(e) {
-      if (Qe(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);
+    function ze(e) {
+      if (z(e))
+        return E("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", D(e)), qe(e);
     }
-    var Y = ne.ReactCurrentOwner, se = {
+    var J = se.ReactCurrentOwner, Je = {
       key: !0,
@@ -396,6 +396,6 @@ ref: !0,
       __source: !0
-    }, M, Fe, A;
+    }, Q, M, A;
     A = {};
-    function ue(e) {
-      if (_.call(e, "ref")) {
+    function Ae(e) {
+      if (Te.call(e, "ref")) {
         var r = Object.getOwnPropertyDescriptor(e, "ref").get;
@@ -407,4 +407,4 @@ if (r && r.isReactWarning)
     }
-    function G(e) {
-      if (_.call(e, "key")) {
+    function de(e) {
+      if (Te.call(e, "key")) {
         var r = Object.getOwnPropertyDescriptor(e, "key").get;
@@ -416,12 +416,12 @@ if (r && r.isReactWarning)
     }
-    function Te(e, r) {
-      if (typeof e.ref == "string" && Y.current && r && Y.current.stateNode !== r) {
-        var t = W(Y.current.type);
-        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);
+    function ve(e, r) {
+      if (typeof e.ref == "string" && J.current && r && J.current.stateNode !== r) {
+        var t = _(J.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', _(J.current.type), e.ref), A[t] = !0);
       }
     }
-    function $(e, r) {
+    function G(e, r) {
       {
         var t = function() {
-          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));
+          Q || (Q = !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));
         };
@@ -434,6 +434,6 @@ t.isReactWarning = !0, Object.defineProperty(e, "key", {
     }
-    function he(e, r) {
+    function je(e, r) {
       {
         var t = function() {
-          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));
+          M || (M = !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));
         };
@@ -446,3 +446,3 @@ t.isReactWarning = !0, Object.defineProperty(e, "ref", {
     }
-    var ye = function(e, r, t, f, d, p, c) {
+    var x = function(e, r, t, f, d, p, c) {
       var u = {
@@ -476,37 +476,37 @@ // This tag allows us to uniquely identify this as a React Element
     };
-    function ge(e, r, t, f, d) {
+    function H(e, r, t, f, d) {
       {
-        var p, c = {}, u = null, T = null;
-        t !== void 0 && (xe(t), u = "" + t), G(r) && (xe(r.key), u = "" + r.key), ue(r) && (T = r.ref, Te(r, d));
+        var p, c = {}, u = null, S = null;
+        t !== void 0 && (ze(t), u = "" + t), de(r) && (ze(r.key), u = "" + r.key), Ae(r) && (S = r.ref, ve(r, d));
         for (p in r)
-          _.call(r, p) && !se.hasOwnProperty(p) && (c[p] = r[p]);
+          Te.call(r, p) && !Je.hasOwnProperty(p) && (c[p] = r[p]);
         if (e && e.defaultProps) {
-          var g = e.defaultProps;
-          for (p in g)
-            c[p] === void 0 && (c[p] = g[p]);
+          var y = e.defaultProps;
+          for (p in y)
+            c[p] === void 0 && (c[p] = y[p]);
         }
-        if (u || T) {
-          var E = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
-          u && $(c, E), T && he(c, E);
+        if (u || S) {
+          var g = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
+          u && G(c, g), S && je(c, g);
         }
-        return ye(e, u, T, d, f, Y.current, c);
+        return x(e, u, S, d, f, J.current, c);
       }
     }
-    var ee = ne.ReactCurrentOwner, ce = ne.ReactDebugCurrentFrame;
-    function L(e) {
+    var ee = se.ReactCurrentOwner, pe = se.ReactDebugCurrentFrame;
+    function P(e) {
       if (e) {
         var r = e._owner, t = Oe(e.type, e._source, r ? r.type : null);
-        ce.setExtraStackFrame(t);
+        pe.setExtraStackFrame(t);
       } else
-        ce.setExtraStackFrame(null);
+        pe.setExtraStackFrame(null);
     }
-    var Ee;
-    Ee = !1;
-    function n(e) {
+    var re;
+    re = !1;
+    function te(e) {
       return typeof e == "object" && e !== null && e.$$typeof === o;
     }
-    function s() {
+    function me() {
       {
         if (ee.current) {
-          var e = W(ee.current.type);
+          var e = _(ee.current.type);
           if (e)
@@ -520,3 +520,3 @@ return `
     }
-    function l(e) {
+    function Ye(e) {
       {
@@ -532,6 +532,6 @@ if (e !== void 0) {
     }
-    var Ue = {};
-    function Me(e) {
+    var n = {};
+    function s(e) {
       {
-        var r = s();
+        var r = me();
         if (!r) {
@@ -546,3 +546,3 @@ var t = typeof e == "string" ? e : e.displayName || e.name;
     }
-    function Xe(e, r) {
+    function l(e, r) {
       {
@@ -552,30 +552,30 @@ if (!e._store || e._store.validated || e.key != null)
         e._store.validated = !0;
-        var t = Me(r);
-        if (Ue[t])
+        var t = s(r);
+        if (n[t])
           return;
-        Ue[t] = !0;
+        n[t] = !0;
         var f = "";
-        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);
+        e && e._owner && e._owner !== ee.current && (f = " It was passed a child from " + _(e._owner.type) + "."), P(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), P(null);
       }
     }
-    function Be(e, r) {
+    function He(e, r) {
       {
         if (typeof e != "object")
           return;
-        if (P(e))
+        if (k(e))
           for (var t = 0; t < e.length; t++) {
             var f = e[t];
-            n(f) && Xe(f, r);
+            te(f) && l(f, r);
           }
-        else if (n(e))
+        else if (te(e))
           e._store && (e._store.validated = !0);
         else if (e) {
-          var d = Ye(e);
+          var d = Ve(e);
           if (typeof d == "function" && d !== e.entries)
             for (var p = d.call(e), c; !(c = p.next()).done; )
-              n(c.value) && Xe(c.value, r);
+              te(c.value) && l(c.value, r);
         }
       }
     }
-    function sr(e) {
+    function er(e) {
       {
@@ -588,5 +588,5 @@ var r = e.type;
           t = r.propTypes;
-        else if (typeof r == "object" && (r.$$typeof === b || // Note: Memo only checks outer props here.
+        else if (typeof r == "object" && (r.$$typeof === R || // Note: Memo only checks outer props here.
         // Inner props are checked in the reconciler.
-        r.$$typeof === x))
+        r.$$typeof === w))
           t = r.propTypes;
@@ -596,13 +596,13 @@ else
         if (t) {
-          var f = W(r);
-          Q(t, e.props, "prop", f, e);
-        } else if (r.PropTypes !== void 0 && !Ee) {
-          Ee = !0;
-          var d = W(r);
-          y("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", d || "Unknown");
+          var f = _(r);
+          le(t, e.props, "prop", f, e);
+        } else if (r.PropTypes !== void 0 && !re) {
+          re = !0;
+          var d = _(r);
+          E("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", d || "Unknown");
         }
-        typeof r.getDefaultProps == "function" && !r.getDefaultProps.isReactClassApproved && y("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
+        typeof r.getDefaultProps == "function" && !r.getDefaultProps.isReactClassApproved && E("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
       }
     }
-    function ur(e) {
+    function rr(e) {
       {
@@ -612,52 +612,52 @@ for (var r = Object.keys(e.props), t = 0; t < r.length; t++) {
           if (f !== "children" && f !== "key") {
-            L(e), y("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", f), L(null);
+            P(e), E("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", f), P(null);
             break;
           }
         }
-        e.ref !== null && (L(e), y("Invalid attribute `ref` supplied to `React.Fragment`."), L(null));
+        e.ref !== null && (P(e), E("Invalid attribute `ref` supplied to `React.Fragment`."), P(null));
       }
     }
-    function er(e, r, t, f, d, p) {
+    function Ke(e, r, t, f, d, p) {
       {
-        var c = V(e);
+        var c = be(e);
         if (!c) {
           var u = "";
           (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (u += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
-          var T = l(d);
-          T ? u += T : u += s();
-          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 S = Ye(d);
+          S ? u += S : u += me();
+          var y;
+          e === null ? y = "null" : k(e) ? y = "array" : e !== void 0 && e.$$typeof === o ? (y = "<" + (_(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 E = ge(e, r, t, d, p);
-        if (E == null)
-          return E;
+        var g = H(e, r, t, d, p);
+        if (g == null)
+          return g;
         if (c) {
-          var I = r.children;
-          if (I !== void 0)
+          var Y = r.children;
+          if (Y !== void 0)
             if (f)
-              if (P(I)) {
-                for (var je = 0; je < I.length; je++)
-                  Be(I[je], e);
-                Object.freeze && Object.freeze(I);
+              if (k(Y)) {
+                for (var Se = 0; Se < Y.length; Se++)
+                  He(Y[Se], e);
+                Object.freeze && Object.freeze(Y);
               } else
-                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.");
+                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.");
             else
-              Be(I, e);
+              He(Y, e);
         }
-        return e === i ? ur(E) : sr(E), E;
+        return e === i ? rr(g) : er(g), g;
       }
     }
     function cr(e, r, t) {
-      return er(e, r, t, !0);
+      return Ke(e, r, t, !0);
     }
     function lr(e, r, t) {
-      return er(e, r, t, !1);
+      return Ke(e, r, t, !1);
     }
     var dr = lr, vr = cr;
-    Pe.Fragment = i, Pe.jsx = dr, Pe.jsxs = vr;
-  }()), Pe;
+    Ie.Fragment = i, Ie.jsx = dr, Ie.jsxs = vr;
+  }()), Ie;
 }
-process.env.NODE_ENV === "production" ? Ge.exports = yr() : Ge.exports = gr();
-var te = Ge.exports;
-const X = (a, o, v) => a < o ? o : a > v ? v : a, Er = (a, o, v) => {
+process.env.NODE_ENV === "production" ? tr.exports = yr() : tr.exports = gr();
+var ae = tr.exports;
+const W = (a, o, v) => a < o ? o : a > v ? v : a, Er = (a, o, v) => {
   let i = 0;
@@ -669,12 +669,12 @@ 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(
 }, _r = (a, o, v) => {
-  let i = a.offsetX, h = a.offsetY;
-  v || (i = 1 - i, h = 1 - h);
-  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;
+  let i = a.offsetX, m = a.offsetY;
+  v || (i = 1 - i, m = 1 - m);
+  let h = "translateX(0%) translateY(0%)";
+  return o === "top" ? h = `translateX( ${i * 50}% )` : o === "bottom" ? h = `translateX( ${i * 50}% ) translateY(50%)` : o === "left" ? h = `translateY( ${m * 50}% )` : o === "right" ? h = `translateX(50%) translateY( ${m * 50}% ) ` : o === "all" && (h = `translateX(${(i - 0.5) * 50}%) translateY(${(m - 0.5) * 50}%) `), h;
 }, br = (a, o, v) => {
-  let i = a.offsetX, h = a.offsetY;
-  o === "top-right" && (i = 1 - i), o === "bottom-left" && (h = 1 - h), o === "bottom-right" && (i = 1 - i, h = 1 - h);
-  let m = 0;
-  return v ? m = ((i + h) * (3 / 2) - 1) * 100 : m = ((i + h) * (-3 / 2) + 0.5) * 100, `translateX(${m}%)`;
-}, ir = (a) => {
+  let i = a.offsetX, m = a.offsetY;
+  o === "top-right" && (i = 1 - i), o === "bottom-left" && (m = 1 - m), o === "bottom-right" && (i = 1 - i, m = 1 - m);
+  let h = 0;
+  return v ? h = ((i + m) * (3 / 2) - 1) * 100 : h = ((i + m) * (-3 / 2) + 0.5) * 100, `translateX(${h}%)`;
+}, sr = (a) => {
   if (a instanceof HTMLElement)
@@ -686,3 +686,3 @@ return a;
     return a.current;
-}, qe = (a, o) => {
+}, Ze = (a, o) => {
   if (a === o)
@@ -698,3 +698,3 @@ return !0;
       for (i = v; i-- !== 0; )
-        if (!qe(a[i], o[i]))
+        if (!Ze(a[i], o[i]))
           return !1;
@@ -710,3 +710,3 @@ return !0;
       for (i of a.entries())
-        if (!qe(i[1], o.get(i[0])))
+        if (!Ze(i[1], o.get(i[0])))
           return !1;
@@ -737,11 +737,11 @@ return !0;
       return a.toString() === o.toString();
-    const h = Object.keys(a);
-    if (v = h.length, v !== Object.keys(o).length)
+    const m = Object.keys(a);
+    if (v = m.length, v !== Object.keys(o).length)
       return !1;
     for (i = v; i-- !== 0; )
-      if (!Object.prototype.hasOwnProperty.call(o, h[i]))
+      if (!Object.prototype.hasOwnProperty.call(o, m[i]))
         return !1;
     for (i = v; i-- !== 0; ) {
-      const m = h[i];
-      if (!(m === "_owner" && a.$$typeof) && !qe(a[m], o[m]))
+      const h = m[i];
+      if (!(h === "_owner" && a.$$typeof) && !Ze(a[h], o[h]))
         return !1;
@@ -758,74 +758,76 @@ }
     perspective: i = "1000px",
-    scale: h = 1,
-    lineGlareEnable: m = !0,
-    lineGlareBlurEnable: le = !0,
-    lineGlareBlurAmount: H = "4px",
-    lineGlareMaxOpacity: b = 0.1,
-    lineGlareWidthPercent: C = 10,
-    lineGlareMixBlendMode: O = "normal",
-    lineGlareColor: x = "white",
-    lineGlareReverse: S = !1,
-    lineGlareDirection: _e = "to-bottom-right",
-    lineGlareHoverPosition: Se = "top-left",
-    spotGlareEnable: ze = !0,
-    spotGlareMaxOpacity: Ye = 0.5,
-    spotGlareMixBlendMode: ne = "normal",
-    spotGlarePosition: y = "top",
-    spotGlareColor: Je = "white",
-    spotGlareReverse: Le = !1,
-    tiltMaxAngleX: B = 20,
-    tiltMaxAngleY: q = 20,
-    tiltReverse: Ie = !1,
+    scale: m = 1,
+    shadowEnable: h = !1,
+    shadow: oe = "0 0 1rem rgba(0,0,0,0.5)",
+    lineGlareEnable: C = !0,
+    lineGlareBlurEnable: R = !0,
+    lineGlareBlurAmount: ie = "4px",
+    lineGlareMaxOpacity: j = 0.1,
+    lineGlareWidthPercent: w = 10,
+    lineGlareMixBlendMode: K = "normal",
+    lineGlareColor: he = "white",
+    lineGlareReverse: fe = !1,
+    lineGlareDirection: Qe = "to-bottom-right",
+    lineGlareHoverPosition: Ve = "top-left",
+    spotGlareEnable: se = !0,
+    spotGlareMaxOpacity: E = 0.5,
+    spotGlareMixBlendMode: Me = "normal",
+    spotGlarePosition: ye = "top",
+    spotGlareColor: Ge = "white",
+    spotGlareReverse: We = !1,
+    tiltMaxAngleX: N = 20,
+    tiltMaxAngleY: B = 20,
+    tiltReverse: ke = !1,
     tiltReset: be = !0,
-    initialAngleX: F = 0,
-    initialAngleY: V = 0,
-    disableScrollOnTouch: z = !0,
-    style: Ve,
-    tiltStyle: W,
-    tiltProps: K,
-    gyroMaxAngleX: j = 0,
-    gyroMaxAngleY: N = 0,
-    gyroReverse: ke = !1,
-    disabled: w = !1,
-    disabledFilter: We = "grayscale(1) brightness(125%)",
+    initialAngleX: L = 0,
+    initialAngleY: $ = 0,
+    disableScrollOnTouch: _ = !0,
+    style: Z,
+    tiltStyle: ge,
+    tiltProps: Ne,
+    gyroMaxAngleX: I = 0,
+    gyroMaxAngleY: V = 0,
+    gyroReverse: xe = !1,
+    disabled: O = !1,
+    disabledFilter: Be = "grayscale(1) brightness(125%)",
     CSSTransition: Re = "all 0.4s cubic-bezier(0.03, 0.98, 0.52, 0.99)",
-    TiltWrapper: Ne,
-    fullPageListening: k = !1,
+    TiltWrapper: Ue,
+    fullPageListening: F = !1,
     controlElement: U,
-    controlElementOnly: Ae = !1,
-    testIdEnable: ae = !1,
-    onTilt: de,
-    onMouseEnter: ve,
-    onMouseMove: oe,
-    onMouseLeave: pe,
-    onTouchStart: ie,
-    onTouchMove: $e,
-    onTouchEnd: we,
-    children: He,
-    ...Ke
-  }, Oe) => {
-    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 }),
+    controlElementOnly: $e = !1,
+    testIdEnable: X = !1,
+    onTilt: ue,
+    onMouseEnter: Ee,
+    onMouseMove: ce,
+    onMouseLeave: Fe,
+    onTouchStart: we,
+    onTouchMove: De,
+    onTouchEnd: Pe,
+    children: Oe,
+    ...Te
+  }, Xe) => {
+    const T = Ce(), q = Ce(!1), le = !F && (!U || U && !$e), _e = Ce(null), k = Ce(null), D = Ce(null), z = Ce(null), qe = b(
+      ({ children: n }) => /* @__PURE__ */ ae.jsx(ae.Fragment, { children: n }),
       []
-    ), Qe = Ne || Ze;
-    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,
+    ), ze = Ue || qe;
+    C && (w = W(w, 0, 50) / 2), N = W(N, 0, 90), B = W(B, 0, 90), I = W(I, 0, 90), V = W(V, 0, 90), L && (L = W(
+      L,
+      -N,
+      N
+    )), $ && ($ = W(
+      $,
       -B,
       B
-    )), V && (V = X(
-      V,
-      -q,
-      q
     ));
-    const me = tr(() => m ? (100 - C) / 2 : 0, [m, C]), xe = tr(() => m ? me + C : 0, [m, C, me]), Y = R(() => {
-      if (!J.current || !D.current || !_.current)
+    const J = ar(() => C ? (100 - w) / 2 : 0, [C, w]), Je = ar(() => C ? J + w : 0, [C, w, J]), Q = b(() => {
+      if (!_e.current || !D.current || !T.current)
         return;
       const n = Er(
-        _.current,
-        y,
-        Ye
+        T.current,
+        ye,
+        E
       ), s = _r(
-        _.current,
-        y,
-        Le
+        T.current,
+        ye,
+        We
       );
@@ -835,33 +837,33 @@ requestAnimationFrame(() => {
       });
-    }, [y, Ye, Le]), se = R(() => {
-      if (!J.current || !P.current || !_.current)
+    }, [ye, E, We]), M = b(() => {
+      if (!_e.current || !z.current || !T.current)
         return;
       const n = br(
-        _.current,
-        Se,
-        S
+        T.current,
+        Ve,
+        fe
       );
       requestAnimationFrame(() => {
-        P.current && (P.current.style.transform = n);
+        z.current && (z.current.style.transform = n);
       });
-    }, [Se, S]), M = R(
+    }, [Ve, fe]), A = b(
       (n = !0) => {
-        if (!J.current || !_.current)
+        if (!_e.current || !T.current)
           return { angleX: 0, angleY: 0 };
-        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 };
+        let s = -(T.current.offsetY - 0.5) * 2 * N, l = (T.current.offsetX - 0.5) * 2 * B;
+        return ke && n && (s = -s, l = -l), { angleX: s, angleY: l };
       },
-      [B, q, Ie]
-    ), Fe = R(
+      [N, B, ke]
+    ), Ae = b(
       (n) => {
-        const s = (n.angleY / q + 1) / 2, l = (-n.angleX / B + 1) / 2;
-        _.current = { offsetX: s, offsetY: l };
+        const s = (n.angleY / B + 1) / 2, l = (-n.angleX / N + 1) / 2;
+        T.current = { offsetX: s, offsetY: l };
       },
-      [B, q]
-    ), A = R(
+      [N, B]
+    ), de = b(
       (n, s = !0) => {
-        const l = s ? h : 1;
+        const l = s ? m : 1;
         requestAnimationFrame(() => {
-          Q.current && (Q.current.style.transform = `rotateX(${n.angleX}deg) rotateY(${n.angleY}deg) scale3d(${l},${l},${l})`);
-        }), de && de({
+          k.current && (k.current.style.transform = `rotateX(${n.angleX}deg) rotateY(${n.angleY}deg) scale3d(${l},${l},${l})`);
+        }), ue && ue({
           angleX: n.angleX,
@@ -871,21 +873,21 @@ angleY: n.angleY
       },
-      [de, h]
-    ), ue = R(
+      [ue, m]
+    ), ve = b(
       (n, s = !1) => {
-        Fe(n), A(n, s), se(), Y();
+        Ae(n), de(n, s), M(), Q();
       },
-      [se, Fe, Y, A]
-    ), G = R(() => {
-      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%) translateY(0%)", D.current.style.opacity = "0"), Q.current && (Q.current.style.transform = "rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)");
+      [M, Ae, Q, de]
+    ), G = b(() => {
+      L || $ ? ve({
+        angleX: L || 0,
+        angleY: $ || 0
+      }) : (T.current = void 0, requestAnimationFrame(() => {
+        z.current && (z.current.style.transform = `translateX(${fe ? "50%" : "-100%"})`), D.current && (D.current.style.transform = "translateX(0%) translateY(0%)", D.current.style.opacity = "0"), k.current && (k.current.style.transform = "rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)");
       }));
-    }, [F, V, S, ue]), Te = R(
+    }, [L, $, fe, ve]), je = b(
       (n, s) => {
         if (!s)
           return;
-        if (k && s instanceof Document) {
-          _.current = {
+        if (F && s instanceof Document) {
+          T.current = {
             offsetX: n.x / window.innerWidth,
@@ -899,53 +901,64 @@ offsetY: n.y / window.innerHeight
           return;
-        const Ue = X(
+        const He = W(
           n.x,
           l.left,
           l.right
-        ), Me = X(
+        ), er = W(
           n.y,
           l.top,
           l.bottom
-        ), Xe = (Ue - l.left) / l.width, Be = (Me - l.top) / l.height;
-        _.current = { offsetX: Xe, offsetY: Be };
+        ), rr = (He - l.left) / l.width, Ke = (er - l.top) / l.height;
+        T.current = { offsetX: rr, offsetY: Ke };
       },
-      [k]
-    ), $ = R((n = !0) => {
-      Q.current && (Q.current.style.willChange = n ? "transform" : ""), D.current && (D.current.style.willChange = n ? "transform, opacity" : ""), P.current && (P.current.style.willChange = n ? "transform" : "");
-    }, []);
+      [F]
+    ), x = b((n = !0) => {
+      k.current && (k.current.style.willChange = n ? "transform" : ""), D.current && (D.current.style.willChange = n ? "transform, opacity" : ""), z.current && (z.current.style.willChange = n ? "transform" : "");
+    }, []), H = b(
+      (n = !0) => {
+        k.current && h && (k.current.style.boxShadow = n ? oe : "");
+      },
+      [oe, h]
+    );
     mr(
-      Oe,
+      Xe,
       () => ({
-        tilt: ue,
+        tilt: ve,
         reset: G,
-        angle: () => M(!1),
-        updateWillChange: $,
-        element: J.current
+        angle: () => A(!1),
+        updateWillChange: x,
+        element: _e.current
       }),
-      [ue, G, $, M]
+      [ve, G, x, A]
     );
-    const he = R(() => {
-      w || (fe.current = !0, $());
-    }, [w, $]), ye = R(() => {
-      w || (z && !k && (typeof z == "boolean" ? document.body.style.overflow = "hidden" : z.style.overflow = "hidden"), fe.current = !0, $());
-    }, [z, w, k, $]), ge = R(
+    const ee = b(() => {
+      O || (q.current = !0, x(), H());
+    }, [O, H, x]), pe = b(() => {
+      O || (_ && !F && (typeof _ == "boolean" ? document.body.style.overflow = "hidden" : _.style.overflow = "hidden"), q.current = !0, x(), H());
+    }, [
+      _,
+      O,
+      F,
+      H,
+      x
+    ]), P = b(
       (n) => {
-        w || (Te(
+        O || (je(
           { x: n.clientX, y: n.clientY },
           n.currentTarget
-        ), A(M()), se(), Y());
+        ), de(A()), M(), Q());
       },
       [
-        w,
+        O,
+        A,
+        je,
+        de,
         M,
-        Te,
-        A,
-        se,
-        Y
+        Q
       ]
-    ), ee = R(
+    ), re = b(
       (n) => {
-        if (w)
+        if (O)
           return;
         const s = n.changedTouches[0];
-        s && (Te(
+        s && (je(
           {
@@ -956,37 +969,38 @@ x: s.clientX,
           n.currentTarget
-        ), A(M()), se(), Y());
+        ), de(A()), M(), Q());
       },
       [
-        w,
+        O,
+        A,
+        je,
+        de,
         M,
-        Te,
-        A,
-        se,
-        Y
+        Q
       ]
-    ), ce = R(() => {
-      w || (fe.current = !1, $(!1), be && G());
-    }, [w, G, be, $]), L = R(() => {
-      w || (z && !k && (typeof z == "boolean" ? document.body.style.overflow = "" : z.style.overflow = ""), fe.current = !1, $(!1), be && G());
+    ), te = b(() => {
+      O || (q.current = !1, x(!1), H(!1), be && G());
+    }, [O, G, be, H, x]), me = b(() => {
+      O || (_ && !F && (typeof _ == "boolean" ? document.body.style.overflow = "" : _.style.overflow = ""), q.current = !1, x(!1), H(!1), be && G());
     }, [
-      z,
-      w,
-      k,
+      _,
+      O,
+      F,
       G,
       be,
-      $
+      H,
+      x
     ]);
-    nr(() => {
-      if (!U && !k)
+    or(() => {
+      if (!U && !F)
         return;
       let n;
-      k || !U ? n = [document] : n = Array.isArray(U) ? U : [U];
+      F || !U ? n = [document] : n = Array.isArray(U) ? U : [U];
       for (let s of n) {
-        const l = ir(s);
-        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 }));
+        const l = sr(s);
+        l && (s = l, s.addEventListener("mouseenter", ee), s.addEventListener("mousemove", P), s.addEventListener("mouseleave", te), s.addEventListener("touchstart", pe, { passive: !0 }), s.addEventListener("touchmove", re, { passive: !0 }), s.addEventListener("touchend", me, { passive: !0 }));
       }
       return () => {
         for (let s of n) {
-          const l = ir(s);
-          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));
+          const l = sr(s);
+          l && (s = l, s.removeEventListener("mouseenter", ee), s.removeEventListener("mousemove", P), s.removeEventListener("mouseleave", te), s.removeEventListener("touchstart", pe), s.removeEventListener("touchmove", re), s.removeEventListener("touchend", me));
         }
@@ -996,36 +1010,36 @@ };
       U,
-      he,
-      ge,
-      ce,
-      ye,
       ee,
-      L,
-      k
+      P,
+      te,
+      pe,
+      re,
+      me,
+      F
     ]);
-    const Ee = R(
+    const Ye = b(
       (n) => {
-        if (fe.current || n.beta === null && n.gamma === null)
+        if (q.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), ue({ angleX: s, angleY: l });
+        let s = I && n.beta ? W(-n.beta, -I, I) : L || 0, l = V && n.gamma ? W(n.gamma, -V, V) : $ || 0;
+        xe && (s = -s, l = -l), ve({ angleX: s, angleY: l });
       },
       [
-        j,
-        N,
-        F,
+        I,
         V,
-        ke,
-        ue
+        L,
+        $,
+        xe,
+        ve
       ]
     );
-    return nr(() => {
-      if (!(!j && !N))
-        return window.addEventListener("deviceorientation", Ee), () => window.removeEventListener("deviceorientation", Ee);
-    }, [j, N, Ee, $]), /* @__PURE__ */ te.jsx(
+    return or(() => {
+      if (!(!I && !V))
+        return window.addEventListener("deviceorientation", Ye), () => window.removeEventListener("deviceorientation", Ye);
+    }, [I, V, Ye, x]), /* @__PURE__ */ ae.jsx(
       "div",
       {
         ref: (n) => {
-          n && (J.current = n, (F || V) && !_.current && G());
+          n && (_e.current = n, (L || $) && !T.current && G());
         },
-        "data-testid": ae ? "container" : void 0,
+        "data-testid": X ? "container" : void 0,
         style: Object.assign(
@@ -1040,30 +1054,30 @@ {
             backfaceVisibility: "hidden",
-            filter: w ? We : void 0
+            filter: O ? Be : void 0
           },
-          Ve
+          Z
         ),
-        onMouseEnter: Z ? ve ? (n) => {
-          he(), ve(n);
-        } : he : ve,
-        onTouchStart: Z ? ie ? (n) => {
-          ye(), ie(n);
-        } : ye : ie,
-        onMouseMove: Z ? oe ? (n) => {
-          ge(n), oe(n);
-        } : ge : oe,
-        onTouchMove: Z ? $e ? (n) => {
-          ee(n), $e(n);
-        } : ee : $e,
-        onMouseLeave: Z ? pe ? (n) => {
-          ce(), pe(n);
-        } : ce : pe,
-        onTouchEnd: Z ? we ? (n) => {
-          L(), we(n);
-        } : L : we,
-        ...Ke,
-        children: /* @__PURE__ */ te.jsx(Qe, { children: /* @__PURE__ */ te.jsxs(
+        onMouseEnter: le ? Ee ? (n) => {
+          ee(), Ee(n);
+        } : ee : Ee,
+        onTouchStart: le ? we ? (n) => {
+          pe(), we(n);
+        } : pe : we,
+        onMouseMove: le ? ce ? (n) => {
+          P(n), ce(n);
+        } : P : ce,
+        onTouchMove: le ? De ? (n) => {
+          re(n), De(n);
+        } : re : De,
+        onMouseLeave: le ? Fe ? (n) => {
+          te(), Fe(n);
+        } : te : Fe,
+        onTouchEnd: le ? Pe ? (n) => {
+          me(), Pe(n);
+        } : me : Pe,
+        ...Te,
+        children: /* @__PURE__ */ ae.jsx(ze, { children: /* @__PURE__ */ ae.jsxs(
           "div",
           {
-            ref: Q,
-            "data-testid": ae ? "tilt" : void 0,
+            ref: k,
+            "data-testid": X ? "tilt" : void 0,
             style: Object.assign(
@@ -1081,11 +1095,11 @@ {
               },
-              W
+              ge
             ),
-            ...K,
+            ...Ne,
             children: [
-              He,
-              ze && /* @__PURE__ */ te.jsx(
+              Oe,
+              se && /* @__PURE__ */ ae.jsx(
                 "div",
                 {
-                  "data-testid": ae ? "spot-glare-container" : void 0,
+                  "data-testid": X ? "spot-glare-container" : void 0,
                   style: {
@@ -1098,17 +1112,17 @@ pointerEvents: "none",
                     backfaceVisibility: "hidden",
-                    mixBlendMode: ne
+                    mixBlendMode: Me
                   },
-                  children: /* @__PURE__ */ te.jsx(
+                  children: /* @__PURE__ */ ae.jsx(
                     "div",
                     {
                       ref: D,
-                      "data-testid": ae ? "spot-glare" : void 0,
+                      "data-testid": X ? "spot-glare" : void 0,
                       style: {
                         position: "absolute",
-                        left: y === "all" ? "-50%" : "-100%",
-                        top: y === "all" ? "-50%" : "-100%",
+                        left: ye === "all" ? "-50%" : "-100%",
+                        top: ye === "all" ? "-50%" : "-100%",
                         width: "200%",
                         height: "200%",
                         transition: Re,
-                        backgroundImage: `radial-gradient(${Je}, transparent)`,
+                        backgroundImage: `radial-gradient(${Ge}, transparent)`,
                         transform: "translateX(0%) translateY(0%)",
@@ -1121,6 +1135,6 @@ opacity: "0"
               ),
-              m && /* @__PURE__ */ te.jsx(
+              C && /* @__PURE__ */ ae.jsx(
                 "div",
                 {
-                  "data-testid": ae ? "line-glare-container" : void 0,
+                  "data-testid": X ? "line-glare-container" : void 0,
                   style: {
@@ -1133,9 +1147,9 @@ pointerEvents: "none",
                     backfaceVisibility: "hidden",
-                    mixBlendMode: O
+                    mixBlendMode: K
                   },
-                  children: /* @__PURE__ */ te.jsx(
+                  children: /* @__PURE__ */ ae.jsx(
                     "div",
                     {
-                      "data-testid": ae ? "line-glare" : void 0,
-                      ref: P,
+                      "data-testid": X ? "line-glare" : void 0,
+                      ref: z,
                       style: {
@@ -1147,7 +1161,7 @@ position: "absolute",
                         height: "200%",
-                        filter: le ? `blur(${H})` : "",
+                        filter: R ? `blur(${ie})` : "",
                         transition: Re,
-                        opacity: String(b),
-                        transform: `translateX(${S ? "50%" : "-100%"})`,
-                        backgroundImage: `linear-gradient(${_e === "to-bottom-right" ? "to bottom right" : "to bottom left"}, transparent, transparent ${me}%, ${x} calc(${me}% + 1px), ${x} ${xe}%, transparent calc(${xe}% + 1px), transparent 0%)`
+                        opacity: String(j),
+                        transform: `translateX(${fe ? "50%" : "-100%"})`,
+                        backgroundImage: `linear-gradient(${Qe === "to-bottom-right" ? "to bottom right" : "to bottom left"}, transparent, transparent ${J}%, ${he} calc(${J}% + 1px), ${he} ${Je}%, transparent calc(${Je}% + 1px), transparent 0%)`
                       }
@@ -1166,3 +1180,3 @@ }
   Rr,
-  (a, o) => qe(a, o)
+  (a, o) => Ze(a, o)
 );
@@ -1169,0 +1183,0 @@ wr.displayName = "Tilt";

package.json

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

README.md

@@ -48,2 +48,3 @@ <h1 align="center">
 - `"Scale on Hover/Touch"` support
+- `"Shadow on Hover/Touch"` support
 - `"Disable Scroll on Touch"` support
@@ -104,3 +105,3 @@ - `"Full-Page Listening"` support
 
-<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>	
+<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>shadowEnable</span></td><td><div><span>Enables/Disables the box shadow applied to the tilt element on hover/touch</span></div><div><div><code><span>boolean</span></div></code></div></td><td><div><span>false</span></div></td></tr><tr><td><span>shadow</span></td><td><div><span>Box shadow applied to the tilt element on hover/touch</span></div><div><div><code><span>string</span></div></code></div></td><td><div><span>"0 0 1rem rgba(0,0,0,0.5)"</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>
@@ -107,0 +108,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

102210

increased by1.66%

Lines of code

1734

increased by1.88%

Number of lines in readme file

198

increased by0.51%

No dependency changes