{"_id":"z-axis-hanser","_rev":"3-b663cd51263475a52909495e85b55608","name":"z-axis-hanser","dist-tags":{"latest":"1.1.1"},"versions":{"1.0.0":{"name":"z-axis-hanser","version":"1.0.0","_id":"z-axis-hanser@1.0.0","maintainers":[{"name":"hanser0110","email":"hanser0110@proton.me"}],"homepage":"https://github.com/hanserq/z-axis#readme","bugs":{"url":"https://github.com/hanserq/z-axis/issues"},"dist":{"shasum":"2cc11a3a7c56ff91330bf5bb4688be235afe66de","tarball":"https://registry.npmjs.org/z-axis-hanser/-/z-axis-hanser-1.0.0.tgz","fileCount":3,"integrity":"sha512-oMGyAk69TU9gmMw7VsHibEOBduEMhUS7se/oReeGGOIo/720JiF8wOgVaUZx6/b6tV0CUTUxKfLA7QpeBDhNLw==","signatures":[{"sig":"MEUCIQCA2/KUk7asploD4SLz8G0NQXo4k+vtOFEyBrcht2INfAIgMdOw7a4w3XdFarzqam+Qm3vjv4XYe8mah3amNqXciNE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6412},"main":"./dist/z-axis-hanser.umd.cjs","type":"module","module":"./dist/z-axis-hanser.js","exports":{".":{"import":"./dist/z-axis-hanser.js","require":"./dist/z-axis-hanser.umd.cjs"}},"scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"hanser0110","email":"hanser0110@proton.me"},"repository":{"url":"git+https://github.com/hanserq/z-axis.git","type":"git"},"_npmVersion":"11.6.2","directories":{},"_nodeVersion":"25.2.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/z-axis-hanser_1.0.0_1763645051673_0.20458951314010498","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"z-axis-hanser","version":"1.1.0","_id":"z-axis-hanser@1.1.0","maintainers":[{"name":"hanser0110","email":"hanser0110@proton.me"}],"dist":{"shasum":"6d13e24e50341a49bc18b4cf5282a159ded14fdc","tarball":"https://registry.npmjs.org/z-axis-hanser/-/z-axis-hanser-1.1.0.tgz","fileCount":4,"integrity":"sha512-ypE0QaZn2bTcbv5EhNkThrlae5VTkBlMYIoxDy4HZpEJPKtnv34nmuieE4RB6KQQZmfUXbrEOOzYVz5kUs017A==","signatures":[{"sig":"MEQCICUNWlCEmNoG+xJWnNVGH8uMiFX+ge7RuRaTpPcLQVm5AiAOwiGIHOCr9uhFoPF0mf2JKGWIOxGuNbBoUTGukgAFUQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":8991},"main":"./dist/z-axis-ui.umd.cjs","type":"module","module":"./dist/z-axis-ui.js","exports":{".":{"import":"./dist/z-axis-ui.js","require":"./dist/z-axis-ui.umd.cjs"}},"scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"hanser0110","email":"hanser0110@proton.me"},"_npmVersion":"11.6.2","directories":{},"_nodeVersion":"25.2.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/z-axis-hanser_1.1.0_1763685884306_0.8824612128341922","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"z-axis-hanser","version":"1.1.1","type":"module","main":"./dist/z-axis-ui.umd.cjs","module":"./dist/z-axis-ui.js","exports":{".":{"import":"./dist/z-axis-ui.js","require":"./dist/z-axis-ui.umd.cjs"}},"scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"devDependencies":{"vite":"^5.0.0"},"_id":"z-axis-hanser@1.1.1","description":"[![npm version](https://badge.fury.io/js/z-axis-hanser.svg)](https://badge.fury.io/js/z-axis-hanser) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)","_nodeVersion":"25.2.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-4weS5yytP1N3J3Lx1XIuGVquWBKP/5O85Iu/ZI3VpXjKHn1243rqDmnKIxSQmzvJv/2LlPDteXtKCloVGKbDDQ==","shasum":"15320bad2aeab7171659485fed34e22a3e864087","tarball":"https://registry.npmjs.org/z-axis-hanser/-/z-axis-hanser-1.1.1.tgz","fileCount":5,"unpackedSize":12614,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQChqUMzU52LGtdFk7pbG+i9dKxqwmDOecnUWzBLvRqQowIhALa/mpRgDz2gP9THcG+SBwXyDjEi1Ibk8B+ifJ5jdRJp"}]},"_npmUser":{"name":"hanser0110","email":"hanser0110@proton.me"},"directories":{},"maintainers":[{"name":"hanser0110","email":"hanser0110@proton.me"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/z-axis-hanser_1.1.1_1763689141230_0.649796535437398"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-20T13:24:11.618Z","modified":"2025-11-21T01:39:01.646Z","1.0.0":"2025-11-20T13:24:11.863Z","1.1.0":"2025-11-21T00:44:44.511Z","1.1.1":"2025-11-21T01:39:01.440Z"},"maintainers":[{"name":"hanser0110","email":"hanser0110@proton.me"}],"readme":"# Z-Axis UI Library\n\n[![npm version](https://badge.fury.io/js/z-axis-hanser.svg)](https://badge.fury.io/js/z-axis-hanser)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nA lightweight, high-performance 3D physics engine for the web. It turns flat HTML elements into interactive, holographic objects that respond to mouse movement and mobile gyroscope tilt.\n\n[**✨ Launch Live Studio Demo**](https://hanserq.github.io/z-axis)\n\n---\n\n## Features\n\n* **Physics-Based Motion:** Choose between \"Heavy\" (weighted inertia) or \"Instant\" (HUD-style) movement.\n* **Holographic Glare:** Auto-generated light reflections that react to the angle of the card.\n* **Mobile Gyroscope:** Uses device orientation sensors to tilt cards based on how you hold your phone.\n* **3D Parallax Depth:** Automatically separates text and images into floating layers.\n* **Zero Dependencies:** Pure Vanilla JS. Works with React, Vue, Angular, or plain HTML.\n\n---\n\n## Installation\n\nInstall via NPM:\n\n```bash\nnpm install z-axis-hanser\n```\n---\n\n## Usage \n\n1. The \"Plug & Play\" Method (Recommended)\n\nJust add data-z attributes to your HTML. The library handles the rest.\n```\n<!-- 1. Create your card -->\n<div class=\"card\" \n     data-z \n     data-z-force=\"30\" \n     data-z-mode=\"heavy\"\n     data-z-glare>\n     \n    <!-- 2. Add depth to children -->\n    <h1 data-z-depth=\"40px\">I Float!</h1>\n    <p data-z-depth=\"20px\">I float less.</p>\n</div>\n\n<!-- 3. Initialize in your script -->\n<script type=\"module\">\n    import Z from 'z-axis-hanser';\n    \n    // Scans the DOM and activates all [data-z] elements\n    Z.init();\n</script>\n```\n2. The \"Manual\" Method (For React/Vue)\n\nIf you are building components dynamically, you can bind specific elements.\n```\nimport Z from 'z-axis-hanser';\n\nconst myElement = document.querySelector('#my-card');\n\n// Bind manually\nZ.bind(myElement, {\n    force: 30,        // Tilt limit in degrees\n    mode: 'heavy',    // 'heavy' or 'instant'\n    glare: true,      // Enable holographic shine\n    reverse: false    // Reverse tilt direction\n});\n```\n---\n\n## Mobile Support (Gyroscope)\n\nModern iOS versions require user permission to access motion sensors. You must trigger this with a user interaction (like a button click).\n\n```\n// Add a button to your UI\ndocument.getElementById('btn-enable-gyro').addEventListener('click', () => {\n    Z.mobile(); // Requests permission and activates tilt\n});\n```\n---\n\n## API Reference \n\nHTML Attributes\n\n| Attribute | Value | Description |\n| :--- | :--- | :--- |\n| `data-z` | (Empty) | **Required.** Marks the container as a 3D element. |\n| `data-z-force` | `Number` | Max tilt angle in degrees (Default: `20`). |\n| `data-z-mode` | `heavy` \\| `instant` | Physics style. `heavy` has inertia; `instant` is 1:1 tracking. |\n| `data-z-glare` | (Empty) | Adds the holographic reflection layer. |\n| `data-z-reverse`| (Empty) | Inverts the tilt axis. |\n| `data-z-depth` | `20px` | **Child Element.** Distance the child floats above the card. |\n\n\n---\n\n## JavaScript Options\n\nWhen using Z.bind(el, options):\n```\n{\n    force: 30,       // Number\n    mode: 'heavy',   // String\n    glare: true,     // Boolean\n    reverse: false   // Boolean\n}\n```\n---\n\n## Using the Studio Website\n\nThe repository includes a **Live Studio** (`index.html`) to help you design cards visually.\n\n1.  **Clone the repo:** `git clone https://github.com/hanserq/z-axis.git`\n2.  **Install:** `npm install`\n3.  **Run:** `npm run dev`\n4.  **Design:** Use the sliders to adjust physics, copy the generated HTML code, and paste it into your project.\n   \n---\n## License\nMIT © Hanser","readmeFilename":"README.md","description":"[![npm version](https://badge.fury.io/js/z-axis-hanser.svg)](https://badge.fury.io/js/z-axis-hanser) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)"}