提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“波浪文字”(Wavy Text)效果,也叫文字波浪(text wave)。
字母依次上下起伏,让一道轻柔流畅的波浪不断穿过整个词。
无缝循环,让屏幕阅读器把它读作一个词;如果用户开启了“减少动态效果”(prefers-reduced-motion),则停止波浪。相似的动效
ABCDEF
Split Text Stagger (拆分文字交错)
别称 Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
标题被拆分成字符、单词或行,以短暂延迟依次动画入场。
适用场景
大标题、章节标题
在[应用位置]添加“拆分文字交错”(Split Text Stagger)入场效果,也叫逐字交错(letter stagger)或 staggered text reveal。
把标题拆成单个字母,字母之间留出短暂延迟,依次上移并淡入,快速顺滑,不要有弹跳感。
标题进入视口时只播放一次,让屏幕阅读器把它当作一个完整的词读出;如果用户开启了“减少动态效果”(prefers-reduced-motion),则直接显示,不做动画。Bouncing Dots (跳动圆点)
别称 Dots loader, Ellipsis loader, Three-dot loader
一排圆点依次跳动、淡入淡出或缩放。
适用场景
行内加载、聊天等待
在[应用位置]添加“跳动圆点”(Bouncing Dots),也叫 dots loader 或 three-dot loader。
圆点以轻快、有弹性的节奏依次跳起再落下,一轮结束后短暂停顿,再重新开始。
循环要无缝衔接,并为屏幕阅读器提供状态标签;如果用户开启了“减少动态效果”(prefers-reduced-motion),则停止动画。ABC DEF GHI JKLABC DEF GHI JKL
MNO PQR STU VWXMNO PQR STU VWX
YZA BCD EFG HIJYZA BCD EFG HIJ
Kinetic Typography (动态排版)
别称 Kinetic Text
文字不再是静态文案,而是作为运动的图形元素缩放、移动或旋转。
适用场景
品牌首屏区块
在[应用位置]添加“动态排版”(Kinetic Typography),也叫 kinetic text。
一行行重复的大号文字以缓慢、稳定的节奏交替朝相反方向横向滑动,让文字本身变成运动的图形。
每一行都要无缝循环、看不出跳接,屏幕阅读器只读一遍文字;如果用户开启了“减少动态效果”(prefers-reduced-motion),就停止运动。Typing Indicator (正在输入提示)
别称 Typing dots, Chat is typing
气泡中的三个圆点轮流跳动或上浮,表示对方或 AI 正在输入。
适用场景
聊天、AI 助手
在[应用位置]添加“正在输入提示”(Typing Indicator),也叫 typing dots。
对方输入时,小聊天气泡里的圆点依次上浮并变亮,节奏柔和、轻缓。
循环要无缝衔接,消息一到就立刻移除气泡,并为屏幕阅读器提供一段简短的状态文字来代替圆点。Text 中的其他动效
ABDEFGHIJKLDEFMN
Word Rotate (词语轮播)
别称 Rotating Words, Flip Words, Container Text Flip, Layout Text Flip, Rotating Text Wheel
句子中的一个词以滑动、翻转或淡入淡出的方式换成列表中的下一个词。
适用场景
首屏标语
在[应用位置]添加“词语轮播”(Word Rotate)效果,也叫轮换词(rotating words)或翻转词(flip words)。
行内的一个词向上滑出,列表中的下一个词从下方滑入,每个词停留片刻后再切换。
词宽不同时不要让这一行的其余部分跳动,不要让屏幕阅读器播报每次切换;如果用户开启了“减少动态效果”(prefers-reduced-motion),则停止轮播。ABCDEF
Animated Gradient Text (动态渐变文字)
别称 Aurora Text, Rainbow Text Sweep, Gradient Text Color Wave
文字以渐变填充,颜色持续变换或流动。
适用场景
品牌标题
在[应用位置]添加“动态渐变文字”(Animated Gradient Text)效果,也叫极光文字(aurora text)或 rainbow text sweep。
文字用渐变填充,颜色在文字上缓慢、顺滑地流动,无缝地无限循环。
任何时刻文字都要在背景上清晰可读;如果用户开启了“减少动态效果”(prefers-reduced-motion),就让颜色保持静止。ABCDEF
将鼠标悬停在上面
Glitch Text (故障文字)
别称 Text Glitch, RGB Split Glitch
文字像信号故障一样抖动,出现切片错位和红青色分离。
适用场景
赛博朋克或游戏风格标题
在[应用位置]添加“故障文字”(Glitch Text)悬停效果,也叫 text glitch 或 RGB 分离故障(RGB split glitch)。
指针停在文字上时,文字以快速、利落的阵发方式抖动:细细的横向切片左右跳动,两份彩色副本像信号故障一样错开;指针移开后恢复原状。
真实文字在文档中只保留一份,避免屏幕阅读器读出副本;键盘聚焦时也显示同样的效果。