基于 GSAP 重建 Aura 流体拖拽交互演示：从 Prompt 到源码级实现指南

导读

本文以仓库中 gsap 技能 的演示提示词文档 PROMPT.md 为核心，系统讲解如何用 GSAP（GreenSock）的 timelines、stagger、ScrollTrigger 与 Draggable 插件，重建一个具备「流体拖拽交互」质感的高完成度响应式页面。你将掌握演示提示词的完整结构（Minimal prompt / Recreate / Remix 三层用法）、保真度目标如何落地为具体实现，以及如何从 index.html 源码中提炼可复用的 GSAP 动画编排与拖拽编排模式。

一、演示提示词文档的整体定位

agent-skills/web-design/gsap/demo/PROMPT.md是 gsap 技能随附演示的「提示词说明书」，它的作用是给 AI 编码代理（Codex、Claude、Cursor 等）提供一套可执行的复刻指令。文档包含三个递进层级的提示词模板：

1. Minimal prompt（最小提示词）：一行话，要求使用$gsap生成一个响应式独立 HTML 设计，视觉自信度、信息层级与交互完成度对齐附带的 Neuform 参考。
2. Recreate the demo（完整重建）：给出产品简报、技能方向、保真度目标与参考快照，要求把demo/index.html当作「视觉与交互参考」而非「松散的情绪板」，重建出 Aura - Fluid Drag Interactions 页面。
3. Remix prompt（混排改写）：保留底层布局逻辑、标志性视觉处理与交互编排，替换品牌、主题、文案、配色与内容，但仍要清晰展示该技能。

这套「最小 / 重建 / 混排」的三层结构，是仓库中大量技能演示（如 cinematic-gsap-lenis-motion-system/demo/PROMPT.md）共用的模式：先用一句话验证技能可用，再用完整重建验证复刻精度，最后用混排验证技能的可迁移性。

二、产品简报：Aura 页面的设计意图

PROMPT.md 给出了重建目标的产品定位，这是理解后续一切实现决策的起点：

• 页面概念：Aura - Fluid Drag Interactions（流体拖拽交互）。
• 用途：Aura 流体仪表盘区块，用于演示应用工作流与界面层级，强调信息密度、模块化面板与界面节奏，适合产品展示、管理后台与数据分析类体验。
• 内容锚点：Fluid Drag Interactions、Data sync flow、Space gives Focus、THE NEXT WAVE OF INTERACT DESIGN、99。
• 主题标签：dashboard（仪表盘）、animated（动画）、webgl、threejs、bento（模块化网格）、dither（抖动纹理）、charts（图表）、support（支持）。

这些内容锚点可以直接从 index.html 的编码 HTML 中对应验证：页面标题为「Aura - Fluid Drag Interactions」，副标题文案为「Grab, move, and arrange the elements freely across the canvas.」（抓取、移动并自由排列画布上的元素），中心卡片文案为「Expanding the digital mind」，侧卡依次是「Data sync flow」「Space gives Focus」「99」与「THE NEXT WAVE OF INTERACT DESIGN」。

值得注意的设计策略：卡片采用 bento 式布局，通过 260–300px 宽的卡片、-22deg到24deg的旋转角度、translateX(-380px)到translateX(380px)的分布，构造出松散但有节奏的「画布感」，这正好对应「信息密度 + 模块化面板 + 界面节奏」的产品定位。

三、技能方向：明确要求使用的 GSAP 能力

PROMPT.md 在「Skill direction」中明确要求：

Use GSAP timelines, stagger, and scroll-triggered motion.

结合 SKILL.md 对 GSAP 核心 API 的归纳，这句话应被理解为三层能力要求：

1. Tweens（补间）：gsap.to(targets, vars)、gsap.from(targets, vars)、gsap.fromTo(targets, fromVars, toVars)，用于单元素动画。
2. Timelines（时间线）：gsap.timeline({ defaults, repeat, yoyo, paused })，支持链式编排tl.to(...).from(...).addLabel('x').add(() => ...)，并通过位置参数控制时序：绝对位置1.2、相对位置"+=0.5"、重叠"-=0.3"、标签"intro"。
3. ScrollTrigger（滚动触发插件）：gsap.registerPlugin(ScrollTrigger)后，可用内联形式gsap.to(".box", { scrollTrigger: ".box", x: 500 })，或高级配置scrollTrigger: { trigger, start, end, scrub, pin, snap, markers }，以及独立形式ScrollTrigger.create({ trigger, start, end, onUpdate, onToggle })。

REFERENCES.md（agent-skills/web-design/gsap/REFERENCES.md）为这些 API 提供了官方文档索引，覆盖gsap.to()、Timeline 与 ScrollTrigger 三类主题，可作为深入学习的入口。

