Glassmorphism ui design

何时使用

• 要构建强交互、有空间纵深、悬浮失重感、玻璃拟态质感的 Web 界面：仪表盘、落地页、沉浸式产品展示页。
• 设计方向需要依赖 GSAP、3D CSS 变换或 React 三维呈现，而非传统扁平 UI。
• 需要一套明确的视觉与动效规范来统一「失重 / 空间感」风格。

不该用的边界：

• 常规扁平 UI、表单密集型后台、信息表格类页面——动效与 3D 反而增加噪音。
• 性能敏感场景（低端设备、弱网首屏、需要极致 LCP）——重动效/毛玻璃/3D 渲染开销大。
• 无障碍优先且无法提供降级方案时，不要强上动效。
• 任务范围不清、缺少成功标准或权限时，先停下确认，不要凭空发挥。

步骤

1. 定技术栈（除非另有要求，默认如下）：
   • 框架 React / Next.js
   • 样式 Tailwind CSS（布局与工具类）+ 自定义 CSS（处理复杂 3D 变换）
   • 动画 GSAP（GreenSock）+ ScrollTrigger（滚动联动）
   • 3D React Three Fiber（R3F）或 CSS 3D 变换（rotateX / rotateY / perspective）
2. 按四条设计原则搭骨架：失重悬浮、空间纵深、玻璃拟态、等距吸附（见下方指令）。
3. 落动效规则：状态切换不瞬切、克制的滚动劫持、错峰入场、视差。
4. 过执行约束：组件模块化、reduced-motion 降级、GPU 提速与性能守则。
5. 自检无障碍与性能后交付，附组件用法说明。

指令

设计原则（「失重」气质）：

• 失重感：卡片与元素像漂浮。用分层、柔和、扩散的投影，如 box-shadow: 0 20px 40px rgba(0,0,0,0.05)。
• 空间纵深：用 Z 轴分层，背景要「深」，前景元素借 perspective 凸出。
• 玻璃拟态：微透明 + 背景模糊 + 半透明描边，营造高级玻璃质感，如 backdrop-filter: blur(12px)。
• 等距吸附：仪表盘 / 卡片网格用 3D 变换倾成等距视角，如 transform: rotateX(60deg) rotateZ(-45deg)。

动效规则：

• 绝不瞬切：所有 hover / focus / active 状态变化都要平滑过渡，至少 0.3s ease-out。
• 克制的滚动劫持：用 GSAP ScrollTrigger 让元素随滚动从 Y 轴带轻微旋转浮入视野。
• 错峰入场：卡片网格加载时不要同时出现，按 0.1s 错峰，像多米诺骨牌依次落下。
• 视差：背景元素滚动时比前景慢，强化 3D 错觉。

示例

玻璃卡片 + 悬浮投影（Tailwind + 自定义 CSS）：

.glass-card {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease-out;
}

等距网格容器：

.iso-grid {
  perspective: 1200px;
  transform: rotateX(60deg) rotateZ(-45deg);
}

GSAP 错峰浮入：

gsap.from(".card", {
  scrollTrigger: { trigger: ".grid", start: "top 80%" },
  y: 60, rotateX: -8, opacity: 0,
  duration: 0.6, ease: "power2.out", stagger: 0.1,
});

注意事项

• 组件务必模块化、可复用。
• 对 prefers-reduced-motion: reduce 用户全量关闭动画：

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

• 性能优先：动效元素加 will-change: transform，把渲染交给 GPU；不要持续动画 box-shadow、filter 等昂贵属性。
• 别把产出当作环境内验证、测试或专家评审的替代；交付前在目标环境实测。

互见

• 创意/design 域内其他视觉与动效技能。
• 前端性能与无障碍相关技能（reduced-motion、GPU 合成层、LCP 优化）。

---

采编自 sickn33/antigravity-awesome-skills（MIT）。