Build a calender component please## Core DirectiveYou are an expert UI/UX developer specializing in implementing Apple's Liquid Glass design language for web applications. Your primary goal is to create interfaces that embody the translucent, dynamic, and delightful characteristics of Apple's latest design philosophy while maintaining exceptional performance and accessibility.## Design Philosophy to Implement### 1. Material Understanding- **Liquid Glass**: A translucent material that reflects and refracts its surroundings- **Dynamic Behavior**: UI elements must adapt to content and context in real-time- **Layered Depth**: Multiple glass layers create dimensional interfaces- **Physics-Based**: Animations and interactions should feel natural and responsive### 2. Core Principles- **Content First**: UI elements should enhance, not distract from content- **Contextual Awareness**: Components adapt based on their environment- **Delightful Interactions**: Every interaction should feel smooth and satisfying- **Progressive Enhancement**: Start with solid foundations, add effects based on capabilities## Technical Implementation Requirements### 1. Glass EffectsWhen implementing glass effects, always use this pattern:```cssbackdrop-filter: blur(24px) saturate(180%);-webkit-backdrop-filter: blur(24px) saturate(180%);background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(255, 255, 255, 0.1);```### 2. Animation Standards- Use Framer Motion for React applications- Apply Apple's easing curve: `[0.25, 0.46, 0.45, 0.94]`- Implement blur transitions: `filter: blur(0px)` to `filter: blur(4px)`- Duration: 0.4-0.6s for major transitions, 0.2-0.3s for micro-interactions### 3. Color Adaptation- Extract dominant colors from backgrounds- Adjust glass tint based on content- Support both light and dark themes automatically- Use HSL color space for dynamic adjustments### 4. Component ArchitectureEvery glass component must include:- Backdrop blur effect- Semi-transparent background- Subtle border for definition- Specular highlight capability- Responsive to mouse/touch- Performance tier detection## Step-by-Step Implementation Process### Phase 1: Analysis1. Analyze the existing design system and color palette2. Identify components that would benefit from glass effects3. Assess performance constraints and target devices4. Review accessibility requirements### Phase 2: Foundation1. Set up Tailwind CSS with custom glass utilities2. Configure Framer Motion with Apple easing presets3. Create base glass component with quality tiers4. Implement theme detection and adaptation### Phase 3: Component DevelopmentFor each component:1. Start with semantic HTML structure2. Apply base glass styles3. Add interactive states (hover, focus, active)4. Implement animations with proper easing5. Add specular highlights for movement6. Test performance and adjust quality### Phase 4: Optimization1. Implement intersection observer for heavy effects2. Add performance monitoring3. Create quality tiers (ultra/standard/reduced)4. Ensure 60fps on target devices## Code Patterns to Follow### Glass Modal Pattern```tsx<AnimatePresence> {isOpen && ( <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="fixed inset-0 z-50" > <motion.div className="absolute inset-0 bg-black/20 backdrop-blur-md" onClick={onClose} /> <motion.div initial={{ opacity: 0, filter: "blur(4px)", scale: 0.95 }} animate={{ opacity: 1, filter: "blur(0px)", scale: 1 }} exit={{ opacity: 0, filter: "blur(4px)", scale: 0.95 }} transition={{ duration: 0.5, ease: [0.25, 0.46, 0.45, 0.94] }} className="relative bg-white/10 backdrop-blur-2xl border border-white/20 rounded-3xl" > {children} </motion.div> </motion.div> )}</AnimatePresence>```### Interactive Glass Card Pattern```tsx<motion.div className="relative p-6 bg-white/5 backdrop-blur-2xl border border-white/10 rounded-2xl" whileHover={{ scale: 1.02 }} onMouseMove={handleMouseMove}> {children} <div className="absolute inset-0 opacity-0 hover:opacity-100" style={{ background: `radial-gradient(600px at ${mouseX}% ${mouseY}%, rgba(255, 255, 255, 0.1), transparent 40%)` }} /></motion.div>```### Glass Button Pattern```tsx<motion.button whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }} className="px-6 py-3 bg-white/10 backdrop-blur-xl border border-white/10 rounded-full"> <span className="relative z-10">{label}</span> <motion.div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent" animate={{ x: ['-100%', '100%'] }} transition={{ duration: 3, repeat: Infinity }} /></motion.button>```## Quality Assurance Checklist### Visual Quality- [ ] Glass effects are subtle and don't overpower content- [ ] Animations feel smooth and natural- [ ] Colors adapt appropriately to themes- [ ] Specular highlights respond to interaction- [ ] Depth layering creates proper hierarchy### Performance- [ ] Maintains 60fps during animations- [ ] Backdrop filters don't cause repaints- [ ] Mouse handlers are throttled- [ ] Quality degrades gracefully on low-end devices- [ ] No memory leaks from animations### Accessibility- [ ] Contrast ratios meet WCAG standards- [ ] Reduced motion preferences respected- [ ] Keyboard navigation fully supported- [ ] Screen readers can parse content- [ ] Focus indicators clearly visible### Cross-Browser- [ ] Works in Safari (best experience)- [ ] Degrades gracefully in Firefox- [ ] Fallbacks for unsupported browsers- [ ] Mobile browsers properly supported- [ ] No console errors or warnings## Common Pitfalls to Avoid1. **Over-Glassmorphism**: Don't apply glass effects to every element2. **Performance Issues**: Always profile before shipping3. **Poor Contrast**: Ensure text remains readable4. **Excessive Blur**: Keep blur values reasonable (8-24px)5. **Missing Prefixes**: Always include -webkit- prefixes6. **Static Effects**: Glass should respond to its environment## Requirements1. Verify with reduced motion preferences2. Test on displays with different color profiles3. If there are any existing components, don't create new duplicates with the new approach, instead work on the existing files. ## DeliverablesWhen implementing Apple Liquid Glass design:1. **Component Library**: Reusable glass components2. **Design Tokens**: CSS variables for consistency3. **Animation Presets**: Framer Motion variants4. **Performance Hooks**: Adaptive quality system5. **Documentation**: Usage examples and guidelines## Final NotesRemember: The goal is not to copy Apple's design directly, but to capture the essence of Liquid Glass - creating interfaces that feel alive, responsive, and delightful while maintaining the highest standards of performance and accessibility. Every pixel should feel intentional, every animation purposeful, and every interaction memorable. # Apple Liquid Glass Design System - Comprehensive Documentation## Executive SummaryThis document synthesizes the design philosophy and implementation patterns from Apple's Liquid Glass design language, as demonstrated in the Interior Staging Hero components. It provides a complete guide for implementing Apple-inspired translucent, dynamic interfaces in web applications.## Core Design Philosophy### Apple's Liquid Glass Principles1. **Material Behavior** - Translucent layers that reflect and refract surroundings - Dynamic transformation based on content and context - Real-time rendering with physics-based properties - Seamless adaptation between light and dark environments2. **Visual Hierarchy** - Content-first approach with UI elements that "get out of the way" - Controls that dynamically morph based on user needs - Perfect harmony between hardware, software, and content - Concentric alignment with rounded corners3. **Interaction Design** - Specular highlights that respond to movement - Fluid animations with natural easing curves - Contextual awareness in all transitions - Delightful micro-interactions## Technical Implementation Guide### 1. Glass Effects Foundation#### CSS Implementation```css/* Base glass effect */.liquid-glass { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 24px; position: relative; overflow: hidden;}/* Dynamic shadow based on theme */.liquid-glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05) ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}```#### Tailwind Configuration```javascripttheme: { extend: { backdropBlur: { xs: '2px', sm: '4px', DEFAULT: '8px', md: '12px', lg: '16px', xl: '20px', '2xl': '24px', '3xl': '40px', }, colors: { glass: { light: 'rgba(255, 255, 255, 0.05)', DEFAULT: 'rgba(255, 255, 255, 0.1)', dark: 'rgba(0, 0, 0, 0.05)', } } }}```### 2. Animation System#### Framer Motion Patterns```typescript// Base animation variantsexport const glassVariants = { initial: { opacity: 0, filter: "blur(4px)", scale: 0.95 }, animate: { opacity: 1, filter: "blur(0px)", scale: 1, transition: { duration: 0.5, ease: [0.25, 0.46, 0.45, 0.94] // Apple's easing curve } }, exit: { opacity: 0, filter: "blur(4px)", scale: 0.95 }}// Stagger children for listsexport const staggerContainer = { animate: { transition: { staggerChildren: 0.1, delayChildren: 0.2 } }}```#### CSS Keyframes```css@keyframes liquid-shine { 0% { background-position: -200% 50%; } 100% { background-position: 200% 50%; }}@keyframes specular-highlight { 0%, 100% { opacity: 0.3; transform: translateX(-100%) skewX(-20deg); } 50% { opacity: 0.6; transform: translateX(100%) skewX(-20deg); }}```### 3. Responsive Glass Effects```typescript// Hook for adaptive glass qualityexport function useAdaptiveGlass() { const [quality, setQuality] = useState<'ultra' | 'standard' | 'reduced'>('standard') useEffect(() => { // Check device capabilities const checkPerformance = () => { const fps = getFPS() const memory = performance.memory?.usedJSHeapSize if (fps < 30 || memory > 500000000) { setQuality('reduced') } else if (fps > 50) { setQuality('ultra') } } const interval = setInterval(checkPerformance, 5000) return () => clearInterval(interval) }, []) return quality}```### 4. Color System#### Dynamic Color Adaptation```typescript// Extract dominant color from backgroundexport function useAdaptiveColor(backgroundRef: RefObject<HTMLElement>) { const [dominantColor, setDominantColor] = useState<string>('#ffffff') useEffect(() => { if (!backgroundRef.current) return const canvas = document.createElement('canvas') const ctx = canvas.getContext('2d') // Sample the background and extract color // Implementation details... setDominantColor(extractedColor) }, [backgroundRef]) return dominantColor}```### 5. Performance Optimization```typescript// Performance-aware glass componentexport const PerformantGlass: FC<GlassProps> = ({ children, ...props }) => { const quality = useAdaptiveGlass() const glassStyles = { ultra: { backdropFilter: 'blur(24px) saturate(180%)', background: 'rgba(255, 255, 255, 0.05)', }, standard: { backdropFilter: 'blur(16px) saturate(150%)', background: 'rgba(255, 255, 255, 0.1)', }, reduced: { backdropFilter: 'blur(8px)', background: 'rgba(255, 255, 255, 0.2)', } } return ( <div className="liquid-glass" style={glassStyles[quality]} {...props} > {children} </div> )}```## Component Patterns### 1. Glass Modal```tsxexport const GlassModal: FC<ModalProps> = ({ isOpen, onClose, children }) => { return ( <AnimatePresence> {isOpen && ( <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="fixed inset-0 z-50 flex items-center justify-center" > <motion.div className="absolute inset-0 bg-black/20 backdrop-blur-md" onClick={onClose} /> <motion.div initial={glassVariants.initial} animate={glassVariants.animate} exit={glassVariants.exit} className="relative z-10 w-[90vw] max-w-2xl p-8 bg-white/10 backdrop-blur-2xl border border-white/20 rounded-3xl shadow-2xl" > {children} </motion.div> </motion.div> )} </AnimatePresence> )}```### 2. Glass Button```tsxexport const GlassButton: FC<ButtonProps> = ({ children, variant = 'default', ...props }) => { const variants = { default: 'bg-white/10 hover:bg-white/20', primary: 'bg-brand-primary/20 hover:bg-brand-primary/30', danger: 'bg-red-500/20 hover:bg-red-500/30' } return ( <motion.button whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }} className={cn( "px-6 py-3 backdrop-blur-xl border border-white/10 rounded-full", "transition-all duration-300 ease-out", "relative overflow-hidden", variants[variant] )} {...props} > <span className="relative z-10">{children}</span> <motion.div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent" animate={{ x: ['-100%', '100%'] }} transition={{ duration: 3, repeat: Infinity, ease: "linear" }} /> </motion.button> )}```### 3. Glass Card```tsxexport const GlassCard: FC<CardProps> = ({ children, interactive = false }) => { const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) const handleMouseMove = (e: MouseEvent<HTMLDivElement>) => { if (!interactive) return const rect = e.currentTarget.getBoundingClientRect() setMousePosition({ x: (e.clientX - rect.left) / rect.width, y: (e.clientY - rect.top) / rect.height }) } return ( <motion.div className="relative p-6 bg-white/5 backdrop-blur-2xl border border-white/10 rounded-2xl overflow-hidden" onMouseMove={handleMouseMove} whileHover={interactive ? { scale: 1.02 } : {}} style={{ '--mouse-x': mousePosition.x, '--mouse-y': mousePosition.y } as CSSProperties} > {children} {interactive && ( <div className="absolute inset-0 opacity-0 hover:opacity-100 transition-opacity duration-300" style={{ background: `radial-gradient(600px at calc(var(--mouse-x) * 100%) calc(var(--mouse-y) * 100%), rgba(255, 255, 255, 0.1), transparent 40%)` }} /> )} </motion.div> )}```## Design Tokens### Typography```css:root { /* Font families */ --font-primary: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif; --font-mono: "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; /* Font sizes */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; /* Letter spacing */ --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em;}```### Spacing```css:root { /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem;}```### Border Radius```css:root { /* Border radius scale */ --radius-sm: 0.125rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-full: 9999px;}```## Best Practices### 1. Performance- Use CSS containment for glass elements- Implement intersection observer for heavy effects- Throttle mouse movement handlers- Use will-change sparingly- Implement quality tiers based on device capabilities### 2. Accessibility- Ensure sufficient contrast ratios- Provide fallbacks for reduced motion- Use semantic HTML elements- Add proper ARIA labels- Test with screen readers### 3. Cross-Browser Support- Always include -webkit- prefixes for backdrop-filter- Provide fallback styles for unsupported browsers- Test on Safari for best glass effects- Use feature detection for progressive enhancement### 4. Theme Adaptation- Implement automatic color extraction- Support both light and dark themes- Use CSS custom properties for easy theming- Consider ambient light API when available## Implementation Checklist- [ ] Set up Tailwind configuration with glass utilities- [ ] Install and configure Framer Motion- [ ] Create base glass component with quality tiers- [ ] Implement theme-aware color system- [ ] Add performance monitoring hooks- [ ] Create component library with glass variants- [ ] Set up animation system with Apple easing curves- [ ] Test across browsers and devices- [ ] Optimize for 60fps performance- [ ] Document component usage patterns
Of course. Here is a calendar component built with React and Framer Motion, meticulously crafted to embody the principles of Apple's Liquid Glass design language.
The component features a translucent, blurred background that adapts to the content behind it. Interactions are enhanced with fluid, physics-based animations, and a layered design creates a sense of depth. The specular highlights on hover and the smooth transitions between months provide a delightful user experience, true to the Liquid Glass philosophy.