aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
485 lines (482 loc) • 18.1 kB
JavaScript
'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useReducedMotion } from '../../hooks/useReducedMotion.js';
import { useMotionValue, useSpring, useTransform, motion } from 'framer-motion';
import { useRef, useState, useEffect } from 'react';
import { useAutoTextContrast } from '../../hooks/useAutoTextContrast.js';
import { Target, Sparkles, Zap, ArrowRight } from 'lucide-react';
// Deterministic seed-based random generator for consistent server/client rendering
function seededRandom(seed) {
const x = Math.sin(seed) * 10000;
return x - Math.floor(x);
}
const COMPARISON_DATA = [{
category: "Performance",
auraone: {
value: "10,000x",
description: "Quantum-accelerated training",
color: "from-cyan-400 to-blue-500"
},
competitor: {
value: "1x",
description: "Traditional CPU/GPU training",
color: "from-gray-400 to-gray-600"
}
}, {
category: "Safety",
auraone: {
value: "100%",
description: "Formal verification built-in",
color: "from-green-400 to-emerald-500"
},
competitor: {
value: "~30%",
description: "Manual testing only",
color: "from-red-400 to-red-600"
}
}, {
category: "Time to Deploy",
auraone: {
value: "1 Hour",
description: "One-click production deploy",
color: "from-purple-400 to-pink-500"
},
competitor: {
value: "6 Months",
description: "Complex integration required",
color: "from-yellow-600 to-orange-600"
}
}, {
category: "Compliance",
auraone: {
value: "ISO 26262, DO-178C, FDA",
description: "Automatic certification",
color: "from-indigo-400 to-purple-500"
},
competitor: {
value: "None",
description: "Manual compliance process",
color: "from-gray-500 to-gray-700"
}
}];
function GlassPrismComparison() {
const prefersReducedMotion = useReducedMotion();
const containerRef = useRef(null);
const [currentComparison, setCurrentComparison] = useState(0);
const [isHovering, setIsHovering] = useState(false);
const [prismPosition, setPrismPosition] = useState(50); // Center position
const mouseX = useMotionValue(0);
const mouseY = useMotionValue(0);
const springConfig = {
damping: 25,
stiffness: 200
};
const x = useSpring(mouseX, springConfig);
const y = useSpring(mouseY, springConfig);
const rotateX = useTransform(y, [-300, 300], [30, -30]);
const rotateY = useTransform(x, [-300, 300], [-30, 30]);
useAutoTextContrast(containerRef, {
threshold: 0.55,
observe: true
});
useEffect(() => {
const interval = setInterval(() => {
setCurrentComparison(prev => (prev + 1) % (COMPARISON_DATA?.length || 0));
}, 5000);
return () => clearInterval(interval);
}, []);
const handleMouseMove = e => {
if (containerRef.current) {
const rect = containerRef.current.getBoundingClientRect();
const centerX = rect.width / 2;
const centerY = rect.height / 2;
mouseX.set(e.clientX - rect.left - centerX);
mouseY.set(e.clientY - rect.top - centerY);
// Update prism position based on mouse
const newPosition = (e.clientX - rect.left) / rect.width * 100;
setPrismPosition(Math.max(10, Math.min(90, newPosition)));
}
};
const currentData = COMPARISON_DATA[currentComparison];
return jsxs("section", {
className: 'relative glass-py-32 overflow-hidden glass-gradient-primary glass-gradient-primary via-gray-900 glass-gradient-primary cv-auto',
children: [jsxs("div", {
className: 'container-responsive',
children: [jsxs(motion.div, {
initial: {
opacity: 0,
y: 50
},
whileInView: {
opacity: 1,
y: 0
},
viewport: {
once: true
},
transition: prefersReducedMotion ? {
duration: 0
} : {
duration: 1
},
className: 'text-center glass-mb-20',
children: [jsxs("h2", {
className: 'glass-text-5xl md:text-7xl font-black mb-8',
children: [jsxs(motion.span, {
className: 'inline-block relative',
ref: el => {
if (!el) return;
el.style.background = "linear-gradient(45deg, #00f5ff, #ff00f5, #f5ff00, #00f5ff)";
el.style.backgroundSize = "400% 400%";
el.style.webkitBackgroundClip = "text";
el.style.backgroundClip = "text";
el.style.webkitTextFillColor = "transparent";
el.style.color = "transparent";
},
animate: {
backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"]
},
transition: prefersReducedMotion ? {
duration: 0
} : {
duration: 4,
repeat: Infinity,
repeatType: "loop",
ease: "easeInOut"
},
children: ["THE IMPOSSIBLE", jsx("span", {
className: 'absolute inset-0 glass-gradient-primary glass-gradient-primary via-purple-400 glass-gradient-primary bg-clip-text text-transparent opacity-90',
children: "THE IMPOSSIBLE"
})]
}), jsx("br", {}), jsx("span", {
className: 'text-primary',
children: "DIFFERENCE"
})]
}), jsxs(motion.p, {
className: 'glass-text-2xl text-primary/70 max-w-3xl glass-mx-auto leading-relaxed',
animate: prefersReducedMotion ? {} : {
opacity: [0.7, 1, 0.7]
},
transition: prefersReducedMotion ? {
duration: 0
} : {
duration: 3,
repeat: Infinity
},
children: ["Move the prism to reveal how", " ", jsx("span", {
className: 'text-primary font-bold',
children: "AuraOne transcends"
}), " ", "traditional limitations"]
})]
}), jsxs(motion.div, {
ref: containerRef,
className: 'relative max-w-7xl glass-mx-auto h-96 glass-foundation-complete glass-glass-backdrop-blur-md2xl glass-radius-3xl glass-border glass-border-white/20 overflow-hidden cursor-none glass-contrast-guard',
onMouseMove: handleMouseMove,
onMouseEnter: () => setIsHovering(true),
onMouseLeave: () => setIsHovering(false),
style: {
perspective: 1000,
background: "transparent"
},
children: [jsx("div", {
className: 'absolute inset-0 opacity-10',
children: jsx("div", {
className: "glass-absolute glass-inset-0",
ref: el => {
if (!el) return;
el.style.backgroundImage = "linear-gradient(rgba(0,245,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,0,245,0.1) 1px, transparent 1px)";
el.style.backgroundSize = "30px 30px";
}
})
}), jsx(motion.div, {
className: 'absolute inset-0 glass-flex glass-items-center glass-justify-center',
style: {
clipPath: `polygon(0% 0%, ${prismPosition}% 0%, ${prismPosition}% 100%, 0% 100%)`
},
children: jsxs("div", {
className: 'text-center glass-p-8',
children: [jsxs("div", {
className: 'mb-6',
children: [jsx(motion.div, {
className: 'text-6xl md:text-8xl font-black mb-4',
animate: prefersReducedMotion ? {} : {
opacity: [0.6, 0.8, 0.6]
},
transition: prefersReducedMotion ? {
duration: 0
} : {
duration: 2,
repeat: Infinity
},
children: jsx("span", {
className: `bg-gradient-to-r ${currentData.competitor.color} bg-clip-text text-transparent`,
children: currentData.competitor.value
})
}), jsx("p", {
className: 'text-primary/60 glass-text-xl mb-2',
children: "Competitors"
}), jsx("p", {
className: 'text-primary/40 glass-text-sm',
children: currentData.competitor.description
})]
}), jsxs("div", {
className: 'glass-flex glass-items-center glass-justify-center glass-gap-4 text-primary/30',
children: [jsx(Target, {
className: 'w-6 h-6'
}), jsx("span", {
className: "glass-text-lg",
children: "Limited Capabilities"
})]
})]
})
}), jsx(motion.div, {
className: 'absolute inset-0 glass-flex glass-items-center glass-justify-center',
style: {
clipPath: `polygon(${prismPosition}% 0%, 100% 0%, 100% 100%, ${prismPosition}% 100%)`
},
children: jsxs("div", {
className: 'text-center glass-p-8',
children: [jsxs("div", {
className: 'mb-6',
children: [jsxs(motion.div, {
className: 'text-6xl md:text-8xl font-black mb-4 relative',
animate: prefersReducedMotion ? {} : {
scale: [1, 1.05, 1],
textShadow: ["0 0 20px currentColor", "0 0 40px currentColor", "0 0 20px currentColor"]
},
transition: prefersReducedMotion ? {
duration: 0
} : {
duration: 2,
repeat: Infinity
},
children: [jsx("span", {
className: `bg-gradient-to-r ${currentData.auraone.color} bg-clip-text text-transparent`,
children: currentData.auraone.value
}), jsx(motion.div, {
className: 'absolute -top-4 -right-4',
animate: prefersReducedMotion ? {} : {
rotate: 360,
scale: [0, 1, 0]
},
transition: {
rotate: {
duration: 3,
repeat: Infinity,
repeatType: "loop",
ease: "linear"
},
scale: {
duration: 2,
repeat: Infinity,
repeatType: "loop",
repeatDelay: 1
}
},
children: jsx(Sparkles, {
className: 'w-8 h-8 text-primary'
})
})]
}), jsx("p", {
className: 'text-primary glass-text-xl mb-2 font-bold',
children: "AuraOne"
}), jsx("p", {
className: 'text-primary/80 glass-text-sm',
children: currentData.auraone.description
})]
}), jsxs(motion.div, {
className: 'glass-flex glass-items-center glass-justify-center glass-gap-4 text-primary',
animate: prefersReducedMotion ? {} : {
opacity: [0.8, 1, 0.8]
},
transition: prefersReducedMotion ? {
duration: 0
} : {
duration: 1.5,
repeat: Infinity
},
children: [jsx(Zap, {
className: 'w-6 h-6'
}), jsx("span", {
className: 'glass-text-lg font-bold',
children: "Beyond Possible"
})]
})]
})
}), jsx(motion.div, {
className: 'absolute top-0 bottom-0 w-1 pointer-events-none',
style: {
left: `${prismPosition}%`,
transform: "translateX(-50%)",
rotateX,
rotateY
},
children: jsxs("div", {
className: 'relative glass-w-full glass-h-full',
children: [jsx(motion.div, {
className: 'absolute inset-0 glass-gradient-primary glass-gradient-primary via-white/40 glass-gradient-primary glass-glass-backdrop-blur-md glass-border-l glass-border-r glass-border-white/60 glass-contrast-guard',
animate: prefersReducedMotion ? {} : {
background: ["linear-gradient(90deg, transparent, rgba(0,245,255,0.4), transparent)", "linear-gradient(90deg, transparent, rgba(255,0,245,0.4), transparent)", "linear-gradient(90deg, transparent, rgba(245,255,0,0.4), transparent)", "linear-gradient(90deg, transparent, rgba(0,245,255,0.4), transparent)"]
},
transition: prefersReducedMotion ? {
duration: 0
} : {
duration: 3,
repeat: Infinity
}
}), Array.from({
length: 5
}).map((_, i) => jsx(motion.div, {
className: 'absolute w-20 h-0-5 glass-gradient-primary glass-gradient-primary via-white/60 glass-gradient-primary',
style: {
top: `${20 + i * 15}%`,
left: `-${40 + i * 5}px`,
transform: `rotate(${-30 + i * 15}deg)`
},
animate: prefersReducedMotion ? {} : {
opacity: [0, 0.8, 0],
scaleX: [0, 1, 0]
},
transition: prefersReducedMotion ? {
duration: 0
} : {
duration: 2,
repeat: Infinity,
repeatType: "loop",
delay: i * 0.3
}
}, i)), jsx(motion.div, {
className: 'absolute glass-top-1/2 -right-20 w-32 h-1 glass-gradient-primary glass-gradient-primary via-yellow-400 via-green-400 via-blue-400 glass-gradient-primary',
style: {
transform: "translateY(-50%) rotate(-15deg)"
},
animate: prefersReducedMotion ? {} : {
opacity: isHovering ? 0.8 : 0.4,
scaleX: isHovering ? 1.2 : 1
},
transition: prefersReducedMotion ? {
duration: 0
} : {
duration: 0.3
}
})]
})
}), jsx(motion.div, {
className: 'absolute pointer-events-none z-50',
style: {
x: mouseX,
y: mouseY,
left: "50%",
top: "50%"
},
animate: prefersReducedMotion ? {} : {
scale: isHovering ? 1.5 : 0,
rotate: 360
},
transition: {
scale: {
duration: 0.2
},
rotate: {
duration: 2,
repeat: Infinity,
repeatType: "loop",
ease: "linear"
}
},
children: jsx("div", {
className: 'w-8 h-8 glass-radius-full glass-surface-subtle/30 glass-glass-backdrop-blur-md glass-border glass-border-white/50 glass-flex glass-items-center glass-justify-center glass-contrast-guard',
children: jsx(ArrowRight, {
className: 'w-4 h-4 text-primary'
})
})
})]
}), jsx(motion.div, {
className: "glass-flex glass-justify-center glass-gap-6 glass-mt-12",
initial: {
opacity: 0,
y: 30
},
whileInView: {
opacity: 1,
y: 0
},
viewport: {
once: true
},
transition: prefersReducedMotion ? {
duration: 0
} : {
duration: 0.8,
delay: 0.5
},
children: COMPARISON_DATA.map((data, index) => jsx(motion.button, {
onClick: e => setCurrentComparison(index),
className: `glass-px-6 glass-py-3 glass-radius-full border-2 transition-all duration-300 ${currentComparison === index ? "glass-border glass-surface-primary/20 glass-text-primary" : "border-white/30 glass-text-primary/60 hover:border-white/50 hover:glass-text-primary/80"}`,
whileHover: {
scale: 1.05
},
whileTap: {
scale: 0.95
},
children: jsx("span", {
className: 'font-medium',
children: data?.category
})
}, index))
}), jsx(motion.div, {
className: 'text-center glass-mt-12',
animate: prefersReducedMotion ? {} : {
opacity: [0.5, 1, 0.5]
},
transition: prefersReducedMotion ? {
duration: 0
} : {
duration: 2,
repeat: Infinity
},
children: jsxs("p", {
className: 'text-primary/50 glass-text-lg',
children: [jsx(motion.span, {
animate: prefersReducedMotion ? {} : {
color: ["var(--glass-white)", "#00f5ff", "var(--glass-white)"]
},
transition: prefersReducedMotion ? {
duration: 0
} : {
duration: 2,
repeat: Infinity
},
children: "Move your mouse"
}), " ", "to control the prism and see the impossible difference"]
})
})]
}), jsx("div", {
className: 'absolute inset-0 pointer-events-none overflow-hidden',
children: Array.from({
length: 20
}).map((_, i) => jsx(motion.div, {
className: 'absolute w-2 h-2 glass-surface-primary/30 glass-radius-full',
style: {
left: `${seededRandom(i * 19000) * 100}%`,
top: `${seededRandom(i * 20000) * 100}%`
},
animate: prefersReducedMotion ? {} : {
y: [0, -30, 0],
opacity: [0.3, 1, 0.3],
scale: [1, 1.5, 1]
},
transition: prefersReducedMotion ? {
duration: 0
} : {
duration: Math.max(3 + seededRandom(i * 21000) * 2, 0.5),
repeat: Infinity,
repeatType: "loop",
delay: Math.max(seededRandom(i * 22000) * 2, 0)
}
}, i))
})]
});
}
export { GlassPrismComparison };
//# sourceMappingURL=GlassPrismComparison.js.map