01动态示例 / Live cells
看看这些名称长什么样
每一个名称都是一种可复现的运动语言。以下 6 个示例直接取自官方 Pack，按同一时间轴实时绘制。
#001Live
#002Live
#004Live
#005Live
#006Live
#007Live
Pop-inLiquid motionPanSlow motionModal dialogFilter chipsParallax scrollingRipple effectBacklightingLens flareAnticipationText maskTimeline on scrollHover image revealPedestalBird's-eye view
Pop-inLiquid motionPanSlow motionModal dialogFilter chipsParallax scrollingRipple effectBacklightingLens flareAnticipationText maskTimeline on scrollHover image revealPedestalBird's-eye view
02八组分类 / Packs
每组 24 个名称
各有自己的观感与配色。一个分组要做对的是名称，而不是某种固定风格。
001–024
动效运动
Motion
深海军蓝底，配四种颜色。元素的入场、强调、退场与循环运动。
Pop-in
Stagger
入场强调退场
025–048
镜头运动与转场
Camera
浅灰底，配一种蓝色。推轨、摇镜、变焦与镜头切换。
Pan
Tilt
推轨摇镜变焦
049–072
UI 组件名称
UI
暖调米白底，配黑色和一种蓝色，由光标让各部件动起来。
Modal dialog
Drawer (Off-canvas)
按钮菜单卡片
073–096
落地页与网页效果
Landing Page
淡灰色桌面上画出白色浏览器窗口，以朱红色作点缀。
Parallax scrolling
Fade-in on scroll
滚动视差揭示
097–120
照片观感与灯光风格
Photo
每张卡片都按其自身场景的颜色绘制，效果淡入再淡出。
Backlighting
Rim light
灯光色调氛围
121–144
动效运动・第二弹
Motion 2
深海军蓝底，配四种颜色。更多元的动效与节奏变化。
Anticipation
Follow-through
节奏弹性路径
145–168
落地页与网页效果・第二弹
Landing Page 2
淡灰色桌面上的白色浏览器窗口，更多页面级效果。
Timeline on scroll
Scroll text reveal
页面滚动分屏
169–192
镜头运动与转场・第二弹
Camera 2
浅灰底，配一种蓝色。更丰富的镜头语言与转场。
Pedestal
Barrel roll
镜头转场速度
03为什么做这个 / Origin
限制人们的不是缺乏想象力，而是不知道这种运动叫什么
我发布了几段短视频，给动效运动和镜头运动配上名称，接下来几天收到了大量评论。其中一条的大意是：一直限制着他们的并不是缺乏想象力，而是不知道这种运动叫什么。
如果由熟悉各自领域的人，用多种语言，把「为了和 AI 良好协作所需的共同语言」整理成一套可供翻阅的库，那会非常有用。
大瀧 昌平 / 株式会社デイトラ
04使用方式 / Workflow
三种方式，任选其一
无论你是用编程 AI、视频生成模型，还是写需求简报，都能用这些名称准确表达。
01
打开名称库，挑选后发送给 AI
在 Claude Code 或 Codex 中安装 motion-prompt 技能后，只要提出请求即可打开本图库。你不需要记住名称或编号。
- 1向你的 AI 说：Open the motion-prompt library.
- 2图库会在浏览器中打开。在想要的示例上按「Pick」，数量不限。
- 3按「Send to AI」，你的选择就会发送给 AI。
- 4回到它那里，说明你想做什么。
terminal
npx skills add showheyohtaki/motion-prompt02
查一下名称，然后告诉你的 AI
打开一份列表或图库，找到你想做的东西，在提示词中使用它的名称。再补充时长、强度和运动方式，结果会更接近你的设想。
- 1在列表中查找想要的名称或编号。
- 2在提示词中使用该名称。
- 3补充时长、强度和运动方式。
- 4发送给编程 AI、视频生成模型，或写进需求简报。
terminal
Bring the title in with a mask reveal from below, 0.6 s.03
为你自己的领域或语言制作一个版本
make-your-own/ 提供了可直接复制粘贴给编程 AI 的提示词、渲染视频的脚本，以及两个已完成示例。
- 1选择适合你目标的提示词模板。
- 2把提示词交给编程 AI。
- 3AI 会为你生成同类的名称示例。
- 4领域不限于视频：灯光、声音、UI、摄影、烹饪、建筑均可。
把提示词交给编程 AI，它会为你的领域生成同类的名称示例。