aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
610 lines (607 loc) • 26.8 kB
JavaScript
'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useReducedMotion } from '../../hooks/useReducedMotion.js';
import { useState, useCallback } from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import { PhysicsGlassButton, ImmersiveGlassButton, SmartAdaptiveButton, VRGlassButton, UltraEnhancedButton } from '../button/EnhancedGlassButton.js';
import { GlassPhysicsEngine } from '../effects/GlassPhysicsEngine.js';
import { GlassMorphingEngine } from '../effects/GlassMorphingEngine.js';
import { Glass3DEngine } from '../effects/Glass3DEngine.js';
import { OrganicAnimationEngine } from '../animations/OrganicAnimationEngine.js';
import { SpatialComputingEngine } from '../spatial/SpatialComputingEngine.js';
import { useEmotionalIntelligence } from '../../utils/emotionalIntelligence.js';
import { useAIPersonalization } from '../../utils/aiPersonalization.js';
const EnhancementShowcase = () => {
const prefersReducedMotion = useReducedMotion();
const [activeSection, setActiveSection] = useState("overview");
const [demoState, setDemoState] = useState({
interactionCount: 0,
emotionDetected: null,
predictions: [],
adaptations: {}
});
const [isFullDemo, setIsFullDemo] = useState(false);
// Intelligence systems
const {
currentEmotion,
uiAdaptation
} = useEmotionalIntelligence();
const {
profile,
recommendations
} = useAIPersonalization("showcase-user");
// Handle advanced interactions from components
const handleAdvancedInteraction = useCallback((type, data) => {
console.log("Advanced Interaction:", type, data);
setDemoState(prev => ({
...prev,
interactionCount: prev.interactionCount + 1,
emotionDetected: type === "emotion-detected" ? data : prev.emotionDetected,
predictions: type === "behavior-predicted" ? [data, ...prev.predictions.slice(0, 4)] : prev.predictions,
adaptations: type === "enhanced-click" ? data.adaptations : prev.adaptations
}));
}, []);
// Showcase sections
const showcaseSections = [{
id: "overview",
title: "AuraGlass Enhancement Overview",
description: "Next-generation glassmorphism with consciousness interface technology",
features: ["Physics-Based Glass Interactions", "Environmental Adaptation", "Immersive 3D Effects", "Organic Motion Patterns", "Emotional Intelligence", "Spatial Computing Support", "AI Personalization"],
component: jsxs("div", {
className: 'glass-grid glass-grid-cols-2 md:grid-cols-3 glass-gap-6 glass-p-8',
children: [jsx(PhysicsGlassButton, {
onAdvancedInteraction: handleAdvancedInteraction,
children: "Physics Glass"
}), jsx(ImmersiveGlassButton, {
onAdvancedInteraction: handleAdvancedInteraction,
children: "Immersive 3D"
}), jsx(SmartAdaptiveButton, {
onAdvancedInteraction: handleAdvancedInteraction,
children: "Smart Adaptive"
}), jsx(VRGlassButton, {
onAdvancedInteraction: handleAdvancedInteraction,
children: "VR Optimized"
}), jsx(UltraEnhancedButton, {
className: 'col-span-2',
onAdvancedInteraction: handleAdvancedInteraction,
children: "Ultra Enhanced (All Features)"
})]
})
}, {
id: "physics",
title: "Physics-Based Glass Effects",
description: "Realistic glass interactions with particle systems and physics simulation",
features: ["Ripple Effects", "Glass Shattering", "Bending & Warping", "Melting Transitions", "Freezing Effects", "Vibration Feedback"],
component: jsx("div", {
className: 'glass-grid glass-grid-cols-2 md:grid-cols-3 glass-gap-4 glass-p-6',
children: ["ripple", "shatter", "bend", "melt", "freeze", "vibrate"].map(effect => jsx(GlassPhysicsEngine, {
interaction: effect,
intensity: 1.2,
className: "glass-p-4 glass-surface-subtle/10 glass-glass-glass-backdrop-blur-sm glass-radius-lg glass-border glass-border-white/20 glass-contrast-guard",
children: jsxs("button", {
className: 'glass-w-full h-16 text-primary font-medium capitalize glass-focus glass-touch-target glass-contrast-guard',
children: [effect, " Effect"]
})
}, effect))
})
}, {
id: "morphing",
title: "Environmental Glass Morphing",
description: "Glass effects that adapt to time, weather, user activity, and content type",
features: ["Time-of-Day Adaptation", "Weather Response", "Seasonal Variations", "User Activity Awareness", "Content Type Optimization", "Real-Time Environmental Data"],
component: jsxs("div", {
className: 'space-y-6 glass-p-6',
children: [jsx("div", {
className: 'glass-grid glass-grid-cols-2 md:grid-cols-4 glass-gap-4',
children: [{
context: {
timeOfDay: "dawn"
},
label: "Dawn Glass"
}, {
context: {
timeOfDay: "morning"
},
label: "Morning Glass"
}, {
context: {
timeOfDay: "evening"
},
label: "Evening Glass"
}, {
context: {
timeOfDay: "night"
},
label: "Night Glass"
}].map(({
context,
label
}) => jsx(GlassMorphingEngine, {
environmentalContext: context,
className: 'glass-p-4 h-20 glass-gradient-primary glass-gradient-primary glass-gradient-primary glass-radius-lg',
children: jsx("div", {
className: 'text-primary glass-text-sm font-medium text-center',
children: label
})
}, label))
}), jsx("div", {
className: 'glass-grid glass-grid-cols-1 md:grid-cols-3 glass-gap-4',
children: [{
activity: "focused",
content: "text"
}, {
activity: "browsing",
content: "media"
}, {
activity: "creating",
content: "interactive"
}].map(({
activity,
content
}) => jsx(GlassMorphingEngine, {
userActivity: activity,
contentType: content,
className: 'glass-p-6 h-24 glass-gradient-primary glass-gradient-primary glass-gradient-primary glass-radius-lg glass-border glass-border-white/30',
children: jsxs("div", {
className: 'text-primary text-center',
children: [jsx("div", {
className: 'font-medium capitalize',
children: activity
}), jsxs("div", {
className: 'glass-text-sm opacity-70 capitalize',
children: [content, " Content"]
})]
})
}, `${activity}-${content}`))
})]
})
}, {
id: "spatial3d",
title: "Immersive 3D Glass Effects",
description: "Layered depth perception with parallax, holographic overlays, and interactive distortions",
features: ["Multi-Layer Depth System", "Parallax Scrolling Effects", "Depth of Field Simulation", "Holographic Overlays", "Interactive Distortion Mesh", "Real-Time 3D Transformations"],
component: jsxs("div", {
className: 'space-y-6 glass-p-6',
children: [jsx(Glass3DEngine, {
enableParallax: true,
enableDepthOfField: true,
enableHolographic: true,
enableDistortion: true,
maxDepthLayers: 6,
className: 'h-64 glass-gradient-primary glass-gradient-primary glass-gradient-primary glass-radius-xl',
children: jsx("div", {
className: "glass-flex glass-items-center glass-justify-center glass-h-full",
children: jsxs("div", {
className: 'text-primary text-center',
children: [jsx("h3", {
className: 'glass-text-2xl font-bold mb-2',
children: "3D Glass Portal"
}), jsx("p", {
className: 'text-primary/70',
children: "Move your mouse for 3D interaction"
}), jsxs("div", {
className: "glass-mt-4 glass-gap-4",
children: [jsx("button", {
className: 'glass-px-4 glass-py-2 glass-surface-subtle/20 glass-radius-lg hover:glass-surface-subtle/30 transition-colors glass-focus glass-touch-target glass-contrast-guard',
children: "Interact"
}), jsx("button", {
className: 'glass-px-4 glass-py-2 glass-surface-subtle/20 glass-radius-lg hover:glass-surface-subtle/30 transition-colors glass-focus glass-touch-target glass-contrast-guard',
children: "Experience"
})]
})]
})
})
}), jsx("div", {
className: "glass-grid glass-grid-cols-3 glass-gap-4",
children: Array.from({
length: 3
}, (_, i) => jsx(Glass3DEngine, {
layers: [{
depth: i,
parallaxFactor: i * 0.2
}],
className: 'h-32 glass-gradient-primary glass-gradient-primary glass-gradient-primary glass-radius-lg',
children: jsxs("div", {
className: 'glass-flex glass-items-center glass-justify-center glass-h-full text-primary',
children: ["Layer ", i + 1]
})
}, i))
})]
})
}, {
id: "organic",
title: "Organic Animation Engine",
description: "Natural motion patterns with emotional context and physics-based behavior",
features: ["Breathe & Pulse Patterns", "Wave & Flutter Motions", "Bloom & Crystallize Effects", "Emotional Context Awareness", "Physics-Based Springs", "Micro-Interaction Responses"],
component: jsx("div", {
className: 'space-y-6 glass-p-6',
children: jsx("div", {
className: 'glass-grid glass-grid-cols-2 md:grid-cols-4 glass-gap-4',
children: [{
pattern: "gentle",
emotion: "calm"
}, {
pattern: "energetic",
emotion: "excited"
}, {
pattern: "interactive",
emotion: "focused"
}, {
pattern: "contemplative",
emotion: "peaceful"
}].map(({
pattern,
emotion
}) => jsx(OrganicAnimationEngine, {
sequences: window.COMMON_SEQUENCES?.[pattern] || [],
emotionalContext: emotion,
className: 'h-24 glass-gradient-primary glass-gradient-primary glass-gradient-primary glass-radius-lg glass-flex glass-items-center glass-justify-center',
children: jsxs("div", {
className: 'text-primary text-center',
children: [jsx("div", {
className: 'font-medium capitalize',
children: pattern
}), jsx("div", {
className: 'glass-text-sm opacity-70',
children: emotion
})]
})
}, pattern))
})
})
}, {
id: "intelligence",
title: "Emotional Intelligence & AI Personalization",
description: "Adaptive UI that learns from user behavior and emotional state",
features: ["Emotion Recognition", "Biometric Adaptation", "Behavior Pattern Learning", "Personalized Preferences", "Predictive Interactions", "Smart Recommendations"],
component: jsxs("div", {
className: 'space-y-6 glass-p-6',
children: [jsxs("div", {
className: 'glass-grid glass-grid-cols-1 md:grid-cols-2 glass-gap-6',
children: [jsxs("div", {
className: "glass-p-4 glass-surface-subtle/10 glass-radius-lg",
children: [jsx("h4", {
className: 'text-primary font-medium mb-3',
children: "Emotional State"
}), currentEmotion ? jsxs("div", {
className: "glass-gap-2",
children: [jsxs("div", {
className: "glass-flex glass-justify-between",
children: [jsx("span", {
className: 'text-primary/70',
children: "Primary:"
}), jsx("span", {
className: 'text-primary capitalize',
children: currentEmotion.primary
})]
}), jsxs("div", {
className: "glass-flex glass-justify-between",
children: [jsx("span", {
className: 'text-primary/70',
children: "Intensity:"
}), jsxs("span", {
className: 'text-primary',
children: [(currentEmotion.intensity * 100).toFixed(0), "%"]
})]
}), jsxs("div", {
className: "glass-flex glass-justify-between",
children: [jsx("span", {
className: 'text-primary/70',
children: "Confidence:"
}), jsxs("span", {
className: 'text-primary',
children: [(currentEmotion.confidence * 100).toFixed(0), "%"]
})]
})]
}) : jsx("p", {
className: 'text-primary/70',
children: "Analyzing emotions..."
})]
}), jsxs("div", {
className: "glass-p-4 glass-surface-subtle/10 glass-radius-lg",
children: [jsx("h4", {
className: 'text-primary font-medium mb-3',
children: "AI Profile"
}), profile ? jsxs("div", {
className: "glass-gap-2",
children: [jsxs("div", {
className: "glass-flex glass-justify-between",
children: [jsx("span", {
className: 'text-primary/70',
children: "Confidence:"
}), jsxs("span", {
className: 'text-primary',
children: [(profile.confidence * 100).toFixed(0), "%"]
})]
}), jsxs("div", {
className: "glass-flex glass-justify-between",
children: [jsx("span", {
className: 'text-primary/70',
children: "Interactions:"
}), jsx("span", {
className: 'text-primary',
children: demoState.interactionCount
})]
}), jsxs("div", {
className: "glass-flex glass-justify-between",
children: [jsx("span", {
className: 'text-primary/70',
children: "Theme:"
}), jsx("span", {
className: 'text-primary capitalize',
children: profile.uiPreferences.colorScheme
})]
})]
}) : jsx("p", {
className: 'text-primary/70',
children: "Building profile..."
})]
})]
}), jsx("div", {
className: 'glass-grid glass-grid-cols-2 md:grid-cols-4 glass-gap-4',
children: Array.from({
length: 4
}, (_, i) => jsxs(SmartAdaptiveButton, {
onAdvancedInteraction: handleAdvancedInteraction,
className: 'h-16',
children: ["Smart Button ", i + 1]
}, i))
}), demoState.predictions.length > 0 && jsxs("div", {
className: "glass-p-4 glass-surface-subtle/10 glass-radius-lg",
children: [jsx("h4", {
className: 'text-primary font-medium mb-3',
children: "Behavioral Predictions"
}), jsx("div", {
className: "glass-gap-2",
children: demoState.predictions.slice(0, 3).map((prediction, i) => jsxs("div", {
className: "glass-flex glass-justify-between glass-text-sm",
children: [jsx("span", {
className: 'text-primary/70',
children: prediction.action
}), jsxs("span", {
className: 'text-primary',
children: [(prediction.probability * 100).toFixed(0), "%"]
})]
}, i))
})]
})]
})
}, {
id: "spatial",
title: "Spatial Computing Foundations",
description: "AR/VR ready components with gesture recognition and spatial anchoring",
features: ["WebXR Integration", "Gesture Recognition", "Spatial Anchoring", "Hand Tracking Support", "Mixed Reality Optimization", "Cross-Platform Compatibility"],
component: jsxs("div", {
className: 'space-y-6 glass-p-6',
children: [jsx(SpatialComputingEngine, {
enableGestures: true,
enableAnchoring: true,
gestureTypes: ["tap", "pinch", "grab", "swipe"],
className: 'h-48 glass-gradient-primary glass-gradient-primary glass-gradient-primary glass-radius-xl',
onGesture: gesture => console.log("Gesture detected:", gesture),
children: jsx("div", {
className: "glass-flex glass-items-center glass-justify-center glass-h-full",
children: jsxs("div", {
className: 'text-primary text-center',
children: [jsx("h3", {
className: 'glass-text-xl font-bold mb-2',
children: "Spatial Interface"
}), jsx("p", {
className: 'text-primary/70 mb-4',
children: "Touch, pinch, or gesture to interact"
}), jsxs("div", {
className: "glass-gap-4",
children: [jsx("button", {
className: 'glass-px-4 glass-py-2 glass-surface-subtle/20 glass-radius-lg hover:glass-surface-subtle/30 transition-colors glass-focus glass-touch-target glass-contrast-guard',
children: "Tap Gesture"
}), jsx("button", {
className: 'glass-px-4 glass-py-2 glass-surface-subtle/20 glass-radius-lg hover:glass-surface-subtle/30 transition-colors glass-focus glass-touch-target glass-contrast-guard',
children: "Pinch Gesture"
})]
})]
})
})
}), jsx("div", {
className: 'text-center text-primary/70 glass-text-sm',
children: "* Spatial computing features require compatible hardware for full functionality"
})]
})
}, {
id: "integration",
title: "Complete System Integration",
description: "All enhancement systems working together in perfect harmony",
features: ["Unified Consciousness Interface", "Cross-System Optimization", "Seamless User Experience", "Adaptive Performance Scaling", "Real-Time Intelligence", "Future-Ready Architecture"],
component: jsxs("div", {
className: 'space-y-8 glass-p-6',
children: [jsx(Glass3DEngine, {
enableParallax: true,
enableDepthOfField: true,
enableHolographic: true,
maxDepthLayers: 8,
className: 'relative h-80 glass-gradient-primary glass-gradient-primary via-purple/30 glass-gradient-primary glass-radius-2xl overflow-hidden',
children: jsx(GlassMorphingEngine, {
enableRealTimeAdaptation: true,
userActivity: "focused",
contentType: "interactive",
intensity: 1.5,
children: jsx(GlassPhysicsEngine, {
interaction: "ripple",
intensity: 1.3,
enabled: true,
children: jsx(OrganicAnimationEngine, {
sequences: window.COMMON_SEQUENCES?.gentle || [],
emotionalContext: currentEmotion?.primary || "calm",
enableMicroInteractions: true,
children: jsx("div", {
className: "glass-flex glass-items-center glass-justify-center glass-h-full",
children: jsxs("div", {
className: 'text-primary text-center space-y-6',
children: [jsx("h2", {
className: 'glass-text-3xl font-bold',
children: "Ultimate Glass Experience"
}), jsx("p", {
className: 'text-primary/80 max-w-md glass-mx-auto',
children: "Every enhancement system active: Physics, Morphing, 3D, Organic Motion, Emotional Intelligence, and AI Personalization working in perfect harmony."
}), jsxs("div", {
className: 'glass-grid glass-grid-cols-2 glass-gap-4 mt-8',
children: [jsx(UltraEnhancedButton, {
onAdvancedInteraction: handleAdvancedInteraction,
className: 'glass-surface-subtle/20 hover:glass-surface-subtle/30',
children: "Experience Magic"
}), jsx(UltraEnhancedButton, {
onAdvancedInteraction: handleAdvancedInteraction,
className: 'glass-surface-subtle/20 hover:glass-surface-subtle/30',
children: "Feel the Future"
})]
})]
})
})
})
})
})
}), jsx("div", {
className: 'glass-grid glass-grid-cols-2 md:grid-cols-4 glass-gap-4',
children: [{
name: "Physics Engine",
status: "Active",
color: "green"
}, {
name: "Morphing System",
status: "Adapting",
color: "blue"
}, {
name: "3D Renderer",
status: "Rendering",
color: "purple"
}, {
name: "AI Intelligence",
status: "Learning",
color: "orange"
}].map(({
name,
status,
color
}) => jsxs("div", {
className: "glass-p-3 glass-surface-subtle/10 glass-radius-lg",
children: [jsxs("div", {
className: "glass-flex glass-items-center glass-justify-between",
children: [jsx("span", {
className: 'text-primary glass-text-sm font-medium',
children: name
}), jsx("div", {
className: `w-2 h-2 glass-radius-full bg-${color}-400 animate-pulse`
})]
}), jsx("div", {
className: 'text-primary/70 glass-text-xs glass-mt-1',
children: status
})]
}, name))
})]
})
}];
return jsxs("div", {
className: 'glass-min-h-screen glass-gradient-primary glass-gradient-primary via-purple-900 glass-gradient-primary',
children: [jsx("div", {
className: "glass-surface-subtle/5 glass-glass-glass-backdrop-blur-lg glass-border-b glass-border-white/10 glass-contrast-guard",
children: jsx("div", {
className: 'max-w-7xl glass-mx-auto glass-px-4 sm:px-6 lg:px-8',
children: jsxs("div", {
className: 'glass-flex glass-items-center glass-justify-between h-16',
children: [jsxs("div", {
className: "glass-flex glass-items-center glass-gap-4",
children: [jsx("div", {
className: 'w-8 h-8 glass-gradient-primary glass-gradient-primary glass-gradient-primary glass-radius-lg'
}), jsx("h1", {
className: 'text-primary glass-text-xl font-bold',
children: "AuraGlass Enhancement Showcase"
})]
}), jsxs("div", {
className: "glass-flex glass-items-center glass-gap-4",
children: [jsxs("div", {
className: 'text-primary/70 glass-text-sm',
children: ["Interactions: ", demoState.interactionCount]
}), jsx("button", {
onClick: () => setIsFullDemo(!isFullDemo),
className: 'glass-px-4 glass-py-2 glass-surface-subtle/10 hover:glass-surface-subtle/20 text-primary glass-radius-lg transition-colors glass-focus glass-touch-target glass-contrast-guard',
children: isFullDemo ? "Exit Full Demo" : "Full Demo Mode"
})]
})]
})
})
}), jsx("div", {
className: "glass-surface-subtle/5 glass-glass-glass-backdrop-blur-sm glass-contrast-guard",
children: jsx("div", {
className: 'max-w-7xl glass-mx-auto glass-px-4 sm:px-6 lg:px-8',
children: jsx("nav", {
className: 'glass-flex space-x-8 overflow-x-auto glass-py-4',
children: showcaseSections.map(section => jsx("button", {
onClick: () => setActiveSection(section.id),
className: `whitespace-nowrap pb-2 glass-px-1 border-b-2 font-medium glass-text-sm transition-colors glass-focus glass-touch-target glass-contrast-guard ${activeSection === section.id ? "border-white glass-text-primary" : "border-transparent glass-text-primary/60 hover:glass-text-primary/80 hover:border-white/30"}`,
children: section.title
}, section.id))
})
})
}), jsx("div", {
className: 'max-w-7xl glass-mx-auto glass-px-4 sm:px-6 lg:px-8 glass-py-8',
children: jsx(AnimatePresence, {
mode: "wait",
children: showcaseSections.map(section => activeSection === section.id && jsxs(motion.div, {
initial: {
opacity: 0,
y: 20
},
animate: prefersReducedMotion ? {} : {
opacity: 1,
y: 0
},
exit: {
opacity: 0,
y: -20
},
transition: prefersReducedMotion ? {
duration: 0
} : {
duration: 0.3
},
className: 'space-y-8',
children: [jsxs("div", {
className: 'text-center glass-gap-4',
children: [jsx("h2", {
className: 'glass-text-4xl font-bold text-primary',
children: section.title
}), jsx("p", {
className: 'glass-text-xl text-primary/70 max-w-3xl glass-mx-auto',
children: section.description
}), jsx("div", {
className: 'glass-flex glass-flex-wrap glass-justify-center glass-gap-2 mt-6',
children: section.features.map(feature => jsx("span", {
className: 'glass-px-3 glass-py-1 glass-surface-subtle/10 text-primary/90 glass-text-sm glass-radius-full',
children: feature
}, feature))
})]
}), jsx("div", {
className: 'glass-surface-subtle/5 glass-glass-glass-backdrop-blur-lg glass-radius-2xl glass-border glass-border-white/10 overflow-hidden glass-contrast-guard',
children: section.component
})]
}, section.id))
})
}), jsx("div", {
className: "glass-surface-subtle/5 glass-glass-glass-backdrop-blur-lg glass-border-t glass-border-white/10 glass-mt-16 glass-contrast-guard",
children: jsx("div", {
className: 'max-w-7xl glass-mx-auto glass-px-4 sm:px-6 lg:px-8 glass-py-8',
children: jsxs("div", {
className: 'text-center text-primary/60',
children: [jsx("p", {
className: 'glass-text-lg mb-2',
children: "Experience the future of glassmorphism with consciousness interface technology"
}), jsx("p", {
className: "glass-text-sm",
children: "Built with React, Framer Motion, and advanced AI/ML systems"
})]
})
})
})]
});
};
export { EnhancementShowcase, EnhancementShowcase as default };
//# sourceMappingURL=EnhancementShowcase.js.map