提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“文字显现卡片”(Text Reveal Card)效果，也叫聚光灯文字显现(spotlight text reveal)。
指针在卡片上移动时，一条竖直边缘紧紧跟随，在一侧露出隐藏的文字：流畅、直接，没有延迟。
在没有指针可跟随的触屏设备上，让拖动或点按也能显示隐藏文字，并让隐藏文字可被屏幕阅读器读取。相似的动效
A
将鼠标悬停在上面
SVG Mask Reveal (SVG遮罩显现)
别称 SVG Mask Effect, Clip-path Reveal, Spotlight Mask
遮罩形状划过或跟随指针，露出下方的内容。
适用场景
图片和内容显现
在[应用位置]添加“SVG遮罩显现”(SVG Mask Reveal)悬停效果，也叫 clip-path reveal 或聚光灯遮罩(spotlight mask)。
指针悬停时，圆形遮罩从中心扩大，露出下方的内容；指针移开后再收拢：流畅且较快。
两个图层保持完全相同的尺寸，避免任何位移；键盘聚焦和点按时也显示同样的显现效果。- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
移动指针试试
Cursor Spotlight (光标聚光灯)
别称 Flashlight cursor, Spotlight effect
指针周围的一圈光照亮内容，其余部分保持暗色。
适用场景
首屏大图区、揭示效果
在[应用位置]添加“光标聚光灯”(Cursor Spotlight)效果，也叫手电筒光标(flashlight cursor)或聚光灯效果(spotlight effect)。
一圈柔和的光跟随指针，照亮下方的内容，区域内其余部分保持变暗。
在触屏设备上没有可跟随的指针，改为直接完整点亮显示内容。A
B
拖动试试
Before-After Slider (前后对比滑块)
别称 Image comparison slider, Compare slider
拖动分隔线，一侧显示一张图片，另一侧显示另一张。
适用场景
照片修图、产品对比
在[应用位置]添加“前后对比滑块”(Before-After Slider)，也叫 image comparison slider 或 compare slider。
两张图片上下叠放，拖动一条竖直分隔线时，一张露出更多、另一张露出更少；分隔线紧跟指针，没有延迟。
分隔线初始位于中间，并支持触摸和方向键操作。ABCDABCD
将鼠标悬停在上面
Text Hover Effect (文字悬停效果)
别称 Gradient Outline Text Hover, Text Fill on Hover
描边文字被跟随指针或横扫而过的渐变填充或点亮。
适用场景
大号展示文字、页脚
在[应用位置]添加“文字悬停效果”(Text Hover Effect)，也叫悬停文字填充(text fill on hover)或渐变描边文字悬停(gradient outline text hover)。
文字起初只有描边；指针停在上面时，实色填充从左到右平滑地扫入，指针移开后再退回去。
填充前的描边文字也要清晰可读，并且在键盘聚焦时呈现同样的效果。Text 中的其他动效
A
Q
J
P
N
V
Y
HB
K
M
L
Z
W
T
XC
R
G
Q
J
P
N
VD
Y
H
K
M
L
Z
WE
T
X
R
G
Q
J
PF
N
V
Y
H
K
M
L
将鼠标悬停在上面
Text Scramble (文字乱码解码)
别称 ScrambleText, Text Decode, Encrypted Text, Text Unscramble, Hyper Text
文字被不断刷新的随机字符替代，并逐渐还原成最终的词。
适用场景
科技风首屏标题、链接悬停
在[应用位置]添加“文字乱码解码”(Text Scramble)悬停效果，也叫文字解码(text decode)或加密文字(encrypted text)。
指针移到文字上时，每个字母快速闪过随机字符，再从左到右依次定格为真实字母。
乱码过程中文字宽度不要跳动，让屏幕阅读器始终读取真实文本，并且在键盘聚焦时呈现同样的效果。ABCDEF
移动指针试试
Text Tilt (文字倾斜)
别称 Perspective Text Tilt
文字跟随鼠标位置以 3D 透视方式倾斜转动。
适用场景
首屏标题
在[应用位置]添加“文字倾斜”(Text Tilt)效果，也叫透视文字倾斜(perspective text tilt)。
文字随着指针移动平滑跟随，以 3D 方式轻轻朝指针倾斜，指针移开后再缓缓恢复平整。
倾斜幅度要含蓄，保证文字可读；在触屏设备上，以及如果用户开启了“减少动态效果”(prefers-reduced-motion)，文字保持平整不动。ABC DEFG
Typewriter (打字机)
别称 Typing Animation, Typewriter Effect, Typing Text
字符像打字一样逐个出现，通常后面跟着一个闪烁的光标。
适用场景
首屏大标题、标语
在[应用位置]添加“打字机”(Typewriter)效果，也叫打字动画(typing animation)或打字文字(typing text)。
字符以稳定的打字节奏逐个出现，最后一个已输入字符后面紧跟一个光标，打完后闪烁几次。
只播放一次、不要循环，让屏幕阅读器立即读到完整文本；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示完整文本。