Motion 是一个创意网页开发技能，定位为“技术美术应用于 UI”，把界面当作物理的 3D 环境来处理，而非扁平的矩形。它把一套完整的动效与视觉设计系统，与一套创意编程工具集结合在一起。
一、用途 该技能用于构建具有物理动效、玻璃质感表面、着色器特效、粒子系统与交互式 3D 体验的创意网页。它强调从第一性原理出发、理解背后的数学，并始终产出可交互、可视化的结果。
二、核心技术栈 3D 与着色器：React Three Fiber、Three.js、GLSL（顶点与片元着色器）、WebGL Render Targets / FBO、@react-three/drei、@react-three/postprocessing、Lamina（可组合着色器层）、WebGPU/TSL（新兴）。 动画：Framer Motion（布局动画、AnimatePresence、共享布局动画、Reorder）、GSAP + ScrollTrigger、弹簧物理。 前端：React/Next.js、TypeScript、CSS Variables、MDX、设计系统。 创意编程模式：噪声函数（Perlin、Simplex、Curl、FBM）、有符号距离函数、光线步进、体积渲染、粒子系统（buffer geometry + FBO）、后处理管线。
三、主要能力
- 物理动效：所有动效使用弹簧物理，不使用基于时长的缓动。弹簧常数为 stiffness 300、damping 30、mass 1；元素会略微过冲（1.05x 缩放）再回落到 1.0x；过渡时长约 400ms–700ms，取决于移动距离。提供 Framer Motion、GSAP 与 CSS 回退实现示例。
- 玻璃表面：每个抬升表面使用多层玻璃堆叠，而非简单的 backdrop-filter: blur()。层叠自下而上包括：多层高斯模糊（20px–40px）、半透明白色填充 rgba(255,255,255,0.05)、模拟顶部受光的 1px 渐变内边框、高扩散低透明度的环境阴影。规则：仅用于深色背景；玻璃表面不使用纯色背景；标准玻璃模糊 28px，聚光/模态遮罩 40px。
- GLSL 着色器基础：网格 = 几何体 + 材质，着色器用自定义 GPU 程序替换材质。顶点着色器逐顶点运行并输出 gl_Position；片元着色器逐像素运行并输出 gl_FragColor。涵盖 uniforms（JS 到着色器的数据桥，只读，需用 useMemo 记忆化）、varyings（顶点到片元的数据传递）、attributes（逐顶点数据，仅在顶点着色器可用）等概念，并给出 R3F 着色器设置示例。
- 噪声函数：Perlin（平滑有机随机，适合地形、团块变形）、Simplex（更快、伪影更少，适合渐变与动态纹理）、Curl（无散度场，适合流体状粒子运动）、FBM（多频率/振幅叠加，产生云状、山峦细节）。可使用 glsl-noise 包或直接复制函数。
- 片元着色器特效：色差（后处理通道，在视口边缘偏移 R/B 通道，偏移量 0.002，模拟物理相机镜头）、网格渐变背景（3–4 个基于噪声的色块缓慢漂移，颜色 #00F0FF、#7000FF、#000000）、胶片颗粒（单色噪声叠加，透明度 2%，逐帧细微变化）。
- 粒子系统：使用 BufferGeometry 的基础粒子；通过片元着色器让粒子发光；使用 FBO 将位置计算卸载到 GPU 的模拟通道，支持 10 万+ 粒子（位置存入 DataTexture，SimulationMaterial 在片元着色器中读取并变换位置，渲染到离屏 WebGLRenderTarget，再作为 uniform 传入渲染通道）。
- 渲染目标：WebGLRenderTarget 将场景渲染到离屏缓冲，把像素内容作为纹理使用。用途包括透明/玻璃材质、传送门（场景中的场景）、光学错觉、场景过渡（用 Perlin 噪声 + 进度 uniform 混合两个 FBO）、后处理管线。
- 折射、色散与光照：使用 GLSL 内置 refract() 配合 eyeVector、worldNormal 与 IOR 比值；色散对 R、G、B 通道使用不同 IOR 值；Blinn-Phong 高光与漫反射；Fresnel 效果；背面渲染技巧（先渲染背面到 FBO，再渲染正面，产生可信的内部色散）。
- 后处理作为创意媒介：像素化基础、访问单元格局部坐标、两大支柱（重映射/扭曲 UV 坐标；逐单元格塑形）。图案技术包括收据/条形图案、半调（Halftone）、CMYK 半调（四个旋转网格 C:15°、M:75°、Y:0°、K:45°，减色混合）、ASCII 效果、基于 SDF 的图案、阈值矩阵。错视效果包括交错 LED 面板、钩织/编织、乐高积木、凹槽/磨砂玻璃。动态/交互式后处理包括渐进式去像素化、像素化鼠标轨迹。
- 高级半调：点阵网格、通过 3x3 邻域采样打破网格边界裁剪、Gooey 半调（用 smoothmin 混合重叠圆）、摩尔纹图案、使用 fwidth(dist) 的抗锯齿。
- 交互模式：悬停磁吸效果（元素以 0.1x 光标偏移量跟随，离开时弹簧回位）；激活态布局变形（资料在此处截断，后续内容暂未提供）。
四、使用方式 该技能以技能文档形式提供，包含大量可直接使用的代码示例（Framer Motion、GSAP、CSS、R3F 着色器、粒子系统、FBO、后处理等）。安装命令与具体调用方式在提供的资料中暂未提供。
五、适用场景 适合需要物理动效、玻璃拟态界面、GLSL 着色器特效、3D 交互体验、粒子系统与创意后处理的网页项目，尤其是追求“电影感”视觉体验的创意网站。
六、限制 资料明确要求：动效不使用基于时长的缓动；玻璃表面仅用于深色背景，不使用纯色背景；片元着色器特效应克制使用，且应用于环境层级而非逐组件。其余限制在提供的资料中暂未提供。