findscripter 何时使用
- 要构建强交互、有空间纵深、悬浮失重感、玻璃拟态质感的 Web 界面：仪表盘、落地页、沉浸式产品展示页。
- 设计方向需要依赖 GSAP、3D CSS 变换或 React 三维呈现，而非传统扁平 UI。
- 需要一套明确的视觉与动效规范来统一「失重 / 空间感」风格。
不该用的边界：
- 常规扁平 UI、表单密集型后台、信息表格类页面——动效与 3D 反而增加噪音。
- 性能敏感场景（低端设备、弱网首屏、需要极致 LCP）——重动效/毛玻璃/3D 渲染开销大。
- 无障碍优先且无法提供降级方案时，不要强上动效。
- 任务范围不清、缺少成功标准或权限时，先停下确认，不要凭空发挥。
步骤
- 定技术栈（除非另有要求，默认如下）：
- 框架 React / Next.js
- 样式 Tailwind CSS（布局与工具类）+ 自定义 CSS（处理复杂 3D 变换）
- 动画 GSAP（GreenSock）+ ScrollTrigger（滚动联动）
- 3D React Three Fiber（R3F）或 CSS 3D 变换（rotateX / rotateY / perspective）
- 按四条设计原则搭骨架：失重悬浮、空间纵深、玻璃拟态、等距吸附（见下方指令）。
- 落动效规则：状态切换不瞬切、克制的滚动劫持、错峰入场、视差。
- 过执行约束：组件模块化、reduced-motion 降级、GPU 提速与性能守则。
- 自检无障碍与性能后交付，附组件用法说明。
指令
设计原则（「失重」气质）：
- 失重感：卡片与元素像漂浮。用分层、柔和、扩散的投影，如
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）。