{"_id":"@argobox/glass-ui","name":"@argobox/glass-ui","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@argobox/glass-ui","version":"0.1.0","type":"module","license":"MIT","description":"A premium glassmorphic design system for Astro sites with cosmic effects, animations, and themeable components","exports":{".":"./index.ts","./layouts/*":"./src/layouts/*","./components/*":"./src/components/*","./styles/*":"./src/styles/*","./fonts/*":"./src/fonts/*"},"peerDependencies":{"astro":"^5.0.0"},"keywords":["astro","glass-morphism","glassmorphism","design-system","theme","cosmic","dark-theme","ui","admin-dashboard","sci-fi"],"author":{"name":"Daniel LaForce"},"publishConfig":{"access":"public"},"_id":"@argobox/glass-ui@0.1.0","_integrity":"sha512-V1Fd+sAh1CaAPYO5pfE6ZspETb9b9UcPWWU44v7OZU3334sCBOK26T/aWrYSLpd/DAsJE8IqdyOlxdqvrbuP5A==","_resolved":"/tmp/06dbc599ffe741b536e4f6e476227452/argobox-glass-ui-0.1.0.tgz","_from":"file:argobox-glass-ui-0.1.0.tgz","_nodeVersion":"22.15.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-V1Fd+sAh1CaAPYO5pfE6ZspETb9b9UcPWWU44v7OZU3334sCBOK26T/aWrYSLpd/DAsJE8IqdyOlxdqvrbuP5A==","shasum":"186a3988892656cdf2947bf44172acc968cae6af","tarball":"https://registry.npmjs.org/@argobox/glass-ui/-/glass-ui-0.1.0.tgz","fileCount":16,"unpackedSize":175209,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC/pglpoT+8iuN1JuDGmCH/CLQ1IHG6YLHANy/bCKiBhQIhAM8FNlRojURoO2KqL67sBzJ3IXNXUiTFOta6TtRH+ZYV"}]},"_npmUser":{"name":"dlaforce","email":"daniel.laforce@gmail.com"},"directories":{},"maintainers":[{"name":"dlaforce","email":"daniel.laforce@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/glass-ui_0.1.0_1773192468250_0.4933914641606878"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-11T01:27:48.173Z","0.1.0":"2026-03-11T01:27:48.412Z","modified":"2026-03-11T01:27:48.597Z"},"maintainers":[{"name":"dlaforce","email":"daniel.laforce@gmail.com"}],"description":"A premium glassmorphic design system for Astro sites with cosmic effects, animations, and themeable components","keywords":["astro","glass-morphism","glassmorphism","design-system","theme","cosmic","dark-theme","ui","admin-dashboard","sci-fi"],"author":{"name":"Daniel LaForce"},"license":"MIT","readme":"# @argobox/glass-ui\n\nA premium glassmorphic design system for Astro with cosmic effects, sci-fi animations, and fully themeable components.\n\n**Zero JavaScript. Pure CSS. Drop it into any Astro site.**\n\n## What You Get\n\n- **5 glass tiers** — light, standard, heavy, solid, premium (with glow effects)\n- **97 design tokens** — colors, blur levels, transitions, fonts — all overridable via CSS custom properties\n- **Full component set** — cards, buttons, inputs, tabs, status indicators, heroes, stats, grids\n- **Sci-fi animations** — glitch text, HUD scan lines, holographic shimmer, neon flicker, data streams, typing effects\n- **Cosmic backgrounds** — Starfield and Nebula Astro components with configurable colors\n- **Accessibility** — `prefers-reduced-motion`, `focus-visible`, 44px touch targets, `backdrop-filter` fallbacks\n- **4 bundled fonts** — Inter, Orbitron, Space Grotesk, JetBrains Mono (woff2)\n\n## Install\n\n```bash\nnpm install @argobox/glass-ui\n```\n\n## Quick Start\n\n```astro\n---\n// src/layouts/Layout.astro\nimport '@argobox/glass-ui/styles/theme-base.css'\nimport '@argobox/glass-ui/styles/glass-morphism.css'\nimport '@argobox/glass-ui/styles/animations.css'\nimport Starfield from '@argobox/glass-ui/components/effects/Starfield.astro'\n---\n\n<html>\n  <body>\n    <Starfield />\n    <div class=\"glass-hero\">\n      <h1 class=\"glass-hero-title\">My Dashboard</h1>\n      <p class=\"glass-hero-subtitle\">Built with glass-ui</p>\n    </div>\n\n    <div class=\"glass-grid glass-grid-3\">\n      <div class=\"glass-card glass-glow\">\n        <div class=\"glass-status online\">\n          <span class=\"glass-status-dot\"></span>\n          Online\n        </div>\n        <h3>Server Alpha</h3>\n      </div>\n    </div>\n  </body>\n</html>\n```\n\n## Glass Variants\n\n```html\n<div class=\"glass\">Standard glass panel</div>\n<div class=\"glass-light\">Subtle, lightweight</div>\n<div class=\"glass-heavy\">More opacity, stronger blur</div>\n<div class=\"glass-solid\">Near-opaque, maximum blur</div>\n<div class=\"glass-premium\">Gradient background + accent glow</div>\n```\n\n## Animations\n\n```html\n<span class=\"glitch-text\" data-text=\"SYSTEM ONLINE\">SYSTEM ONLINE</span>\n<div class=\"hud-scan\">Scanning...</div>\n<div class=\"holo-badge\">Holographic</div>\n<span class=\"neon-text\">Neon Glow</span>\n<span class=\"typing-effect\">Hello, world...</span>\n```\n\n## Theming\n\nOverride any token in your site's CSS:\n\n```css\n:root {\n  --gui-accent-primary: #10b981;        /* Change accent to green */\n  --gui-accent-primary-rgb: 16, 185, 129;\n  --gui-bg-void: #0a0a0a;              /* Darker background */\n  --gui-glass-blur: 24px;              /* More blur */\n  --gui-font-display: 'Rajdhani', sans-serif;  /* Different display font */\n}\n```\n\n## Components\n\n| Component | Import |\n|-----------|--------|\n| Starfield | `@argobox/glass-ui/components/effects/Starfield.astro` |\n| Nebula | `@argobox/glass-ui/components/effects/Nebula.astro` |\n| GlassCard | `@argobox/glass-ui/components/ui/GlassCard.astro` |\n| ScrollProgress | `@argobox/glass-ui/components/layout/ScrollProgress.astro` |\n| SEO | `@argobox/glass-ui/components/SEO.astro` |\n\n## CSS-Only Usage (Any Framework)\n\nThe styles work without Astro. In React, Vue, Svelte, or plain HTML:\n\n```js\nimport '@argobox/glass-ui/styles/theme-base.css'\nimport '@argobox/glass-ui/styles/glass-morphism.css'\n```\n\nThen use the CSS classes directly. The Astro components are a convenience, not a requirement.\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-23a52ccdaab07de0f4b49bf5c2d3f47c"}