Starfield (星空)
别称 Stars background, Twinkling stars
细小的星星在如太空般的深色背景上闪烁或漂移。
适用场景
太空或夜晚主题的首屏
变体
- twinkling
- warp / fly-through
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“星空”(Starfield)背景，也叫 stars background 或 twinkling stars。
大小不一的小星星各按自己的节奏柔和地闪烁，整片星空非常缓慢地漂移：安静而平和。
星星数量要适中，保持轻快；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止闪烁和漂移。相似的动效
ABC
Sparkles (闪耀粒子)
别称 Glitter, Twinkle particles, Sparkles Text, Text Sparkle Particle Highlight
细小明亮的光点在文字或区块周围闪现又消失。
适用场景
大标题、高级感点缀
在[应用位置]添加“闪耀粒子”(Sparkles)效果，也叫 glitter 或 twinkle particles。
小小的星形光点在文字周围分散的位置、随机的时刻冒出来，闪烁后淡出：轻盈而迅速。
光点只作装饰，要对屏幕阅读器隐藏，绝不能遮住文字本身；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止闪烁。Particles (粒子)
别称 Floating particles, Particle field
大量小圆点在背景中漂浮、相互连接或对指针作出反应。
适用场景
首屏和区块背景
在[应用位置]添加“粒子”(Particles)背景，也叫 floating particles 或 particle field。
大小不一的小圆点各按自己的节奏，沿着柔和、随意游走的路径缓慢漂浮：平静而轻盈。
圆点数量要适中，在性能较弱的设备上也保持轻快；离开屏幕时暂停；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止动画。Meteors (流星)
别称 Meteor shower, Shooting Stars
带着发光尾迹的斜线划过卡片或区块。
适用场景
卡片和首屏点缀
在[应用位置]添加“流星”(Meteors)效果，也叫流星雨(meteor shower)或 shooting stars。
几道带着渐隐尾迹的小斜线在随机时刻斜着划过区域，每一道都一闪而过。
数量要少，保持点缀的作用，并在区域边缘裁切；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止流星。Noise / Grain Texture (噪点颗粒)
别称 Film grain, Noise background
细密的颗粒纹理覆盖在页面上，有时像胶片颗粒一样闪动。
适用场景
为渐变增添质感和层次
在[应用位置]添加“噪点颗粒”(Noise / Grain Texture)叠加层，也叫胶片颗粒(film grain)或 noise background。
一层细密、浅淡的颗粒纹理覆盖在表面上，像胶片颗粒一样小幅跳动闪烁：要含蓄，绝不能强到让内容显得浑浊。
点击要能穿透叠加层；纹理只生成一次，不要每帧生成；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则保持静止。Background & Ambient 中的其他动效
Vortex (漩涡)
别称 Swirling particles
粒子像漩涡一样绕着中心螺旋旋转。
适用场景
有冲击力的首屏背景
在[应用位置]添加“漩涡”(Vortex)背景，也叫 swirling particles。
小粒子像漩涡一样绕着中心点螺旋向内旋转，在边缘淡入，接近中心时淡出，形成流畅、连续的旋涡。
粒子数量要适中；离开屏幕时暂停；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止旋转。Wave Background (波浪背景)
别称 Wavy background, Animated waves
多层波浪线条或形状沿水平方向起伏流动。
适用场景
区块分隔、首屏底部
在[应用位置]添加“波浪背景”(Wave Background)，也叫 wavy background 或 animated waves。
几层波浪形状以略有不同的速度横向滚动，彼此交叠、像水一样流动：缓慢而平滑。
让每层波浪无缝循环、看不到跳动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就让波浪静止。A
B
Animated Beam (动态光束)
别称 Connecting beam
一道发光脉冲沿着连接两个元素的线条移动。
适用场景
集成关系图或数据流图
在[应用位置]添加“动态光束”(Animated Beam)效果，也叫 connecting beam。
一道短促的发光脉冲沿着连接两个元素的线条从一端匀速移动到另一端，然后重新开始：流畅、平静。
连接线本身要始终可见；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则让脉冲保持静止。