iOS 26 Liquid Glass React Components

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.

🆚 Liquid Glass vs Traditional Glassmorphism

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

✨ Features

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

🚀 Quick Start

Installation

npm install ios26-glassmorphism-react
# or
yarn add ios26-glassmorphism-react
# or
pnpm add ios26-glassmorphism-react

Basic Usage

import { GlassContainer, GlassButton } from 'ios26-glassmorphism-react';

function App() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 p-8">
      <GlassContainer 
        intensity="strong" 
        useAdvancedEffects={true}
        mouseTracking={true}
        className="max-w-md mx-auto p-8"
      >
        <div className="text-center">
          <h2 className="text-2xl font-bold mb-4">Welcome to iOS 26</h2>
          <p className="text-gray-600 mb-6">
            Experience true liquid glass with physics-based rendering
          </p>
          <GlassButton variant="primary" size="large">
            Get Started
          </GlassButton>
        </div>
      </GlassContainer>
    </div>
  );
}

📦 Components

Core Components

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

Component Props

All components accept standard HTML attributes plus advanced glass properties:

interface GlassContainerProps {
  // Glass intensity presets
  intensity?: 'subtle' | 'light' | 'medium' | 'strong' | 'intense';
  
  // Physics-based properties
  blur?: number;              // Base blur radius in pixels
  saturation?: number;        // Color saturation percentage
  luminosity?: number;        // Brightness percentage
  cornerRadius?: number;      // Border radius in pixels
  borderWidth?: number;       // Border width in pixels
  borderOpacity?: number;     // Border opacity (0-1)
  shadowIntensity?: number;   // Shadow strength (0-1)
  
  // Advanced effects
  useAdvancedEffects?: boolean;   // Enable liquid glass simulation
  mouseTracking?: boolean;        // Enable dynamic lighting
  chromaticAberration?: number;   // RGB channel dispersion (0-1)
  displacementScale?: number;     // Refraction strength
}

Physics Features

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

🎨 Design Tokens

The library uses iOS 26 design tokens for consistency:

const glassTokens = {
  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,
  },
};

🎯 Advanced Usage

Liquid Glass with Full Physics

import { GlassContainer, useLiquidGlass } from 'ios26-glassmorphism-react';

function AdvancedGlass() {
  const liquidGlass = useLiquidGlass({
    intensity: 'strong',
    blur: 32,
    chromaticAberration: 0.03,
    displacementScale: 15,
    mousePosition: { x: 0.5, y: 0.5 }
  });

  return (
    <>
      <canvas ref={liquidGlass.causticCanvasRef} className="absolute inset-0" />
      <div style={liquidGlass.style} className="p-8">
        <h3>Liquid Glass with Caustics</h3>
      </div>
    </>
  );
}

Performance-Optimized Glass

import { GlassContainer, useOptimizedGlass } from 'ios26-glassmorphism-react';

function OptimizedGlass() {
  // Automatically adjusts quality based on device
  const optimizedProps = useOptimizedGlass({
    intensity: 'strong',
    useAdvancedEffects: true,
  });

  return (
    <GlassContainer {...optimizedProps}>
      <p>Adaptive performance scaling</p>
    </GlassContainer>
  );
}

Custom Physics Calculations

import { calculateFresnelReflectance, generateCausticPoints } from 'ios26-glassmorphism-react';

// Calculate Fresnel reflection at 45° angle
const reflection = calculateFresnelReflectance(Math.PI / 4, 1.0, 1.5);

// Generate caustic light patterns
const caustics = generateCausticPoints(300, 300, Math.PI / 6, 50);

Theming

// Create a theme provider
import { createContext, useContext } from 'react';

const GlassThemeContext = createContext({
  intensity: 'medium' as const,
  cornerRadius: 12,
});

// Use in components
function ThemedGlass() {
  const theme = useContext(GlassThemeContext);
  return <GlassCard intensity={theme.intensity} {...theme} />;
}

