How do I create morphing effects between glass elements?

By using the GlassEffectContainer and assigning glassEffectIDs within a namespace, you can create smooth morphing transitions as elements move or change state.

How does Liquid Glass work with iOS Widgets?

It utilizes WidgetKit rendering modes to detect if the user is in accented or full-color mode, applying the appropriate themed glass background automatically.

What is the Liquid Glass design system?

Liquid Glass is a design language introduced for iOS 26 that features dynamic materials which blur background content, reflect environmental light, and morph during user interaction.

Is Liquid Glass compatible with UIKit?

Yes, this skill includes implementation patterns for UIKit using UIGlassEffect and UIVisualEffectView to achieve the same appearance as SwiftUI.

Why should I use GlassEffectContainer instead of individual modifiers?

GlassEffectContainer is essential for performance optimization and is required for glass elements to visually merge and morph when they are positioned near each other.

Liquid Glass Design System

Name: Liquid Glass Design System
Author: xu-xiang

byxu-xiang

•

323

•

Mobile Development

Implements the iOS 26 Liquid Glass design language with dynamic blur, reflection, and interactive morphing effects.

The Liquid Glass Design System skill provides comprehensive implementation patterns for Apple's iOS 26 design language across SwiftUI, UIKit, and WidgetKit. It guides developers through creating dynamic glass materials that blur background content, reflect surrounding colors, and react to tactile interactions with fluid morphing. This skill covers everything from basic glass modifiers and button styles to complex layout containers that optimize rendering performance while enabling sophisticated visual transitions between UI states.

主要功能

01Performance-optimized GlassEffectContainer for element merging and morphing

02WidgetKit integration with rendering mode detection and accented themes

03UIKit implementation using UIGlassEffect and UIGlassContainerEffect

04SwiftUI .glassEffect() modifiers with custom shape and tint support

05Interactive tactile responses for glass-based buttons and controls

06323 GitHub stars

使用场景

01Modernizing iOS applications with the latest iOS 26 design aesthetics

02Developing high-performance glass-style widgets that adapt to system accent colors

03Creating seamless UI transitions where glass elements fluidly merge during state changes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xu-xiang/everything-claude-code-zh liquid-glass-design

For use in Claude.ai and ChatGPT

主要功能

01Performance-optimized GlassEffectContainer for element merging and morphing

02WidgetKit integration with rendering mode detection and accented themes

03UIKit implementation using UIGlassEffect and UIGlassContainerEffect

04SwiftUI .glassEffect() modifiers with custom shape and tint support

05Interactive tactile responses for glass-based buttons and controls

06323 GitHub stars

使用场景

01Modernizing iOS applications with the latest iOS 26 design aesthetics

02Developing high-performance glass-style widgets that adapt to system accent colors

03Creating seamless UI transitions where glass elements fluidly merge during state changes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xu-xiang/everything-claude-code-zh liquid-glass-design

For use in Claude.ai and ChatGPT