四、保真度目标：把「参考」转化为可验收标准

PROMPT.md 的保真度目标是重建工作的验收清单，共五项：

1. 视觉保真：匹配参考的构图、信息密度、字体层级、间距节奏、表面处理、色彩关系与运动克制（motion restraint）。
2. 交互保真：保留最强的交互与动画背景行为，而不是用通用淡入淡出或装饰性位移替代它。
3. 首屏定制：首屏需要艺术化编排，并将同一设计逻辑贯穿到所有支撑区块。
4. 响应式与可访问性：从移动端到桌面端保持响应式，键盘可访问，且启用 reduced motion 时保持稳定。
5. 交付物：交付完整的index.html；页面自有图片、视频、模型与纹理放入demo/assets/；外部运行时库在源依赖它们时，可保留为固定版本的 CDN 依赖。

对照仓库中的实际交付，这五条都得到了落实：

• assets 目录：demo/assets/下存放了 page-01 纹理图（红色卡片的画像纹理，800w）与 page-02 纹理图（中心卡片的霜冻背景，800w），这正是「页面自有图片放 demo/assets/」的执行结果。
• CDN 固定版本：source.json 的runtime_dependencies记录了三方运行时：gsap 3.12.2、Draggable 3.12.2、three.js r128，外加 Tailwind CDN 与 Iconify。这些库在仓库中以assets/runtime/下的本地副本形式被固定，例如 gsap-min.js、draggable-min.js 与 three-min.js，对应「pinned CDN dependencies」的要求。
• 沙箱安全：index.html使用sandbox="allow-scripts"的 iframe 包裹解码后的源码，并设置了严格的 CSP（default-src 'none'、script-src 'unsafe-inline'等），源码经 base64 编码后注入srcdoc，资产通过postMessage以 blob URL 方式注入——这与 source.json 中的security_profile: "sandboxed-srcdoc-v1"字段完全对应。

五、参考快照：排名与热度数据说明了什么

PROMPT.md 的 Reference snapshot 记录了参考页面的来源与热度指标：

• 来源页面：Aura - Fluid Drag Interactions（Neuform 页面）。
• Neuform rank：同步时 gsap 排名第 1。
• 热度：857 次浏览、19 个收藏、3 次混排。
• 排名规则：先按浏览量降序，再按收藏量降序。

这些数据的机器可读版本存放在 source.json 中：skill.usage_count为 2827，design.view_count为 857、favorite_count为 19、remix_count为 3，排序字段为view_count desc → community_favorite_count desc → relation_created_at desc。这一快照的工程意义在于：它把「参考页面值得被复刻」这个主观判断，转化为客观的排名证据，同时为后续的 Remix 提供了数据基线。

六、源码级实现剖析：GSAP 入场动画与拖拽编排

重建指令要求「保留最强的交互行为」，这一点在 index.html 的源码中有完整的 GSAP 实现，是理解演示质量的关键。

6.1 首屏入场：stagger + back.out 缓动

页面在DOMContentLoaded后执行两段入场：

标题与导航的淡入：

gsap.to(".hero-anim", { y: 0, opacity: 1, duration: 1, stagger: 0.15, ease: "power3.out", delay: 0.2 });

标题、副标题、头部导航等元素初始时带有opacity-0 translate-y-*类，通过 stagger 0.15s 依次入场，使用power3.out获得「快起慢落」的质感，这正是 SKILL.md 中「Hero entrance (stagger)」食谱的实战形态。

卡片群的编排式入场：

gsap.fromTo(card, { x: final.x * 1.5, y: final.y + 150, rotation: final.rotation * 1.5, scale: final.scale * 0.8, opacity: 0 }, { x: final.x, y: final.y, rotation: final.rotation, scale: final.scale, opacity: 1, duration: 1.4, ease: "back.out(1.2)", delay: 0.6 + i * 0.08 } );

这里的实现细节非常值得借鉴：

• 每张卡片的最终状态（x、y、rotation、scale）从卡片内联transform中通过正则解析得出（translateX(...)、rotate(...)、scale(...)），做到「起始态 = 最终态 × 1.5 倍 + 偏移」的数学化放大入场，而不是手写死值。
• 缓动选用back.out(1.2)，让卡片以轻微回弹越过终点，形成有生命感的着陆。
• 延迟0.6 + i * 0.08让五张卡片依次登场，对应 SKILL.md 中stagger: 0.05或{ each, from: "start|center|end|random", grid }的编排思想。

6.2 持续漂浮动画：无限循环的 yoyo 时间线

入场完成后，每张卡片被挂上持续漂浮动画：

card.floatAnim = gsap.to(card, { y: "+=random(-5..5)", rotation: "+=random(-1..1)", duration: 3 + Math.random() * 2, repeat: -1, yoyo: true, ease: "sine.inOut" });

