Aurora Background (极光背景)
别称 Northern lights gradient
柔和模糊的色带像极光一样在内容后方飘动。
适用场景
首屏区块
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“极光背景”(Aurora Background)，也叫 northern lights gradient。
柔和、模糊的色带在内容后方缓慢飘动摇曳，彼此重叠交融，就像北极光：非常缓慢、如梦似幻。
上方文字要保持清晰可读，不要每一帧都重新对色带做模糊，以保持流畅；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止飘动。相似的动效
Mesh Gradient (网格渐变)
别称 Animated mesh gradient
多个颜色点平滑地交融、漂移，形成有机的多色背景。
适用场景
落地页背景
在[应用位置]添加“网格渐变”(Mesh Gradient)背景，也叫 animated mesh gradient。
几团柔和的色块彼此交融，在区域内缓慢漂移，让背景以有机的方式不断变化：非常缓慢、流畅。
无论颜色如何交融，都要保证上层内容清晰可读；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止漂移。Animated Gradient (动态渐变)
别称 Gradient animation, Moving gradient, Background gradient animation
渐变背景中的颜色缓慢变化、平移或旋转。
适用场景
首屏背景、按钮
在[应用位置]添加“动态渐变”(Animated Gradient)背景，也叫 gradient animation 或 moving gradient。
渐变的颜色在区域内缓慢平移，柔和、连续地流动，循环重新开始时不能出现可见的跳动。
上方的文字在每种颜色上都要清晰可读；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止移动。Light Rays (体积光)
别称 God rays, Light shafts
柔和的光束在背景上轻轻摇曳。
适用场景
营造氛围的页头
在[应用位置]添加“体积光”(Light Rays)背景，也叫 god rays 或 light shafts。
几道柔和的半透明光束从顶部呈扇形散开，左右轻轻摇曳，同时略微变亮变暗：缓慢而富有氛围。
光束要放在内容后面，并且足够淡，不影响阅读；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止光束。Wave Background (波浪背景)
别称 Wavy background, Animated waves
多层波浪线条或形状沿水平方向起伏流动。
适用场景
区块分隔、首屏底部
在[应用位置]添加“波浪背景”(Wave Background)，也叫 wavy background 或 animated waves。
几层波浪形状以略有不同的速度横向滚动，彼此交叠、像水一样流动：缓慢而平滑。
让每层波浪无缝循环、看不到跳动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就让波浪静止。Background & Ambient 中的其他动效
Background Beams (背景光束)
别称 Light beams, Beam collision, Animated Path Lines, Background Lines, Wave Path Lines
细细的发光线条沿路径移动，有时撞到表面会迸散开来。
适用场景
首屏背景
在[应用位置]添加“背景光束”(Background Beams)效果，也叫 light beams 或 background lines。
背景中铺着几条浅色曲线路径，短短的发光条一条接一条地沿路径移动，节奏平稳、匀速。
光束要错开时间，绝不同步移动，并放在内容后面；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止光束。将鼠标悬停在上面
Background Boxes (背景方块)
别称 Tile hover background
倾斜的方块网格在指针经过时亮起颜色。
适用场景
首屏背景
在[应用位置]添加“背景方块”(Background Boxes)效果，也叫 tile hover background。
用倾斜的方块网格铺满区域；指针经过的方块要立即亮起，再慢慢暗回去，留下一条短短的拖尾。
方块要放在内容后面，不能挡住对内容的点击；在触屏设备上改为点亮被点按的方块。A
Border Beam (边框光束)
别称 Shine border, Animated border, Glowing effect, Moving Border
一道明亮的高光沿着卡片边框环绕移动。
适用场景
重点卡片、CTA
在[应用位置]添加“边框光束”(Border Beam)效果，也叫 shine border 或 moving border。
一道短而亮的高光沿卡片边框以均匀、从容的速度环绕移动，循环时不能出现明显跳动。
效果不能改变卡片的内容和尺寸；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止光束。