文档
Motion Prompt 是一套为「你让 AI 做的那些事」而准备的名称库。本文档涵盖所有分组、使用方式与技能参考。
弹性入场
Pop-in元素弹跳着出现
交错动画
Stagger多个元素错开时间依次出现
放射爆发
Burst元素出现时向外迸出线条和圆点
线条描绘
Line draw线条像被画出来一样逐渐延伸
遮罩显现
Mask reveal文字从不可见的边界后移出
打字机效果
Typewriter文字像打字一样逐字出现
数字递增
Count-up数字快速增长到目标值
动态排版
Kinetic typography文字随含义和节奏移动、缩放与旋转
缓动
Easing动作通过加减速变化而非匀速移动
过冲回弹
Overshoot越过目标后回到目标位置并停稳
挤压与拉伸
Squash & stretch通过压扁和拉长表现弹性
形状变形
Shape morph一种形状平滑变成另一种
液态动效
Liquid motion形状像液体一样流动和融合
运动拖尾
Motion trail运动物体身后留下逐渐淡去的轨迹
粒子效果
Particles大量小碎片喷出并散开
视差
Parallax远近图层以不同速度移动形成纵深
遮罩转场
Mask transition扩大的形状内部显现下一场景
图形转场
Shape transition图形覆盖画面后揭示下一场景
液态转场
Liquid transition液体流入画面并替换场景
穿越缩放
Zoom through放大并穿过物体进入下一场景
翻转
Flip像卡片翻面一样展示另一侧
扫光
Light sweep光带扫过物体表面
故障效果
Glitch画面像发生故障一样错位和分色
冲击震动
Impact shake物体落下时带动整个画面震动
水平摇镜头
Pan机位固定,向左或右转动镜头
垂直摇镜头
Tilt机位固定,向上或下转动镜头
推镜头
Dolly in相机整体向主体靠近
变焦推近
Zoom in相机不动,通过镜头变焦放大
跟拍
Tracking shot相机随主体一起移动
环绕镜头
Orbit (Arc shot)相机绕主体移动
升镜头
Crane up相机整体向上升起
滑动变焦
Dolly zoom (Vertigo)主体大小不变,背景发生透视变化
焦点转移
Rack focus在近处与远处之间切换对焦
手持镜头
Handheld像手持相机一样轻微晃动
FPV 穿越机镜头
FPV drone shot以第一人称快速穿越场景
荷兰角
Dutch angle倾斜相机,使地平线呈对角线
慢动作
Slow motion放慢动作的播放速度
速度渐变
Speed ramp在同一镜头中改变播放速度
延时摄影
Time-lapse把数小时压缩成几秒
定格
Freeze frame让动作暂停片刻
跳切
Jump cut构图不变,跳过一段时间
匹配剪辑
Match cut利用相似形状或动作衔接镜头
甩镜头转场
Whip pan快速横摇形成模糊并切入下一镜头
交叉溶解
Cross dissolve两个镜头逐渐叠化切换
划像转场
Wipe移动的边界逐步替换画面
突切
Smash cut突然切到反差强烈的场景
J 型剪辑
J-cut下一场景的声音先于画面进入
L 型剪辑
L-cut前一场景的声音延续到下一画面
模态对话框
Modal dialog打开浮窗并暂时阻止操作背景
抽屉面板
Drawer (Off-canvas)从屏幕侧边滑出的面板
底部面板
Bottom sheet从屏幕底部升起的面板
折叠面板
Accordion点击标题展开或收起内容
下拉选择框
Dropdown (select)点击字段展开选项列表
文字提示
Tooltip悬停时显示简短说明
气泡卡片
Popover点击后显示指向触发按钮的小面板
轻提示
Toast notification短消息出现后自动消失
标签页
Tabs点击标签切换内容面板
轮播图
Carousel横向滑动切换展示项
开关
Toggle switch切换设置的开启与关闭状态
分段控制器
Segmented control一排相连按钮用于切换视图
筛选标签
Filter chips点击小标签组合筛选条件
范围滑块
Range slider双滑块选择最小值与最大值
步进器
Stepper (+/−)通过加减按钮逐次修改数值
分页
Pagination通过页码切换列表页面
汉堡菜单
Hamburger menu三横线图标点击后展开菜单
面包屑导航
Breadcrumbs显示页面层级位置的链接路径
巨型菜单
Mega menu主导航展开的宽幅分组链接面板
步骤指示器
Step indicator显示流程的当前步骤与进度
骨架屏
Skeleton screen加载时以灰色块预示内容布局
加载转圈
Spinner旋转圆环表示等待
徽标
Badge用小圆点或数字显示数量
空状态
Empty state列表没有内容时显示的界面
视差滚动
Parallax scrolling滚动时背景层比内容移动得慢
滚动淡入
Fade-in on scroll元素进入视口时逐渐出现
吸顶页头
Sticky header滚动时页头停留在屏幕顶部
滚动固定
Pinning区块固定,滚动推动内部内容变化
横向滚动
Horizontal scroll纵向滚动驱动内容横移
滚动吸附
Scroll snap滚动结束时自动对齐区块
滚动进度条
Scroll progress bar顶部条显示阅读进度
荧光笔标记动画
Highlighter animation重点文字下方逐渐画出色带
悬停抬升
Hover lift悬停时元素抬高并加深阴影
悬停图片放大
Image zoom on hover图片在固定边框内放大
光标跟随
Cursor follower图形略带延迟地跟随指针
磁吸按钮
Magnetic button按钮向附近光标偏移
涟漪效果
Ripple effect从点击位置扩散的圆形波纹
下划线动画
Underline animation悬停时链接下划线从左展开
前后对比滑块
Before/after slider拖动分隔线比较处理前后
离站挽留弹窗
Exit-intent popup访客准备离开时出现的弹窗
预加载画面
Preloader页面加载期间显示的过渡界面
懒加载
Lazy loading图片接近视口时才开始加载
无限滚动
Infinite scroll滚动到底部时自动加载更多条目
页面转场
Page transition连接两个页面的过渡动画
平滑滚动
Smooth scroll页内链接平滑移动到目标位置
跑马灯
Marquee文字或标志组成连续滚动带
动态渐变
Animated gradient背景颜色持续移动和交融
悬浮动画
Floating animation元素轻柔地上下浮动
逆光
Backlighting光源位于主体后方
轮廓光
Rim light后侧光勾勒主体边缘
剪影
Silhouette主体成为明亮背景前的深色轮廓
分割光
Split lighting侧面光让脸一半明亮、一半阴暗
伦勃朗光
Rembrandt lighting侧上方光在背光脸颊留下亮三角
蝴蝶光
Butterfly lighting正面高位光在鼻下形成蝶形阴影
黄金时刻
Golden hour日出后或日落前的低角度暖光
蓝调时刻
Blue hour日落后或日出前的深蓝天空时段
散景
Bokeh失焦光点化为柔和光斑
移轴效果
Tilt-shift通过选择性模糊让实景像微缩模型
长曝光
Long exposure延长快门时间,让移动光源留下轨迹
追随拍摄
Panning shot跟随运动主体,使背景产生拖影
镜头眩光
Lens flare强光在镜头内产生光环和光斑
鱼眼镜头
Fisheye lens超广角使中心鼓起、直线弯曲
色差
Chromatic aberration高反差边缘出现不同颜色的色边
暗角
Vignette画面四角变暗,视线集中到中央
高调
High-key整体明亮、接近白色且阴影很浅
低调
Low-key以暗色为主,只突出受光部分
黑白
Black and white去除颜色,仅保留明暗
双色调
Duotone用一种颜色映射暗部,另一种映射亮部
青橙色调
Teal and orange阴影偏青,肤色与高光偏橙
胶片颗粒
Film grain画面覆盖细微胶片质感颗粒
漏光
Light leak红橙色光像漏入胶片一样侵入画面
双重曝光
Double exposure两幅影像叠合在同一画面
预备动作
Anticipation运动前先向反方向稍稍蓄力
跟随动作
Follow-through主体停下后,局部仍延迟摆动
弹跳
Bounce落下后越弹越低直至停下
随机抖动
Wiggle小幅、随机地持续晃动
脉冲动画
Pulse像心跳一样有节奏地缩放
运动路径
Motion path沿设定的曲线移动
往返循环
Ping-pong loop正放后倒放,反复来回
定格动画风格
Stop-motion style抽帧后动作一顿一顿
文字乱码效果
Text scramble字符随机变换后定格为正确文字
波浪文字
Wave text文字像波浪一样依次上下起伏
路径文字
Text on a path文字沿线条或曲线流动
可变字体动画
Variable font animation文字粗细平滑变化
文字遮罩
Text mask镂空成文字形状,透出内部画面
中继器
Repeater复制图形并排列旋转
万花筒
Kaleidoscope像万花筒一样对称展开
线条抖动
Line boil手绘线条逐帧轻微抖动
推入转场
Push transition下一画面把当前画面推出
百叶窗转场
Blinds transition从细条缝隙中打开下一画面
立方体转场
Cube transition像立方体旋转一样切换画面
翻页转场
Page curl像纸张一样卷起,翻到下一页
像素化转场
Pixelate马赛克逐渐变粗后切换画面
玻璃碎裂
Shatter像玻璃一样碎裂,碎片飞散
爆炸图
Exploded view零件分离,展示内部结构
分屏
Split screen分割画面,同时展示多个场景
滚动时间轴
Timeline on scroll滚动时时间轴的线条随之延伸
滚动文字显现
Scroll text reveal随着阅读,文字逐字变深
堆叠卡片
Stacking cards滚动时卡片层层叠起
滚动切换背景色
Background color change on scroll按区块切换页面背景色
滚动隐藏页头
Hide-on-scroll header向下滚动时隐藏,向上滚动时出现
滚动监听
Scrollspy目录高亮当前阅读的章节
回到顶部按钮
Back-to-top button往下滚动后出现,点击回到顶部
滚动放大
Zoom on scroll图片随滚动放大至铺满屏幕
3D 倾斜
3D tilt on hover卡片随光标方向立体倾斜
聚光灯悬停
Spotlight hover只有光标周围变亮
悬停切换图片
Image swap on hover悬停时换成另一张照片
悬停文字翻滚
Text roll on hover文字向上翻转并替换
悬停图片预览
Hover image reveal悬停列表项时显示对应照片
浮动标签
Floating label开始输入时标签上移
实时校验
Inline validation输入时即时显示对错
加载按钮
Loading button点击后在按钮内显示加载中到完成
视图过渡
View transition (shared element)列表中的照片直接展开为详情页
灯箱
Lightbox点击图片后在变暗的背景上放大
图片热点
Hotspots点击图片上的圆点显示说明
倒计时
Countdown timer显示距截止时间的剩余时间并递减
动态形状分隔线
Animated shape divider持续摆动的波浪形区块分隔线
点赞动画
Like button animation点击后爱心迸发弹出
向下滚动提示
Scroll-down cue持续循环、引导向下滚动的动画
背景视频
Background video首屏背景中播放视频
垂直升降镜头
Pedestal相机整体垂直上下平移
横滚镜头
Barrel roll相机绕镜头光轴旋转一整圈
移动延时
Hyperlapse相机边移动边拍的延时摄影
长镜头
Long take不切换,一个镜头连续拍到底
斯坦尼康
Steadicam消除抖动,平稳流畅地移动
背后跟拍
Follow shot跟在主体身后移动
固定镜头
Locked-off shot相机固定不动,只有主体移动
穿越镜头
Fly-through穿过窗户或门进入下一个空间
低角度镜头
Low angle从低处向上拍
高角度镜头
High angle从高处向下拍
POV 镜头
POV shot以角色的视线观看
过肩镜头
Over-the-shoulder越过一人的肩膀拍另一人
鸟瞰镜头
Bird's-eye view从正上方垂直向下拍
深焦镜头
Deep focus从近处到远处全部清晰
定场镜头
Establishing shot开场交代地点的远景
大特写
Extreme close-up只放大眼睛或指尖等局部
插入镜头
Insert shot插入同一场景中的细节
变形剪切
Morph cut平滑衔接相同构图的两段画面
淡出到黑场
Fade to black画面逐渐变暗直至全黑
圈出
Iris out圆形窗口收拢,画面变黑
切出镜头
Cutaway切到其他对象后再切回
交叉剪辑
Cross-cutting交替呈现同时发生的两个场景
子弹时间
Bullet time时间静止,相机绕主体旋转
蒙太奇
Montage用一连串短镜头压缩时间
未找到匹配的名称
尝试使用其他关键词或筛选条件
三种使用方式
打开名称库,挑选后发送给 AI
在 Claude Code 或 Codex 中安装 motion-prompt 技能后,只要提出请求即可打开本图库。你不需要记住名称或编号。
- 1向你的 AI 说:Open the motion-prompt library.
- 2图库会在浏览器中打开。在想要的示例上按「Pick」,数量不限。
- 3按「Send to AI」,你的选择就会发送给 AI。
- 4回到它那里,说明你想做什么。
查一下名称,然后告诉你的 AI
打开一份列表或图库,找到你想做的东西,在提示词中使用它的名称。再补充时长、强度和运动方式,结果会更接近你的设想。
- 1在列表中查找想要的名称或编号。
- 2在提示词中使用该名称。
- 3补充时长、强度和运动方式。
- 4发送给编程 AI、视频生成模型,或写进需求简报。
为你自己的领域或语言制作一个版本
make-your-own/ 提供了可直接复制粘贴给编程 AI 的提示词、渲染视频的脚本,以及两个已完成示例。
- 1选择适合你目标的提示词模板。
- 2把提示词交给编程 AI。
- 3AI 会为你生成同类的名称示例。
- 4领域不限于视频:灯光、声音、UI、摄影、烹饪、建筑均可。
技能参考
需要 Node.js 18 或更高版本。安装后,Agent 会在浏览器中打开图库,等待你挑选并发送。
安装
用提示词安装:把下面这段粘贴到 Claude Code 或 Codex 中:
命令
| 命令 | 作用 |
|---|---|
| pick / pick --pack camera | 打开图库,打印随「Send to AI」发来的内容 |
| search typewriter text | 为一个场景查找元素(英文或日文关键词) |
| list / list --pack motion | 所有分组的概览,或逐个元素列出某个分组 |
| get 12 #045 | 打印这些编号的规格,然后打印代码(一次最多 8 个) |
| kit motion | 某一分组的共享代码 |
| prompt 12 | 某个元素的可复制提示词 |
| info | 显示数据来源、数据量以及缓存位置 |
工作原理
- 一个元素就是一个函数
cells[i](ctx, w, h, u)画面只取决于 u,不读取时钟,也不使用随机数。 - 共享 Kit颜色、尺寸、周期长度和共享辅助函数都集中在一个「kit」中,每个分组各有自己的 kit。
- 零依赖不依赖任何外部库。该技能由三个文件构成:说明文档、移植笔记、查找脚本。