Apple WWDC 2025 — New Design Language

Liquid Glass

流动光线折射 · 多层深度堆叠 · 液态形变动画

超越传统毛玻璃效果，通过光线折射、彩虹边缘和流体动画创造出真正有机、流动的视觉体验。多层玻璃堆叠产生丰富的空间层次感。

彩虹折射

棱镜边缘光谱渐变，模拟真实光线折射

多层深度

3+ 层玻璃堆叠产生丰富的空间层次感

液态形变

border-radius 随交互产生有机液态动画

Component Library

Glass buttons, cards, and inputs — the core building blocks

Buttons

Form Inputs

Name

Message

Multi-Layer Card

3+ layer glass stacking creates depth and dimension beyond simple blur

Refraction Card

Rainbow edges simulate prismatic light refraction on glass surfaces

Fluid Motion Card

Smooth 500ms+ transitions create organic liquid movement on hover

Glass Effects

Blur levels, opacity layers, and multi-depth stacking

Blur Intensity

轻微模糊

blur-[10px]

中等模糊

blur-[20px]

标准玻璃

blur-[40px]

深度玻璃

blur-[80px]

Opacity Layers

bg-white/5

10%

bg-white/10

15%

bg-white/15

20%

bg-white/20

Multi-Layer Stack

Front Layer

bg-white/12 — richest depth

Design Rules

The principles that define authentic Liquid Glass

Do

Hero 标题使用粗描边 -webkit-text-stroke: 3px #4ecdc4
Hero 标题使用 3D 偏移阴影 text-shadow: 4px 4px 0 rgba(0,0,0,0.5)
Hero 标题使用渐变填充 bg-gradient-to-r from-[#a855f7] via-[#ff2d92] to-[#a855f7]
副标题使用青色发光 text-shadow: 0 0 20px rgba(78,205,196,0.8)
使用超高模糊值 backdrop-blur-[40px] 或 backdrop-blur-3xl
添加饱和度增强 backdrop-saturate-[1.8]
使用彩虹渐变边框模拟光线折射效果
使用超大圆角 rounded-3xl 或 rounded-[24px]
使用流体动画 transition-all duration-500 ease-out

Don't

禁止使用普通白色标题（必须使用渐变+粗描边+3D阴影）
禁止省略 3D 偏移阴影（4px 4px 是必须的）
禁止使用细描边（Hero 必须 3px，h1/h2 至少 2px）
禁止省略文字发光效果（缺少霓虹感）
禁止使用低模糊值 backdrop-blur-sm（太弱）
禁止省略饱和度增强（颜色会显得暗淡）
禁止使用直角或小圆角（rounded-none, rounded-sm）
禁止使用快速过渡（duration-100, duration-150）

Interactive Tabs

Liquid Glass combines backdrop blur, rainbow gradient borders, and multi-layer stacking to produce an organic, fluid visual experience inspired by Apple's WWDC 2025 design language.

Color Palette

Rainbow spectrum for prismatic edges and neon accents

Neon Pink

#ff2d92

Neon Purple

#a855f7

Neon Cyan

#4ecdc4

Neon Yellow

#ffd93d

Neon Green

#6bcb77

Apple Blue

#007AFF

Glass White

rgba(255,255,255,0.10)

Apple Red

#FF2D55

Rainbow Refraction Gradient

from-[#ff6b6b] via-[#ffd93d] via-[#6bcb77] via-[#4ecdc4] via-[#007AFF] via-[#a855f7] to-[#ff2d92]

Neon Typography

H1 — 3px stroke + 3D shadow + gradient fill

Hero Heading

H2 — 2px stroke + glow

Section Heading

Subtitle — cyan glow, no stroke

Cyan Glow Subtitle

Body — high contrast white

Primary body text maintains high contrast against dark glass backgrounds.

Secondary text at 70% opacity for supporting information.

Tertiary text at 50% for metadata and timestamps.

Control Center

iOS-style glass control tiles — click to toggle

Success

Changes saved successfully.

Warning

Review settings before continuing.

Error

Something went wrong. Please retry.