产品

Motion

含 AI成熟标杆

面向 React、JavaScript 和 Vue 开发者的动画库,用于构建流畅的界面动画。

motion.dev 源码★ 3,563MIT软件开发 / 开发者效率工具

AI 竞品立项评估
桌面端
移动端
月访问
579.6K
下降4.4%环比2026 年 9 月
公开收入
未公开
暂无公开收入证据
入门价
$399/月
高于同类 99% 的产品同类中位数 $9.99/月
创作者
Matt Perry
@mattgperry· 24.7K 关注
首次发布
5 年前
2021-09-22 · 估算

访问

月访问数据截至 2026 年 9 月
事件9 个变化 · 1 个营销动作

营销动作

发布、搜索与内容、引荐、促销
  • Motion 14.7 推出 transition.out产品动态

    Motion 宣布 14.7 版本,新增 transition.out prop,使 motion 组件能够专门为离开某个状态时定义过渡。该帖称,这解决了一个长期存在的 API 缺口,例如使挂载延迟不会影响之后的悬停过渡。

    11 月 4 日 · 9 天前发布帖X 原帖

  • Motion 在 Product Hunt 发布发布

    A DevTools extension for creating web animations

    2022 年 5 月 11 日 · 4 年前原文证据

  • Motion 在 Show HN 发布(327 分 · 58 评论)发布

    Motion One – New animation library, built on the Web Animations API

    2021 年 9 月 22 日 · 5 年前原文证据

  • Motion 在 Product Hunt 发布发布

    The web animations API for everyone

    2021 年 9 月 22 日 · 5 年前原文证据

开源仓库与自部署

GitHub 开源与智能体接入
最近提交 2026-11-06
GitHub 星标
★ 3,563
分支数 (Forks)
187
开源协议
MIT
主要语言
JavaScript

流量来源

2026 年 9 月

访问构成

这个网站的访问渠道与国家构成还没有数据。

搜索

站点权重 —域名注册 2020-04-05

这个网站还没有搜索关键词数据。

流量数据:Vaneform

定价

Motion+
$399/一次
Examples and tutorials · Motion UI · AI Kit · Studio · Lifetime updates

试用:未提供 · 1 档付费($399) · 观察于 2026-11-03 · 原定价页

入门价 $399/月,高于同类 99% 的产品;「开发者效率工具」中位数 $9.99/月。查看定价基准

页面与变化

开始记录于 2021-09-22

关键页面

每周快照

变化

  1. 11 月 1 日 · 12 天前

    首页主标题(H1)改为「Motion. Production-grade animation library for the web.」定位

    Motion. A production-grade animation library for the web.→Motion. Production-grade animation library for the web.

  2. 11 月 1 日 · 12 天前

    新增采用技术栈:Cloudflare Bot Management功能

    —→Cloudflare Bot Management

  3. 11 月 1 日 · 12 天前

    新增采用技术栈:Cloudflare Browser Insights功能

    —→Cloudflare Browser Insights

  4. 11 月 1 日 · 12 天前

    移除技术栈:Framer Sites功能

    Framer Sites→—

  5. 11 月 1 日 · 12 天前

    移除技术栈:HTTP/3功能

    HTTP/3→—

  6. 11 月 1 日 · 12 天前

    移除技术栈:Priority Hints功能

    Priority Hints→—

设计

首屏视觉分析与 :root CSS

深黑画布承托金色粒子球,粗体白字与等宽导航形成层级,亮黄按钮及细框安装命令强化工程气质。

首屏预览 · 点击放大

首屏讲了什么与转化路径

“The animation library loved by humans and agents alike.”

中央铺陈大型粒子球,左下放标题说明,右下并列安装命令与按钮。

首屏转化路径:全屏画布、视频或 3D 场景叠标题 + 3D 建模或立体材质对象 → 下载客户端 / 安装插件

色板 · 点击复制

五维设计评分8.0 / 10
字体与排版
8.0
色彩与对比
8.0
构图与留白
8.0
细节与工艺
8.0
风格辨识度
8.0

结构

字体
Inter / IBM Plex Mono
主视觉
3D 建模或立体材质对象
信任背书
无显式背书
导航
顶部通栏导航
明暗与密度
深色 · 留白多
圆角与层级
直角 · 细线分层
预览 AI 设计说明全文(含 :root CSS 变量与版式规则)只写风格参数,禁止复刻该产品的品牌名、标志、文案与图片
# 设计说明:暗色开发者(兼备极简单色)

深色背景、等宽字体与代码片段,首屏常放终端或命令行示例。

## 设计参数

```css
:root {
  --background: #080808;
  --surface: #141414;
  --foreground: #eaeae5;
  --muted-foreground: #92928f;
  --accent: #ffda00;
  --radius: 0px;
  --font-heading: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}
```

色彩面积配比:背景 #080808(约 90%) · 面板 #141414(约 2%) · 正文 #EAEAE5(约 3%) · 次要文字 #92928F(约 3%) · 强调 #FFDA00(约 2%)。背景与面板占绝大部分面积,强调色只用于主按钮与当前激活状态。

## 版式与转化结构

- 首屏版式:全屏画布、视频或 3D 场景叠标题
- 导航结构:顶部通栏导航
- 明暗与密度:深色 · 留白多
- 圆角与层级:直角;不用阴影,用细线与留白区分层级
- 主视觉载体:3D 建模或立体材质对象
- 转化动作:下载客户端 / 安装插件
- 标题切入点:品类定位锚点
- 首屏组件特征:代码与终端
- 空间布局拆解:中央铺陈大型粒子球,左下放标题说明,右下并列安装命令与按钮。
- 视觉特征总结:深黑画布承托金色粒子球,粗体白字与等宽导航形成层级,亮黄按钮及细框安装命令强化工程气质。

## 避免

- 照片
- 柔和粉彩
- 大圆角

请按上面的设计参数与版式实现界面:颜色只用这些变量,强调色只给主要操作与当前状态。只采用这种风格,禁止复刻任何参考产品的品牌名、标志、文案与图片。

问题与证据

Motion 的价格是多少?
Motion+: $399/一次. 观察于 2026-11-03。 当前计费条件、用量限制与税费以来源页面为准。来源
Motion 的网站访问量是多少?
Vaneform 估算 2026-09 网站访问量为 579.6K。访问量包含重复访问,付费客户数与收入需分别查看对应证据。来源

同分类研究对象

软件开发 / 开发者效率工具

这些产品属于同一目录分类。选型时请进一步核对客户任务、功能与部署要求。

查看「开发者效率工具」全部产品与定价基准 →