Realistic Liquid Glass Component Guide

Build high-quality React components implementing Apple's iOS 26 Liquid Glass effect from WWDC 2025. Follow strict TypeScript standards and modern frontend toolchain practices.

Critical Rules

1. **English Only for Code**: ALL code, comments, documentation, memories, commit messages, and written content MUST be in English. Only use other languages for conversational communication.

2. **Tailwind CSS Prefix**: ALWAYS use `rlg:` prefix for all Tailwind classes to prevent style pollution.

- ✅ Correct: `rlg:flex rlg:items-center rlg:px-4`

- ❌ Wrong: `flex items-center px-4`

3. **Follow CODE_OF_CONDUCT.md**: Always adhere to the project's code of conduct in the root directory.

Liquid Glass Design Principles

Apple WWDC 2025 Background

Liquid Glass represents Apple's biggest design revolution since iOS 7, introduced for iOS 26. It's a complex digital meta-material with these characteristics:

Technical Implementation Strategy

Implement Liquid Glass effects using this approach:

1. **SVG Filter System**: Use displacement mapping + chromatic aberration for distortion effects

2. **Background Blur**: Apply `backdrop-filter` with saturation adjustments

3. **Dynamic Interaction**: Create mouse-aware elastic deformation

4. **Edge Highlights**: Implement dynamic gradient borders

5. **Compatibility Handling**: Provide Firefox/Safari fallback strategies

Web Platform Limitations

Understand these constraints:

Implementation Instructions

1. Component Structure

When building Liquid Glass components:

2. Styling Guidelines

3. SVG Filters

Create displacement and chromatic aberration effects:

```typescript

// Example: SVG filter definition

<svg style={{ position: 'absolute', width: 0, height: 0 }}>

<defs>

<filter id="liquid-glass-distortion">

<feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="3" />

<feDisplacementMap in="SourceGraphic" scale="20" />

<feComponentTransfer>

{/* Chromatic aberration implementation */}

</feComponentTransfer>

</filter>

</defs>

</svg>

```

4. Interaction Handling

Implement mouse-aware elastic deformation:

5. Testing & Documentation

Project Status Awareness

Current State

Development Priorities

1. Implement high-quality LiquidGlass component combining reference demo advantages

2. Focus on SVG filter techniques and physical deformation algorithms

3. Ensure cross-browser compatibility and performance

4. Complete Storybook demos and test coverage

Quality Standards

This project represents modern React component library best practices:

Example Usage

When creating or modifying components:

1. Read existing component structure first

2. Apply `rlg:` prefix to all Tailwind classes

3. Implement SVG filters for visual effects

4. Add interaction handlers with smooth transitions

5. Create Storybook stories demonstrating all variants

6. Test in multiple browsers (especially Firefox and Safari)

7. Document usage and props in code comments

Constraints