repeat: -1与yoyo: true组合出无限往返的轻微漂浮，sine.inOut保证运动平滑无顿挫——这正是 SKILL.md 中timeline({ defaults, repeat, yoyo, paused })能力在「环境氛围动画」上的应用。

6.3 拖拽交互：Draggable 插件与动画生命周期管理

流体拖拽的核心实现是 GSAP 的 Draggable 插件（来自runtime-8da2c9e0e562-draggable-min.js，对应 CDN 的gsap/3.12.2/Draggable.min.js）：

gsap.registerPlugin(Draggable); Draggable.create(card, { type: "x,y", bounds: window, onPress: function () { // 终止仍在运行的入场动画，并暂停漂浮动画 gsap.killTweensOf(this.target, "x,y,rotation,scale,opacity"); if (this.target.floatAnim) this.target.floatAnim.kill(); // 提升 z-index 使卡片浮到最前 highestZ += 1; this.target.style.zIndex = highestZ; }, onRelease: function () { // 从新位置继续漂浮 this.target.floatAnim = gsap.to(this.target, { y: "+=random(-5..5)", rotation: "+=random(-1..1)", duration: 3 + Math.random() * 2, repeat: -1, yoyo: true, ease: "sine.inOut" }); } });

这一实现同时演示了 SKILL.md「Common pitfalls」中两个反模式的正解：

• 动画冲突：拖拽按下时先用gsap.killTweensOf(target, "x,y,rotation,scale,opacity")杀掉正在运行的补间，避免 Draggable 的 transform 与漂浮动画互相覆盖——对应「Animating layout properties → jank」的修复思路（始终用 transform，而非 top/left）。
• 生命周期管理：漂浮动画对象被保存在card.floatAnim上，按需 kill 与重建，避免内存中残留重复的无限循环动画——对应 SPA 中「cleanup / revert」原则的单页版本。

6.4 WebGL 背景：three.js 点阵粒子场

除了 GSAP 负责的 UI 层，页面背景是 three.js 的点阵粒子场（PointCloud，40×40 网格、间距 10、带噪声扰动），由一段自定义顶点着色器控制粒子脉冲（sin(uTime * 0.5 + aOffset) * 0.5 + 0.5）与透明度，摄像机对鼠标位置做缓动跟随（camera.position.x += (targetX - camera.position.x) * 0.02）。

这段 WebGL 背景与 GSAP 拖拽层的关系值得注意：PROMPT.md 明确要求「Preserve the strongest interaction and animated background behavior instead of replacing it with generic fades」——即背景必须是「有行为的」动态场，而不是静态渐变。GSAP 负责卡片层的流体拖拽，three.js 负责背景层的粒子脉动，两者通过z-index分层（背景 z-[1]，卡片 z-10/20/30）互不干扰，这正是「motion restraint」的具体体现：每个图层只做自己该做的运动。

七、Remix 提示词：技能的可迁移性验证

Remix prompt 的要求是：

用$gsap和附带的 Neuform 演示作为质量基准，但替换品牌、主题、文案、配色与内容。保留底层的布局逻辑、标志性视觉处理、交互编排、响应式行为与性能约束，使混排结果依然能清晰展示该技能。

这意味着 Remix 不是重画一个页面，而是「换肤不换骨」：

• 保留：bento 卡片布局逻辑、入场 stagger 编排、漂浮 + 拖拽的交互编排、鼠标跟随的 WebGL 背景行为、CSP 沙箱与资产本地化的交付约定。
• 替换：品牌（Aura. → 新品牌）、主题文案（Fluid Drag Interactions → 新主题）、配色（暗紫渐变 + 红/蓝/紫卡片 → 新调色板）、内容锚点（99、Space gives Focus → 新内容）。

从工程角度看，Remix 验证的是技能模板的可参数化程度：只要把「内容锚点」「主题标签」「色彩关系」作为变量，而把「GSAP 编排结构」作为常量，就能在保持质量的同时产出全新主题——这正是技能被设计成可复用资产的核心价值。

八、实战要点速查

结合 SKILL.md 与演示源码，整理出本次重建可直接复用的要点：

九、进一步探索

• 提示词原文：agent-skills/web-design/gsap/demo/PROMPT.md
• 技能定义与 API 速查：agent-skills/web-design/gsap/SKILL.md
• 演示源码（含完整 GSAP + Draggable + three.js 实现）：agent-skills/web-design/gsap/demo/index.html
• 演示元数据与运行时依赖清单：agent-skills/web-design/gsap/demo/source.json
• 页面自有资产：page-01 纹理、page-02 纹理
• 同类进阶技能：cinematic-gsap-lenis-motion-system（GSAP + Lenis 平滑滚动的完整动效系统）