从具体交互开始

先选择一段实际交互,再比较调整前和调整后的变化。按钮按压、菜单展开、卡片形变、文字扰动等示例各自保留自己的触发规则,参数用于控制当前效果。

TuneShape 让预览、动效说明、Motion 参数和 JSON 配置来自同一份配置。观察倍速用于看清过程,不会写进导出的动画时长。

预览、调整,再带走

  1. 选一个有用的效果

    从目录选中动效,用鼠标、键盘或播放按钮体验它怎样进入、退出和响应操作。

  2. 比较参数变化

    调整时长、缓动或当前效果支持的参数,观察前后差异;使用说明和配置确认变化来自哪里。

  3. 保存或用于项目

    复制描述词,或导出 JSON、动效规格、离线 HTML 和独立复刻工程。将导出结果放进自己的项目后,再检查实际样式与输入方式。

页面里发生什么

交互动效和参数计算在浏览器里运行。工具页面本身不调用 AI;如果需要 AI 生成实现,可以把复制出的描述词交给自己选择的编程助手。

需要保留一次调整时,请导出 JSON 配置。可运行工程、Prompt 和离线 HTML 有不同用途,使用指南会说明怎样选择与验收。

关于 TuneShape 的常见问题

搜索 TurnShape 时,怎样确认是这个项目?

如果你输入 TurnShape 或 turnshape 想寻找这里的 UI 动效工具,请核对正式拼写 TuneShape,以及本页列出的官网和 orocoa/TuneShape 仓库。TurnShape 没有被用作本项目的正式名称。

TuneShape 是 AI 动画生成服务吗?

TuneShape 提供浏览器内的交互预览、参数调整和导出。复制实现 Prompt 后,可在你自己的编程工具中使用;网页本身不发送 AI 生成请求。

GitHub 上有完整网站源码吗?

公开仓库的范围是三个 React/Motion 基础示例、配套配置和 Prompt,以及 Canvas ASCII 鱼群示例。完整网站、编辑器与高级效果实现不在这个公开基础示例包里。