SuperAPI AI 工具集

antigravity-design-expert

设计与创作

查看项目

更新于 10-16 07:26

技能介绍

用途:当需要构建具有空间纵深、玻璃拟态和大量动效的高交互网页界面,或为仪表盘、落地页、沉浸式产品界面确定视觉方向时使用。

主要能力:以“反重力设计”为方向,制作等距网格、悬浮元素、玻璃拟态与顺滑滚动动画。设计原则包括失重感(分层柔和扩散阴影)、空间纵深(Z 轴分层与 CSS perspective)、玻璃拟态(半透明、背景模糊 backdrop-filter: blur(12px)、半透明边框)、等距吸附(如 transform: rotateX(60deg) rotateZ(-45deg))。动效规则:状态变化过渡不少于 0.3s ease-out;用 GSAP ScrollTrigger 实现元素从 Y 轴浮入并带轻微旋转;卡片网格以 0.1s 错峰入场;背景元素滚动视差慢于前景。

技术栈:默认 React / Next.js;Tailwind CSS 加自定义 CSS 处理复杂 3D 变换;GSAP 与 ScrollTrigger;React Three Fiber 或 CSS 3D 变换。

使用方式与约束:编写模块化、可复用组件;对 prefers-reduced-motion: reduce 的用户禁用全部动画;动画元素使用 will-change: transform 以交由 GPU 渲染,避免持续动画 box-shadow、filter 等高开销属性。

限制:仅在任务明确符合上述范围时使用;输出不能替代针对具体环境的验证、测试或专家评审;若缺少必要输入、权限、安全边界或成功标准,应停止并请求澄清。收费、价格与平台支持等信息暂未提供。