提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“描边文字绘制”(Stroke Text Draw)效果，也叫 draw in text 或 animated stroke text。
字母轮廓顺滑地逐笔画出，轮廓完成后填充再淡入。
页面加载时只播放一次，让文字保持为可访问的真实文本；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示已填充的文字。相似的动效
Line Drawing (线条绘制)
别称 Path Drawing, Stroke Dash Animation, Self-Drawing SVG, DrawSVG, Line Draw, SVG Path Draw, Stroke draw, Checkmark draw
通过为虚线偏移添加动画，让 SVG 描边看起来沿路径被画出来。
适用场景
图标、Logo 和插画
在[应用位置]添加“线条绘制”(Line Drawing)动画，也叫路径绘制(path drawing)或自绘 SVG(self-drawing SVG)。
每条描边看起来沿路径从起点到终点顺滑地自己画出来，第二条描边（比如对勾）紧跟在第一条之后。
进入视口时只播放一次，不要循环；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示画好的线条。ABCDABCD
将鼠标悬停在上面
Text Hover Effect (文字悬停效果)
别称 Gradient Outline Text Hover, Text Fill on Hover
描边文字被跟随指针或横扫而过的渐变填充或点亮。
适用场景
大号展示文字、页脚
在[应用位置]添加“文字悬停效果”(Text Hover Effect)，也叫悬停文字填充(text fill on hover)或渐变描边文字悬停(gradient outline text hover)。
文字起初只有描边；指针停在上面时，实色填充从左到右平滑地扫入，指针移开后再退回去。
填充前的描边文字也要清晰可读，并且在键盘聚焦时呈现同样的效果。Liquid Fill Text (液体填充文字)
别称 Water Fill Text
字母中注入不断上升、起伏荡漾的液体。
适用场景
加载提示、俏皮标题
在[应用位置]添加“液体填充文字”(Liquid Fill Text)效果，也叫 water fill text。
描边的字母中注满液体，波浪状的液面横向翻滚，液位缓慢地起伏，形成柔和、连续的循环。
单词要保留为真实文本供屏幕阅读器读取；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就让液体停在一个静止的液位。Text 中的其他动效
AGBHCIDJEKFL
将鼠标悬停在上面
Text 3D Flip (文字3D翻转)
别称 3D Flip Text Reveal
字母或单词绕轴做 3D 翻转，露出背面的下一段文字。
适用场景
悬停链接、标题
在[应用位置]添加“文字3D翻转”(Text 3D Flip)悬停效果，也叫 3D flip text reveal。
指针移到文字上时，每个字母绕水平轴做 3D 翻转，露出另一面的新字母，一个接一个快速顺滑地扫过；指针移开时再翻回来。
翻转过程中保持文本框尺寸不变，键盘聚焦时也显示同样的效果。ABCDEFGHIJABCDEFGHIJ
Text Distortion (文字扭曲)
别称 Organic Text Distortion
文字随滚动或指针移动自然地扭曲、起伏。
适用场景
实验性作品集
在[应用位置]添加“文字扭曲”(Text Distortion)效果，也叫 organic text distortion。
一行文字不断横向流动，同时自然地扭曲、起伏，仿佛隔着流动的水去看，流动由用户的滚动驱动。
扭曲要足够轻，保证文字可读，在较慢的设备上也要流畅；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就关闭该效果。ABCDEFGHIJKLMNOPQRSTUVWX
Text Generate (文字生成)
别称 Text Generate Effect
页面加载时，文字逐个淡入，常伴随模糊逐渐消散，仿佛正在生成。
适用场景
AI 风格的开场文案
在[应用位置]添加“文字生成”(Text Generate)效果。
文字逐个淡入，同时每个词上的柔和模糊逐渐消散，仿佛文本正在生成：节奏平稳、沉静。
页面加载时只播放一次，让屏幕阅读器立即读到完整文本；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示，不做动画。