🧪 Development

Storybook

Explore all components interactively:

npm run storybook
# or
yarn storybook

Building

npm run build

Testing

npm test

🌐 Browser Support

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

Feature Detection

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

📱 Responsive Design

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

🎭 Examples

iOS 26 App Interface

import {
  GlassNavigation,
  GlassNavItem,
  GlassCard,
  GlassButton,
  GlassAvatar,
  GlassBadge
} from 'ios26-glassmorphism-react';

function iOS26App() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-400 to-purple-600">
      <GlassNavigation position="top">
        <div className="flex items-center justify-between w-full px-4">
          <h1 className="font-semibold">Messages</h1>
          <GlassButton variant="ghost" size="small">
            Edit
          </GlassButton>
        </div>
      </GlassNavigation>

      <div className="pt-20 px-4 space-y-4">
        <GlassCard elevation="high" className="p-4">
          <div className="flex items-center space-x-3">
            <GlassAvatar src="/avatar.jpg" online />
            <div className="flex-1">
              <h3 className="font-medium">John Appleseed</h3>
              <p className="text-sm text-gray-600">iOS 26 looks amazing!</p>
            </div>
            <GlassBadge variant="success">New</GlassBadge>
          </div>
        </GlassCard>
      </div>
    </div>
  );
}

🔧 Troubleshooting

Common Issues

Glass effects not showing

// ❌ Wrong - backdrop-filter might be disabled
<GlassContainer>Content</GlassContainer>

// ✅ Correct - ensure parent has a background
<div className="bg-gradient-to-br from-blue-400 to-purple-600">
  <GlassContainer>Content</GlassContainer>
</div>

Performance issues

// Automatically optimize for device
import { useOptimizedGlass } from 'ios26-glassmorphism-react';

const glassProps = useOptimizedGlass({
  intensity: 'medium',
  useAdvancedEffects: true // Will be disabled on low-end devices
});

TypeScript errors with GlassInput

// ❌ Wrong - size conflicts with HTML input
<GlassInput size="medium" />

// ✅ Correct - use inputSize prop
<GlassInput inputSize="medium" />

Firefox backdrop-filter not working

Navigate to about:config
Search for layout.css.backdrop-filter.enabled
Set to true

Caustics not rendering

// Ensure canvas is positioned correctly
<div className="relative">
  <canvas 
    ref={liquidGlass.causticCanvasRef} 
    className="absolute inset-0 pointer-events-none"
    style={{ mixBlendMode: 'screen' }}
  />
  <div style={liquidGlass.style}>Content</div>
</div>

Performance Tips

Use device detection

const { tier } = detectDeviceCapabilities();
const useAdvanced = tier === 'high';

Limit advanced effects to key components

// Hero section with full effects
<GlassContainer useAdvancedEffects={true}>

// Regular sections with basic glass
<GlassContainer useAdvancedEffects={false}>

Disable mouse tracking on mobile

const isMobile = window.innerWidth < 768;
<GlassContainer mouseTracking={!isMobile}>

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

MIT License - see LICENSE for details.

🙋‍♂️ Support

🏆 Credits

Apple Inc. - iOS 26 Liquid Glass Design System
React Team - React framework
Storybook - Component documentation

_{Built with ❤️ for the React community}

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
.storybook		.storybook
dist		dist
example		example
src		src
.DS_Store		.DS_Store
.gitignore		.gitignore
ADVANCED_GLASS_TECHNIQUES.md		ADVANCED_GLASS_TECHNIQUES.md
CLAUDE.md		CLAUDE.md
LICENSE		LICENSE
README.md		README.md
SETUP.md		SETUP.md
package-lock.json		package-lock.json
package.json		package.json
rollup.config.js		rollup.config.js
tsconfig.json		tsconfig.json
vite.config.js		vite.config.js

License

remiangelo/reactGlass

Folders and files

Latest commit

History

Repository files navigation