What is the Liquid Glass design system?

Liquid Glass is a dynamic UI pattern for iOS featuring blurred, reflective, and interactive materials that respond to touch and pointer interactions with organic morphing effects.

Is it compatible with UIKit apps?

Absolutely. The skill provides implementation details for UIGlassEffect and UIGlassContainerEffect to bring Liquid Glass features to UIKit-based projects.

Can I use this for WidgetKit development?

Yes, the skill includes patterns for rendering glass backgrounds in widgets and handling specific rendering modes like accented or monochrome themes.

Does it support morphing transitions between different views?

Yes, by using the provided @Namespace and glassEffectID patterns, you can create smooth morphing transitions when views appear, disappear, or change state.

How does the GlassEffectContainer improve performance?

It groups multiple sibling glass elements into a single rendering context, allowing for complex blending and morphing effects without the overhead of independent rendering layers.

Liquid Glass iOS Design System

Name: Liquid Glass iOS Design System
Author: affaan-m

byaffaan-m

•

130,864

•

Mobile Development

Implements dynamic, interactive glass-style UI components with blur and morphing effects for modern iOS development.

The Liquid Glass Design System skill provides a comprehensive implementation guide for creating sophisticated, interactive glass materials on iOS. It focuses on the 'Liquid Glass' aesthetic—a design language characterized by dynamic blurs, light reflections, and organic morphing transitions. The skill offers specific patterns for SwiftUI, UIKit, and WidgetKit, enabling developers to build buttons, toolbars, and cards that react to touch while maintaining high performance through containerized rendering. It is ideal for developers looking to implement cutting-edge glassmorphism and fluid UI transitions in their Apple ecosystem applications.

主要功能

01Adaptive support for light, dark, and system-wide tinted modes

02Performance-optimized GlassEffectContainer for efficient rendering

03Fluid morphing transitions between UI elements using animation namespaces

04Unified patterns for SwiftUI modifiers, UIKit views, and WidgetKit

05Dynamic blur and reflection materials with interactive deformation

06130,864 GitHub stars

使用场景

01Building futuristic iOS app interfaces with glassmorphic buttons and cards

02Creating smooth, morphing animations between UI states using the Liquid Glass API

03Developing high-fidelity widgets that adapt to system-wide tinted themes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add affaan-m/everything-claude-code liquid-glass-design

For use in Claude.ai and ChatGPT

主要功能

01Adaptive support for light, dark, and system-wide tinted modes

02Performance-optimized GlassEffectContainer for efficient rendering

03Fluid morphing transitions between UI elements using animation namespaces

04Unified patterns for SwiftUI modifiers, UIKit views, and WidgetKit

05Dynamic blur and reflection materials with interactive deformation

06130,864 GitHub stars

使用场景

01Building futuristic iOS app interfaces with glassmorphic buttons and cards

02Creating smooth, morphing animations between UI states using the Liquid Glass API

03Developing high-fidelity widgets that adapt to system-wide tinted themes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add affaan-m/everything-claude-code liquid-glass-design

For use in Claude.ai and ChatGPT