Physics-Based Glass Simulation Matching iOS 26's Advanced Rendering
A comprehensive React component library that provides true liquid glass effects using advanced physics simulation. Unlike simple blur-based glassmorphism, this library implements Fresnel equations, chromatic dispersion, caustic light patterns, and realistic refraction - matching iOS 26's actual glass rendering system.
| Traditional Glassmorphism | iOS 26 Liquid Glass |
|---|---|
| Simple backdrop blur | Physics-based refraction |
| Static transparency | Dynamic Fresnel reflections |
| Basic shadows | Caustic light patterns |
| Uniform blur | Anisotropic directional blur |
| Single color layer | Chromatic dispersion (RGB separation) |
| No depth simulation | Surface normal calculations |
- Physics-Based Glass Simulation - Real glass properties, not just blur effects
- Fresnel Reflections - Accurate light behavior based on viewing angle
- Chromatic Dispersion - RGB channel separation for realistic light refraction
- Dynamic Caustics - Animated light concentration patterns
- Anisotropic Blur - Directional blur for frosted glass effects
- Performance Optimization - Automatic quality adjustment based on device
- TypeScript Support - Full type safety and IntelliSense
- Responsive Design - Works on all screen sizes
- Accessibility Ready - WCAG 2.1 compliant
- Tree Shaking - Import only what you need
- Storybook Documentation - Interactive examples and playground
npm install ios26-glassmorphism-react
# or
yarn add ios26-glassmorphism-react
# or
pnpm add ios26-glassmorphism-reactimport{GlassContainer,GlassButton}from'ios26-glassmorphism-react';functionApp(){return(<divclassName="min-h-screen bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 p-8"><GlassContainerintensity="strong"useAdvancedEffects={true}mouseTracking={true}className="max-w-md mx-auto p-8"><divclassName="text-center"><h2className="text-2xl font-bold mb-4">Welcome to iOS 26</h2><pclassName="text-gray-600 mb-6">
Experience true liquid glass with physics-based rendering
</p><GlassButtonvariant="primary"size="large">
Get Started
</GlassButton></div></GlassContainer></div>);}- GlassContainer - The foundation component
- GlassButton - Interactive buttons with glass effects
- GlassCard - Card layouts with elevation
- GlassModal - Modal dialogs with backdrop blur
- GlassNavigation - Navigation bars and items
- GlassInput - Form inputs with glass styling
- GlassAvatar - User avatars with glass borders
- GlassBadge - Status badges and labels
All components accept standard HTML attributes plus advanced glass properties:
interfaceGlassContainerProps{// Glass intensity presetsintensity?: 'subtle'|'light'|'medium'|'strong'|'intense';// Physics-based propertiesblur?: number;// Base blur radius in pixelssaturation?: number;// Color saturation percentageluminosity?: number;// Brightness percentagecornerRadius?: number;// Border radius in pixelsborderWidth?: number;// Border width in pixelsborderOpacity?: number;// Border opacity (0-1)shadowIntensity?: number;// Shadow strength (0-1)// Advanced effectsuseAdvancedEffects?: boolean;// Enable liquid glass simulationmouseTracking?: boolean;// Enable dynamic lightingchromaticAberration?: number;// RGB channel dispersion (0-1)displacementScale?: number;// Refraction strength}- Fresnel Reflections: Accurate edge reflections based on viewing angle
- Chromatic Dispersion: Wavelength-dependent refraction for each RGB channel
- Caustic Patterns: Dynamic light concentration effects
- Anisotropic Blur: Directional blur based on surface orientation
- Surface Normals: Simulated curved glass surfaces
The library uses iOS 26 design tokens for consistency:
constglassTokens={blur: {subtle: 8,light: 12,medium: 20,strong: 28,intense: 40,},saturation: {subtle: 120,light: 140,medium: 180,strong: 220,intense: 260,},opacity: {subtle: 0.4,light: 0.6,medium: 0.8,strong: 0.9,intense: 0.95,},};import{GlassContainer,useLiquidGlass}from'ios26-glassmorphism-react';functionAdvancedGlass(){constliquidGlass=useLiquidGlass({intensity: 'strong',blur: 32,chromaticAberration: 0.03,displacementScale: 15,mousePosition: {x: 0.5,y: 0.5}});return(<><canvasref={liquidGlass.causticCanvasRef}className="absolute inset-0"/><divstyle={liquidGlass.style}className="p-8"><h3>Liquid Glass with Caustics</h3></div></>);}import{GlassContainer,useOptimizedGlass}from'ios26-glassmorphism-react';functionOptimizedGlass(){// Automatically adjusts quality based on deviceconstoptimizedProps=useOptimizedGlass({intensity: 'strong',useAdvancedEffects: true,});return(<GlassContainer{...optimizedProps}><p>Adaptive performance scaling</p></GlassContainer>);}import{calculateFresnelReflectance,generateCausticPoints}from'ios26-glassmorphism-react';// Calculate Fresnel reflection at 45° angleconstreflection=calculateFresnelReflectance(Math.PI/4,1.0,1.5);// Generate caustic light patternsconstcaustics=generateCausticPoints(300,300,Math.PI/6,50);// Create a theme providerimport{createContext,useContext}from'react';constGlassThemeContext=createContext({intensity: 'medium'asconst,cornerRadius: 12,});// Use in componentsfunctionThemedGlass(){consttheme=useContext(GlassThemeContext);return<GlassCardintensity={theme.intensity}{...theme}/>;}Explore all components interactively:
npm run storybook
# or
yarn storybooknpm run buildnpm test- Chrome 76+ - Full support with all effects
- Safari 14+ - Full support (optimized for iOS)
- Firefox 103+ - Full support (enable backdrop-filter)
- Edge 79+ - Full support
The library automatically detects and adapts to browser capabilities:
| Feature | Chrome | Safari | Firefox | Edge |
|---|---|---|---|---|
| Backdrop Filter | ✅ | ✅ | ✅* | ✅ |
| SVG Filters | ✅ | ✅ | ✅ | ✅ |
| Canvas Caustics | ✅ | ✅ | ✅ | ✅ |
| CSS Custom Properties | ✅ | ✅ | ✅ | ✅ |
*Firefox requires layout.css.backdrop-filter.enabled in about:config
All components are fully responsive and work seamlessly across:
- iPhone SE to iPhone 15 Pro Max
- iPad mini to iPad Pro 12.9"
- Desktop and Web applications
import{GlassNavigation,GlassNavItem,GlassCard,GlassButton,GlassAvatar,GlassBadge}from'ios26-glassmorphism-react';functioniOS26App(){return(<divclassName="min-h-screen bg-gradient-to-br from-blue-400 to-purple-600"><GlassNavigationposition="top"><divclassName="flex items-center justify-between w-full px-4"><h1className="font-semibold">Messages</h1><GlassButtonvariant="ghost"size="small">
Edit
</GlassButton></div></GlassNavigation><divclassName="pt-20 px-4 space-y-4"><GlassCardelevation="high"className="p-4"><divclassName="flex items-center space-x-3"><GlassAvatarsrc="/avatar.jpg"online/><divclassName="flex-1"><h3className="font-medium">John Appleseed</h3><pclassName="text-sm text-gray-600">iOS 26 looks amazing!</p></div><GlassBadgevariant="success">New</GlassBadge></div></GlassCard></div></div>);}// ❌ Wrong - backdrop-filter might be disabled<GlassContainer>Content</GlassContainer>// ✅ Correct - ensure parent has a background<divclassName="bg-gradient-to-br from-blue-400 to-purple-600"><GlassContainer>Content</GlassContainer></div>// Automatically optimize for deviceimport{useOptimizedGlass}from'ios26-glassmorphism-react';constglassProps=useOptimizedGlass({intensity: 'medium',useAdvancedEffects: true// Will be disabled on low-end devices});// ❌ Wrong - size conflicts with HTML input<GlassInputsize="medium"/>// ✅ Correct - use inputSize prop<GlassInputinputSize="medium"/>- Navigate to
about:config - Search for
layout.css.backdrop-filter.enabled - Set to
true
// Ensure canvas is positioned correctly<divclassName="relative"><canvasref={liquidGlass.causticCanvasRef}className="absolute inset-0 pointer-events-none"style={{mixBlendMode: 'screen'}}/><divstyle={liquidGlass.style}>Content</div></div>Use device detection
const{ tier }=detectDeviceCapabilities();constuseAdvanced=tier==='high';
Limit advanced effects to key components
// Hero section with full effects<GlassContaineruseAdvancedEffects={true}> // Regular sections with basic glass <GlassContaineruseAdvancedEffects={false}>
Disable mouse tracking on mobile
constisMobile=window.innerWidth<768;<GlassContainermouseTracking={!isMobile}>
We welcome contributions! Please see our Contributing Guide for details.
MIT License - see LICENSE for details.
- Apple Inc. - iOS 26 Liquid Glass Design System
- React Team - React framework
- Storybook - Component documentation
Built with ❤️ for the React community
