跳到正文
Motif 母题

把好看的动效，带回你的项目

从开源世界精选的组件、动效与着色器。实时调参、直接带走代码；你的 agent 也能通过 MCP 自己来挑、来下单。

浏览全部 145 个条目在工作台里现做

首屏正在运行的是 流动网格渐变

精选

全部 145 个条目 →

从整站到一个按钮

整站模板、设计风格、页面区块、功能组件、视觉效果：大到一整个网站，小到一个加载动画，都能预览、调参、下载，或者复制 Skill。

挑一个，调到刚好，带走

挑一个效果

每个效果都来自许可证允许再分发的开源项目，实时预览，标明来源、许可证和改动。

调到刚好

面板上的每个参数都有收紧过的范围，拖到哪里都好看；预设给你几种完全不同的风格，链接能把参数分享出去。

带走代码或 Skill

下载可运行的 Vite 项目、用 shadcn 装进现有项目，或者下载 Skill，让 Claude Code、Codex、Cursor 在你的项目里做出同样的效果。

让 agent 自己来挑

接入 MCP 后，Claude Code、Cursor 这样的 agent 能自己搜索、看预览、按参数取回代码；目录里没有的，就下一张定制单，由工作台的 agent 现做。

claude mcp add --transport http motif http://localhost:3000/mcp

接入文档 →llms.txt

示例对话

  1. → search_ui "带光边的定价卡片"

    找到 3 个: border-beam, pricing-three-tier, magic-card

  2. → preview_ui border-beam { colorFrom: "#22d3ee" }

    2 张截图

  3. → place_order border-beam

    免费 · 已交付 · npx shadcn add …/r/border-beam.json

描述一下，现做一个在工作台里用一句话说出想要的效果，agent 写好组件、调好参数。投稿你的作品审核通过就进入市场，署名和来源记在链上。

来自这些开源项目

整合的代码保留原来的许可证和版权声明，固定在审阅过的提交上。感谢这些作者。

展开其余 37 个