A comprehensive glassmorphism design system for React applications with 142+ production-ready components
npm install aura-glassThe living glass OS for interfaces that feel hand-polished, emotionally aware, and production ready from day one. AuraGlass marries premium-grade craft with quantum-inspired intelligence, delivering self-healing glassmorphism, multi-sensory feedback, and Genesis-powered AI systems that rewrite what premium software can feel like.
Over 356 adaptive components. 17 world-first inventions. 8 AI-powered suites. One cohesive ecosystem that designs, optimizes, and deploys itself.
Proof points
- Future-native – Quantum UI states, neural weights, and probabilistic gestures allow interfaces that anticipate intention.
- Self-healing – GlassMetaEngine detects visual or accessibility drift and restores perfection automatically.
- Environmental intelligence – Sensors, biometrics, and contextual cues feed a contextual engine that reharmonizes tint, tone, and behavior in real time.
- Enterprise hardening – Auth, rate limiting, Redis caching, Sentry monitoring, Docker/Kubernetes assets, and CI/CD templates ship in the box.
Key Features:
- Canonical Dataset: Defined in src/theme/designMatrix.ts, personas include metadata (name, description, context) and tokens for colors, typography, motion, and glassmorphism parameters.
- Runtime Theming: Use ThemeProvider with initialPersona or controlled persona props to apply themes; persists via localStorage if persistPersona is enabled.
- PersonaPicker Component: Drop-in for seamless switching, sourced from the Design Matrix.
- Autogenerated CSS: Run npm run glass:generate-persona-css to create [data-persona] variables in src/styles/generated/persona-variables.css; validate in CI with npm run glass:validate-persona-css.
- Integration: Components like GlassAppShell, GlassHeader, and charts automatically consume persona tokens for focus rings, shadows, and palettes.
Usage Example:
``tsx
import { ThemeProvider, PersonaPicker, usePersonaTheme } from 'aura-glass';
function App({ children }) {
return (
{children}
);
}
function PersonaAwareComponent() {
const { personaId, persona, setPersona } = usePersonaTheme();
return (
);
}
`
This system eliminates manual theming, ensures WCAG compliance per persona, and scales to new domains while maintaining AuraGlass's glassmorphism DNA.
- Universal SSR helpers – Import from aura-glass/utils/env for isBrowser, safeMatchMedia, getSafeWindow, useClientEffect, and deterministic hydration everywhere.SeededRandom
- Deterministic effects – plus seed props on SeasonalParticles and GlassShatterEffects render identical markup on the server and the client.ConsciousnessStreamProvider
- Advanced + quantum components – Living ecosystem simulators, neuromorphic learning networks, and quantum entanglement visualizers extend AuraGlass beyond UI.
- Consciousness streaming – centralizes event logging and response logic for consciousness-aware flows.component_inventory_json_path
- Exported tooling constants – Access and reduced-motion guides at build time to automate audits.
- Isolated 3D entrypoint – All R3F-heavy components now live under the aura-glass/three entry (e.g. GlassShatterEffects, SeasonalParticles, AuroraPro, ARGlassEffects and helpers like shatterPresets, auroraThemes, ARGlassAnimations). The root aura-glass entry no longer imports @react-three/fiber..r3f
- React-aware lazy loading – 3D components are implemented as modules with thin wrappers that lazily import them only when React 19 is detected at runtime; React 18 receives styled fallback containers that preserve layout without touching R3F internals.aura-glass/three
- Safer presets & factories – Presets and AR helper factories have been moved into non-R3F helper modules so they can be imported without forcing Three/Fiber into SSR bundles.
- Next.js integration matrix – CI now spins up two Next.js test apps from the published tarball: React 18 + Next 14.2 (root entry only) and React 19 + Next 15 (using ); Playwright smoke tests fail the build if hook/registry errors or reconciler crashes are detected.
- LiquidGlassMaterial primitive – Physically accurate Snell’s law refraction, tunable IOR bands (1.33–1.52), and thickness controls.
- Environmental adaptation – Automatic WCAG AA/AAA compliance by sampling real-time luminance.
- GPU acceleration with grace – WebGL shaders where available, CSS fallbacks everywhere else.
- Motion responsiveness – Device tilt, micro-interactions, and ripple physics connect touch to light.
- Contrast Guard – Backdrop-aware tinting keeps text legible across unpredictable imagery.
- Quality tiers – Ultra/High/Balanced/Efficient profiles decide shader cost, particle density, and sampling budgets.
- Zero breaking changes – Opt into material="liquid" for legacy safety.
and build-log.txt for post-mortems.Developer Experience
- Persona-aware theming – ThemeProvider, usePersonaTheme(), and hydrate html[data-persona], persist selections, and expose persona metadata instantly.
- TypeScript all the way down – 100% strict-mode safe with zero anys across physics, gestures, and AI services.
- World-class accessibility – Entire system honors prefers-reduced-motion, exposes useEnhancedReducedMotion, and keeps every animation optional without reducing functionality.
- SSR-native – Guarded browser globals, initializeAuraGlassClient(), and AuraGlassClientBoundary remove hydration traps for Next.js, Remix, or bespoke servers.
- Testing discipline – AI service validation, rate-limit suites, integration tests, and Playwright + Jest tooling keep regressions out of flight.
- Houdini-ready – HoudiniGlassProvider, HoudiniGlassCard, and shader presets unlock CSS Houdini acceleration with progressive enhancement.Install in Minutes
Step 1 – Peer dependencies
`bash
npm install react react-dom react-hook-form react-chartjs-2 framer-motion lucide-react
npm install three @react-three/fiber # required only if you use 3D effects
npm install @radix-ui/react-dropdown-menu @radix-ui/react-select @radix-ui/react-label @radix-ui/react-slot
npm install @sentry/react
npm install @react-three/drei # optional helpers for advanced 3D scenes
`Step 2 – AuraGlass
`bash
npm install aura-glass
or yarn add aura-glass
or pnpm add aura-glass
`Step 3 – Global styles
`tsx
// root layout or entry file
import 'aura-glass/styles';
`Step 4 – (Optional) SSR support
`tsx
import { AuraGlassSSRProvider } from 'aura-glass/ssr';export function App({ children }) {
return {children} ;
}
`Step 5 – Design tokens & Tailwind helpers
`ts
import auraTokens, { personas } from 'aura-glass/tokens';console.log(auraTokens.version); // 1.0.0
console.log(personas[0].metadata.displayName);
``ts
// tailwind.config.ts
import type { Config } from 'tailwindcss';
import theme from 'aura-glass/tokens/tailwind';export default {
content: ['./src/*/.{ts,tsx}'],
theme,
} satisfies Config;
`> After adjusting personas inside
src/theme/designMatrix.ts, run npm run glass:generate-persona-css (and npm run glass:validate-persona-css in CI) to regenerate [data-persona] variables at src/styles/generated/persona-variables.css.Use AuraGlass
`tsx
import { useEffect } from 'react';
import {
OptimizedGlass,
GlassCard,
MagneticButton,
GlassMagneticCursor,
Motion,
GlassModal,
initializeAuraGlass,
} from 'aura-glass';
import 'aura-glass/styles';export function Hero() {
useEffect(() => {
initializeAuraGlass({
qualityTier: 'auto',
monitoring: true,
animations: {
enabled: true,
duration: 280,
easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
},
}).catch(console.error);
}, []);
return (
Welcome to AuraGlass
Liquid glass, spatial audio, and predictive AI in one responsive canvas.
variant="primary"
intent="primary"
aria-label="Launch experience"
>
Launch Experience
);
}
``tsx
// Liquid Glass Parity+ modal usage
function LiquidGlassModal({ open, onClose }: { open: boolean; onClose(): void }) {
return (
open={open}
onClose={onClose}
title="Liquid Glass Modal"
description="Environmental tinting, GPU refinement, WCAG confidence."
material="liquid"
materialProps={{
ior: 1.52,
thickness: 12,
tint: { r: 0, g: 0, b: 0, a: 0.1 },
variant: 'regular',
quality: 'high',
}}
>
This modal uses liquid glass with:
- • Physically accurate IOR refraction
- • Environmental backdrop adaptation
- • Automatic WCAG compliance
- • Motion-responsive effects
- • GPU-accelerated rendering
);
}
`Deploy with Confidence
`bash
cp .env.example .env
npm installRecommended
docker-compose up -dManual path
./scripts/deploy.sh
`- Frontend
http://localhost:3000
- API http://localhost:3002
- WebSocket ws://localhost:3001Need to scale? Slide the Docker images into Kubernetes with the provided Helm charts, wire Redis + Postgres, and plug Sentry + analytics directly into
initializeAuraGlass.Key Resources
- INSTALLATION.md – Upgrade guides, troubleshooting, and migration notes.
- docs/README.md – Component encyclopedias, design tokens, and architecture briefs.
- docs/tokens/design-tokens.md – Lighting, motion, and color blueprints.
- docker-compose.yml` – Reference deployment stack.AuraGlass is licensed under the MIT License. Craft with care, push the frontier, and let the glass come alive.