perspective-layered-ui 1.0.0

package/README.md

@@ -0,0 +1,65 @@
+# perspective-layered-ui
+
+A React component library for creating interactive layered UI scenes with 3D perspective effects. Stack full-screen layers and navigate between them with smooth transitions.
+
+## Installation
+
+```bash
+npm install perspective-layered-ui
+```
+
+## Usage
+
+First, import the component and the required CSS:
+
+```tsx
+import { LayeredScene } from 'perspective-layered-ui';
+import 'perspective-layered-ui/dist/perspective-layered-ui.css';
+```
+
+Then use it in your React app:
+
+```tsx
+import { LayeredScene } from 'perspective-layered-ui';
+import 'perspective-layered-ui/dist/perspective-layered-ui.css';
+
+function App() {
+  return (
+    <LayeredScene>
+      <div style={{ background: 'red', height: '100vh' }}>Layer 1</div>
+      <div style={{ background: 'green', height: '100vh' }}>Layer 2</div>
+      <div style={{ background: 'blue', height: '100vh' }}>Layer 3</div>
+    </LayeredScene>
+  );
+}
+```
+
+## Props
+
+The `LayeredScene` component accepts the following props:
+
+- `children`: `ReactNode` - The layers to display (each child is a layer).
+- `className?`: `string` - Additional CSS class for the container.
+- `style?`: `CSSProperties` - Inline styles for the container.
+- `transitionMs?`: `number` - Transition duration in milliseconds (default: 250).
+- `easing?`: `string` - CSS easing function (default: 'ease-out').
+- `depthSpacingPx?`: `number` - Z-axis spacing between layers (default: 200).
+- `perspectivePx?`: `number` - Perspective value for the 3D effect (default: 3000).
+- `blurAt1Px?`: `number` - Blur amount for layers at distance 1 (default: 6).
+- `blurAt2Px?`: `number` - Blur amount for layers at distance 2 (default: 10).
+- `opacityAt1?`: `number` - Opacity for layers at distance 1 (default: 0.7).
+- `opacityAt2?`: `number` - Opacity for layers at distance 2 (default: 0.45).
+- `minVisibleOpacity?`: `number` - Minimum opacity for visible layers (default: 0.2).
+- `initialIndex?`: `number` - Initial active layer index (default: 0).
+
+## Features
+
+- Smooth 3D transitions between layers
+- Customizable perspective and depth
+- Blur and opacity effects for depth perception
+- Keyboard and programmatic navigation
+- Lightweight and dependency-free (requires React)
+
+## License
+
+MIT

package/dist/index.es.js

