taste-gsap 是一份针对智能体（agent）生成网站的 GSAP 动画实现工艺规范。核心理念是：GSAP 是手术刀，不是撒金粉的枪；一个干净的钉住区域胜过九层视差，且能通过代码审查。
用途：为使用 GSAP 做动画的智能体提供硬性架构与行为约束，确保动画可维护、高性能、可访问，并且在不加载 JS 时页面本身依然完整。
主要能力与规范：
- 架构：每个页面的动画必须包裹在单个 gsap.context(() => {...}, rootElement) 中，以限定选择器作用域并支持即时销毁。一切动画通过 gsap.matchMedia() 门控：仅在 (prefers-reduced-motion: no-preference) 内执行；重效果（钉住、scrub、逐字拆分）仅在 (min-width: 768px) 桌面端启用；小屏幕只做淡入或不加动画。matchMedia 回调返回清理函数，SPA 卸载时调用 ctx.revert()。每个区块一个时间线并按区块命名，禁止一个全局时间线包含 40 个补间。
- 平滑滚动：推荐使用免费的 Lenis（而非 ScrollSmoother），配置 duration 约 1.1、anchors: true，并通过 lenis.on("scroll", ScrollTrigger.update)、gsap.ticker.add(t => lenis.raf(t * 1000))、gsap.ticker.lagSmoothing(0) 与 ScrollTrigger 联动。预加载器期间调用 lenis.stop()，结束后 lenis.start()。减少动态效果模式下不得启用平滑滚动。
- 钉住与 scrub 卫生：每页最多两个钉住区域（一为常态，二为预算），每个钉住都消耗滚动线程。钉住配置使用 pin: true、pinSpacing: true（默认，保留）、start: "top top"、end 为 "+=200%" 到 "+=300%"，更长的 end 导致更慢的 scrub 和移动端卡顿。水平画廊采用钉住区块并仅平移 x（绝不用 left），end 用函数 () => "+=" + (track.scrollWidth - innerWidth) 以便 resize 时重新计算，scrub: 1，仅桌面端。原生 overflow-x 加 scroll-snap 必须保留为无 JS / 减少动态效果的回退。拖拽轮播使用 Draggable.create(track, { type: "x", inertia: true, bounds: () => ({ minX: -(track.scrollWidth - wrap.offsetWidth), maxX: 0 }) })，bounds 用函数以便 resize 时重新校准，edgeResistance 约 0.9，同样保留原生回退及可拖拽的 UI 提示。重区块 scrub 取 0.6 至 1，简单补间才用 scrub: true。禁止在钉住内再钉住，禁止在第一个钉住间隔结束前开始第二个钉住。字体和图片加载后（window.load 与 document.fonts.ready）必须调用 ScrollTrigger.refresh()，否则对齐错乱。发布前需在 768px 宽度测试钉住，依赖刷新计的触发器应设 invalidateOnRefresh: true。
- 动画属性：仅对 x、y、scale、rotation、opacity 做动画，绝不使用 top/left/width/height/margin/filter（布局抖动）。文本揭示默认按行拆分（包裹 overflow: hidden，yPercent: 110 到 0），按字符拆分仅用于主标题且仅在桌面门控内。避免滥用 will-change，动画时设置在包裹元素上，结束后移除或交由 GSAP 管理。保持 60fps 诚实：不要在一帧内对 200 个元素做交错动画，用 gsap.utils.toArray 与 stagger 批量处理。
- 揭示模式：from 状态保留在代码而非 CSS 中；元素在 CSS 中初始可见，gsap.from(...) 配合 immediateRender: true 在 matchMedia 门控内运行，只在 JS 和动效均启用时隐藏元素，若 GSAP 未加载则页面完整——这是安全契约。标准揭示：opacity: 0、y: 40、duration: 0.9、ease: "power3.out"，触发器 top 82%，内容区块用 once: true。主视觉入场使用加载时的 gsap.timeline()，元素间错开 80 至 120ms，ease 用 "expo.out" 或 power4.out，总时长不超过 1.4 秒。数字递增通过补间代理对象并在 onUpdate 中写入 textContent，触发器 once: true。
- 常见错误：没有平滑滚动层却劫持滚轮且不测试；内容尚未存在就触发动画（缺少 refresh）；无限跑马灯在减少动态效果下未暂停（需在 CSS 中也用 @media (prefers-reduced-motion: reduce) 关闭）；任何自动播放（主视觉视频、手风琴、轮播无输入就动）；页面“惊艳”完全依赖动画，静帧截图无聊则动画只是化妆；任何为动而动、不服务叙事的动画都应删除。
- 检查清单：无 gsap.context 与 matchMedia 门控、超过两个钉住区域或 768px 以下出现钉住、动画布局属性、字体图片后未 refresh、桌面门控外按字符拆分、跑马灯或自动播放无减少动态效果开关、无 JS 时静帧不是完整美观页面、任何只为自身存在的动画——出现任一即视为失败。
使用方式：资料未提供具体安装或调用步骤，仅给出上述实现约定与代码片段，可将其作为智能体生成或审查 GSAP 动画代码时的约束指南。
适用场景：智能体自动构建或审阅营销页、作品集、产品落地页等前端动画；需要兼顾性能、可访问性与无 JS 回退的 GSAP 项目。
限制：资料未提供收费、价格、平台支持或效果数据，暂未提供；规范中提到的浏览器行为与性能影响属于作者建议，实际效果需自行验证。