{"_id":"@arthur_leywin/glass-ui","_rev":"2-5a980bc5d41c93e0812d636dc9efee45","name":"@arthur_leywin/glass-ui","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@arthur_leywin/glass-ui","version":"0.1.0","_id":"@arthur_leywin/glass-ui@0.1.0","maintainers":[{"name":"arthur_leywin","email":"hurmanejaz@gmail.com"}],"dist":{"shasum":"de466eec9c2652e2cb83cf7bbff9ec6158abbd64","tarball":"https://registry.npmjs.org/@arthur_leywin/glass-ui/-/glass-ui-0.1.0.tgz","fileCount":20,"integrity":"sha512-DEWatMfpPKmrOk5JaD8OO5YzlwZBAE/kdf41SN2ZPJNkyz53NiJv0QgV0QBv4kcyEHSsIat0Im6RbeSpEBuQfw==","signatures":[{"sig":"MEQCIEhIk/Cfc19iwiggIGl9h/56IA6jqaEk2C0zWUa+w4kEAiAw0CoSKXZCxSPdu3hOalcf6TyvCLUEr/OD8E8hhx7dfA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":543751},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./webgl":{"types":"./dist/webgl.d.ts","import":"./dist/webgl.js","require":"./dist/webgl.cjs"},"./styles.css":"./dist/index.css"},"scripts":{"dev":"vite","test":"vitest run","build":"tsup","storybook":"storybook dev -p 6006","typecheck":"tsc --noEmit","test:watch":"vitest","build-storybook":"storybook build"},"_npmUser":{"name":"arthur_leywin","email":"hurmanejaz@gmail.com"},"_npmVersion":"10.8.2","description":"A premium, interactive React component library implementing physics-based 3D WebGL glass materials, real-time refraction/distortion, spring micro-interactions, layout indicators, and kinetic SVG animations.","directories":{},"_nodeVersion":"20.20.2","dependencies":{"gsap":"^3.12.5","three":"^0.160.0","animejs":"^4.5.0","framer-motion":"^11.0.3","@react-three/drei":"^9.96.0","@react-three/fiber":"^8.15.16"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.1","vite":"^5.0.12","jsdom":"^29.1.1","react":"^18.2.0","vitest":"^4.1.10","postcss":"^8.4.33","react-dom":"^18.2.0","storybook":"^10.4.6","size-limit":"^12.1.0","typescript":"^5.3.3","tailwindcss":"^3.4.1","@types/react":"^18.2.48","@types/three":"^0.160.0","autoprefixer":"^10.4.17","@storybook/test":"^8.6.15","@types/react-dom":"^18.2.18","@storybook/blocks":"^8.6.14","@vitejs/plugin-react":"^4.2.1","@storybook/react-vite":"^10.4.6","@testing-library/react":"^16.3.2","@testing-library/jest-dom":"^6.9.1","@size-limit/preset-big-lib":"^12.1.0","@storybook/addon-essentials":"^8.6.14","@testing-library/user-event":"^14.6.1","@storybook/addon-interactions":"^8.6.14"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/glass-ui_0.1.0_1783429647971_0.8694779720067032","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@arthur_leywin/glass-ui","version":"0.1.1","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./webgl":{"types":"./dist/webgl.d.ts","import":"./dist/webgl.js","require":"./dist/webgl.cjs"},"./styles.css":"./dist/index.css"},"scripts":{"dev":"vite","build":"tsup","typecheck":"tsc --noEmit","test":"vitest run","test:watch":"vitest","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"dependencies":{"@react-three/drei":"^9.96.0","@react-three/fiber":"^8.15.16","animejs":"^4.5.0","framer-motion":"^11.0.3","gsap":"^3.12.5","three":"^0.160.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"devDependencies":{"@size-limit/preset-big-lib":"^12.1.0","@storybook/addon-essentials":"^8.6.14","@storybook/addon-interactions":"^8.6.14","@storybook/blocks":"^8.6.14","@storybook/react-vite":"^10.4.6","@storybook/test":"^8.6.15","@testing-library/jest-dom":"^6.9.1","@testing-library/react":"^16.3.2","@testing-library/user-event":"^14.6.1","@types/react":"^18.2.48","@types/react-dom":"^18.2.18","@types/three":"^0.160.0","@vitejs/plugin-react":"^4.2.1","autoprefixer":"^10.4.17","jsdom":"^29.1.1","postcss":"^8.4.33","react":"^18.2.0","react-dom":"^18.2.0","size-limit":"^12.1.0","storybook":"^10.4.6","tailwindcss":"^3.4.1","tsup":"^8.0.1","typescript":"^5.3.3","vite":"^5.0.12","vitest":"^4.1.10"},"_id":"@arthur_leywin/glass-ui@0.1.1","description":"A premium, interactive React component library implementing physics-based 3D WebGL glass materials, real-time refraction/distortion, spring micro-interactions, layout indicators, and kinetic SVG animations.","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-4p9iXSQIVvGvPzassPoBtvnJjfxiAElqUGVGWlt5T34m9ww5GdQAZsmjcX/5m9Z5mxUPBDNJosQXDPv2mukccw==","shasum":"1bfb79b18b1961c3b30cc087d2729a30b3c31d78","tarball":"https://registry.npmjs.org/@arthur_leywin/glass-ui/-/glass-ui-0.1.1.tgz","fileCount":20,"unpackedSize":546234,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIAHy8hE9Cz0y1tb0EIy64pGJLQXqBMgfXFD+QG6EW4vQAiAmjHh3OXE0dRwXbGedzFTuC/VQtzUMR0b48TxeUAahow=="}]},"_npmUser":{"name":"arthur_leywin","email":"hurmanejaz@gmail.com"},"directories":{},"maintainers":[{"name":"arthur_leywin","email":"hurmanejaz@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/glass-ui_0.1.1_1783469196168_0.34948347481272957"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-07T13:07:27.824Z","modified":"2026-07-08T00:06:36.460Z","0.1.0":"2026-07-07T13:07:28.135Z","0.1.1":"2026-07-08T00:06:36.349Z"},"description":"A premium, interactive React component library implementing physics-based 3D WebGL glass materials, real-time refraction/distortion, spring micro-interactions, layout indicators, and kinetic SVG animations.","maintainers":[{"name":"arthur_leywin","email":"hurmanejaz@gmail.com"}],"readme":"# @arthur_leywin/glass-ui\n\nA premium, interactive React component library implementing physics-based 3D WebGL glass materials, real-time refraction/distortion, spring micro-interactions, layout indicators, and kinetic SVG animations.\n\nDesigned to deliver rich, state-of-the-art aesthetics while maintaining high-performance safety rails (touchscreen fallbacks, prefers-reduced-motion integration, and viewport lazy-mounting).\n\n---\n\n## Key Features\n\n- **Split Entry Points (Zero WebGL Bloat)**: Exposes two separate package subpaths. Lightweight components import instantly without loading Three.js.\n- **Real-Time WebGL Glass Refraction (Opt-In)**: Dynamic 3D refraction maps, chromatic aberration, point-light cursor tracking, and surface roughness rendering powered by React Three Fiber and Three.js.\n- **Adaptive Performance Engine**:\n - **Coarse Pointer & Viewport Detection**: Automatically detects mobile/touchscreens and viewports under 768px, falling back to static CSS glass configurations to save power.\n - **Reduced Motion Support**: Disables spring magnetic follow, 3D hover tilt, and heavy shader materials when system `prefers-reduced-motion` is active.\n - **Viewport Lazy Mounting**: Automatically skips WebGL Canvas rendering for off-screen cards using `IntersectionObserver`, activating canvas contexts only as they enter the viewport.\n - **Animation Count Threshold**: Emits console warnings in development mode when more than 10 `anime.js` micro-animations are active simultaneously to prevent frames dropping.\n- **Spring-Physics Core Widgets**: Magnetic hover buttons, elastic tooltips with automatic screen flipping, and layouts using GSAP/Framer Motion.\n- **Kinetic Micro-Animations**: Sequential typewriter writing, decode scrambling, SVG path morphing, logo-reveal path separators, and responsive loading animations.\n\n---\n\n## Installation\n\nInstall the library along with its peer dependencies:\n\n```bash\nnpm install @arthur_leywin/glass-ui three @react-three/fiber @react-three/drei framer-motion gsap animejs\n```\n\n---\n\n## Import Subpaths\n\nTo support maximum tree-shaking efficacy, `@arthur_leywin/glass-ui` exports assets on two different paths:\n\n### 1. Lightweight Components (`@arthur_leywin/glass-ui`)\nContains core widgets with **zero** WebGL or Three.js dependencies. Perfect for maintaining small bundle sizes.\n- **Components**: `Badge`, `Tooltip`, `Input`, `Select`, `Checkbox`, `Radio`, `Switch`, `Tabs`, `Navbar`, `AnimatedText`, `AnimatedIcon`, `PathDivider`, `Loader`, `Card`, `Button`.\n- *Note*: `Card`, `Button`, and `Loader` rendered from this path use high-performance static CSS glass styling.\n\n```tsx\nimport { Badge, Tooltip, Input, Button, Card } from \"@arthur_leywin/glass-ui\";\n```\n\n### 2. WebGL Components (`@arthur_leywin/glass-ui/webgl`)\nExposes premium 3D shader-based components that pull in Three.js and React Three Fiber.\n- **Components**: `GlassCanvas`, `GlassButton`, `GlassCard`, `GlassLoader`, and material shader definitions.\n\n```tsx\nimport { GlassCard, GlassButton, GlassLoader, GlassCanvas } from \"@arthur_leywin/glass-ui/webgl\";\n```\n\n---\n\n## Quick Start\n\n### 1. Basic Setup\n\nImport the global styles into your project root (e.g. `main.tsx` or `_app.tsx`):\n\n```tsx\nimport \"@arthur_leywin/glass-ui/dist/index.css\";\n```\n\n### 2. Render an Interactive WebGL Glass Card\n\n```tsx\nimport { GlassCard } from \"@arthur_leywin/glass-ui/webgl\";\n\nexport default function App() {\n return (\n \n
\n

Glass Interface

\n

\n This card bends background colors dynamically based on pointer positions.\n

\n
\n \n );\n}\n```\n\n---\n\n## Component Reference\n\n### 1. Card & GlassCard\n\nA customizable glass backplate with mouse-tilt reflection, glare, and background shader properties.\n\n| Prop (GlassCard) | Type | Default | Description |\n|---|---|---|---|\n| `tilt` | `boolean` | `true` | Enables 3D cursor-follow perspective tilt. |\n| `tiltMaxAngle`| `number` | `12` | Maximum tilt inclination in degrees. |\n| `showOrbs` | `boolean` | `true` | Renders moving gradient orbs behind the glass plate inside the shader scene. |\n| `glassProps` | `GlassMaterialProps` | `{}` | Customize IOR, chromatic aberration, roughness, and thickness. |\n\n---\n\n### 2. Button & GlassButton\n\nMagnetic spring buttons featuring cursor light tracking.\n\n```tsx\nimport { GlassButton } from \"@arthur_leywin/glass-ui/webgl\";\n\n\n Confirm Transaction\n\n```\n\n---\n\n### 3. Tooltip\n\nSpring-physics tooltip indicators that automatically flip coordinates if pushed off-screen.\n\n```tsx\nimport { Tooltip, Button } from \"@arthur_leywin/glass-ui\";\n\n\n \n\n```\n\n---\n\n### 4. Form Elements\n\nCSS glass form fields mapped to project design tokens:\n\n```tsx\nimport { Input, Select, Switch, Checkbox, Radio } from \"@arthur_leywin/glass-ui\";\n\n// Inside a form container:\n\n