提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“文字悬停效果”(Text Hover Effect)，也叫悬停文字填充(text fill on hover)或渐变描边文字悬停(gradient outline text hover)。
文字起初只有描边；指针停在上面时，实色填充从左到右平滑地扫入，指针移开后再退回去。
填充前的描边文字也要清晰可读，并且在键盘聚焦时呈现同样的效果。相似的动效
ABCDEFGHIJKL
移动指针试试
Text Reveal Card (文字显现卡片)
别称 Spotlight Text Reveal
在卡片上移动指针时，遮罩边缘或聚光灯下隐藏的文字随之显露。
适用场景
功能卡片
在[应用位置]添加“文字显现卡片”(Text Reveal Card)效果，也叫聚光灯文字显现(spotlight text reveal)。
指针在卡片上移动时，一条竖直边缘紧紧跟随，在一侧露出隐藏的文字：流畅、直接，没有延迟。
在没有指针可跟随的触屏设备上，让拖动或点按也能显示隐藏文字，并让隐藏文字可被屏幕阅读器读取。Stroke Text Draw (描边文字绘制)
别称 Draw In Text, Animated Stroke Text
先以描边绘出字母轮廓，再显示填充。
适用场景
Logo、首屏大字
在[应用位置]添加“描边文字绘制”(Stroke Text Draw)效果，也叫 draw in text 或 animated stroke text。
字母轮廓顺滑地逐笔画出，轮廓完成后填充再淡入。
页面加载时只播放一次，让文字保持为可访问的真实文本；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示已填充的文字。Liquid Fill Text (液体填充文字)
别称 Water Fill Text
字母中注入不断上升、起伏荡漾的液体。
适用场景
加载提示、俏皮标题
在[应用位置]添加“液体填充文字”(Liquid Fill Text)效果，也叫 water fill text。
描边的字母中注满液体，波浪状的液面横向翻滚，液位缓慢地起伏，形成柔和、连续的循环。
单词要保留为真实文本供屏幕阅读器读取；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就让液体停在一个静止的液位。Text 中的其他动效
在里面滚动
Text Path Scroll (路径文字滚动)
别称 Text Path Curve Scroll Animation
文字沿曲线路径排列，并随用户滚动沿路径移动。
适用场景
叙事型版块
在[应用位置]添加“路径文字滚动”(Text Path Scroll)效果，也叫 text path curve scroll animation。
文字排在一条曲线上，随用户滚动沿曲线滑动：向下滚动时前进，向上滚动时后退。
让移动直接绑定滚动位置、没有延迟，并让屏幕阅读器把它当作普通文本读取。ABCABCABCABCABC
在里面滚动
Text Repetition (文字重复)
别称 Repeated Text Scroll
一个词被复制成许多层叠的副本，随滚动错开移动。
适用场景
作品集标题
在[应用位置]添加“文字重复”(Text Repetition)效果，也叫 repeated text scroll。
把一个词复制成一叠更淡的描边副本，随用户滚动从它身后展开，向上滚动时再收拢回去。
让展开程度直接绑定滚动位置，并对屏幕阅读器隐藏多余的副本，让这个词只被读一次。AWBXCYDZ
Text Replacement (文字替换)
别称 Text Swap
原有文字以动画方式退出，并被新的文字内容替换。
适用场景
会变化的标签
在[应用位置]添加“文字替换”(Text Replacement)效果，也叫文字切换(text swap)。
文字变化时，旧字符向上滑出，新字符从下方滑入，逐个字符形成快速而流畅的波动。
切换过程中不要让文本框尺寸跳动，并且只向屏幕阅读器播报新文本。