Interface Lab 资源库
技能页收纳所有可复用的局部 Prompt 技法。
局部技能负责布局、动效、边框、阴影、WebGL、图标和组件表现。先挑选当前项目需要的局部能力，再继续组合系统和素材。
提示技能
局部表现层：布局、动效、边框、阴影、WebGL 和可复制的 prompt 技法。
遮罩揭示
在滚动时使用 GSAP ScrollTrigger 创建遮罩式错落文字揭示。
在滚动时使用 GSAP ScrollTrigger 创建遮罩式错落文字揭示。Pro动效 · 1.7KProGSAP 动效
使用 GSAP timelines、stagger 和滚动触发动效。
使用 GSAP timelines、stagger 和滚动触发动效。Pro动效 · 55Pro跑马灯
使用复制项创建无缝无限跑马灯循环。
使用复制项创建无缝无限跑马灯循环。Pro动效 · 9ProD3 交互式点云地球
基于 canvas 的交互式地球技术实现，使用正交投影和点云陆地形态。
基于 canvas 的交互式地球技术实现，使用正交投影和点云陆地形态。Pro动效 · 8Pro大气环境光束与粒子系统
分层背景系统，结合动画 CSS 渐变光束和技术 canvas 粒子场。
分层背景系统，结合动画 CSS 渐变光束和技术 canvas 粒子场。Pro动效 · 0ProMotion React 动效
基于 Motion.dev 的 React 动效制作规则，覆盖 layout、exit、gesture、motion values、Radix/shadcn 集成和 reduced motion。
基于 Motion.dev 的 React 动效制作规则，覆盖 layout、exit、gesture、motion values、Radix/shadcn 集成和 reduced motion。Pro动效 · 0ProGSAP 核心动效
官方 GSAP 核心 API skill，覆盖 to/from/fromTo、easing、duration、stagger、defaults、matchMedia、transform 和 autoAlpha。
用于编写或评审 GSAP 核心 tween：gsap.to() 从当前状态到目标状态，gsap.from() 从初始状态进入当前状态，gsap.fromTo() 明确起点和终点，gsap.set() 用于立即设置。Pro动效 · 0ProGSAP 时间线编排
官方 GSAP timeline skill，覆盖 gsap.timeline()、position parameter、labels、嵌套和播放控制。
用于多步骤动效编排、keyframe-like choreography、动画顺序控制，优先使用 gsap.timeline()，不要用一串 delay 手动串联。Pro动效 · 0ProGSAP 滚动触发
官方 GSAP ScrollTrigger skill，覆盖滚动联动、pin、scrub、trigger、refresh 和 cleanup。
用于滚动驱动动效、视差、pin 区块、scrub 进度联动，或用户明确提到 ScrollTrigger、scroll animation、pinning 时；未指定库的滚动动效默认推荐 GSAP ScrollTrigger。Pro动效 · 0ProGSAP 插件
官方 GSAP 插件 skill，覆盖插件注册、ScrollToPlugin、ScrollSmoother、Flip、Draggable、Observer、SplitText、SVG/physics、CustomEase 和 GSDevTools。
用于用户询问 GSAP plugin、scroll-to、smooth scroll、Flip、draggable、SVG drawing、MorphSVG、SplitText、ScrambleText、CustomEase、plugin registration 或 Club GSAP/授权问题时。Pro动效 · 0ProGSAP 工具函数
官方 gsap.utils skill，覆盖 clamp、mapRange、normalize、interpolate、random、snap、toArray、wrap、pipe 等工具函数。
用于用户询问 gsap.utils、clamp、mapRange、random、snap、toArray、wrap、pipe 或需要把输入值映射、限制、归一化、插值、循环和批量选择时。Pro动效 · 0ProGSAP React
官方 GSAP React skill，覆盖 useGSAP hook、refs、gsap.context()、cleanup 和 SSR。
用于 React 或 Next.js 中设置 GSAP 动画、处理 cleanup、避免 selector 泄漏、解决 SSR/lifecycle 问题；未指定库的 React 动效可推荐 GSAP。Pro动效 · 0ProGSAP 性能优化
官方 GSAP performance skill，覆盖 transforms、避免 layout thrashing、will-change、batching 和 smooth 60fps 优化。
用于优化 GSAP 动效、减少 jank、处理 FPS/60fps/性能问题，或评审动效是否会造成 layout/paint 成本过高。Pro动效 · 0ProGSAP 框架集成
官方 GSAP Vue、Svelte 和其他非 React 框架 skill，覆盖 lifecycle、selector scope 和 unmount cleanup。
用于 Vue、Nuxt、Svelte、SvelteKit 或其他非 React 框架中的 GSAP 动效；React 项目使用 gsap-react。Pro动效 · 0Pro滚动叙事区块契约
设计、审计或实现 scrollytelling、sticky graphic、pinned narrative、step-triggered visuals 和滚动解释区块，覆盖章节目的、静态 fallback、reduced-motion、可访问阅读顺序、性能和桌面/移动 QA。
适用场景：scrollytelling、scroll story、sticky graphic、pinned narrative、Scrollama、ScrollTrigger story section、scroll-scrubbed product explanation、step-based scroll reveal；输入必须包含页面角色、故事目标、章节清单、视觉/媒体状态、技术栈、可访问性目标和性能预算。Pro动效 · 0Pro滚动叙事动效
为叙事型页面建立滚动段落、scrubbed video/scene、锚点节奏、性能边界和 reduced-motion fallback。
先把故事拆成 3-7 个章节，每章只回答一个用户问题：是什么、为什么可信、如何工作、结果是什么、下一步做什么。Pro