提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“体积光”(Light Rays)背景,也叫 god rays 或 light shafts。
几道柔和的半透明光束从顶部呈扇形散开,左右轻轻摇曳,同时略微变亮变暗:缓慢而富有氛围。
光束要放在内容后面,并且足够淡,不影响阅读;如果用户开启了“减少动态效果”(prefers-reduced-motion),则停止光束。相似的动效
Spotlight (聚光灯)
别称 Spotlight sweep, Light cone
一道柔和的锥形光或光斑扫入到位,照亮背景的一部分。
适用场景
首屏标题
在[应用位置]添加“聚光灯”(Spotlight)效果,也叫 spotlight sweep 或 light cone。
页面加载时,一道柔和的锥形光从角落斜着扫进来,停在标题上方,到位时逐渐变亮:缓慢而流畅。
只播放一次;如果用户开启了“减少动态效果”(prefers-reduced-motion),则直接显示已照在标题上的光。Aurora Background (极光背景)
别称 Northern lights gradient
柔和模糊的色带像极光一样在内容后方飘动。
适用场景
首屏区块
在[应用位置]添加“极光背景”(Aurora Background),也叫 northern lights gradient。
柔和、模糊的色带在内容后方缓慢飘动摇曳,彼此重叠交融,就像北极光:非常缓慢、如梦似幻。
上方文字要保持清晰可读,不要每一帧都重新对色带做模糊,以保持流畅;如果用户开启了“减少动态效果”(prefers-reduced-motion),则停止飘动。Lamp Effect (灯光效果)
别称 Lamp glow
一条发光的灯线向两侧展开,向下方的标题投下一道锥形光。
适用场景
深色首屏标题
在[应用位置]添加“灯光效果”(Lamp Effect),也叫 lamp glow。
区块进入视口时,一条细细的发光线从中间向两侧展开,向下方的标题投下一道柔和的锥形光,标题同时上浮淡入到位:缓慢而流畅。
只播放一次;如果用户开启了“减少动态效果”(prefers-reduced-motion),则直接显示被照亮的标题。Background Beams (背景光束)
别称 Light beams, Beam collision, Animated Path Lines, Background Lines, Wave Path Lines
细细的发光线条沿路径移动,有时撞到表面会迸散开来。
适用场景
首屏背景
在[应用位置]添加“背景光束”(Background Beams)效果,也叫 light beams 或 background lines。
背景中铺着几条浅色曲线路径,短短的发光条一条接一条地沿路径移动,节奏平稳、匀速。
光束要错开时间,绝不同步移动,并放在内容后面;如果用户开启了“减少动态效果”(prefers-reduced-motion),则停止光束。Background & Ambient 中的其他动效
Mesh Gradient (网格渐变)
别称 Animated mesh gradient
多个颜色点平滑地交融、漂移,形成有机的多色背景。
适用场景
落地页背景
在[应用位置]添加“网格渐变”(Mesh Gradient)背景,也叫 animated mesh gradient。
几团柔和的色块彼此交融,在区域内缓慢漂移,让背景以有机的方式不断变化:非常缓慢、流畅。
无论颜色如何交融,都要保证上层内容清晰可读;如果用户开启了“减少动态效果”(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),则保持静止。