@@ -0,0 +1,361 @@
+import ue, { useMemo as fe, Children as me, useState as O, useRef as Q, useCallback as de, useEffect as K, isValidElement as ee } from "react";
+var Z = { exports: {} }, F = {};
+var re;
+function ge() {
+  if (re) return F;
+  re = 1;
+  var f = /* @__PURE__ */ Symbol.for("react.transitional.element"), _ = /* @__PURE__ */ Symbol.for("react.fragment");
+  function b(d, c, l) {
+    var y = null;
+    if (l !== void 0 && (y = "" + l), c.key !== void 0 && (y = "" + c.key), "key" in c) {
+      l = {};
+      for (var R in c)
+        R !== "key" && (l[R] = c[R]);
+    } else l = c;
+    return c = l.ref, {
+      $$typeof: f,
+      type: d,
+      key: y,
+      ref: c !== void 0 ? c : null,
+      props: l
+    };
+  }
+  return F.Fragment = _, F.jsx = b, F.jsxs = b, F;
+}
+var L = {};
+var te;
+function Ee() {
+  return te || (te = 1, process.env.NODE_ENV !== "production" && (function() {
+    function f(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === u ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case P:
+          return "Fragment";
+        case I:
+          return "Profiler";
+        case s:
+          return "StrictMode";
+        case j:
+          return "Suspense";
+        case J:
+          return "SuspenseList";
+        case x:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case U:
+            return "Portal";
+          case M:
+            return e.displayName || "Context";
+          case q:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case z:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case T:
+            return r = e.displayName || null, r !== null ? r : f(e.type) || "Memo";
+          case S:
+            r = e._payload, e = e._init;
+            try {
+              return f(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function _(e) {
+      return "" + e;
+    }
+    function b(e) {
+      try {
+        _(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var n = r.error, o = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return n.call(
+          r,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          o
+        ), _(e);
+      }
+    }
+    function d(e) {
+      if (e === P) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === S)
+        return "<...>";
+      try {
+        var r = f(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function c() {
+      var e = h.A;
+      return e === null ? null : e.getOwner();
+    }
+    function l() {
+      return Error("react-stack-top-frame");
+    }
+    function y(e) {
+      if (E.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function R(e, r) {
+      function n() {
+        g || (g = !0, console.error(
+          "%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://react.dev/link/special-props)",
+          r
+        ));
+      }
+      n.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: n,
+        configurable: !0
+      });
+    }
+    function W() {
+      var e = f(this.type);
+      return p[e] || (p[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function X(e, r, n, o, k, N) {
+      var a = n.ref;
+      return e = {
+        $$typeof: $,
+        type: e,
+        key: r,
+        props: n,
+        _owner: o
+      }, (a !== void 0 ? a : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: W
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: k
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: N
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function B(e, r, n, o, k, N) {
+      var a = r.children;
+      if (a !== void 0)
+        if (o)
+          if (Y(a)) {
+            for (o = 0; o < a.length; o++)
+              A(a[o]);
+            Object.freeze && Object.freeze(a);
+          } else
+            console.error(
+              "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 A(a);
+      if (E.call(r, "key")) {
+        a = f(e);
+        var w = Object.keys(r).filter(function(H) {
+          return H !== "key";
+        });
+        o = 0 < w.length ? "{key: someKey, " + w.join(": ..., ") + ": ...}" : "{key: someKey}", t[a + o] || (w = 0 < w.length ? "{" + w.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          o,
+          a,
+          w,
+          a
+        ), t[a + o] = !0);
+      }
+      if (a = null, n !== void 0 && (b(n), a = "" + n), y(r) && (b(r.key), a = "" + r.key), "key" in r) {
+        n = {};
+        for (var G in r)
+          G !== "key" && (n[G] = r[G]);
+      } else n = r;
+      return a && R(
+        n,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), X(
+        e,
+        a,
+        n,
+        c(),
+        k,
+        N
+      );
+    }
+    function A(e) {
+      C(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === S && (e._payload.status === "fulfilled" ? C(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function C(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === $;
+    }
+    var i = ue, $ = /* @__PURE__ */ Symbol.for("react.transitional.element"), U = /* @__PURE__ */ Symbol.for("react.portal"), P = /* @__PURE__ */ Symbol.for("react.fragment"), s = /* @__PURE__ */ Symbol.for("react.strict_mode"), I = /* @__PURE__ */ Symbol.for("react.profiler"), q = /* @__PURE__ */ Symbol.for("react.consumer"), M = /* @__PURE__ */ Symbol.for("react.context"), z = /* @__PURE__ */ Symbol.for("react.forward_ref"), j = /* @__PURE__ */ Symbol.for("react.suspense"), J = /* @__PURE__ */ Symbol.for("react.suspense_list"), T = /* @__PURE__ */ Symbol.for("react.memo"), S = /* @__PURE__ */ Symbol.for("react.lazy"), x = /* @__PURE__ */ Symbol.for("react.activity"), u = /* @__PURE__ */ Symbol.for("react.client.reference"), h = i.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, E = Object.prototype.hasOwnProperty, Y = Array.isArray, m = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    i = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var g, p = {}, V = i.react_stack_bottom_frame.bind(
+      i,
+      l
+    )(), D = m(d(l)), t = {};
+    L.Fragment = P, L.jsx = function(e, r, n) {
+      var o = 1e4 > h.recentlyCreatedOwnerStacks++;
+      return B(
+        e,
+        r,
+        n,
+        !1,
+        o ? Error("react-stack-top-frame") : V,
+        o ? m(d(e)) : D
+      );
+    }, L.jsxs = function(e, r, n) {
+      var o = 1e4 > h.recentlyCreatedOwnerStacks++;
+      return B(
+        e,
+        r,
+        n,
+        !0,
+        o ? Error("react-stack-top-frame") : V,
+        o ? m(d(e)) : D
+      );
+    };
+  })()), L;
+}
+var ne;
+function pe() {
+  return ne || (ne = 1, process.env.NODE_ENV === "production" ? Z.exports = ge() : Z.exports = Ee()), Z.exports;
+}
+var v = pe();
+function he({
+  children: f,
+  className: _,
+  style: b,
+  transitionMs: d = 250,
+  easing: c = "ease-out",
+  depthSpacingPx: l = 200,
+  perspectivePx: y = 3e3,
+  blurAt1Px: R = 6,
+  blurAt2Px: W = 10,
+  opacityAt1: X = 0.7,
+  opacityAt2: B = 0.45,
+  minVisibleOpacity: A = 0.2,
+  initialIndex: C = 0
+}) {
+  const i = fe(() => me.toArray(f), [f]), $ = (t) => Math.max(0, Math.min(1, t)), U = (t, e, r) => t + (e - t) * r, P = (t, e, r, n) => t <= 0 ? e : t >= 2 ? n : t <= 1 ? U(e, r, $(t)) : U(r, n, $(t - 1)), [s, I] = O(() => Number.isNaN(C) ? 0 : Math.max(0, Math.min(i.length - 1, C))), [q, M] = O(null), [z, j] = O(null), [J, T] = O(1), [S, x] = O(1), [u, h] = O(!1), [E, Y] = O(1), m = Q(null), g = Q(null), p = de((t) => {
+    if (u || t < 0 || t >= i.length || t === s) return;
+    const e = t > s ? 1 : -1;
+    h(!0), M(s), x(0), Y(e), e === -1 ? (j(t), T(0)) : (j(null), T(1)), I(t), g.current !== null && window.cancelAnimationFrame(g.current), g.current = window.requestAnimationFrame(() => {
+      x(1), e === -1 && T(1), g.current = null;
+    }), m.current !== null && window.clearTimeout(m.current), m.current = window.setTimeout(() => {
+      h(!1), M(null), j(null), T(1), x(1), Y(1), m.current = null;
+    }, d + 60);
+  }, [u, s, i.length, d, h, M, x, Y, j, T, I]);
+  K(() => () => {
+    m.current !== null && window.clearTimeout(m.current), g.current !== null && window.cancelAnimationFrame(g.current);
+  }, []), K(() => {
+    I((t) => Math.max(0, Math.min(i.length - 1, t)));
+  }, [i.length]), K(() => {
+    const t = (e) => {
+      e.key === "PageUp" ? p(s - 1) : e.key === "PageDown" && p(s + 1);
+    };
+    return window.addEventListener("keydown", t), () => {
+      window.removeEventListener("keydown", t);
+    };
+  }, [s, p]);
+  const V = u, D = l * s;
+  return /* @__PURE__ */ v.jsx(
+    "div",
+    {
+      className: `layeredScene ${V ? "is-transitioning" : ""}${_ ? ` ${_}` : ""}`,
+      "aria-label": "3D layered scene",
+      style: {
+        "--camera-z": `${D}px`,
+        "--transition-ms": `${d}ms`,
+        "--transition-easing": c,
+        "--perspective": `${y}px`,
+        ...b
+      },
+      children: i.map((t, e) => {
+        const r = Math.abs(e - s), n = q !== null && e === q, o = z !== null && e === z, k = -l * e, N = n && E === 1 ? l * 2 : 0;
+        if (k + N + D > 0 && !n && !(o && u && E === -1))
+          return null;
+        const H = P(r, 1, X, B), oe = n && u ? E === -1 ? S === 0 ? 1 : A : S === 0 ? 1 : A : o && u && E === -1 ? J === 0 ? 0 : 1 : e === s ? 1 : H, ae = P(r, 0, R, W), se = o && u && E === -1 ? J === 0 ? W : 0 : ae, le = 1e4 - Math.round(r * 10) + (n ? 1e3 : 0), ce = ee(t) ? t : /* @__PURE__ */ v.jsx(v.Fragment, { children: t }), ie = (ee(t) ? t.key : null) ?? e;
+        return /* @__PURE__ */ v.jsx(
+          "div",
+          {
+            className: `layeredLayer ${r === 0 ? "is-focused" : ""} ${e === s ? "is-active" : ""} ${n ? "is-outgoing" : ""}`,
+            style: {
+              "--z": `${k}px`,
+              "--outgoing-offset": `${N}px`,
+              "--stack": le,
+              "--layer-blur": `${se}px`,
+              opacity: Math.max(A, oe)
+            },
+            children: /* @__PURE__ */ v.jsxs("div", { className: "layeredLayerInner", children: [
+              ce,
+              /* @__PURE__ */ v.jsxs("div", { className: "layeredControls", children: [
+                e !== 0 ? /* @__PURE__ */ v.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "layeredBtn",
+                    onClick: () => p(s - 1),
+                    disabled: u || e !== s,
+                    children: "Previous"
+                  }
+                ) : null,
+                e !== i.length - 1 ? /* @__PURE__ */ v.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "layeredBtn",
+                    onClick: () => p(s + 1),
+                    disabled: u || e !== s,
+                    children: "Next"
+                  }
+                ) : null
+              ] })
+            ] })
+          },
+          ie
+        );
+      })
+    }
+  );
+}
+export {
+  he as LayeredScene
+};

package/dist/index.js

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react");var Z={exports:{}},F={};var K;function le(){if(K)return F;K=1;var m=Symbol.for("react.transitional.element"),_=Symbol.for("react.fragment");function y(g,c,u){var R=null;if(u!==void 0&&(R=""+u),c.key!==void 0&&(R=""+c.key),"key"in c){u={};for(var T in c)T!=="key"&&(u[T]=c[T])}else u=c;return c=u.ref,{$$typeof:m,type:g,key:R,ref:c!==void 0?c:null,props:u}}return F.Fragment=_,F.jsx=y,F.jsxs=y,F}var L={};var Q;function ue(){return Q||(Q=1,process.env.NODE_ENV!=="production"&&(function(){function m(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===f?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case P:return"Fragment";case I:return"Profiler";case l:return"StrictMode";case A:return"Suspense";case J:return"SuspenseList";case x:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case U:return"Portal";case M:return e.displayName||"Context";case q:return(e._context.displayName||"Context")+".Consumer";case z:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case h:return r=e.displayName||null,r!==null?r:m(e.type)||"Memo";case j:r=e._payload,e=e._init;try{return m(e(r))}catch{}}return null}function _(e){return""+e}function y(e){try{_(e);var r=!1}catch{r=!0}if(r){r=console;var n=r.error,a=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",a),_(e)}}function g(e){if(e===P)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===j)return"<...>";try{var r=m(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function c(){var e=k.A;return e===null?null:e.getOwner()}function u(){return Error("react-stack-top-frame")}function R(e){if(v.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function T(e,r){function n(){E||(E=!0,console.error("%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://react.dev/link/special-props)",r))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function W(){var e=m(this.type);return p[e]||(p[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function X(e,r,n,a,w,N){var o=n.ref;return e={$$typeof:$,type:e,key:r,props:n,_owner:a},(o!==void 0?o:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:W}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:w}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:N}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function B(e,r,n,a,w,N){var o=r.children;if(o!==void 0)if(a)if(Y(o)){for(a=0;a<o.length;a++)S(o[a]);Object.freeze&&Object.freeze(o)}else console.error("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 S(o);if(v.call(r,"key")){o=m(e);var O=Object.keys(r).filter(function(H){return H!=="key"});a=0<O.length?"{key: someKey, "+O.join(": ..., ")+": ...}":"{key: someKey}",t[o+a]||(O=0<O.length?"{"+O.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,a,o,O,o),t[o+a]=!0)}if(o=null,n!==void 0&&(y(n),o=""+n),R(r)&&(y(r.key),o=""+r.key),"key"in r){n={};for(var G in r)G!=="key"&&(n[G]=r[G])}else n=r;return o&&T(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),X(e,o,n,c(),w,N)}function S(e){C(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===j&&(e._payload.status==="fulfilled"?C(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function C(e){return typeof e=="object"&&e!==null&&e.$$typeof===$}var i=s,$=Symbol.for("react.transitional.element"),U=Symbol.for("react.portal"),P=Symbol.for("react.fragment"),l=Symbol.for("react.strict_mode"),I=Symbol.for("react.profiler"),q=Symbol.for("react.consumer"),M=Symbol.for("react.context"),z=Symbol.for("react.forward_ref"),A=Symbol.for("react.suspense"),J=Symbol.for("react.suspense_list"),h=Symbol.for("react.memo"),j=Symbol.for("react.lazy"),x=Symbol.for("react.activity"),f=Symbol.for("react.client.reference"),k=i.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,v=Object.prototype.hasOwnProperty,Y=Array.isArray,d=console.createTask?console.createTask:function(){return null};i={react_stack_bottom_frame:function(e){return e()}};var E,p={},V=i.react_stack_bottom_frame.bind(i,u)(),D=d(g(u)),t={};L.Fragment=P,L.jsx=function(e,r,n){var a=1e4>k.recentlyCreatedOwnerStacks++;return B(e,r,n,!1,a?Error("react-stack-top-frame"):V,a?d(g(e)):D)},L.jsxs=function(e,r,n){var a=1e4>k.recentlyCreatedOwnerStacks++;return B(e,r,n,!0,a?Error("react-stack-top-frame"):V,a?d(g(e)):D)}})()),L}var ee;function ce(){return ee||(ee=1,process.env.NODE_ENV==="production"?Z.exports=le():Z.exports=ue()),Z.exports}var b=ce();function ie({children:m,className:_,style:y,transitionMs:g=250,easing:c="ease-out",depthSpacingPx:u=200,perspectivePx:R=3e3,blurAt1Px:T=6,blurAt2Px:W=10,opacityAt1:X=.7,opacityAt2:B=.45,minVisibleOpacity:S=.2,initialIndex:C=0}){const i=s.useMemo(()=>s.Children.toArray(m),[m]),$=t=>Math.max(0,Math.min(1,t)),U=(t,e,r)=>t+(e-t)*r,P=(t,e,r,n)=>t<=0?e:t>=2?n:t<=1?U(e,r,$(t)):U(r,n,$(t-1)),[l,I]=s.useState(()=>Number.isNaN(C)?0:Math.max(0,Math.min(i.length-1,C))),[q,M]=s.useState(null),[z,A]=s.useState(null),[J,h]=s.useState(1),[j,x]=s.useState(1),[f,k]=s.useState(!1),[v,Y]=s.useState(1),d=s.useRef(null),E=s.useRef(null),p=s.useCallback(t=>{if(f||t<0||t>=i.length||t===l)return;const e=t>l?1:-1;k(!0),M(l),x(0),Y(e),e===-1?(A(t),h(0)):(A(null),h(1)),I(t),E.current!==null&&window.cancelAnimationFrame(E.current),E.current=window.requestAnimationFrame(()=>{x(1),e===-1&&h(1),E.current=null}),d.current!==null&&window.clearTimeout(d.current),d.current=window.setTimeout(()=>{k(!1),M(null),A(null),h(1),x(1),Y(1),d.current=null},g+60)},[f,l,i.length,g,k,M,x,Y,A,h,I]);s.useEffect(()=>()=>{d.current!==null&&window.clearTimeout(d.current),E.current!==null&&window.cancelAnimationFrame(E.current)},[]),s.useEffect(()=>{I(t=>Math.max(0,Math.min(i.length-1,t)))},[i.length]),s.useEffect(()=>{const t=e=>{e.key==="PageUp"?p(l-1):e.key==="PageDown"&&p(l+1)};return window.addEventListener("keydown",t),()=>{window.removeEventListener("keydown",t)}},[l,p]);const V=f,D=u*l;return b.jsx("div",{className:`layeredScene ${V?"is-transitioning":""}${_?` ${_}`:""}`,"aria-label":"3D layered scene",style:{"--camera-z":`${D}px`,"--transition-ms":`${g}ms`,"--transition-easing":c,"--perspective":`${R}px`,...y},children:i.map((t,e)=>{const r=Math.abs(e-l),n=q!==null&&e===q,a=z!==null&&e===z,w=-u*e,N=n&&v===1?u*2:0;if(w+N+D>0&&!n&&!(a&&f&&v===-1))return null;const H=P(r,1,X,B),re=n&&f?v===-1?j===0?1:S:j===0?1:S:a&&f&&v===-1?J===0?0:1:e===l?1:H,te=P(r,0,T,W),ne=a&&f&&v===-1?J===0?W:0:te,ae=1e4-Math.round(r*10)+(n?1e3:0),oe=s.isValidElement(t)?t:b.jsx(b.Fragment,{children:t}),se=(s.isValidElement(t)?t.key:null)??e;return b.jsx("div",{className:`layeredLayer ${r===0?"is-focused":""} ${e===l?"is-active":""} ${n?"is-outgoing":""}`,style:{"--z":`${w}px`,"--outgoing-offset":`${N}px`,"--stack":ae,"--layer-blur":`${ne}px`,opacity:Math.max(S,re)},children:b.jsxs("div",{className:"layeredLayerInner",children:[oe,b.jsxs("div",{className:"layeredControls",children:[e!==0?b.jsx("button",{type:"button",className:"layeredBtn",onClick:()=>p(l-1),disabled:f||e!==l,children:"Previous"}):null,e!==i.length-1?b.jsx("button",{type:"button",className:"layeredBtn",onClick:()=>p(l+1),disabled:f||e!==l,children:"Next"}):null]})]})},se)})})}exports.LayeredScene=ie;

package/dist/perspective-layered-ui.css

@@ -0,0 +1 @@
+.layeredScene{width:100%;height:100%;position:relative;perspective:var(--perspective, 3000px);perspective-origin:50% 50%;overflow:hidden}.layeredLayer{position:absolute;inset:0;width:100%;height:100%;z-index:var(--stack, 0);border:0;padding:0;text-align:left;color:inherit;background:none;transform-style:preserve-3d;transform:translateZ(calc(var(--z, 0px) + var(--camera-z, 0px) + var(--outgoing-offset, 0px)));transform-origin:50% 50%;filter:blur(var(--layer-blur, 0px));transition:none;will-change:transform,filter,opacity}.layeredLayer.is-outgoing{pointer-events:none}.layeredScene.is-transitioning .layeredLayer{transition:transform var(--transition-ms, .25s) var(--transition-easing, ease-out),filter var(--transition-ms, .25s) var(--transition-easing, ease-out),opacity calc(var(--transition-ms, .25s) * .9) linear}.layeredLayerInner{height:100%;width:100%;border-radius:14px;box-shadow:0 24px 60px #0009,0 10px 24px #0006;padding:14px 16px;box-sizing:border-box;display:grid;gap:10px;align-content:start;transform:translateZ(0);position:relative;overflow:hidden;background:#090c1278;border:1px solid rgba(190,200,220,.05);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.layeredLayerInner:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;background-image:linear-gradient(to right,#a0aabe0f 1px,#a0aabe00 1px),linear-gradient(to bottom,#a0aabe0f 1px,#a0aabe00 1px);background-size:120px 60px;background-position:0 0}.layeredLayerInner>*{position:relative;z-index:1}.layeredControls{margin-top:auto;display:flex;gap:8px}.layeredBtn{appearance:none;border:1px solid rgba(170,180,200,.35);background:#0c0e1499;color:#c7ccd8;padding:6px 10px;border-radius:8px;cursor:pointer;font:inherit;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.layeredBtn:disabled{cursor:not-allowed;opacity:.6}

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "perspective-layered-ui",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "A React component for creating layered UI scenes with perspective effects",
+  "main": "./dist/index.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "react",
+    "ui",
+    "perspective",
+    "layered",
+    "component"
+  ],
+  "author": "Your Name",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build && tsc --project tsconfig.lib.json",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  }
+}